HTML/HTML5 常用标签和属性四、标题标签
TIP
h 系列标签表示 “标题” 含义，h 是 headline 的意思
1、h1~h6 标签
| 标签 | 语义 |
|---|---|
| h1 | 一级标题 |
| h2 | 二级标题 |
| h3 | 三级标题 |
| h4 | 四级标题 |
| h5 | 五级标题 |
| h6 | 六级标题 |
关于 h 标签详细解读
- 应该将当前页面重要的内容放到
- 关于
h1 ~ h6标签的使用 以百度百科
- (opens new window)为标准
我是h1标题标签
我是h2标题标签
我是h3标题标签
我是h4标题标签
我是h5标题标签
我是h6标题标签
2、h 标签在 SEO 优化中的设置技巧
① 不同类型页面的设置
- 首页：网站首页的 H1 通常是网站 logo，强调 alt 的内容，而 alt 属性是网站首页标题，包含核心关键词，H2 标注分类页面，H3 标注内容页面标题链接。
- 列表页（栏目页）：H1 设置为分类名称，H2 是子分类名称，H3 设置为内容页面标题链接。
- 内容页（产品详情页、文章页）：H1 设置文章标题名称，H2 标注列表名称，H3 标注相关文章。
② H 标签包含关键词
- H 标签是一个强调性的标签，因此，H1 标签中，必须包含核心关键词，H2、H3 标签可以适当的包含长尾关键词
③ 页面 H 标签的数量。
- 一个页面上只能有 1 个 H1 标签，可以包含不等的 H2-H6 标签。从结构化的角度看，有 H3 就要有 H1、H2。
详细解读，h 标签的 SEO 优化 ?
五、段落标签
关于 p 标签详细解读
标签表示段落标签，p 是英语Paragraph的意思- 任何段落都要放到 p 标签中，因为 HTML 代码中即使代码换行了，页面显示效果也不会换行，必须写在
中 标签中不能嵌套h 标签、其他 p 标签和其他块级元素
p 标签中可可嵌套的标签有： 
模仿百度百科，写一个 h 标签和 p 标签的综合案例 ，以 “前端开发
(opens new window)” 为例。效果如下：
六、div 标签
关于 div 标签详细解读
- 标签 是英语
division“分隔” 的缩写- div 标签对是用来将相关内容组合到一起，以和其他内容分隔，使文档结构更清晰
比如：一般网页布局 头部，内容区，底部 都会通过 div 进行分隔
- 是最常见的 HTML 标签，因为它会结合 CSS 来使用，实现网页的布局，这种布局形式叫做
DIV+CSS像一个容器，什么都可以容纳，因此工程师们习惯称呼 div 为盒子事例如下：通过 Google 开发者工具查看网页的 DIV 布局
编写练习案例效果：
七、HTML5 特性1、空白折叠现象
TIP
- 文字和文字之间的多个空格、换行会被折叠成一个空格
- 标签
内壁和 文字之间的空格会被忽略
HTML5特性：空白折叠现象
文字和文字之间的多个空格、换行会被折叠成一个空格
文本内容 文本内容
标签 内壁 和 文字之间的空格会被忽略
文本内容文本
2、常用转义符
显示结果 描述 实体名称 空格 < 小于号 <> 大于号 >& &符号 &“ 双引号 "© 版权 ©® 已注册商标 ®HTML常用转义符
空格： 这是三个空格
大于号：>
小于号：<
&符号：&
“双引号："
版权符号：©
已注册商标：®
在网页中直接显示原标签:
显示p标签 <p></p>
显示div标签：<div></div>
3、HTML 的注释
对于 程序开发人员最讨厌的两件事：
- 讨厌自己加注释
- 讨厌别人的代码不加注释
添加注释的重要性：
- 提高代码的可阅读性，方便自己阅读或他人阅读
- 增强代码的可维护性
注：
- 注释在网页中是不显示的，只有自己能看到
HTML 注释的语法：
在 Vscode 中，可以使用快捷键
Ctrl + /添八、列表标签
HTML5 中提供了三种列表标签
标签 语义 无序列表 （没有刻意的顺序） 有序列表 定义列表 1、无序列表 – 基础语法
语法
- 无序列表使用
unordered list（不排序列表）缩写 - 每个列表项都是
标签，是英文单词list item（列表项目）缩写 - 无序列表是一个父子组合标签，上阵父子兵，不能单独出现
li子标签
无序列表
- 小炒肉
- 小龙虾
- 剁椒鱼头
- 酸辣白菜
- 7分熟牛排
注：
- ul ，li 标签是嵌套形式，li 标签必须要缩进（一个 Tab）
- li 标签不能单独使用
- ul 的子标签只能是 li
- li 标签中是可以放任何标签的
2、无序列表 – 列表嵌套
无序列表-嵌套
-
北京市
- 海淀区
- 东城区
- 朝阳区
- 石景山区
-
上海市
- 黄浦区
- 浦东新区
- 徐汇区
- 静安区
3、无序列表的 type 属性
type 属性
- 无序列表有 type 属性，可以定义前导符号的样式，但在 HTML5 中已经被废弃，建议使用 CSS 替代
- 只作为学习和了解即可
属性 值 描述 type disc 默认值，实心圆 type square 实心正方形 type circle 空心圆 注意:
在 HTML 4 中的 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：
无序列表标签
ul的type属性在HTML5中已经废弃
type="square" 实心正方形
- 小炒肉
- 小龙虾
- 剁椒鱼头
- 酸辣白菜
- 7分熟牛排
type="circle" 空心圆
- 小炒肉
- 小龙虾
- 剁椒鱼头
- 酸辣白菜
- 7分熟牛排
注：
在 HTML5 中使用 CSS 代替来定义不同类型的无序列表
无序列表标签
ul的type属性在HTML5中已经废弃，使用CSS替代
style="list-style-type:disc" 实心圆
- 小炒肉
- 小龙虾
- 剁椒鱼头
- 酸辣白菜
- 7分熟牛排
style="list-style-type:square" 实心正方形
- 小炒肉
- 小龙虾
- 剁椒鱼头
- 酸辣白菜
- 7分熟牛排
style="list-style-type:circle" 空心圆
- 小炒肉
- 小龙虾
- 剁椒鱼头
- 酸辣白菜
- 7分熟牛排
4、无序列表在开发中的使用
TIP
- 导航栏
- 各种页面 list 列表
- ….. 基本常见网站导航、列表页都会使用 ul li 无序列表标签
5、有序列表 – 基础语法
有刻意顺序的列表就叫做 有序列表
关于有序列表
- 有序列表使用
标签 ordered list（排序列表）缩写- ol 的特性与 ul li 同理
编程语言排行榜
- JavaScript
- Python
- C/C++
- Java
6、有序列表 ol 的 type 属性
ol 标签可以设置 type 属性，用来设置编号的类型
type 属性值 描述 1 数字编号（默认值） A 大写英文字母编号 a 小写英文字母编号 I 大写罗马数字编号 i 小写罗马数字编号 编程语言排行榜
ol type属性值
- JavaScript
- Python
- C/C++
- Java
- JavaScript
- Python
- C/C++
- Java
7、有序列表 ol 的 start 属性
start 属性
start属性值必须是一个整数，制定了列表编号的起始值- 此属性的值
阿拉伯数字，即使 ol 指定了 type 属性值
编程语言排行榜
ol type属性值 和 start属性值
- JavaScript
- Python
- C/C++
- Java
- JavaScript
- Python
- C/C++
- Java
- JavaScript
- Python
- C/C++
- Java
8、有序列表 ol 的 reversed 属性
reversed 属性
- reversed 属性是 HTML5 中的新属性
- reversed 属性是一个布尔属性
- reversed 属性指定列表中的条目是否是倒序排列的
- reversed 属性不需要值，只需要写 reversed 单词即可
有序列表 ol的reversed属性（倒序排列）
- JavaScript
- Python
- C/C++
- Java
9、定义列表
需要逐条给出定义描述的列表，就是定义列表
- 定义列表使用
definition list（定义列表）缩写 标签，是英文单词data term（数据项）缩写标签，是英文单词data definition (数据定义)缩写dd 标签内容是对dt 标签的解释说明- 案例以
小米官网首页 底部
- 是定义列表标签，内容交替出现
- 、
定义列表 - dt dd标签交替出现
- 服务支持
- 售后政策
- 关注我们
- 自助服务
- 关注我们
- 新浪微博
- 官方微信
- 关于我们
- 也允许 dt 和 dd
不交替出现，而是分别处于不同定义列表 dl 中 - 这么写，可以有更多的 dl ，可以更好的服务 css 样式
定义列表 dt dd 不交替出现
- 服务支持
- 售后政策
- 关注我们
- 自助服务
- 关注我们
- 新浪微博
- 官方微信
- 关于我们
九、多媒体标签1、图片标签 img
（1）语法和基础
- img 是 英语单词
image（图片）的缩写 - src 是 英语单词
source（来源）的缩写 - “” 中是 图片的 存储目录和完整的文件名
注：
- 图片必须存放在项目文件夹中，如：images 中
- 图片只是引入到网页中，本质上没有被插入到网页中
（2）img 标签的 alt 属性
- alt 属性是英语
alternate（代替者）缩写，对图像的文本描述，不强制 - 若由于某种原因无法加载图像，浏览器会在页面上显示 alt 属性中的备用文本
- 供视力不方便的用户使用的网页朗读器，也会朗读 alt 中的文本
- 对于搜索引擎优化友好，告诉搜索引擎图片的含义，利于搜索引擎爬虫抓取
（3）img 标签的 width、height 属性
- width、height 属性设置图片宽度和高度，单位是 PX（像素），可不写
- 如果省略其中一个属性，则表示按原始比例缩放图片
（4）图片标签规范
- PC 端 img 图片必须填写 src、width、height、alt 属性，统称图片标签的四要素
- 移动端必须填写 alt 属性
- alt 不能为无意义字符，需要能表现出图片的含义，如图片为道具图，则应该为道具的名称
2、网页上支持的图片格式
支持格式 描述 .bmpWindows 画图软件默认保存的格式，位图 .jpeg（.jpg）有损压缩图片，通常用于照片显示 .png便携式网络图像，用于 logo，背景图形等。支持透明和半透明 .gif动画 ，如：表情包 .svg矢量图片 .webp最新的压缩算法，非常优秀的图片格式 实战演练 ……
3、相对路径和绝对路径
相对路径
- 从当前网页出发，要找到图片的路径就叫 相对路径
......./表示回退上一级目录./表示当前目录- 通过
cmd命名行dir命令可查
绝对路径
- 描述文件或文件夹的精准完整地址
4、超级链接 – a 标签（1）语法和基础
超级链接是网页与网页之间链接跳转的方法
百度一下，你就知道（2）a 标签的 href 属性
href 属性支持相对路径和绝对路径
进入首页进入首页进入首页艾编程（3）a 标签的 title 属性
a 标签的 title 属性用户设置鼠标的悬停文本
百度一下，你就知道（4）a 标签的 target 属性
TIP
target 属性值 描述 _blank / blank 在新窗口中打开网页 _self 默认，当前页面跳转 注：HTML4 中 blank 之前有个下划线
_blank都可使用超级链接 - a标签
百度一下，你就知道a 标签的 target 属性
_blank：新窗口打开
_self：默认，当前页面跳转给图片添加超级链接：点击图片标签跳转连接
（5）页面锚点
TIP
- 对于很长的页面，可以对应的标签添加
id属性，将它变成页面的 “锚点” - 当点击锚点连接时，浏览器地址栏就会出现
#id属性名称页面就会自动滚动到锚点处 - 从其他页面页面点击带#号的链接，就可以直接定位到锚点位置
页面锚点链接
小米手机 智能穿戴 家电 生活电器 厨房电器 智能家居 出行搭配 日用百货
小米手机
智能穿戴
家电
生活电器
厨房电器
智能家居
出行搭配
日用百货
注：
在 HTML5 中 直接使用
#top即可回到顶部，不用定义id="top"回到顶部（6）特殊链接（下载、邮件、电话）
下载链接
指向 exe、zip、rar、word、excel 等文件格式的链接，将自动成为下载链接
特殊链接
下载链接
web前端学习资料zip下载地址
学习资料doc文档
邮件链接
mailto:前缀的链接 即 邮件链接- 系统将自动打开 email 相关软件，即可发送邮件
给arry老师发邮件电话链接
tel:前缀的链接 即 电话链接- 系统将自动打开手机拨号键
给arry老师打电话5、音频和视频
TIP
- 早年在网页中插入音视频需要使用 Flash 技术，当下基本已经淘汰
- 可直接使用 HTML5 标签轻松在网页中像插入图片一样插入音频和视频即可
（1）音频标签
TIP
标签可直接在网页中插入音频，并自动生成默认的编辑器controls属性 ，显示播放空间src音频路径标签对中对不兼容 audio 标签的浏览器所显示的文字- 浏览器中常用的音频格式：mp3 和 ogg 格式
音频标签部分属性：
autoplay音频自动播放，不会等待整个音频文件下载完成loop循环播放音频
（2）音频标签
audio的子标签TIP
source 标签为媒体元素定义媒体资源，该标签允许定义多个格式的音视频文件，供浏览器选择自己支持的媒体类型进行播放
Format MIME-type 描述 MP3 audio/mpeg 一种音频压缩技术，用来大幅度的降低音频数据量 Ogg audio/ogg 一种新的音频压缩格式，是完全免费、开发和没有专利限制的 Wav audio/wav 微软公司开发的一种声音文件格式，声音文件质量和 CD 相差无几 - 浏览器需要选择它支持格式的源文件进行播放，如果都支持则任选一个（默认选择第一个）
audio 子标签 source
（3）视频标签
video的子标签TIP
Format MIME-type 描述 mp4 video/mp4 MP4 = MPEG 4 文件使用 H264 视频编解码器和 AAC 音频编解码器 webm video/webm WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器 avi video/avi avi 文件支持 256 色和 RLE 压缩，他对视频文件采用了一种有损压缩方式 ogv video/ogv Ogg 文件使用 Theora 视频编解码器和 Vorbis 音频编解码器 - 浏览器需要选择它支持格式的源文件进行播放，如果都支持则任选一个（默认选择第一个）
video 子标签 source
十、语义化标签1、HTML 文本格式化标签（1）span 标签
TIP
标签是文本中的区块标签，没有任何显示的效果，可以结合 css 来定位区块的样式- 需要被特殊标记的元素也会使用 span 标签
语义化标签
span 标签
商品价格： 368元，优惠价：298元
（2）文本格式化标签
标签 描述 定义粗体文本 （已被 CSS 替代） 定义着重文字 （被强调的文本） 定义斜体字（已被 CSS 替代） 定义文字的下划线（已被 CSS 替代） 定义加重语气，表示特别重要的文字 定义下标字 定义上标字 定义删除字 定义预格式文本。被包围在 pre 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 pre 标签的一个常见应用就是用来表示计算机的源代码。 一段需要被高亮的文本（HTML5 新标签） 代表一段独立的内容，与说明 figcaption 标签配合使用。figure 标签规定独立的流内容（图像、图表、照片、代码等等）。 一个独立的引用单元，标签为 语义化标签
span 标签
商品价格： 368元，优惠价：298元
文本格式化标签
b标签：定义粗体文本
em标签：表示被强调的文本
i标签：斜体
u标签：定义文本下划线
strong标签：定义加重语气，表示特别重要的文字
del标签：定义删除字
mark标签：一段需要被高亮的文本sub 标签
碳在氧气中充分燃烧：C + O2 = CO2
铁在氧气中燃烧： 3Fe + 2O2 = Fe3O4
sup 标签
23 + 32 = 17
pre 预格式化文本
预格式化文本 被包围在 pre标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体 pre 标签的一个常见应用就是用来表示计算机的源代码。
figure、figcaption 标签
代表一段独立的内容，与figcaption配合使用。figure 标签规定独立的流内容（图像、图表、照片、代码等等）。一个独立的引用单元，标签为figure 元素定义标题
小米智能家居，智能门锁 小米智能家居，平衡车 
2、HTML5 区块标签
标签 描述 文档的区域，语义比 div 大 文档的核心文章内容，会被搜索引擎主要抓取 文档的非必要相关内容，比如：广告 等 导航条 页头 网页核心部分 页脚 网页的logo
商品标题
商品信息1 商品信息2 商品信息3 十一、表单元素
TIP
- HTML 表单用于收集不同类型的用户输入
- 如：登录、注册、发布、提交、编辑信息 等等
类似效果如下图：
1、HTML 表单基本用法
TIP
- 所有的 HTML 表单都是以一个
元素包裹 action属性：提交表单时向何处发送表单数据method属性：规定用于发送表单数据的 HTTP 方法
HTML的form表单
......2、单行文本框
TIP
标签 属性 描述 type="text" 单行文本框，单标签 value="艾编程" 文本框的值 placeholder="请输入用户名 ..." 提示文本，以浅灰色显示在文本框中，并不是文本框中的值 disabled 表示用户不能与元素交互，即：禁用 用户名：
真实姓名：
所在城市：
3、密码框
TIP
- 与单行文本框类似，其属性为
type="password"显示内容为 隐藏
请输入密码：
4、单选按钮
TIP
标签 属性 描述 type="radio" 单选按钮 name="自定义名称" 设置 互斥，需将多个 name 属性为相同的值value="" 向服务器提交的值 checked 表示默认被选中 性别： 男 女 保密
- 以上代码，点击 文字时，不能选中按钮，需要使用
label标签
5、label 标签
用来将文字和单选按钮进行绑定
当用户单击文字时，等于点击了单选按钮 ，
在HTML5中直接使用 label 标签包裹 单选按钮和文字 即可性别：在 HTML4 中
- label 标签是通过 for 属性和单选按钮的 id 属性进行绑定的
所在城市：
6、复选框
标签 属性 描述 type="checkbox" 复选框 name="自定义名称" 同组复选框应该设置 name 为相同值 value="" 向服务器提交的值 checked 表示默认被选中 兴趣爱好：
7、下拉菜单
TIP
标签，即 下拉菜单是内部选项
请选择 省： 湖北省 湖南省 安徽省 陕西省市： 西安市区： 高新区8、多行文本框
TIP
9、按钮
标签 属性 描述 type="button" 普通按钮，也可以简写为 type="submit" 提交按钮 type="reset" 重置按钮 总结，常用表单控件
标签 type 属性 描述 text 单行文本框 radio 单选按钮 checkbox 复选框 password 密码框 button 普通按钮，也可以简写为 submit 提交按钮 reset 重置按钮 
10、HTML5 新增表单控件
标签 type 属性 描述 color 颜色选择控件 date、time 日期、时间选择控件 email 电子邮件输入控件 file 文件选择控件 number 数字输入控件 range 拖拽条控件 search 搜索框 url 网址输入控件 注：兼容到 IE9，手机端完全兼容
HTML5新增表单控件
颜色选择：
日期选择：
时间选择：
电子邮件（提交自动校验）：
必填项：
数字（min最小值，max最大值）：
拖拽条：
搜索框（多一个清空按钮）：
网址：
datalist 控件
为输入框提供一些备选项，当用户输入的内容与备选项文字相同时，将会显示智能提示感应
datalist 控件： Java JavaScript Python Go C++
十二、表格
1、HTML 表格标签
标签 描述 定义表格 定义表格的表头 定义表格的行 定义表格单元 定义表格标题（作为 table 的第一个子元素出现） 定义表格的页眉 定义表格的主体 定义表格的页脚 2、table 标签属性
属性 描述 border表格的边框 width表格的宽度（HTML5 不支持） cellpadding单元边沿与其内容之间的空白（HTML5 不支持） cellspacing单元格之间的空白（HTML5 不支持） 注：在 HTML5 中 table 标签的大部分属性
已经废弃，全部用 CSS 代替了table标签
同学通讯录 姓名 性别 年龄 所在城市 arry 男 18 北京 豆豆 女 21 上海 翠花 19 男 深圳 
3、table 标签跨行、跨列
td 标签 或 th标签的属性属性 值 描述 colspannumber 规定单元格可横跨的列数 rowspannumber 设置单元格可纵跨的行数 注：td 标签的其他属性在 HTML5 中已不支持，直接使用 css 即可
跨列
表格实战 - 跨列
学生个人信息登记表 高新一中初三一班学生信息登记表 学生基础信息 姓名 XXX 国籍/地区 中国 姓名拼音 XXX 班内学号 20211101 性别 女 身份证件类型 本地居民 曾用名 无 班级 初三（1）班 出生日期 2002年9月1日 民族 汉 户口所在地 北京 入学年份 2015年 出生地 北京 政治面貌 团员 户口性质 城镇户口 入学方式 普通入学 籍贯 海淀区 健康状况 良好 特长 书法 就读方式 走读 身份证号 身份证有效期 学生个人联系信息 现住址 家庭地址 联系电话 电子信箱 
跨行、跨列
表格实战 - 跨行跨列
版本规划任务分配表 需求：V0.3版本规划 优先级 任务分解 产品负责人 功能模块1 具体事项1 3 任务1 @翠花 具体事项2 4 任务2 1 任务3 功能模块2 具体事项1 2 任务1 具体事项2 3 任务1 2 任务2 1 任务3 4 任务4 具体事项3 1 任务1 备注信息 ... 
4、thead，tbody，tfoot 标签
表格：thead、tbody、tfoot标签
同学通讯录 专业 姓名 性别 年龄 所在城市 计算机 arry 男 18 北京 外语 豆豆 女 21 上海 市场营销 翠花 19 男 深圳 备注 
