标签独占一行，效果和
类似，而标签一行上可以出现多个。

123
 
    45
    67

89

效果如下：

---

123 45 67 89

---

图像标签

标签用来定义HTML页面中的图像，需要在属性src中写出图像文件的路径和文件名，用法如下：

标签属性：

属性	属性值	说明
src	图片路径	必须写明
alt	文本	替换文本，图像不能正常显示后出现的文字
title	文本	提示文本，鼠标放在图片上会出现的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

注意点：

1. 所有属性写在标签名之后。
2. 属性不分先后顺序，标签名、属性之间以空格分开。
3. 属性使用键值对的格式写，即key="value"。

超链接标签

用法：

 文本或图像 

属性	说明
href	指定链接目标的URL值
target	默认为_self，即当前窗口打开，_blank表示在新的空白标签页打开

注意：

• 各种元素都可以添加超链接。
• 空链接用"#"表示。
• 链接目标可以是：外部链接(baidu)、内部链接(html)、下载链接等。
• 使用锚点链接定位到页面中的某个位置：
  • 链接：根据目标的id值跳转， 公司介绍 。
  • 链接目标：设置id属性，

    介绍内容

    。

注释标签和特殊字符

注释

特殊字符

特殊字符	描述	代码
	空格
<	小于号	<
>	大于号	>
&	与	&
￥	人民币	¥
?	版权	©
?	注册商标	®
°	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
2	平方	²
3	立方	³

HTML标签进阶

表格标签

基本结构

表格的基本结构表示为:

    

        
 1 
    
    

        
 2 
        
 3 
    

• 标签用来定义表格。
• 标签用来定义表格中的行，嵌套在中。
• 标签用来定义表格中的单元格，嵌套在 中。

表头单元格

一般表头单元格位于第一行/列，里面的文字是加粗居中显示的，表头单元格表示为 。

    

        
 姓名 
        
 学号 
        
 班级 
    
    

        
 123 
        
 2016123456 
        
 2001 
    

效果如下：

---

姓名	学号	班级
123	2016123456	2001

---

表格属性

表格属性不常用，因为后续主要通过CSS设置表格样式。下面的属性都要写到表格标签内，即

内。

属性名	属性值	描述
align	left, center, right	表格对齐方式
border	1或""	表格单元是否有边框，默认为""，即没有边框
cellpadding	像素值	单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	单元格之间的空白，默认2像素
width	像素值或百分比	表格的宽度

表格结构标签

为了使表格有更好的语义，使用 和 标签将表格分割为表头和表数据两大部分。用法如下：

    
 
        
 
            
 姓名 
            
 学号 
            
 班级 
        
    
    

        

            
 123 
            
 2016123456 
            
 2001 
        
        

            
 555 
            
 2020123456789 
            
 2002 
        
    

合并单元格

合并的属性需要写在目标单元格中：如果是跨行，目标单元格为最上侧单元格；如果是夸列，目标单元格为最左侧单元格。

• 跨行合并: rowspan="合并个数"
• 跨列合并: colspan="合并个数"

    

        

            
 学生信息 
        
        

            
 姓名 
            
 学号 
            
 班级 
        
    
    

        

            
 123 
            
 2016123456 
            
 2001 
        
        

            
 555 
            
 2020123456789 
        
    

效果如下：

---

学生信息
姓名	学号	班级
123	2016123456	2001
555	2020123456789

---

列表标签

无序列表

• 中只能嵌套
中可以容纳所有元素
• 通常使用CSS设置列表的样式

    
 1 
    
 2 
    
 3 

有序列表

• 中只能嵌套
中可以容纳所有元素
• 通常使用CSS设置列表的样式

    
 Java 
    
 Python 
    
 C++ 

自定义列表

自定义列表经常用于对术语或名次进行解释与描述，定义列表的列表项前没有任何符号。

• 中只能包含
  标签和
  标签
• 标签和
  标签的个数没有限制，通常是一对多的关系

    
 关注我 
  
    
  微博  
  
    
  B站  
  
    
  微信公众号  
    
 服务支持 
  
    
  客服电话  
    
  在线客服  

效果如下：

---

关注我

微博

B站

微信公众号

服务支持

客服电话

在线客服

---

表单标签

表单用于收集用户信息。一个完整的表单通常由表单域、表单控件和提示信息组成。

表单域

表单域是一个包含表单元素的区域，在HTML标签中，

用于定义表单域，以实现用户信息的收集和传递。

会把它范围内的表单元素信息提交给服务器。

• 表单元素(控件)需要包含在表单域中。

基本结构如下:

    表单控件元素

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
mathod	get/post	用于设置表单的提交方式
name	名称	用于指定表单的名称，以区分同一个页面的多个表单域

表单控件

input输入表单元素

• 标签为单标签
• 使用type属性来指定控件类型，具体如下：

属性值	描述
button	定义可点击按钮(多数情况下用过JS启动脚本)
checkbox	定义复选框
file	用于文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
passsword	定义密码字段，该字段中的字符不可见
radio	定义单选按钮
reset	定义重置按钮，清空表单内的所有数据
submit	定义提交按钮
text	定义单行的文本输入字段，默认长度20个字符

• 标签除了type属性外的其他常用属性如下表所示：
  • name 和value主要给后台人员使用
  • 单选和复选框应当有相同的name值
  • checked主要用于单选和复选控件

属性	属性值	描述
name	由用户自定义	定义当前input元素的名称
value	由用户自定义	规定元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中字符的最大长度

    
 用户名： 
    
 密码： 
    
 性别：男  女   
    
 
        

            
 爱好： 
            
  篮球 
            
  足球 
            
  乒乓球 
        
    

    
  
    
  

效果如下：

---

用户名：

密码：

性别：男 女

爱好：

篮球

足球

乒乓球

---

• submit点击之后，会上传到form标签中的url中，形式类似：url?username=123&pwd=123123123&sex=male&hobby=basketball&hobby=football&hobby=pingpong

input标签与label标签

标签使用for属性和表单元素绑定，当点击标签对应的文本时，就会聚焦到绑定的表单元素。

• 标签的for属性的值与标签的id属性相同。

将上面的代码修改如下，此时点击文字“男”或“女”即可选中对应的控件。

 男   
 女    

select表单元素

	
        上海
        河南
        山东
    

textarea文本域表单元素

当用户输入内容较多的情况下，使用 标签来处理多行文本的输入。

• cols和rows属性定义文字的列数和行数，实际开发中不使用，而是用CSS改变大小