《重学前端》

html 的知识架构从功能和语言来建立，html 的功能主要由标签元素来承担。
head 里的元信息类标签，描述文档的一些基本信息。
语义类标签，类似于 div、section、nav 标签。
替换行媒体类标签，img、video、audio 等，用来引入外部内容。
表单类，input、button 等。

元素

html 的功能由标签元素来承担，根据功能的划分，可以分为这几大类，文档元信息、语义相关、链接、替换型标签、表单、表格。
文档元信息，通常出现在head标签中，描述文档自身的一些信息。
语义相关，扩展纯文本，表达文章结构、不同语言要素的标签。
链接，提供到文档内和文档外的链接。@todo文档内和文档外，可以理解为页内导航吗？文档外是url跳转链接。
替换型标签，引入声音、图片、视频等外部元素替换自身的一类标签。@todo理解错了，替换型标签才是用于引入外部资源的。链接类标签不是引入外部资源。
表单，用于填写和提交信息的一类标签。button都算表单类标签，有点没想到@todo。
表格，表头、表尾、单元格等表格的结构。

学习目标，重点在前4种，表单和表格内容较多，以查阅为主，需要找另外的资料进行学习@todo。

文档元信息

元信息类标签的重要性丝毫不弱于语义类标签。

元信息，是指描述自身的信息，元信息类标签，就是 HTML 用于描述文档自身的一类标签，它们通常出现在 head 标签中，一般都不会在页面被显示出来（与此相对，其它标签，如语义类标签，描述的是业务）。

元信息主要有两个作用，第一个是对页面进行描述，可以与浏览器、搜索引擎等机器结合的好。第二，有的元信息标签可以产生实际的行为，对于开发者编写代码也有影响。

有用的元信息标签不多，有title / base / meta。

head 标签

head 标签本身并不携带任何信息，它主要是作为盛放其它语义类标签的容器使用。@todo head 标签里面多数不是文档元信息吗？

head 标签规定了自身必须是 html 标签中的第一个标签，它的内容必须包含一个 title，并且最多只能包含一个 base。如果文档作为 iframe，或者有其他方式指定了文档标题时，可以允许不包含 title 标签。

title 标签

title 标签表示文档的标题。语义类标签中还有一组表示标题的标签，h1-h6。那么他们之间有什么区别呢？heading 和 title 有什么区别呢？

title 作为元信息，可能会被用在浏览器收藏夹、微信推送卡片等场景，这时候往往是缺失上下文的，所以 title 应该完整的概括页面内容。而 heading 用于页面展示，默认可以具有上下文，链接，可以简写，就算无法概括全文，也不会有很大影响。

“蜜蜂求偶仪式舞蹈”、“舞蹈”，哪个对应 title / h1。

base 标签

base 标签实际上是个历史遗留标签。它的作用是给页面上所有的 URL 相对地址提供一个基础。

base 标签最多只有一个，它改变全局的链接地址，它是一个非常危险的标签，容易造成跟 JavaScript 的配合问题，所以在实际开发中，我比较建议你使用 JavaScript 来代替 base 标签。

meta 标签

meta 标签是一组键值对，它是一种通用的元信息表示标签。在 head 中可以出现任意多个 meta 标签。一般的 meta 标签由 name 和 content 两个属性来定义。name 表示元信息的名，content 则用于表示元信息的值。

meta 标签可以被自由定义，只要写入和读取的双方约定好 name 和 content 的格式就可以了。

<meta name=application-name content="lsForums">

具有 charset 属性的 meta

h5 新增 charset 属性，简化了 name / content 的写法，添加了 charset 属性的 meta 标签不需要写 name/content。

<meta charset="utf-8">

charset 属性描述了 HTML 文档自身的编码形式。因此，这个标签一般放在 head 的第一个。

一般情况 http 服务端会通过 http 头来指定正确的编码方式，但是有些特殊的情况如使用 file 协议打开一个 HTML 文件，则没有 http 头，这种时候，charset meta 就非常重要了。

在浏览器读到 charset 属性的 meta 标签处理的所有字符都是 ASCII 字符。而 ASCII 字符是 utf-8 和绝大多数字符编码的子集。

http 请求行、响应行的编码方式都为ASCII，http 头部的事实字符集乃是 ASCII 的一个子集，只有 ASCII 字符才能保证正常工作，在服务器、浏览器中被读出来。所以需要对 url 进行 acsii 编码，将非 ascii 字符转换为 ascii 字符。

(2条消息) HTTP 头部的编码方式——ASCII编码Star_CSU的博客-CSDN博客请求头编码

具有 http-equiv 属性的 meta

http-equiv 属性的 meta 标签，表示执行一个命令。这样的标签不需要 name 属性。

// 相当于添加了 content-type 通用头部字段
<meta http-equiv="content-type" content="text/html; charsert=utf-8">

除此之外，还有一些命令，content-language / default-style / refresh / set-cookie / x-ua-compatible / content-security-policy。default-style 指定默认样式表。refresh 刷新。x-ua-compatible 模拟 http 头 x-ua-compatible，声明 ua 兼容性。

定义浏览器的渲染方式，例如

<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">

如果存在客户端Chrome Frame并启用，那么浏览器访问页面会被Chrome内核渲染（这一点没太大意义，因为你开发的项目不能要求用户在客户端来安装Chrome Frame）；也就是说IE浏览器变身Chrome是可以的，但前提是客户端安装了Chrome Frame。使用IE内核浏览器来访问，会渲染至该浏览器的最高版本。浅析网页meta标签中X-UA-Compatible属性的使用 - 闷音 - 博客园 (cnblogs.com)

name 为 viewport 的 meta

移动端开发的其中一个标准：name 为 viewport 的 meta，没有在 html 标准中定义。它的 content 是一个复杂结构，是用逗号分隔的键值对，键值对的格式是 key=value。

viewport 可以控制很多属性，width 页面宽度 / height 页面高度 / initial-scale 初始缩放比例 / minimum-scale 最小缩放比例 / maximum-scale 最大缩放比例 / user-scalable 是否允许用户缩放。

对于已经做好了移动端适配的网页，应该把用户缩放功能禁止掉，宽度设为设备宽度，一个标准的 meta 如下：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,use-scalable=no">

其他预定义的 meta

application-name 应用名称 / author 页面作者 / description 页面描述 / generator 生成页面所用的工具 / keywords 页面关键字 / referer 跳转策略 / theme-color 页面风格颜色。

web application 就是web 应用程序，应用程序一般有两种模式 c/s、b/s。c/s 是客户端/服务器端程序，b/s 是浏览器端/服务器端应用程序，这类应用程序由 servelet / jsp / js / html / css / 图片等组成，需要借助浏览器来运行。

与搜索引擎相关的有 description / keywords，用的好有利于 seo。

referer 是一种安全考量的策略，主要在同源检测的时候，决定是否在请求头中设置 referer。referer 有很多值，空字符串 / no-referer / no-referer-when-downgrade / same-origin / origin / strict-origin / origin-when-cross-origin / strict-origin-when-cross-origin / unsafe-url。除了 meta 标签可以设置，还有 http 响应头的 referer-policy 字段、标签元素的 refererpolicy 属性。

语义相关内容

学习目标，搞清楚语义类标签是什么？用语义类标签有什么好处？

现阶段预期，没必要去包揽全部语义化标签，正如其中一条评论所说。在实际开发中，语义化标签有3个难处，第一是有些标签可能都不知道，但是已经过时，第二是很多语义类标签自带样式，而这些样式很多时候并不需要，因此还要取消默认样式，第三是现代网页的排版已经不是按照书籍的来，很多页面元素并不容易明确使用哪个语义类标签。

语义类标签的特点是在视觉表现上互相都差不多，主要的区别在于他们表现不同的语义，比如section / nav / p。语义就是我们说话表达的意思，多数的语义是由文字来承载。语义类标签的功能就是做文字的补充，比如标题、自然段、章节、列表，这些是纯文字无法表达的，需要语义类标签来表达。

从现象出发，现在很多html基本都是 div、span。这样的做肯定是行的。但是好还是坏呢？大多数情况下是好的。因为在现在互联网产品中，html多用于描述软件界面，而不是富文本，而软件界面里面的东西实际上几乎没有语义。比如说，做一个购物车界面，一定要给购物车里的每个商品加上 ul 标签吗？又比如，加入购物车这个按钮一定要用 button 标签吗？实际上没有必要，因为这个场景里，跟文本中的列表和表单中的button相差甚远。所以在软件界面的场景中，使用 div、span 是挺好的。

但是在很多场景中，语义类标签拥有不可替代的优势，正确使用语义类标签有很多好处。主要有两个好处，第一是语义类标签对开发者更加友好，使用语义类标签可以增加可读性，即时没有css，也能清晰的看出网页的结构，也便于团队的开发和维护。@todo这个没有实际体验，主要自己和团队，也没有很好的使用语义类标签。第二是语义类标签对机器也很友好。语义类标签的文字表现力丰富，更适合 seo，可以让搜索引擎爬虫更好地获取更多有效消息，有效提升网页的搜索量，并且语义类还支持读屏软件，可以根据文章自动生成目录等等。@todo这个体验就更少了，开发经验少，见识也少。

然而，错误的使用语义类标签负面效果也是很大的。给机器阅读带来混淆、增加嵌套，给编写css加重负担。@todo 增加嵌套有什么场景。

总的来说，用对 比不用 要好，不用 比用错要好。

在3种应用场景中，使用语义化标签是整好的，作为自然语言表达能力的补充、作为标题摘要、适于机器阅读的整体结构。

作为自然语言表达能力的补充

语义类标签最自然的使用场景就是作为自然语言和纯文本的补充，用来表达一定的结构或者消除歧义。

表达一定的结构，从日语的一个例子出发，日语中有 ruby 这一用法，也叫注音、注解。在日漫中，角色说的是英语，字幕中英文单词的下面就会显示注解。h5 就引入了 ruby/ rt/ rp 这三个标签来表示 ruby。@todo ruby rt rp标签咋用？

消除歧义，有的标签在一些场景非常有必要，达到了不用就会产生歧义的程度。看下面3段话。每段话可能要表达的意思都不尽相同。比如第二段话的第二句可能要表达的意思是今天吃的是苹果，而第三段第二局可能要表达的意思是只吃了一个。

// 今天我吃了一个苹果
// 昨天我吃了一个香蕉
// 今天我吃了一个苹果
// 昨天我吃了两个苹果
// 今天我吃了一个苹果

上面这个场景就可以用到 em 标签，em 标签表示重音。

今天我吃了一个<em>苹果</em>
今天我吃了<em>一个</em>苹果

@todo 如何区分 em 和 strong 标签？需要区分吗？

作为标题摘要

hgroup / section / h1-h6 标签。

用于机器阅读的整体结构

header / nav / section / aside / footer / address / article 标签。

语义类标签小练习

用语义类标签实现wiki页面。总共用到了aside / article / hgroup / h1 / h2 / abbr / strong / blockquote / q / cite / dfn / time / figure / nav / ol / li / pre / samp / code。

除此之外，还有一些语义类标签。

链接

链接这种元素可以说是占据了整个互联网。也正是因为无处不在的超链接，才让我们的万维网如此繁荣。没有了超链接的 HTML，最多可以称为富文本，没法称作超文本（hyper text）。

链接是 HTML 中的一种机制，它是 HTML 文档和其它文档或者资源的连接关系，在 HTML 中，链接有两种类型。一种是超链接型标签，一种是外部资源链接。

链接的家族中有 a 标签、area 标签和 link 标签。

link标签

有些 link 标签也是元信息类标签的一种。link 标签会生成一个链接，它可能生成超链接，也可能生成外部资源链接。只能用于head标签中。没有结束标签，href表明外部资源的url，rel表示外部资源与当前文档的关系，stylesheet / icon / prefetch，type表明当前文档的MIME类型。

超链接型 link 标签是一种被动型链接，在用户不操作的情况下，它们不会被主动下载。canonical 型 link、alternate 型 link、prev 型 link 和 next 型 link。

<link rel="canonical" href="...">
<!-- 这个标签提示页面它的主 URL，在网站中常常有多个 URL 指向同一页面的情况，搜索引擎访问这类页面时会去掉重复的页面，这个 link 会提示搜索引擎保留哪一个 URL。-->
<link rel="alternate" href="...">
<!-- 这个标签提示页面它的变形形式，这个所谓的变形可能是当前页面内容的不同格式、不同语言或者为不同的设备设计的版本，这种 link 通常也是提供给搜索引擎来使用的。-->

在互联网应用中，很多网页都属于一个序列，比如分页浏览的场景，或者图片展示的场景，每个网页是序列中的一个项。种时候，就适合使用 prev 和 next 型的 link 标签，来告诉搜索引擎或者浏览器它的前一项和后一项，这有助于页面的批量展示。

其它超链接类 link 标签都表示一个跟当前文档相关联的信息，可以把这样的 link 标签视为一种带链接功能的 meta 标签。

rel=“author” 链接到本页面的作者，一般是 mailto: 协议。

rel=“help” 链接到本页面的帮助页。

rel=“license” 链接到本页面的版权信息页。

rel=“search” 链接到本页面的搜索页面（一般是站内提供搜索时使用）到这里，我们已经讲完了所有的超链接类的 link 标签用法了。

外部资源型 link 标签会被主动下载，并且根据 rel 类型做不同的处理。外部资源型的标签包括：具有 icon 型的 link、预处理类 link、modulepreload 型的 link、stylesheet、pingback。

icon 型 link 是唯一一个外部资源类的元信息 link，其它元信息类 link 都是超链接，这意味着，icon 型 link 中的图标地址默认会被浏览器下载和使用。

预处理类 link 标签就是允许我们控制浏览器，提前针对一些资源去做这些操作，以提高性能。dns-prefetch / preconnect / prefetch / preload / prerender。

modulepreload 型 link 的作用是预先加载一个 JavaScript 的模块。所谓的加载是指完成下载并放入内存。

stylesheet link，基本用法是从一个 CSS 文件创建一个样式表。

pingback link，表示本网页被引用时，应该使用的 pingback 地址，这个机制是一份独立的标准，遵守 pingback 协议的网站在引用本页面时，会向这个 pingback url 发送一个消息。@todo 什么是 pingback地址？

a 标签

标识文档中的特定位置。a 标签其实同时充当了链接和目标点的角色，当 a 标签有 href 属性时，它是链接，当它有 name 时，它是链接的目标。

a 标签也可以有 rel 属性，alternate/ author / help / license / next / prev / search，这些跟 link 语义完全一致，不同的是，a 标签产生的链接是会实际显示在网页中的，而 link 标签仅仅是元信息。

a 标签独有的 rel 类型：tag 表示本网页所属的标签；bookmark 到上级章节的链接。

a 标签还有一些辅助的 rel 类型，用于提示浏览器或者搜索引擎做一些处理：

nofollow 此链接不会被搜索引擎索引；

noopener 此链接打开的网页无法使用 opener 来获得当前页面的窗口，window.opener 就是对发起跳转的窗口的一个引用。

noreferrer 此链接打开的网页无法使用 referrer 来获得当前页面的 url；

opener 打开的网页可以使用 window.opener 来访问当前页面的 window 对象，这是 a 标签的默认行为。

a 标签基本解决了在页面中插入文字型和整张图片超链接的需要。

area 标签

是区域型的链接。要在图片的某个区域产生超链接，那么就要用到 area 标签。

area 是整个 html 规则中唯一支持非矩形热区的标签，它的 shape 属性支持三种类型。

圆形：circle 或者 circ，coords 支持三个值，分别表示中心点的 x,y 坐标和圆形半径 r。

矩形：rect 或者 rectangle，coords 支持两个值，分别表示两个对角顶点 x1，y1 和 x2，y2。

多边形：poly 或者 polygon，coords 至少包括 6 个值，表示多边形的各个顶点。

area 必须跟 img 和 map 标签配合使用。使用示例如下（例子来自 html 标准）。

替换型元素

文件引入有两种方式，链接标签、替换型标签。替换型元素是把文件的内容引入，替换掉自身位置的一类标签。凡是替换型元素，都是使用 src 属性来引用文件的。

链接型与替换型核心区别是什么@todo

替换型标签有script / img / picture / video / audio / iframe / 。script 标签有两种使用方式，可以引入文件，也可以直接将js脚本放入标签中。

img 引入图片，可以使用 data url 作为图片的 scr，这样就不会产生独立的文件。alt 属性，这个属性很难被普通用户感知，对于视障用户非常重要，可以毫不夸张地讲，给 img 加上 alt 属性，已经做完了可访问性的一半。从性能的角度考虑，建议给出图片的宽高，因为替换型元素加载完文件后，如果尺寸发生变换，会触发重排版。

srcset / sizes 属性提供了根据屏幕条件选取图片的能力，但是其实更好的做法，是使用 picture 元素。

picture 元素可以根据屏幕的条件为其中的 img 元素提供不同的源。使用 source 元素来指定图片源，并且支持多个。

video 标签跟 picture 元素一样，也是提倡使用 source 的，应该是考虑到了各家浏览器支持的视频格式不同。source 标签除了支持 media 之外，还可以使用 type 来区分源文件的使用场景。

<video controls="controls" >
  <source src="movie.webm" type="video/webm" >
  <source src="movie.ogg" type="video/ogg" >
  <source src="movie.mp4" type="video/mp4">
  You browser does not support video.
</video>

video 中还支持一种标签：track。track 是一种播放时序相关的标签，它最常见的用途就是字幕。

subtitles：就是字幕了，不一定是翻译，也可能是补充性说明。

captions：报幕内容，可能包含演职员表等元信息，适合听障人士或者没有打开声音的人了解音频内容。

descriptions：视频描述信息，适合视障人士或者没有视频播放功能的终端打开视频时了解视频内容。

chapters：用于浏览器视频内容。

metadata：给代码提供的元信息，对普通用户不可见。

audio 标签也可以使用 source 元素来指定源文件。

iframe 标签能够嵌入一个完整的网页。

在移动端，iframe 受到了相当多的限制，它无法指定大小，里面的内容会被完全平铺到父级页面上。同时很多网页也会通过 http 协议头禁止自己被放入 iframe 中。iframe 也会引起很严重的安全问题，比如点击劫持攻击，opener、window.name、甚至 css 的 opacity 都是黑客可以利用的漏洞。

在新标准中，为 iframe 加入了 sandbox 模式和 srcdoc 属性，使用 srcdoc 属性创建了一个新的文档，嵌入在 iframe 中展示，并且使用了 sandbox 来隔离。这样的话就不涉及到任何跨域问题了。

@todo 在浏览器兼容范围内，src 属性支持哪些协议的 uri。我已知的有 http / data。

表单

表格

语言

学习html应该将他当作一门语言。html 是一种标记语言，与编程语言不同，没有编程语言这么严谨。但是仍然有自己的语法和语言机制，是纯文本的一种升级。主要从语法、实体、命名空间来学习。

在上世纪 80 年代，“富文本”的概念在计算机领域的热门，犹如如今的“AI”和“区块链”，而 Tim Berners-Lee 当时去设计 HTML，也并非是凭空造出来，他使用了当时已有的一种语言：SGML。
SGML 是一种古老的标记语言，可以追溯到 1969 年 IBM 公司所使用的技术，SGML 十分复杂，严格来说，HTML 是 SGML 中规定的一种格式，但是实际的浏览器没有任何一个是通过 SGML 引擎来解析 HTML 的。今天的 HTML 仍然有 SGML 的不少影子，基本语法和 DTD。

语法

标签语法产生元素，我们从语法的角度讲，就用“标签”这个术语，我们从运行时的角度讲，就用“元素”这个术语。
HTML 中，用于描述一个元素的标签分为开始标签、结束标签和自闭合标签。开始标签和自闭合标签中，可以有属性。
属性语法，属性可以使用单引号、双引号或者完全不用引号，这三种情况下，需要转义的部分都不太一样。属性中可以使用文本实体来做转义，属性中，一定需要转义的有下面几种。无引号属性： &五种字符。单引号属性：’ &两种字符。双引号属性：” &两种字符。
todo 咋转义的。

在 HTML 中，规定了两种文本语法，一种是普通的文本节点，另一种是 CDATA 文本节点。文本节点看似是普通的文本，但是，其中有两种字符是必须做转义的：< 和 &。
CDATA 也是一种文本，它存在的意义是语法上的意义：在 CDATA 节点内，不需要考虑多数的转义情况。CDATA 内，只有字符组合]]>需要处理，这里不能使用转义，只能拆成两个 CDATA 节点。

HTML 注释语法以结尾，注释的内容非常自由，除了—>都没有问题。

DTD
文档类型定义，用来定义文档的类型，写在 html 第一行，告诉浏览器这个文件用的哪种类型的 html 规范。SGML 的 DTD 语法十分复杂，但是对 HTML 来说，其实 DTD 的选项是有限的。浏览器在解析 DTD 时，把它当做几种字符串之一。
todo 有哪些规范呢？或者说遵循不同的语法？
html4.1 中有3种文档类型，标准模式、混杂模式、准标准模式。h5 改为使用一个简单的 dtd，<!DOCTYPE html>。

不同的模式，遵循不同的页面渲染规则，混杂模式采用的是IE盒模型，标准模式采用的是标准盒模型。不同的模式在js的执行上也有区别。以及图片的布局也有区别。
比如获取元素宽高的 dom api 就会受到影响。
当一个块元素div中包含的内容只有图片时，在标准模式下，不管IE还是标准，在图片底部都有3像素的空白，这是由于img vertical-align的默认值baseline有关，设置一个其他值就可以消除了。但在混杂模式下，标准浏览器（Chrome）中div距图片底部默认没有空白。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    * {padding: 0; margin: 0;}
    div {
      background-color: green;
    }
    img.top {
      vertical-align: text-top /* 元素相对于基线的垂直对齐方式 */
    }
  </style>
</head>
<body>
  <div>
    <img class="top" border="0" src="./QQ图片20220320001606.png" />
  </div>
</body>
</html>

HTML4.01 的 DTD 里包含了一个长得很像是 URL 的东西，其实它是真的可以访问的——但是 W3C 警告说，禁止任何浏览器在解析网页的时候访问这个 URL，不然 W3C 的服务器会被压垮。
这个 DTD 规定了 HTML 包含了哪些标签、属性和文本实体。

实体

在 html 中，某些字符是保留的，比如小于号大于号是用来做包括标签的。那么开发者想使用大于小于号就得用它的转义字体，也就是文本实体了。
文本实体有两种语法。<   > &，每一个文本实体由&开头，由分号结束，这属于基本语法的规定。文本实体还可以用&#后跟一个十进制数字，表示字符 Unicode 值，小于号是&#60。
除此之外这两个符号之间的内容，则由 DTD 决定。

命名空间

补充标准

ARIA 全称为 Accessible Rich Internet Applications，它表现为一组属性，是用于可访问性的一份标准。
实际上，可访问性其实是一个相当大的课题，它的定义包含了各种设备访问、各种环境、各种人群访问的友好性。不单单是永久性的残障人士需要用到可访问性，健康的人也可能在特定时刻处于需要可访问性的环境。
ARIA，是以交互形式来标注各种元素的一类属性，所以，在 ARIA 属性中，你可以看到很多熟悉的面孔，交互形式往往跟我们直觉中的“控件”非常相似。
以 aria 角色为中心，将 aria 分为三类，Widget 角色：主要是各种可交互的控件。结构角色：文档的结构。窗体角色：弹出的窗体。

widget 角色
ARIA 给 HTML 元素添加的一个核心属性就是 role。role 的定义是一个树形的继承关系，我们先来理解一下它的整体结构：其中，widget 表示一些可交互的组件，structure 表示文档中的结构，window 则代表窗体。

<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label">
</span> <label id="chk1-label">Remember my preferences</label>

checkbox 就是 widget 角色，表示一个可交互的组件。类似的 widget 角色有很多。<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/26313388/1650630953735-82d4cf88-0796-4a07-88eb-2fbe142a0a7f.png#clientId=u1669accd-c26f-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ue4232107&margin=%5Bobject%20Object%5D&name=image.png&originHeight=969&originWidth=1030&originalType=url&ratio=1&rotation=0&showTitle=false&size=243091&status=done&style=none&taskId=u21830354-2d82-4633-a35b-b069e5bed0f&title=)    这些 role 可以出现在任何一个 HTML 元素之上，同时要注意，这些 ARIA 属性，不会真实地改变任何一个元素的行为，需要用 JavaScript 编写相应的逻辑。<br />widget 角色同时还会带来对应的 ARIA 属性，除了角色自身的属性，还有继承来的属性。

structure 角色
结构角色其实跟 HTML5 中不少新标签作用重合了，建议优先使用 HTML5 标签。这部分角色的作用类似于语义化标签，但是内容稍微有些不同。

window 角色
在我们的网页中，有些元素表示“新窗口”，这时候，会用到 window 角色。window 系角色非常少，只有三个角色：window、dialog、alertdialog。
dialog 可能会产生“焦点陷阱”，也就是说，当这样的角色被激活时，焦点无法离开这个区域。
todo 焦点、激活，这些概念感受的不真切。