HTML常用标签（示范加说明）

HTML常用标签

标题标签

-

• H标签为head的缩写，作为网页标题使用
• 依据1-6字号缩减

代码范例：

一级标题

注意：

1. 加了h标签的字体会加粗
2. 一个标题独占一行

---

段落标签

• P标签为网页中的段落标签，独占一行上下有空白行

代码范例：

段落

注意：

1. 上下有空白行
2. 根据浏览器窗口大小自动换行

---

换行标签


• br是用于强制换行的单标签

代码范例：

段落

注意：

1. 单标签

---

文本格式化标签

• 文本格式化标签用于设置文本加粗、斜体、下划线等效果

语义	标签
加粗	或者
倾斜	或者
删除线	或者
下划线	或者

注意：

1. 常用为“加粗”和“倾斜”

---

盒子标签

与

• 用来装内容的盒子标签，用于网页分区使用

代码范例：

每日要点
今日头条

注意：

1. div每行只能放一个
2. span一行可以放多个

---

图片标签

• 用来往网页中插入图片

代码范例：

img标签属性:

属性	属性值	属性说明
src	图片路径	指定图片文件路径，必须值
alt	文本	图片不能显示时显示的文本
title	文本	指针放置图像上显示的文字
width	像素值	图像宽度
height	像素值	图像高度
border	像素值	设置图像边框粗细

注意：

1. src为必须属性，用于指定图片文件路径
2. 图像标签可以有多个属性，属性不分前后顺序，多个属性之间以空格分开

img的相对路径：

路径	符号
同级	文件名
下一级	/
上一级	../

---

音频与视频标签

• 用来在网页中插入音频的标签

代码范例：

注意：

1. src为必须属性，用于指定音视频文件路径

2. 音视频标签可以有多个属性，属性不分前后顺序，多个属性之间以空格分开

   属性：

属性	说明
autoplay	自动播放
controls	播放控件
loop	循环播放
muted	静音

• 以上属性可不以键值对输入，直接加属性就可以
• “autoplay自动播放”属性在谷歌浏览器无效，配合“muted静音”属性可自动播放
• 不加“controls播放控件”网页为空

---

超链接标签

• 用来添加网页超链接元素
• 使用“href”属性设置目标路径

属性	说明
href	链接目标路径
target	点击链接打开方式

代码范例：

    百度

注意：

1. “href”属性必填
2. 可设置内部链接和外部链接
3. “href”属性内填写“#”可设置空链接
4. 默认为“_self”在当前窗口打开，设置“_blank”可在新窗口打开

---

表格标签

• 用来制作网页中的表格
• 用来展示数据使用

表格内属性：

属性	说明
border	边框
width	宽
height	高
cellspacing	单元格与单元格的距离
height	单元格与内容的距离

table标签内结构：

1. thead 表格头部
2. tbody 表格主体
3. tfoot 表格尾部

• 表格使用tr设定行
• td设定单元格
• th替换首行td设定表首行，td会居中并加粗

代码范例：

    

      

        
首行

      
      

        
第二行

      
    

注意：

1. 跨行合并：使用rowspan属性写在合并的第一个单元格中，再删除合并的单元格
2. 跨列合并：使用colspan写在合并的第一个单元格中，再删除合并的单元格

---

表单标签

• 写在form里用来收集用户信息的一系列表单控件

• 用来展示数据使用

input属性：

属性	说明
type	决定使用那种表单类型
name	设定name值，设定单选框时使用
id	设定id值，设定label绑定使用

type属性内容：

type属性内容	说明	input附加属性作用
text	文本输入框	placeholder属性可设置提示文本
password	密码输入框	placeholder属性可设置提示文本
radio	单选框	设置相同name属性之能选择一项，checked设置默认选中项目
checkbox		checked设置默认选中项目
submit	提交按钮
reset	重置按钮
file	文件上传控件	multiple属性可多文件上传

表单相关标签：

• select 下拉框双标签

  • 标签内使用option设置下拉选项
• textarea 文本域双标签

• label 绑定控件标签

  • 使用for属性与input中id属性进行绑定
  • 使用标签包含控件，删除for属性

代码范例：

    

        文本框：
        多选框：
    

---