重学前端1 - HTML

客官°小女子只卖身不卖艺 2022-02-03 04:27 304阅读 0赞

## HTML ##

![006tNc79ly1g2q4xd65wsj30co0cjabb.jpg][]

--------------------

### 03 | HTML语义：div和span不是够用了吗？ ###

> 语义类标签是什么，使用它有什么好处？

语义类标签也是大家工作中经常会用到的一类标签，它们的特点是视觉表现上互相都差不多，主要的区别在于它们表示了不同的语义，比如大家会经常见到的 section、nav、p，这些都是语义类的标签。

不过，在很多工作场景里，语义类标签也有它们自己无可替代的优点。正确地使用语义标签可以带来很多好处。

*  语义类标签对开发者更为友好，使用语义类标签**增强了可读性**，即便是在没有 CSS 的时候，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。
 *  除了对人类友好之外，语义类标签也十分**适宜机器阅读**。它的文字表现力丰富，更适合搜索引擎优化（SEO），也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量，并且语义类还可以支持读屏软件，根据文章可以自动生成目录等等。

“用对”比“不用”好，“不用”比“用错”好。当然了，我觉得有理想的前端工程师还是应该去追求“用对”它们。

> 作为自然语言延伸的语义类标签

作为自然语言和纯文本的补充，用来**表达一定的结构**或者消除歧义。

*  baby 语法：在 HTML5 中，就引入了这个表示 ruby 的标签，它由 ruby、rt、rp 三个标签来实现。

还有一种情况是，HTML 的有些标签实际上就是必要的，甚至必要的程度可以达到：如果没有这个标签，文字会产生歧义的程度。

*  em 标签

> 作为标题摘要的语义类标签

h1-h6 是最基本的标题，它们表示了文章中不同层级的标题。有些时候，我们会有副标题，为了避免副标题产生额外的一个层级，我们使用 **hgroup 标签**。(**升一级**)

从 HTML 5 开始，我们有了 **section 标签**，这个标签可不仅仅是一个“有语义的 div”，它会改变 h1-h6 的语义。section 的嵌套会使得其中的 h1-h6 下**降一级**，因此，在 HTML5 以后，我们只需要 **section 和 h1** 就足以形成文档的树形结构：

<section>
        <h1>HTML 语义 </h1>
        <p>balah balah balah balah</p>
        <section>
            <h1> 弱语义 </h1>
            <p>balah balah</p>
        </section>
        <section>
            <h1> 结构性元素 </h1>
            <p>balah balah</p> 
        </section>
    ......
    </section>

> 作为整体结构的语义类标签

我们正确使用整体结构类的语义标签，可以让页面对机器更友好。比如，这里一个典型的 body 类似这样：

除此之外，还有 article，article 是一种特别的结构，它表示具有一定独立性质的文章。所以，article 和 body 具有相似的结构，同时，一个 HTML 页面中，可能有多个 article 存在。

一个典型的场景是多篇新闻展示在同一个新闻专题页面中，这种**类似报纸的多文章结构适合用 article 来组织**。

*  **header**，如其名，通常出现在前部，表示导航或者介绍性的内容。
 *  **footer**，通常出现在尾部，包含一些作者信息、相关链接、版权信息等。

header 和 footer 一般都是放在 article 或者 body 的直接子元素，但是标准中并没有明确规定，footer 也可以和 aside，nav，section 相关联（header 不存在关联问题）。

*  **aside** 表示跟文章主体不那么相关的部分，它可能包含导航、广告等工具性质的内容。

aside 很容易被理解为侧边栏，实际上二者是包含关系，侧边栏是 aside，aside 不一定是侧边栏。

aside 和 header 中都可能出现导航（**nav 标签**），二者的区别是，header 中的导航多数是到文章自己的目录，而 aside 中的导航多数是到关联页面或者是整站地图。

最后 footer 中包含 **address**，这是个非常容易被误用的标签。address 并非像 date 一样，表示一个给机器阅读的地址，而是表示“**文章（作者）的联系方式**”，address 明确地只关联到 article 和 body。

--------------------

### 04 | HTML语义：如何运用语义类标签来呈现Wiki网页？ ###

> aside

首先我们来看下，左侧侧边栏，根据上一篇文章中提到的语义定义，这里属于 **aside** 内容。是导航性质的工具内容。

> article

我们来到文章主体部分，因为主体部分具有明确的独立性，所以可以用 **article** 来包裹。

> hgroup, h1, h2

在语义的上一篇文章中，我们介绍过 hgroup 和 h1-h6 的作用，**hgroup** 是标题组，**h1** 是一级标题，**h2** 是二级标题。这里，World Wide Web 是文章的大标题，适合 h1 元素。

接下来出现了一个副标题。From Wikipedia, the free encyclopedia。这个地方适合使用 h2，跟 h1 组成一个 hgroup，所以代码可能是类似这样的:

<hgroup>
    <h1>World Wide Web </h1>
    <h2>From Wikipedia, the free encyclopedia</h2>
    </hgroup>

> abbr

**abbr 标签**表示缩写。考虑到 WWW 是 World Wide Web 的缩写，所以文中所有出现的 WWW，都应该使用 abbr 标签，

> hr

**hr 标签**表示横向分隔线，hr 表示故事走向的转变或者话题的转变

使用 **CSS 的 border** 来把它当作纯视觉效果来实现

> p

多数自然段都是普通的段落，我们用 **p 标签**来实现。

> strong

注意，这里 “World Wide Web (WWW)” 和 “the Web” 使用了黑体呈现，从上下文来看，这里表示这个词很重要，所以我们使用 **strong 标签**。

> blockquote, q, cite

接下来我们看到了一个论文中很常见的用法“引述”。

在 HTML 中，有三个跟引述相关的标签 **blockquote** 表示段落级引述内容，**q** 表示行内的引述内容，**cite** 表示引述的作品名。

> time

这里除了引用的文章外，还出现了日期，为了让机器阅读更加方便，可以加上 **time 标签**：

<cite>"What is the difference between the Web and the Internet?"</cite>. W3C Help and FAQ. W3C. 2009. Archived from the original on <time datetime="2015-07-09">9 July 2015</time>. Retrieved <time datetime="2015-07-16">16 July 2015</time>.

> figure, figcaption

<figure>
     <img src="https://.....440px-NeXTcube_first_webserver.JPG"/>
     <figcaption>The NeXT Computer used by Tim Berners-Lee at CERN.</figcaption>
    </figure>

**figure 标签**用于表示与主文章相关的图像、照片等流内容

这种插入文章中的内容，不仅限图片，代码、表格等，只要是具有一定自包含性（类似独立句子）的内容，都可以用 figure。这里面，我们用 **figcaption** 表示内容的标题，当然，也可以没有标题。

> dfn

需要在你要定义的词前后放上 dfn 标签，所以我们知道了，**dfn 标签**是用来包裹被定义的名词。

> nav, ol, ul

接下来，几个普通的段落之后，我们看到了文章的目录。这里的目录链接到文章的各个章节，我们可以使用 **nav 标签**。因为这里的目录顺序不可随意变化，所以我们这里使用多级的 ol 结构。

我们这里必须要指出，**ol** 和 **ul** 的区分是内容是否有顺序关系，每一项的前面不论是数字还是点，都不会影响语义的判断。所以，你可以注意一下这里，不要因为视觉表现效果，而改变语义的使用。

> pre, samp, code

这是一段 HTTP 协议的内容描述，因为这段内容的换行是非常严格的，所以我们不需要浏览器帮我们做自动换行，因此我们使用了 **pre 标签**，表示这部分内容预先排版过的，不需要浏览器进行排版。

又因为这是一段计算机程序的示例输出，所以我们可以使用 **samp 标签**：

<pre><samp>
    GET /home.html HTTP/1.1
    Host: www.example.org
    </samp></pre>

因为同时是代码，我们还需要加上 **code 标签**。最后的代码是 pre 标签包裹了 code 标签，code 标签包裹了 HTML 代码。

> 总结

![9684130e423b6734b23652f4f0b6359e.jpg][]

--------------------

### 15 | HTML元信息类标签：你知道head里一共能写哪几种标签吗？ ###

> head 标签

**head 标签**本身并不携带任何信息，它主要是作为盛放其它语义类标签的容器使用。

> title 标签

**title 标签**表示文档的标题。

语义类标签中也有一组表示标题的标签：h1-h6。

这主要是考虑到 title 作为元信息，可能会被用在浏览器收藏夹、微信推送卡片、微博等各种场景，这时侯往往是上下文缺失的，所以 title 应该是完整地概括整个网页内容的。

而 h1 则仅仅用于页面展示，它可以默认具有上下文，并且有链接辅助，所以可以简写，即便无法概括全文，也不会有很大的影响。

> base 标签

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

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

> meta 标签

**meta 标签**是一组键值对，它是一种通用的元信息表示标签。

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

> 具有 charset 属性的 meta

**charset** 型 meta 标签非常关键，它描述了 HTML 文档自身的编码形式。因此，我建议这个标签放在 head 的第一个。

> 具有 http-equiv 属性的 meta

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

相当于添加了 content-type 这个 http 头，并且指定了 http 编码方式。

*  content-type，http 头
 *  content-language 指定内容的语言；
 *  default-style 指定默认样式表；
 *  refresh 刷新；
 *  set-cookie 模拟 http 头 set-cookie，设置 cookie；
 *  x-ua-compatible 模拟 http 头 x-ua-compatible，声明 ua 兼容性；
 *  content-security-policy 模拟 http 头 content-security-policy，声明内容安全策略。

> name 为 viewport 的 meta

我们来介绍一个 meta 类型，它没有在 HTML 标准中定义，却是移动端开发的事实标准：它就是 name 为 viewport 的 meta。

这类 meta 的 **name 属性为 viewport**，它的 content 是一个复杂结构，是用逗号分隔的键值对，键值对的格式是 key=value。

这里只指定了两个属性，宽度和缩放，实际上 viewport 能控制的更多，它能表示的全部属性如下：

*  width：页面宽度，可以取值具体的数字，也可以是 device-width，表示跟设备宽度相等。
 *  height：页面高度，可以取值具体的数字，也可以是 device-height，表示跟设备高度相等。
 *  initial-scale：初始缩放比例。
 *  minimum-scale：最小缩放比例。
 *  maximum-scale：最大缩放比例。
 *  user-scalable：是否允许用户缩放。

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

> 其它预定义的 meta

*  application-name：如果页面是 Web application，用这个标签表示应用名称。
 *  author: 页面作者。
 *  description：页面描述，这个属性可能被用于搜索引擎或者其它场合。
 *  generator: 生成页面所使用的工具，主要用于可视化编辑器，如果是手写 HTML 的网页，不需要加这个 meta。
 *  keywords: 页面关键字，对于 SEO 场景非常关键。
 *  referrer: 跳转策略，是一种安全考量。
 *  theme-color: 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外的 UI（如窗口边框或者 tab 的颜色）。

> 结语

在本课，我们又学习了一批标签，它们是文档用于描述自身的元信息类标签。一些元信息标签可以产生实际的行为，掌握它们对于我们编写代码是必须的。

另一些元信息仅仅是对页面的描述，掌握它们可以使我们编写的页面跟各种浏览器、搜索引擎等结合地更好。

*  head：元信息的容器。
 *  title：文档标题。
 *  base：页面的基准 URL。
 *  meta: 元信息通用标签。

我们还展开介绍了几种重要的 meta 标签，charset 表示页面编码，http-equiv 表示命令，还介绍了一些有约定的 meta 名称。

--------------------

### 23 | HTML链接：除了a标签，还有哪些标签叫链接？ ###

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

链接的家族中有 a 标签、area 标签和 link 标签。今天，我会逐一对它们进行介绍。

![caab7832c425b3af2b3adae747e6f551.png][]

> link 标签

link 标签会生成一个链接，它可能生成超链接，也可能生成外部资源链接。

*  一些 link 标签会生成超链接，这些超链接又**不会像 a 标签那样显示在网页中**。这就是超链接型的 link 标签。这意味着多数浏览器中，这些 link 标签不产生任何作用。但是，这些 link 标签能够**被搜索引擎和一些浏览器插件识别**，从而产生关键性作用。比如，到**页面 RSS 的 link 标签**，能够被浏览器的 RSS 订阅插件识别，提示用户当前页面是可以 RSS 订阅的。
 *  另外一些 link 标签则会把外部的资源链接到文档中，也就是说，会实际下载这些资源，并且做出一些处理，比如我们常见的**用 link 标签引入样式表**。除了元信息的用法之外，**多数外部资源型的 link 标签还能够被放在 body 中使用，从而起到把外部资源链接进文档的作用**。

link 标签的链接类型主要通过 **rel 属性来**区分，在本篇文章中，我们提到 xx 型 link 即表示属性 rel 为 xx 的 link，其代码类似下面：

> 超链接类 link 标签

*  canonical 型 link

这个标签提示页面它的主 URL，在网站中常常有多个 URL 指向同一页面的情况，搜索引擎访问这类页面时会去掉重复的页面，这个 link 会提示搜索引擎保留哪一个 URL。

*  alternate 型 link

这个标签提示页面它的变形形式，这个所谓的变形可能是当前页面内容的不同格式、不同语言或者为不同的设备设计的版本，这种 link 通常也是提供给搜索引擎来使用的。

alternate 型的 link 的一个典型应用场景是，页面提供 **rss 订阅**时，可以用这样的 link 来引入：

除了搜索引擎外，很多浏览器插件都能识别这样的 link。

*  prev 型 link 和 next 型 link

在互联网应用中，很多网页都属于一个序列，比如分页浏览的场景，或者图片展示的场景，每个网页是序列中的一个项。

这种时候，就适合使用 prev 和 next 型的 link 标签，来告诉搜索引擎或者浏览器它的前一项和后一项，这有助于页面的批量展示。

因为 next 型 link 告诉浏览器“这是很可能访问的下一个页面”，HTML 标准还建议对 next 型 link 做预处理，在本课后面的内容，我们会讲到预处理类的 link。

*  其它超链接类的 link

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

1.  rel=“author” 链接到本页面的作者，一般是 mailto: 协议
2.  rel=“help” 链接到本页面的帮助页
3.  rel=“license” 链接到本页面的版权信息页
4.  rel=“search” 链接到本页面的搜索页面（一般是站内提供搜索时使用）

> 外部资源类 link 标签

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

*  icon 型 link

这类链接表示页面的 icon。多数浏览器会读取 icon 型 link，并且把页面的 icon 展示出来。

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

*  预处理类 link

我们都知道，导航到一个网站需要经过 dns 查询域名、建立连接、传输数据、加载进内存和渲染等一系列的步骤。

预处理类 link 标签就是允许我们控制浏览器，提前针对一些资源去做这些操作，以提高性能（当然如果你乱用的话，性能反而更差）。

下面我来列一下这些 link 类型：

1.  dns-prefetch 型 link 提前对一个域名做 dns 查询，这样的 link 里面的 href 实际上只有域名有意义。
2.  preconnect 型 link 提前对一个服务器建立 tcp 连接。
3.  prefetch 型 link 提前取 href 指定的 url 的内容。
4.  preload 型 link 提前加载 href 指定的 url。
5.  prerender 型 link 提前渲染 href 指定的 url。

*  modulepreload 型的 link

modulepreload 型 link 的作用是预先加载一个 JavaScript 的模块。这可以保证 JS 模块不必等到执行时才加载。

尽管，单独使用 script 标签引用 app.js 也可以正常工作，但是我们通过加入对四个 JS 文件的 link 标签，使得四个 JS 文件有机会被并行地下载，这样提高了性能。

*  stylesheet 型 link

基本用法是从一个 CSS 文件创建一个样式表。这里 type 属性可以没有，如果有，必须是"text/css"才会生效。

rel 前可以加上 alternate，成为 rel=“alternate stylesheet”，此时必须再指定 title 属性。

*  pingback 型 link

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

> a 标签

a 标签其实同时充当了链接和目标点的角色，当 a 标签有 **href 属性**时，它是链接，当它有 name 时，它是**链接的目标**。

具有 href 的 a 标签跟一些 link 一样，会产生**超链接**，也就是在用户不操作的情况下，它们不会被主动下载的被动型链接。

重点的内容是，a 标签也可以有 **rel 属性**，我们来简单了解一下，首先是跟 link 相同的一些 rel，包括下面的几种。

*  alternate
 *  author
 *  help
 *  license
 *  next
 *  prev
 *  search

这些跟 link 语义完全一致，不同的是，**a 标签产生的链接是会实际显示在网页中的**，而 **link 标签仅仅是元信息，不会像 a 标签那样显示在网页中**。

除了这些之外，a 标签独有的 rel 类型：

*  tag 表示本网页所属的标签；
 *  bookmark 到上级章节的链接。

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

*  nofollow 此链接不会被搜索引擎索引；
 *  noopener 此链接打开的网页无法使用 opener 来获得当前页面的窗口；
 *  noreferrer 此链接打开的网页无法使用 referrer 来获得当前页面的 url；
 *  opener 打开的网页可以使用 window.opener 来访问当前页面的 window 对象，这是 a 标签的默认行为。

**a 标签基本解决了在页面中插入文字型和整张图片超链接的需要**，但是如果我们想要**在图片的某个区域产生超链接，那么就要用到另一种标签了——area 标签**。

> area 标签

area 标签与 a 标签非常相似，不同的是，它不是文本型的链接，而是**区域型的链接**。

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

*  圆形：circle 或者 circ，coords 支持三个值，分别表示中心点的 x,y 坐标和圆形半径 r。
 *  矩形：rect 或者 rectangle，coords 支持两个值，分别表示两个对角顶点 x1，y1 和 x2，y2。
 *  多边形：poly 或者 polygon，coords 至少包括 6 个值，表示多边形的各个顶点。

因为 area 设计的时间较早，所以不支持含有各种曲线的路径，但是它也是唯一一个支持了非矩形触发区域的元素，所以，对于一些效果而言，area 是必不可少的。

<p>
     Please select a shape:
     <img src="shapes.png" usemap="#shapes" alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
     <map name="shapes">
      <area shape=rect coords="50,50,100,100"> 
      <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
      <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
      <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
      <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="yellow.html" alt="Yellow star.">
     </map>
    </p>

这个例子展示了在一张图片上画热区并且产生链接，分别使用了矩形、圆形和多边形三种 area。

> 结语

本节课我们介绍了几种链接类型。在 HTML 中，链接有两种类型。一种是超链接型标签，一种是外部资源链接。

我们逐次讲到了 link 标签、a 标签和 area 标签，link 标签一般用于看不见的链接，它可能产生超链接或者外部资源链接，a 和 area 一般用于页面上显示的链接，它们只能产生超链接。

--------------------

### 33 | HTML替换型元素：为什么link一个CSS要用href，而引入js要用src呢？ ###

> script 标签

我们之所以选择先讲解 script 标签，是因为 **script 标签**是为数不多的既可以作为替换型标签，又可以不作为替换型标签的元素。

这个例子中，我们展示了两种 script 标签的写法，一种是**直接把脚本代码写在 script 标签之间**，另一种是**把代码放到独立的 js 文件中，用 src 属性引入**。

这里我们就可以回答标题中的问题了：凡是替换型元素，都是使用 src 属性来引用文件的，而我们之前的课程中已经讲过，链接型元素是使用 href 属性的。

*  **script 标签**，替换型元素，都是使用 **src 属性**来引用文件的
 *  **style 标签**并非替换型元素，不能使用 src 属性，这样，我们用 **link 标签引入 CSS 文件**，当然就是用 **href 属性**啦

> img 标签

img 标签的作用是引入一张图片。这个标签是没有办法像 script 标签那样作为非替换型标签来使用的，它必须有 **src 属性**才有意义。

如果一定不想要引入独立文件，可以使用 data uri，我们来看个实际的例子：

这个例子中我们使用了 **data uri 作为图片的 src**，这样，并没有产生独立的文件，客观上做到了和内联相同的结果，这是一个常用的技巧。

img 标签可以使用 **width 和 height 指定宽度和高度**。也可以只指定其中之一。我们看个例子：

<img src='data:image/svg+xml;charset=utf8,<svg width="600" height="400" version="1.1" xmlns="http://www.w3.org/2000/svg"><ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/></svg>' width="100"/>

这个例子中，为了方便你理解，我们把图片换成了椭圆，我们可以看到，当我们指定了宽度后，图片被**等比例缩放了**。这个特性非常重要，适用于那种我们既要限制图片尺寸，又要保持图片比例的场景。

如果从性能的角度考虑，**建议你同时给出图片的宽高**，因为替换型元素加载完文件后，如果尺寸发生变换，会触发重排版（这个概念我们在浏览器原理部分已经讲过，可以复习一下）。

此处要重点提到一个属性，**alt 属性**，这个属性很难被普通用户感知，对于视障用户非常重要，可以毫不夸张地讲，给 img 加上 alt 属性，已经做完了可访问性的一半。

img 标签还有一组重要的属性，那就是 **srcset 和 sizes**，它们是 src 属性的升级版（所以我们前面讲 img 标签必须有 src 属性，这是不严谨的说法）。

这两个属性的作用是在不同的屏幕大小和特性下，使用不同的图片源。下面一个例子也来自 MDN，它展示了 srcset 和 sizes 的用法

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

> picture 标签

picture 元素可以根据屏幕的条件为其中的 img 元素提供不同的源，它的基本用法如下：

**picture 元素**的设计跟 audio 和 video 保持了一致（稍后我会为你讲解这两个元素），它跟 img 搭配 srcset 和 sizes 不同，它使用 **source 元素**来指定图片源，并且支持多个。

这里的 media 属性是 media query，跟 CSS 的 @media 规则一致。

> video 标签

在 HTML5 早期的设计中，video 标签跟 img 标签类似，也是使用 src 属性来引入源文件的，不过，我想应该是考虑到了各家浏览器支持的视频格式不同，现在的 video 标签跟 picture 元素一样，也是提倡使用 source 的。

现在的 **video 标签**可以使用 **source 标签**来指定接入多个视频源。

<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>

从这个例子中，我们可以看到，source 标签除了支持 media 之外，还可以使用 type 来区分源文件的使用场景。

video 中还支持一种标签：track。

track 是一种播放时序相关的标签，它最常见的用途就是**字幕**。**track 标签**中，必须使用 **srclang** 来指定语言，此外，track 具有 **kind 属性**，共有五种。

*  subtitles：就是字幕了，不一定是翻译，也可能是补充性说明
 *  captions：报幕内容，可能包含演职员表等元信息，适合听障人士或者没有打开声音的人了解音频内容
 *  descriptions：视频描述信息，适合视障人士或者没有视频播放功能的终端打开视频时了解视频
 *  chapters：用于浏览器视频内容。
 *  metadata：给代码提供的元信息，对普通用户不可见。

> audio 标签

接下来我们来讲讲 audio，跟 picture 和 video 两种标签一样，**audio** 也可以使用 **source 元素**来指定源文件。我们看一下例子：

<audio controls>
      <source src="song.mp3" type="audio/mpeg">
      <source src="song.ogg" type="audio/ogg">
      <p>You browser does not support audio.</p>
    </audio>

但比起 video，audio 元素的历史问题并不严重，所以使用 src 也是没有问题的。

> iframe 标签

最后我们来讲一下 **iframe**，这个标签能够嵌入一个完整的网页。

不过，在移动端，iframe 受到了相当多的限制，它无法指定大小，里面的内容会被完全平铺到父级页面上。

同时很多网页也会通过 http 协议头禁止自己被放入 iframe 中。

iframe 标签也是各种安全问题的重灾区。opener、[window.name][]、甚至 css 的 opacity 都是黑客可以利用的漏洞。

不推荐在实际开发中用以前的 iframe。

当然，不推荐使用是一回事，因为没人能保证不遇到历史代码，我们还是应该了解一下 iframe 的基本用法：

在新标准中，为 iframe 加入了 sandbox 模式和 srcdoc 属性，这样，给 iframe 带来了一定的新场景。我们来看看例子：

这样，这个 iframe 就不涉及任何跨域问题了。

> 总结

这节课，我们又认识了一组 HTML 元素：替换型元素。它们的特点是，引入一个外部资源来进入页面，替换掉自身的位置。

我们通过对 script、img、picture、audio、video、iframe 几个标签的讲解，了解了不同的资源引入方式：

*  src 属性；
 *  srcset 属性；
 *  source 标签；
 *  srcdoc 属性。

这中间，我们也介绍了一些小技巧，比如 src 属性的好朋友——data uri，这在实际开发中非常有用。

--------------------

### 34 | HTML小实验：用代码分析HTML标准 ###

*  表单类标签
 *  表格类标签

一个小实验：利用工具分析 Web 标准文本，来获得元素的信息。

通过这个实验，我希望能够传递一种思路，代码能够帮助我们从 Web 标准中挖掘出来很多想要的信息，编写代码的过程，也是更深入理解标准的契机。

--------------------

### 39 | HTML语言：DTD到底是什么？ ###

*  JavaScript 语言我们把它称为“编程语言”，它最大的特点是图灵完备的，我们大致可以理解为“包含了表达一切逻辑的能力”。
 *  HTML 这样的语言，我们称为“标记语言（mark up language）”，它是纯文本的一种升级，“标记”一词的概念来自：编辑审稿时使用不同颜色笔所做的“标记”。

> 基本语法

![b6fdf08dbe47c837e274ff1bb6f630bc.jpg][]

> 标签语法

标签语法产生元素，我们从\*\*语法的角度讲，就用“标签”**这个术语，我们从**运行时的角度讲，就用“元素”\*\*这个术语。

HTML 中，用于描述一个元素的标签分为开始标签、结束标签和自闭合标签。开始标签和自闭合标签中，又可以有属性。

*  开始标签：
    
     *  带属性的开始标签：
 *  结束标签：
 *  自闭合标签：

HTML 中开始标签的标签名称只能使用英文字母。

这里需要重点讲一讲属性语法，属性可以使用**单引号、双引号或者完全不用引号**，这三种情况下，需要转义的部分都不太一样。

属性中可以使用文本实体（后文会介绍）来做转义，属性中，一定需要转义的有：

*  无引号属性：、、、、& 五种字符
 *  单引号属性：’、& 两种字符
 *  双引号属性："、& 两种字符

> 文本语法

在 HTML 中，规定了两种文本语法，一种是普通的文本节点，另一种是 CDATA 文本节点。

文本节点看似是普通的文本，但是，其中有两种字符是必须做转义的：< 和 &。

如果我们从某处拷贝了一段文本，里面包含了大量的 < 和 &，那么我们就有麻烦了，这时候，就轮到我们的 CDATA 节点出场了。

CDATA 也是一种文本，它存在的意义是语法上的意义：**在 CDATA 节点内，不需要考虑多数的转义情况**。

**CDATA 内，只有字符组合\]\]>需要处理，这里不能使用转义，只能拆成两个 CDATA 节点**。

DTD 规定了 HTML 包含了哪些标签、属性和文本实体。其中文本实体分布在三个文件中：HTMLsymbol.ent HTMLspecial.ent 和 HTMLlat1.ent。

所谓文本实体定义就是类似以下的代码：

<
     
    >
    &

每一个**文本实体**由 & 开头，由 ; 结束，这属于基本语法的规定，文本实体可以用 \# 后跟一个十进制数字，表示字符 Unicode 值。除此之外这两个符号之间的内容，则由 DTD 决定。

> 注释语法

HTML 注释语法以 结尾

> DTD 语法（文档类型定义）

DTD 的全称是 Document Type Defination，也就是**文档类型定义**。SGML 用 DTD 来定义每一种文档类型，HTML 属于 SGML，在 HTML5 出现之前，HTML 都是使用符合 SGML 规定的 DTD。

众所周知，HTML 中允许一些**标签不闭合**的用法，实际上这些都是符合 SGML 规定的，并且在 DTD 中规定好了的。但是，一些程序员喜欢严格遵守 XML 语法，保证标签闭合性.

其实你看看就知道，这些复杂的 DTD 写法并没有什么实际作用（浏览器根本不会用 SGML 引擎解析它们），因此，到了 HTML5，干脆放弃了 SGML 子集这项坚持，规定了一个简单的，大家都能记住的 DTD：

<!DOCTYPE html>

> ProcessingInstruction 语法（处理信息）

ProcessingInstruction 多数情况下，是**给机器看的**。HTML 中规定了可以有 ProcessingInstruction，但是并没有规定它的具体内容，所以可以把它视为一种保留的扩展机制。对浏览器而言，ProcessingInstruction 的作用类似于**注释**。

ProcessingInstruction 包含两个部分，紧挨着第一个问号后，空格前的部分被称为“目标”，这个目标一般表示处理 ProcessingInstruction 的程序名。

剩余部分是它的文本信息，没有任何格式上的约定，完全由文档编写者和处理程序的编写者约定。

> 总结

今天的课程中我们讲了 HTML 的语法，HTML 语法源自 SGML，我们首先介绍了基本语法，包含了五种节点：标签（元素）、文本、注释、文档类型定义（DTD）和处理信息（ProcessingInstruction）。

文本实体是 HTML 转义的重要手段。

--------------------

### 42 | HTML·ARIA：可访问性是只给盲人用的特性么？ ###

ARIA 全称为 Accessible Rich Internet Applications，它表现为**一组属性**，是用于**可访问性**的一份标准。关于可访问性，它被提到最多的，就是它可以为视觉障碍用户服务，但是，这是一个误解。

> 综述

![aeccf64871b309735054912fbbb18a69.jpg][]

其中，widget 表示一些可交互的组件，structure 表示文档中的结构，window 则代表窗体。

> Widget 角色

这一类角色跟我们桌面开发中的控件类似，它表示一个可交互的组件，它们有：

![10ea9eb62d60fb4bfb18c27da50836dd.jpg][]

我们这里按照继承关系给出一份列表和简要说明：

![038e1152c9bddc7ed864d271691d17f1.jpeg][]

> structure 角色

这部分角色的作用类似于语义化标签，但是内容稍微有些不同，我们这里就不详细讲解了，仅仅给出一张图供你参考：

![b21a82fd68a885f751123f48a7e26b7a.jpg][]

注：separator 在允许焦点时属于组件，在不允许焦点时属于文档结构。

这里我们需要特别提出 Landmark 角色这个概念，Landmark 角色直接翻译是地标，它是 ARIA 标准中总结的 Web 网页中最常见的 8 个结构，Landmark 角色实际上是 section 的子类，这些角色在生成页面摘要时有很大可能性需要被保留，它们是：

![9aee7029d4bf684a8679a6776d6e9075.jpg][]

> window 角色

在我们的网页中，有些元素表示“新窗口”，这时候，会用到 window 角色。window 系角色非常少，只有三个角色：

*  window
    
     *  dialog
        
         *  alertdialog

dialog 可能会产生“焦点陷阱”，也就是说，当这样的角色被激活时，焦点无法离开这个区域。

> 总结

今天我介绍了 ARIA 相关的知识，我们分几个部分学习了如何**使用 ARIA 属性来提高页面的可访问性**。

我们以 ARIA 角色为中心，讲解了 ARIA 定义的语义体系。我们可以把 ARIA 分为三类：

*  Widget 角色：主要是各种**可交互的控件**
 *  结构角色：**文档的结构**
 *  窗体角色：**弹出的窗体**

[006tNc79ly1g2q4xd65wsj30co0cjabb.jpg]: https://ws1.sinaimg.cn/large/006tNc79ly1g2q4xd65wsj30co0cjabb.jpg
[9684130e423b6734b23652f4f0b6359e.jpg]: /images/20220203/f71a4e82973f49059df9da0915e190f6.png
[caab7832c425b3af2b3adae747e6f551.png]: /images/20220203/2066ee3b71204695b7e9e936538b10cb.png
[window.name]: http://window.name
[b6fdf08dbe47c837e274ff1bb6f630bc.jpg]: /images/20220203/541a2383f10d48c2881805affb5e3ad6.png
[aeccf64871b309735054912fbbb18a69.jpg]: /images/20220203/5404d0924c3f49a5a37eb9c2ae33dea7.png
[10ea9eb62d60fb4bfb18c27da50836dd.jpg]: /images/20220203/e29b06dff6454758a51b1b10cbbdde5a.png
[038e1152c9bddc7ed864d271691d17f1.jpeg]: /images/20220203/924d8859f0af4b7b83b7d9dbd1d35dc8.png
[b21a82fd68a885f751123f48a7e26b7a.jpg]: /images/20220203/6e745d0cf888489e809666390d04fe11.png
[9aee7029d4bf684a8679a6776d6e9075.jpg]: /images/20220203/a09322119bad472bacec3485f9c37fe0.png