【前端(六)】HTML5 新特性笔记总结

文章目录

[1. 语义化布局标签](#1. 语义化布局标签)
- [1.1 🆕 HTML5 新增布局标签](#1.1 🆕 HTML5 新增布局标签)
- [1.2 📖结合实例理解语义](#1.2 📖结合实例理解语义)
- [1.3 💬 疑问解答](#1.3 💬 疑问解答)
- [1.4 ❓ 为什么要使用语义标签？优势是什么？](#1.4 ❓ 为什么要使用语义标签？优势是什么？)
[2. 文本与多媒体标签](#2. 文本与多媒体标签)
- [2.1 📝 文本标签](#2.1 📝 文本标签)
- - [2.1.1 🆕 注音标签 `<ruby>` + `<rt>`](#2.1.1 🆕 注音标签 <ruby> + <rt>)
  - [2.1.2 🆕 标记标签 `<mark>`](#2.1.2 🆕 标记标签 <mark>)
- [2.2 🎬 多媒体标签 `<video>` 与 `<audio>`](#2.2 🎬 多媒体标签 <video> 与 <audio>)
- - [2.2.1 `<video>` 视频标签属性](#2.2.1 <video> 视频标签属性)
  - [2.2.2 `<audio>` 音频标签属性](#2.2.2 <audio> 音频标签属性)
[3. 新增列表与交互标签](#3. 新增列表与交互标签)
[4. 新增表单功能](#4. 新增表单功能)
- [4.1 🆕 新增的 `input` 类型](#4.1 🆕 新增的 input 类型)
- [4.2 🆕 表单控件新增属性](#4.2 🆕 表单控件新增属性)
- [4.3 ❓ 问题答疑](#4.3 ❓ 问题答疑)
[5. 状态指示标签](#5. 状态指示标签)
- [5.1 🎚️ 度量标签 `<meter>`](#5.1 🎚️ 度量标签 <meter>)
- [5.2 ⏳ 进度标签 `<progress>`](#5.2 ⏳ 进度标签 <progress>)
[6. 元素显示模式总结：行内、块级、行内块](#6. 元素显示模式总结：行内、块级、行内块)

1. 语义化布局标签

📌 回顾：基础块级元素

标签语义说明

<h1>~<h6> 标题 h1 最重要，建议每个页面只出现一次；h2~h6 可多次使用，但不能相互嵌套

<p> 段落用于表示一段文字，内部不能包含任何块级元素

<div> 无特殊语义通用的块级容器，常用于页面布局

标签	语义	说明
`<h1>`~`<h6>`	标题	`h1` 最重要，建议每个页面只出现一次；`h2`~`h6` 可多次使用，但不能相互嵌套
`<p>`	段落	用于表示一段文字，内部不能包含任何块级元素
`<div>`	无特殊语义	通用的块级容器，常用于页面布局

1.1 🆕 HTML5 新增布局标签

标签名	语义	典型用途	单/双
<header>	头部	页面或区域顶部：Logo、导航栏、搜索框	双
<footer>	底部	页面或区域底部：版权、友情链接、联系方式	双
<nav>	导航	主导航菜单（PC/移动端菜单栏）	双
<aside>	侧边栏	广告、热门文章、作者信息、相关链接	双
<article>	独立文章	博客帖子、新闻、评论、论坛帖子（可独立分发）	双
<section>	章节	页面中的某个内容区块，通常包含标题	双

1.2 📖结合实例理解语义

<header> ：如图番茄小说页面的顶部搜索框 + 菜单图标 + Logo区域
<nav> ：如图所示的首页、书库、书架、个人中心。注意：导航不一定在顶部，也可在侧边或底部。
<footer> ：页面最底部的版权信息、备案号等
<aside>：侧边栏内容，如书籍分类榜单、相关推荐。它承载与主内容互补的辅助信息。
<article>：独立完整的内容块，例如一篇小说的章节正文。
<section>：页面或文章中的某个章节分区，如"小标题 + 正文"区块。

1.3 💬 疑问解答

问1：为什么一些大型网站页面打开检查几乎全部是div+class，而不是语义标签？

历史兼容性：有些网站诞生于HTML5普及之前，庞大的历史代码重构成本极高。
CSS框架与组件化：如今大型网站普遍使用 Vue、React 等框架。在组件化开发中，<div> 退化成一个纯粹、无特定语义的容器元素，被组件内部大量使用。组件名本身才是真正的语义单元。打包后组件名消失，留下的就是 <div>，因此开发者工具中看到的是底层实现，而非源码中的语义结构。
部分语义标签支持不完美：老版本 IE（IE8 及以下）不认识 <header> 等标签，需要额外技术手段（如 html5shiv.js）才能兼容。虽然现在已不是问题，但遗留项目的代码风格得以延续。
SEO的实际策略：搜索引擎现在对div+class也能较好理解），语义标签只是加分项而非决定性因素。对于大站而言，内容质量与链接权重远比标签本身更重要。

问2：<section> 和 <div> 以及 <article> 到底怎么区分？是不是不用太纠结？

标签	含义	使用场景
<article>	独立、可分发的内容单元	一篇博客、一条新闻、一个用户评论、一个论坛帖子。它应该能脱离当前页面上下文被理解
<section>	强调的是分段或分块文档或应用的主题性分区	通常包含一个标题（<h2>~<h6>）。比如：联系表单区块、商品列表区块、文章中的"方法论"章节
<div>	无任何语义的容器	用于布局样式或作为 JavaScript 钩子

小结：

如果内容可以独立分发 → <article>
如果是页面内一个带标题的主题区块 → <section>
如果只是为了样式或脚本分组 → <div>
不必过度纠结，但合理使用语义标签能让代码更健壮。

我们要知道h5的优势之一是多了很多语义标签，h5也更强调语义，这些文本标签直接书写没有什么默认效果，但是在布局上有语义

1.4 ❓ 为什么要使用语义标签？优势是什么？

优势	说明
SEO（搜索引擎优化）	搜索引擎爬虫能识别<nav>是导航、<article>是核心内容，从而更准确地抓取和权重分配
可访问性（A11y）	屏幕阅读器（如NVDA、VoiceOver）可以让用户快速跳转到<header>、<nav>、<main>等区域，极大提升残障人士体验
代码可维护性	结构自解释，新成员接手项目时一眼就能看懂布局意图
未来兼容性	浏览器和搜索引擎会持续优化对语义标签的支持，使用它们更符合Web标准

HTML5 强调语义，语义标签本身没有默认视觉效果，但为布局赋予了明确的结构意义。在新项目中应优先使用，这是现代 Web 开发的最佳实践。

2. 文本与多媒体标签

2.1 📝 文本标签

回顾:强调与通用行内元素

标签语义说明

<em> 强调（语气稍弱）通常显示为斜体

<strong> 强调（语气更强）通常显示为粗体，表示重要性

<span> 无特殊语义通用的行内容器，常用于包裹一小段文本以便单独设置样式

标签	语义	说明
`<em>`	强调（语气稍弱）	通常显示为斜体
`<strong>`	强调（语气更强）	通常显示为粗体，表示重要性
`<span>`	无特殊语义	通用的行内容器，常用于包裹一小段文本以便单独设置样式

2.1.1 🆕 注音标签 `<ruby>` + `<rt>`

标签名	语义	单/双标签
ruby	包裹需要注音的文字	双
rt	写注音，rt 标签写在 ruby 的里面	双

用途：为汉字或词语标注拼音、音标或注释。
语法：必须先写基准文本，再用<rt>包裹注音。换句话说：必须先告诉浏览器要给哪个字注音，然后再给出注音内容，但是显示在页面的时候默认注音在上，文本在下。

正确示例：

html 复制代码

    <ruby>ephemeral
        <rt>/ɪˈfemərəl/</rt>
    </ruby>
    <ruby>
        <span>魑魅魍魉</span>
        <rt>chī měi wǎng liǎng </rt>
    </ruby>

显示效果：基准文本在下，注音在上方。

❌ 错误写法：

html 复制代码

	  <ruby>
        <rt>/ɪˈfemərəl/</rt>
        ephemeral
    </ruby>
    <ruby>
        <rt>chī měi wǎng liǎng </rt>
        <span>魑魅魍魉</span>
    </ruby>

这样会导致注音文本单独显示在上方，基准文本显示在下方且不对齐。

2.1.2 🆕 标记标签 `<mark>`

语义：表示与上下文相关性的一段文字，如搜索结果中的关键词、当前高亮内容。
注意：W3C建议<mark>用于标记搜索结果中的关键字，不要滥用为普通高亮（普通高亮可用<span>+CSS）。

2.2 🎬 多媒体标签 `<video>` 与 `<audio>`

2.2.1 `<video>` 视频标签属性

属性	值示例	说明
src	video.mp4	视频文件地址
width / height	640 / 360	播放器尺寸
controls	布尔属性	显示播放控件（播放/暂停/音量/全屏）
autoplay	布尔属性	自动播放（现代浏览器通常要求同时设置 muted ）
muted	布尔属性	静音播放
loop	布尔属性	循环播放
poster	poster.jpg	视频加载前显示的封面图
preload	auto / metadata/ none	预加载策略。若设置 autoplay ，此属性被忽略

2.2.2 `<audio>` 音频标签属性

属性与<video>类似，但没有width/height/poster。

3. 新增列表与交互标签

标签名	语义	用途
datalist	为输入框提供预定义选项列表	实现"输入提示/自动补全"效果
details	可折叠的详细信息区域	常见于FAQ、代码示例折叠
summary	用于内，作为可见标题	点击标题可展开/收起详情

示例代码：

html 复制代码

<!-- 1. datalist：搜索框提示 -->
<input type="text" list="suggestions" placeholder="输入明星名字">
<datalist id="suggestions">
  <option value="周杰伦">
  <option value="周冬雨">
  <option value="周润发">
  <option value="马冬梅">
</datalist>

<!-- 2. details + summary：折叠面板 -->
<details>
  <summary>如何走上人生巅峰？</summary>
  <p>第一步：学习HTML5；第二步：掌握JavaScript；第三步：... 然后你就发现，路还要一步一步走。</p>
</details>

注意：<datalist> 只是提示，用户仍可以输入列表外的值。如果需要严格的选择框，请使用 <select>。

4. 新增表单功能

回顾：经典表单控件

控件类型标签示例

文本输入框 <input type="text"> <input type="text" name="username" placeholder="请输入用户名">

密码输入框 <input type="password"> <input type="password" name="pwd">

单选框 <input type="radio"> <input type="radio" name="sex" value="男"> 男

复选框 <input type="checkbox"> <input type="checkbox" name="hobby" value="读书"> 读书

隐藏域 <input type="hidden"> 不显示，用于携带固定数据

提交按钮 <input type="submit">/ <button> <button>提交</button>（默认 type 为 submit）

重置按钮 <input type="reset">/ <button type="reset"> 重置表单内所有控件到初始状态

普通按钮 <input type="button"> / <button type="button"> 通常配合 JavaScript 使用

文本域 <textarea> 多行文本输入

下拉框 <select> + <option> 选择列表

控件类型	标签	示例
文本输入框	<input type="text">	<input type="text" name="username" placeholder="请输入用户名">
密码输入框	<input type="password">	<input type="password" name="pwd">
单选框	<input type="radio">	<input type="radio" name="sex" value="男"> 男
复选框	<input type="checkbox">	<input type="checkbox" name="hobby" value="读书"> 读书
隐藏域	<input type="hidden">	不显示，用于携带固定数据
提交按钮	<input type="submit">/ <button>	<button>提交</button>（默认 type 为 submit）
重置按钮	<input type="reset">/ <button type="reset">	重置表单内所有控件到初始状态
普通按钮	<input type="button"> / <button type="button">	通常配合 JavaScript 使用
文本域	<textarea>	多行文本输入
下拉框	<select> + <option>	选择列表

4.1 🆕 新增的 `input` 类型

type 值	说明	验证
email	邮箱地址	提交时检查是否包含@和域名（空值不验证）
url	网址	检查协议头(http://等)
number	数字	限制只能输入数字，有上下箭头
search	搜索框	不验证格式，但提供清除按钮
tel	电话号码	不验证格式，但移动端唤起数字键盘
range	滑块	默认值50，不验证格式
color	颜色选择器	比如返回十六进制颜色值，默认#000000
date	日期选择器	返回YYYY-MM-DD
month	月份	YYYY-MM
week	周	YYYY-Www
time	时间	HH:MM
datetime-local	本地日期+时间	YYYY-MM-DDTHH:MM

关于 step 属性的补充：

step 控制数字增减的粒度。默认 step="1"。
如果设置 step="2"，则只能选择偶数（2,4,6...），且手动输入奇数会被拦截。
示例：<input type="number" step="2"> 不可能得到3。
同时 min 和 max 可限制范围。

4.2 🆕 表单控件新增属性

属性	适用控件	说明
placeholder	文本类输入框	提示文本（不是默认值）。若需默认值用 value
required	除按钮外的所有控件	标记为必填。提交时若为空则阻止提交并提示
autofocus	所有表单控件	页面加载后自动获得焦点。
autocomplete	文本类输入框，注意：密码输入框、多行输入框不可用。	是否启用浏览器自动填充历史。值：on / off
pattern	文本类输入框	用正则表达式验证输入。注意：空值不会触发验证，所以通常与 required 配合使用

4.3 ❓ 问题答疑

问1：equired 放在多选框（checkbox）和单选框（radio）上时，行为有什么不同？

单选框（radio） ：如果一组 name 相同的单选框中有任意一个设置了 required，那么用户必须选择其中一项才能提交。通常只需给第一个或任意一个加 required 即可。
复选框（checkbox） ：如果某个复选框设置了 required，那么用户必须勾选它才能提交。常用于"我已阅读并同意条款"。
多个复选框：如果需要用户至少勾选一个，不能只靠 required（它会要求每个都勾选）。需要借助JavaScript。

问2：autofocus 先写谁就先聚焦谁，所以一般不全部都写吧？
一个页面只能有一个元素获得自动焦点 。如果多个元素都写了 autofocus，行为未定义（不同浏览器可能聚焦最后一个或第一个）。最佳实践：最多只在一个主要输入框上使用。

问3：autocomplete 需要浏览器开启保存，而且必须输入严丝合缝？不能输入"杰"就出来"周杰伦"？

autocomplete 依赖浏览器保存的完整历史记录 ，并且匹配策略是前缀匹配 （即输入的内容必须和历史记录的开头一致）。例如，您曾经提交过"周杰伦"，再次输入"周"时会提示"周杰伦"，但输入"杰"则不会提示。不能用于：password（出于安全）、radio/checkbox（无意义）、textarea。

5. 状态指示标签

5.1 🎚️ 度量标签 `<meter>`

语义：表示已知范围内的标量测量值，如电量、磁盘使用量、温度、投票占比。
属性：

属性	说明
value	当前值（必须）
min	最小值，默认为0
max	最大值，默认为1
low	"低"阈值
high	"高"阈值
optimum	最优值

颜色变化规则：

低区间：[min, low)；中区间：[low, high]；高区间：(high, max]；其中optimum 表示"最优值"，它决定了哪个区间被认为是"好的"。
大多数浏览器将 optimum 默认为中区间的某个值。
如果 value 在最优区间内 → 显示绿色（好）；如果 value 在最优区间的相邻区间 → 显示黄色（一般）；如果 value 在最优区间的相隔区间 → 显示红色（差）
若 optimum 落在低区间（[min, low)），则低区间为最优区间，中区间为相邻，高区间为相隔；若 optimum 落在中区间（[low, high]），则中区间为最优区间，低区间和高区间均为相邻，通常低和高都显示黄色；若 optimum 落在高区间（(high, max]），则高区间为最优区间，中区间为相邻，低区间为相隔。

5.2 ⏳ 进度标签 `<progress>`

语义：表示任务完成进度（如上传、安装、加载）。
属性：

属性	说明
value	当前完成的量
max	总量，默认为1

注意：没有 min 属性，最小值始终为0，代表进度为0。

6. 元素显示模式总结：行内、块级、行内块

显示模式	标签列表
块级元素	`<header>`, `<footer>`, `<nav>`, `<aside>`, `<article>`, `<section>`, `<details>`, `<summary>`，`<div>`, `<h1>`~`<h6>`, `<p>`, `<form>` 等
行内元素	`<span>`, `<em>`, `<strong>`, `<mark>`, `<ruby>`, `<rt>`, `<a>` 等
行内块元素	`<img>`, `<video>`, `<audio>`, `<progress>`, `<meter>`等

以上为个人学习总结，旨在梳理个人理解。如有疏漏或不当之处，欢迎指正与交流。

【前端(六)】HTML5 新特性笔记总结

文章目录

1. 语义化布局标签

1.1 🆕 HTML5 新增布局标签

1.2 📖结合实例理解语义

1.3 💬 疑问解答

1.4 ❓ 为什么要使用语义标签？优势是什么？

2. 文本与多媒体标签

2.1 📝 文本标签

2.1.1 🆕 注音标签 <ruby> + <rt>

2.1.2 🆕 标记标签 <mark>

2.2 🎬 多媒体标签 <video> 与 <audio>

2.2.1 <video> 视频标签属性

2.2.2 <audio> 音频标签属性

3. 新增列表与交互标签

4. 新增表单功能

4.1 🆕 新增的 input 类型

4.2 🆕 表单控件新增属性

4.3 ❓ 问题答疑

5. 状态指示标签

5.1 🎚️ 度量标签 <meter>

5.2 ⏳ 进度标签 <progress>

6. 元素显示模式总结：行内、块级、行内块

2.1.1 🆕 注音标签 `<ruby>` + `<rt>`

2.1.2 🆕 标记标签 `<mark>`

2.2 🎬 多媒体标签 `<video>` 与 `<audio>`

2.2.1 `<video>` 视频标签属性

2.2.2 `<audio>` 音频标签属性

4.1 🆕 新增的 `input` 类型

5.1 🎚️ 度量标签 `<meter>`

5.2 ⏳ 进度标签 `<progress>`