HTML 5.1 正式发布：14 项新特性详解与实战指南

HTML 由 W3C 维护标准。2016 年 11 月发布 HTML 5.1，时隔两年首次小版本更新。多项初期特性因设计缺陷或浏览器厂商不支持被剔除，仍属小幅更新。新增组合标签 <dialog>、<details>、<summary>、<picture> 扩展开发表达力。W3C 已启动 HTML 5.2 草案（预计 2017 年底发布）。非所有浏览器均支持，生产使用前请确认兼容性。

14. 防钓鱼攻击：rel="noopener"

target="_blank" 隐患：新标签可篡改 window.opener.location 发起钓鱼，用户信任原页面易中招。HTML 5.1 标准化 rel="noopener" 隔离浏览上下文，可用于 <a> 与 <area>。

<a href="#" target="_blank" rel="noopener"> 链接不再惹麻烦 </a>

13. 灵活放置 <figcaption>

早期限制 <figcaption> 只能为 <figure> 首/尾子元素。现可置于 <figure> 内任意位置。

<article>
  <h1>今日头条</h1>
  <figure>
    <img src="petrol.jpeg" alt="油价下调">
    <figcaption>男子在加油站加油</figcaption>
  </figure>
  <p>两月内第四次涨价...</p>
</article>

12. 拼写检查属性

spellcheck 可枚举属性（空串、true、false）。true 启用拼写/语法检查。element.forceSpellCheck() 强制报告错误即使未聚焦。

<p spellcheck="true"><label>姓名: <input spellcheck="false" id="textbox"></label></p>

11. 空 <option> 元素

允许创建空 <option>，可作 <optgroup>、<datalist>、<select> 子元素，利于友好表单设计。

10. iframe 允许全屏

allowfullscreen 布尔属性控制框架内容能否全屏（配合 requestFullscreen()）。嵌入 YouTube 播放器需此属性启用全屏。

9. 嵌套 <header>/<footer>

允许在 <header> 内嵌套 <header>/<footer>（前提是它们本身包含在章节内容中）。便于为 <section>/<article> 等语义元素编写精细页头。

8. 零尺寸图片

允许 width="0" height="0" 的 <img>，用于非展示目的（如埋点统计 PV）。建议 alt=""。

7. 表单原生验证报错

reportValidity() 方法可验证表单并直接在浏览器报错。多重约束违规均可报告。示例：必填密码为空时标记错误。

6. 原生上下文菜单

<menu type="context" id="..."> 定义菜单项（<menuitem>），通过 contextmenu 属性绑定至任意元素。menuitem 三种类型：radio（单选）、checkbox（复选）、command（点击执行）。

5. 脚本/样式加密随机数

nonce 属性用于 <script>/<style>，配合 CSP 策略决定是否执行。每次请求重新生成随机值。

4. 反向链接关系 rev 属性回归

HTML 4 定义、HTML5 移除、5.1 重新加入 <a>/<link> 的 rev，表示反向文档关系，支持 RDFa 结构化数据标记。示例：章节间 rel="next" rev="prev" 互指。

3. <details>/<summary> 折叠面板

点击 <summary> 展开/折叠 <details> 内容，默认隐藏。<summary> 必须置于 <details> 内部。

2. 三大新增输入类型

week、month、datetime-local。前两者渲染为下拉日历选周/月；最后者选日期时间（无时区），时间可单独输入。

1. 响应式图片原生支持

无需 CSS 即可实现响应式图片：

srcset 属性

定义多候选图源及像素密度描述符（1x/2x/3x）或宽度描述符（w），浏览器按设备像素比/视口宽度自动选取。

sizes 属性

将视口宽度映射为图片显示宽度，配合 srcset 选图。示例：视口 ≤25em 时图宽 60vw，否则 100vw。

<picture> 元素

包裹 <img> 并声明多个 <source>，按媒体查询切换不同尺寸/分辨率图源。src 为兜底默认图。