当前位置：网站首页 > Java基础 > 正文

java前端基础

Java基础 来源： 网络 编辑：小编 发布时间：2025-04-18 16:18:01 浏览量：15



全部学习可以参考：http://www.w3school.com.cn/

一.HTML

1.HTML网页介绍

JAVAWEB : 基于网页Java项目.
网页：网站中的任何一页面，通常是HTML格式的文件。网页是一个文件，他存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。

2.HTML介绍

（1）HTML(Hypertext Markup Language),超文本标记语言，它是互联网上应用最广泛的标记语言。文件的命名方式为index.html（推荐） 或者index.htm。

（2）区分HTMl4.01和XHTML:
XHTML:eXtensible Hypertext Markup Language,可拓展的超文本标记语言, 比HTML更严格,可以理解XHTML是新的HTML规范;所有标签必须闭合，也就是说开始标签要有相应的结束标签。另外，XHTML中所有的标签必须小写。而按照HTML 2.0以来的传统，很多人都是将标签大写，这点两者的差异显著。在XHTML中，所有的参数值，包括数字必须用双引号括起来（而在HTML中，引号不是必须的，当内容只是数字、字母及其它允许的特殊字符时，可以不用引号;除此之外XHTML废弃了部分HTML中的标签属性;

（3）认识DHTML:
DHTML是Dynamic HTML的简称，就是动态的html，是相对传统的静态的html而言的一种制作网页的概念。
所谓动态HTML(Dynamic HTML，简称DHTML)，其实并不是一门新的语言，它只是HTML、CSS和客户端脚本的一种集成，即一个页面中包括html+css+javascript(或其它客户端脚本)，其中css和客户端脚本是直接在页面上写而不是链接上相关文件。DHTML不是一种技术、标准或规范，只是一种将目前已有的网页技术、语言标准整合运用，制作出能在下载后仍然能实时变换页面元素效果的网页设计概念,一般的使用法是:

  • 1.通过HTML把网页标记为各个元素;
  • 2.利用CSS设计元素之间的排版样式，并控制各个标签的位置;
  • 3.利用javascript来控制各个标签;

（4）静态网页与动态网页:

  • 静态网页:
    我们写好的html内容在浏览器中显示出来的效果始终都一样，不管次进行多少访问，如果想内容改变那么必须修改源代码。
  • 动态网页:
    页面的内容是由服务器端程序控制输出，比如不同的人使用相同的网站，但是显示的当前用户是不一样的。
    两者区别：静态就是我们写什么就显示什么，而动态通过程序的控制输出内容。

（5）认识HTML5:
虽然W3C一直呼吁HTML设计师遵循HTML标准,但是现实的HTML设计师都理会这个善意的忠告,也就是说目前互联网上的大部分HTML页面都是不规范的,主要的有以下几种情况:

  • 元素的标签名大小写混杂;如:<DIV> java前端基础 内容</div>
  • 元素标签没有合理结束;如:<span>内容,没有写结束标签</span>;
  • 元素标签使用了属性,但是没有指定属性值:如:<input type=”text” readOnly/>
  • 元素标签有属性值得时候,属性值没有使用引号:如:<input type=text/>
    W3C发现这种”恶习”真的改不了的时候,就索性承认了他们是符合规范的.除了”妥协”之外,HTML5的优势不容小视,主要是增强了Web应用程序的功能如客户端校验,绘图支持,多媒体支持等;

（6）HTML代码结构

一个标准的HTML至少由三对标签组成：

  • 1.<html></html> HTML页面的开始标签和结束标签，<html>为页面的开始，</html>为页面的结束。该标签在页面中只能出现一次，其他的标签都应该写在标签中，否则可能导致显示不正确。
  • 2.<head></head> 头标签，主要用于显示网页的标题和描述html内容的显示。
  • 3.<body></body> 主体标签，编写网页中可以见的内容部分。

整体结构：

 

 
 
 
  
 
  
 
    
  
 
 
 
 

   html结构.png 
 
 

 

3.标签
 

（1）标签格式
 1.标签是由都是由<标签名>组成。比如<html>
 2.标签的结束标签为开始标签名前面加一个"/",比如：<html>的结束标签为</html> ,<head>的结束标签为</head>。。。 一对标签统一格式为<标签名>内容</标签名>
 3.html中有空标签，空标签没有结束标签,可以不写，但是规范一般在标签名后面加上一个" /",<br />。
 4.标签都有相关属性，属性用于对标签的内容进行描述。<font color="yellow" size="7">你好</font> 格式为：<标签名 属性名=”属性值“ 属性名=”属性值“>内容</标签名>
 5.标签必须正确的嵌套。
 

 
 
 
  
 
  
 
    
  
 
 
 
 

   标签格式.png 
 
 

 

（2）文字标签
 

 

（3）颜色
 

 

（4）排版标签
 

 

（5）行内标签和块标签
 

 

（6）字符实体
 

 

（7）列表标签
 

 

（8）表格标签
 

 

（9）超链接
 

 

（10）图片标签
 

 

4.表单标签
 

form标签
 用于生成输入表单,该标签不可见;在HTML5之前,表单控件,如单行文本框,密码框,单选框等都必须放在<form></form>之间;常见属性如下:
 

     
 
  • action:必填属性,表示当点击”提交”按钮时,表单数据提交到哪个地址;
    •  
 
  • method:指定表单提交时的请求类型,该属性值有get或post,分别用于GET或POST请求,默认是get方式,开发建议使用post方式;
    •  
 
  • enctype:指定表单数据的编码方式,属性有3个值:
    •  

 


  属性 解释 application/x-www-form-urlencoded 默认,只处理表单控件里的value属性值; multipart/form-data 以二进制流的方式处理表单数据,文件上传时必须使用该属性值; text/plain 不对特殊字符编码,适合于表单的属性值为mailto”URL形式,也就是说该方式适用于表单邮件的发送; 

 

input标签
 input标签,表单控件标签里功能最丰富的,用于接收用户输入的信息.
 其中的type属性指定输入标签的类型。
 

     
 
  • 单行文本框:type = text,输入的文本信息直接显示在框中;
    •  
 
  • 密码输入框:type = password,输入的文本以圆点形式显示;
    •  
 
  • 单选框:type = radio,如：性别选择;
    •  
 
  • 复选框:type = checkbox,如：多个兴趣选择;
    •  
 
  • 隐藏域:type = hidden, 在页面上不可见,但在提交的时候会一起提交数据,用于隐式向后台传输一个数据;
    •  
 
  • 提交按钮:type = submit,用于提交表单中的数据内容;
    •  
 
  • 重置按钮:type = reset,将表单中填写的内容均设置为初始值;
    •  
 
  • 无动作按钮:type = button,可使用javascript为其自定义事件;
    •  
 
  • 文件上传域:type = file,会生成一个文本框和一个浏览按钮;
    •  
 
  • 图像域:type = image, 它可以替代submit按钮,即图像提交按钮。
     <input>标签其他通用属性:
    •  
 
  • name:指定input标签的名字,没有设置name属性的标签不能提交数据;
    •  
 
  • value:指定input标签的初始值;
    •  
 
  • checked:设置单选框,复选框的初始状态是否选中;
    •  
 
  • disable:设置input标签加载时禁用此标签;
    •  
 
  • maxlength:文本框输入最大字符数,属性值是数字;
    •  
 
  • readonly:指定文本框内值不允许直接修改;
    •  

 

label标签(了解)
 label标签用于在表单标签中定义标签,可对表单控件进行提示说明;
 使用<label>的作用是:当用户点击<label>所包含的文本时,该标签关联的表单控件就会获得焦点;让标签和表单控件相关联的两种方式:
 

     
 
  • 1.隐式使用for属性:指定<lable>标签的for属性值为所关联表单控件的id属性值;
    •  
 
  • 2.显示关联:将表单控件放在<lable></label>之间;(IE支持不好,不推荐)
    •  

 

 

select标签
 

<seclet>和<option>一般同时使用：
 

 

<select >属性：
 multiple="multiple" 表示可以选中多个
 size="2" 表示显示几个，（浏览器之间有差异）
 

textarea标签文本域标签
 

 

二.CSS
 

1.CSS介绍
 

CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。
 简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
 

那么CSS和Html是如何在网页代码中相结合的呢？
 

2.CSS的引入方式通过四种方式
 

     
 
  •  style属性方式：
     利用标签中style属性来改变每个标签的显示样式。
     例：
    •  

 

 

该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
 

     
 
  •  2. style标签方式：（内嵌方式）
     在head标签中加入style标签，对多个标签进行统一修改。
    •  

 

 

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
 

     
 
  •  3. 导入方式：
     前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。
     例：
    •  

 

 

注：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。
 

     
 
  •  4. 链接方式：
     通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。
     例：
    •  

 

 

注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。
 

3.样式优先级：
 

由上到下，由外到内。优先级由低到高。
 

4.总结CSS代码格式
 

选择器名称 { 属性名：属性值；属性名：属性值；…….}
 

5.选择器：
 

     
 
  • html标签选择器。
    •  
 
  • class选择器。
    •  
 
  • id选择器。
    •  

 

（1）class选择器：
 在标签中定义class属性并赋值。通过标签名.class值 对该标签进行样式设置。
 例：
 相同标签设置不同样式的时候，用class进行区分。
 

 

不同标签进行相同设置的时候，用class进行统一定义。
 

 

（2）id选择器：
 与class选择器类似，但格式不同，选择器的名称为：#id值。
 例：
 

 

注：多个标签同样可以定义相同的id值，但是对于JavaScript对标签元素的获取就会出错。所以形成习惯，确保id值的唯一性对于以后的数据库设计也很有好处。
 

6.扩展选择器：
 

     
 
  •  （1）关联选择器
     标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。
     例：
    •  

 

 

     
 
  •  （2）组合选择器
     对多个不同选择器进行相同样式设置的时候应用此选择器。
    •  

 

 

注：多个不同选择器要用逗号分隔开。
 

     
 
  •  （3）伪元素选择器
     其实就在html中预先定义好的一些选择器。称为伪元素。（CSS的术语）
     格式：标签名：伪元素。类名 标签名。类名：伪元素。都可以。
     a:link 超链接未点击状态。
     a:visited 被访问后的状态。
     a:hover 光标移到超链接上的状态（未点击）。
     a:active 点击超链接时的状态。
     使用顺序 L – V – H - A
     p:first-line 段落的第一行文本。
     p:first-letter 段落中的第一个字母。
     :focus 具有焦点的元素。IE浏览器不支持，在FireFox中可以看到效果。
     看显示效果的时候注意，浏览器的缓存的问题。
    •  

 


                            


                            

                                
  • 
                                    
                                    上一篇：
                                    
                                    基础教学java
                                    
                                    
                                
    • 
                                
  • 
                                    
                                    下一篇：
                                    
                                    java基础练习题目
                                    
                                    
                                
    • 
                            
    

                            
                            
    
                                
    
                                    版权声明：
    
                                    本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

    
                                    
    本文网址：https://www.bianchenghao6.com/h6javajc/1994.html
    
                                
    
                            
    
                            
                        
    
                        
    
                            
    

                            
    
                        
    

                        
                        
                        
    
                            
    相关文章：
    
                            
                            
                        
                        
  • 
                                基础教学java2025-04-18 16:18:01
                        
    • 
                        
                        
  • 
                                java基础教学目录2025-04-18 16:18:01
                        
    • 
                        
                        
  • 
                                java基础看不懂2025-04-18 16:18:01
                        
    • 
                        
                        
  • 
                                java基础系统总结2025-04-18 16:18:01
                        
    • 
                        
                        
  • 
                                java基础编程50题2025-04-18 16:18:01
                        
    • 
                        
                        
  • 
                                java基础练习题目2025-04-18 16:18:01
                        
    • 
                        
                        
  • 
                                Java基础cmd2025-04-18 16:18:01
                        
    • 
                        
                        
  • 
                                .java 基础2025-04-18 16:18:01
                        
    • 
                        
                        
  • 
                                java 基础复习2025-04-18 16:18:01
                        
    • 
                        
                        
  • 
                                java基础函数定义2025-04-18 16:18:01
                        
    •