security❀1HTML

网址的组成部分

协议

协议（scheme）是浏览器请求服务器资源的方法，上例是https://的部分，表示使用 HTTPS 协议。

互联网支持多种协议，必须指明网址使用哪一种协议，默认是 HTTP 协议。也就是说，如果省略协议，直接在浏览器地址栏输入www.example.com，那么浏览器默认会访问http://www.example.com。HTTPS 是 HTTP 的加密版本，出于安全考虑，越来越多的网站使用这个协议。

HTTP 和 HTTPS 的协议名称后面，紧跟着一个冒号和两个斜杠（://）。其他协议不一定如此，邮件地址协议mailto:的协议名后面只有一个冒号，比如mailto:foo@example.com。

主机

主机（host）是资源所在的网站名或服务器的名字，又称为域名。上例的主机是www.example.com。

有些主机没有域名，只有 IP 地址，比如192.168.2.15。这种情况常常出现在局域网。

端口

同一个域名下面可能同时包含多个网站，它们之间通过端口（port）区分。“端口”就是一个整数，可以简单理解成，访问者告诉服务器，想要访问哪一个网站。HTTP 协议的默认端口是80，如果省略了这个参数，服务器就会返回80端口的网站。

端口紧跟在域名后面，两者之间使用冒号分隔，比如www.example.com:80。

路径

路径（path）是资源在网站的位置。比如，/path/index.html这个路径，指向网站的/path子目录下面的网页文件index.html。

互联网的早期，路径是真实存在的物理位置。现在由于服务器可以模拟这些位置，所以路径只是虚拟位置。

路径可能只包含目录，不包含文件名，比如/foo/，甚至结尾的斜杠都可以省略。这时，服务器通常会默认跳转到该目录里面的index.html文件（即等同于请求/foo/index.html），但也可能有其他的处理（比如列出目录里面的所有文件），这取决于服务器的设置。一般来说，访问www.example.com这个网址，很可能返回的是网页文件www.example.com/index.html。

查询参数

查询参数（parameter）是提供给服务器的额外信息。参数的位置是在路径后面，两者之间使用?分隔，上例是?key1=value1&key2=value2。

查询参数可以有一组或多组。每组参数都是键值对（key-value pair）的形式，同时具有键名(key)和键值(value)，它们之间使用等号（=）连接。比如，key1=value就是一个键值对，key1是键名，value1是键值。

多组参数之间使用&连接，比如key1=value1&key2=value2。

锚点

锚点（anchor）是网页内部的定位点，使用#加上锚点名称，放在网址的最后，比如#anchor。浏览器加载页面以后，会自动滚动到锚点所在的位置。

锚点名称通过网页元素的id属性命名，详见《元素的属性》一章。

URL 字符

URL 的各个组成部分，只能使用以下这些字符。

• 26个英语字母（包括大写和小写）
• 10个阿拉伯数字
• 连词号（-）
• 句点（.）
• 下划线（_）
• 此外，还有18个字符属于 URL 的保留字符，只能在给定的位置出现。比如，查询参数的开头是问号（?），也就是说，问号只能出现查询参数的开头，出现在其他位置就是非法的，会导致网址解析错误。网址的其他部分如果要使用这些保留字符，必须使用它们的转义形式。

URL 字符转义的方法是，在这些字符的十六进制 ASCII 码前面加上百分号（%）。下面是这18个字符及其转义形式。

• !：%21
• #：%23
• $：%24
• &：%26
• '：%27
• (：%28
• )：%29
• *：%2A
• +：%2B
• ,：%2C
• /：%2F
• :：%3A
• ;：%3B
• =：%3D
• ?：%3F
• @：%40
• [：%5B
• ]：%5D

UTF-8

互联网的普及，强烈要求出现一种统一的编码方式。UTF-8 就是在互联网上使用最广的一种 Unicode 的实现方式。其他实现方式还包括 UTF-16（字符用两个字节或四个字节表示）和 UTF-32（字符用四个字节表示），不过在互联网上基本不用。重复一遍，这里的关系是，UTF-8 是 Unicode 的实现方式之一。

UTF-8 最大的一个特点，就是它是一种变长的编码方式。它可以使用1~4个字节表示一个符号，根据不同的符号而变化字节长度。

UTF-8 的编码规则很简单，只有二条：

1）对于单字节的符号，字节的第一位设为0，后面7位为这个符号的 Unicode 码。因此对于英语字母，UTF-8 编码和 ASCII 码是相同的。

2）对于n字节的符号（n > 1），第一个字节的前n位都设为1，第n + 1位设为0，后面字节的前两位一律设为10。剩下的没有提及的二进制位，全部为这个符号的 Unicode 码。

下表总结了编码规则，字母x表示可用编码的位。

Unicode符号范围     |        UTF-8编码方式
(十六进制)        |              （二进制）
----------------------+---------------------------------------------
0000 0000-0000 007F | 0xxxxxxx
0000 0080-0000 07FF | 110xxxxx 10xxxxxx
0000 0800-0000 FFFF | 1110xxxx 10xxxxxx 10xxxxxx
0001 0000-0010 FFFF | 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

跟据上表，解读 UTF-8 编码非常简单。如果一个字节的第一位是0，则这个字节单独就是一个字符；如果第一位是1，则连续有多少个1，就表示当前字符占用多少个字节。

下面，还是以汉字严为例，演示如何实现 UTF-8 编码。

严的 Unicode 是4E25（100111000100101），根据上表，可以发现4E25处在第三行的范围内（0000 0800 - 0000 FFFF），因此严的 UTF-8 编码需要三个字节，即格式是1110xxxx 10xxxxxx 10xxxxxx。然后，从严的最后一个二进制位开始，依次从后向前填入格式中的x，多出的位补0。这样就得到了，严的 UTF-8 编码是11100100 10111000 10100101，转换成十六进制就是E4B8A5。

HTML

dir属性表示文字的阅读方向，有三个可能的值。

• ltr：从左到右阅读，比如英语。
• rtl：从右到左阅读，阿拉伯语、波斯语、希伯来语都属于这一类。
• auto：浏览器根据内容的解析结果，自行决定。

contenteditable

HTML 网页的内容默认是用户不能编辑，contenteditable属性允许用户修改内容。它有两个可能的值。

• true或空字符串：内容可以编辑
• false：不可以编辑

<p contenteditable="true">
鼠标点击，本句内容可修改。
</p>

事件处理属性

除了上面这些属性，全局属性还包括事件处理属性（event handler），用来响应用户的动作。这些属性的值都是 JavaScript 代码，请参考 JavaScript 教程，这里只列出这些属性的名单。

onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting

<details>，<summary>

基本用法

<details>标签用来折叠内容，浏览器会折叠显示该标签的内容。

<details>
这是一段解释文本。
</details>

上面的代码在浏览器里面，会折叠起来，显示Details，前面有一个三角形，就像下面这样。

▶ Details

用户点击这段文本，折叠的文本就会展开，显示详细内容。

▼ Details
这是一段解释文本。

再点击一下，展开的文本又会重新折叠起来。

<details>标签的open属性，用于默认打开折叠。

<details open>
这是一段解释文本。
</details>

上面代码默认打开折叠。

<summary>标签用来定制折叠内容的标题。

<details>
  <summary>这是标题</summary>
  这是一段解释文本。
</details>

上面的代码显示结果如下。

▶ 这是标题

点击后，展示的效果如下。

▼ 这是标题
这是一段解释文本。

字符的实体表示法

数字表示法的不方便之处，在于必须知道每个字符的码点，很难记忆。为了能够快速输入，HTML 为一些特殊字符，规定了容易记忆的名字，允许通过名字来表示它们，这称为实体表示法（entity）。

实体的写法是&name;，其中的name是字符的名字。下面是其中一些特殊字符，及其对应的实体。

• <：<
• >：>
• "："
• '：'
• &：&
• ©：©
• #：#
• §：§
• ¥：¥
• $：$
• £：£
• ¢：¢
• %：%
• *：$ast;
• @：@
• ^：^
• ±：±
• 空格： 

<select>

<select>标签用于生成一个下拉菜单。

<label for="pet-select">宠物：</label>

<select id="pet-select" name="pet-select">
  <option value="">--请选择一项--</option>
  <option value="dog">狗</option>
  <option value="cat">猫</option>
  <option value="others">其他</option>
</select>

上面代码中，<select>生成一个下拉菜单，菜单标题是“–请选择一项–”，最右侧有一个下拉箭头。点击下拉箭头，会显示三个菜单项，供用户点击选择。

下拉菜单的菜单项由<option>标签给出，每个<option>代表可以选择的一个值。选中的<option>的value属性，就是<select>控件发送的服务器的值。

<option>有一个布尔属性selected，一旦设置，就表示该项是默认选中的菜单项。

<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

上面代码中，第二项Second Value是默认选中的。页面加载的时候，会直接显示在下拉菜单上。

<select>有如下属性。

• autofocus：布尔属性，页面加载时是否自动获得焦点。
• disabled：布尔属性，是否禁用当前控件。
• form：关联表单的id属性。
• multiple：布尔属性，是否可以选择多个菜单项。默认情况下，只能选择一项。一旦设置，多数浏览器会显示一个滚动列表框。用户可能需要按住Shift或其他功能键，选中多项。
• name：控件名。
• required：布尔属性，是否为必填控件。
• size：设置了multiple属性时，页面显示时一次可见的行数，其他行需要滚动查看。

<option>，<optgroup>

<option>标签用在<select>、<optgroup>、<datalist>里面，表示一个菜单项，参见<select>的示例。

它有如下属性。

• disabled：布尔属性，是否禁用该项。
• label：该项的说明。如果省略，则等于该项的文本内容。
• selected：布尔属性，是否为默认值。显然，一组菜单中，只能有一个菜单项设置该属性。
• value：该项提交到服务器的值。如果省略，则等于该项的文本内容。

<optgroup>表示菜单项的分组，通常用在<select>内部。

<label>宠物：
  <select name="pets" multiple size="4">
    <optgroup label="四条腿的宠物">
      <option value="dog">狗</option>
      <option value="cat">猫</option>
    </optgroup>
    <optgroup label="鸟类">
      <option value="parrot">鹦鹉</option>
      <option value="thrush">画眉</option>
    </optgroup>
  </select>
</label>

上面代码中，<select>是一个下拉菜单，它的内部使用<optgroup>将菜单项分成两组。每组有自己的标题，会加粗显示，但是用户无法选中。

它的属性如下。

• disabled：布尔设置，是否禁用该组。一旦设置，该组所有的菜单项都不可选。
• label：菜单项分组的标题。

<progress>

<progress>标签是一个行内元素，表示任务的完成进度。浏览器通常会将显示为进度条。

<progress id="file" max="100" value="70"> 70% </progress>

该标签有如下属性。

• max：进度条的最大值，应该是一个大于0的浮点数。默认值为1。
• value：进度条的当前值。它必须是0和max属性之间的一个有效浮点数。如果省略了max属性，该值则必须在0和1之间。如果省略了value属性，则进度条会出现滚动，表明正在进行中，无法知道完成的进度。
  loading 属性

<iframe>指定的网页会立即加载，有时这不是希望的行为。<iframe>滚动进入视口以后再加载，这样会比较节省带宽。

loading属性可以触发<iframe>网页的懒加载。该属性可以取以下三个值。

• auto：浏览器的默认行为，与不使用loading属性效果相同。
• lazy：<iframe>的懒加载，即将滚动进入视口时开始加载。
• eager：立即加载资源，无论在页面上的位置如何。

<iframe src="https://example.com" loading="lazy"></iframe>

（4）referrerpolicy

<img>导致的图片加载的 HTTP 请求，默认会带有Referer的头信息。referrerpolicy属性对这个行为进行设置。

srcset属性

为了解决上面这些问题，HTML 语言提供了一套完整的解决方案。首先，<img>标签引入了srcset属性。

srcset属性用来指定多张图像，适应不同像素密度的屏幕。它的值是一个逗号分隔的字符串，每个部分都是一张图像的 URL，后面接一个空格，然后是像素密度的描述符。请看下面的例子。

<img srcset="foo-320w.jpg,
             foo-480w.jpg 1.5x,
             foo-640w.jpg 2x"
     src="foo-640w.jpg">

上面代码中，srcset属性给出了三个图像 URL，适应三种不同的像素密度。
行内元素默认与其他元素在同一行，不产生换行。比如，span就是行内元素，通常用来为某些文字指定特别的样式。

<span>hello</span>
<span>world</span>

上面代码中，span元素是行内元素，因此浏览器会将两行内容放在一行显示。

<meta>

<meta>标签用于设置或说明网页的元数据，必须放在<head>里面。一个<meta>标签就是一项元数据，网页可以有多个<meta>。<meta>标签约定放在<head>内容的最前面。

不管什么样的网页，一般都可以放置以下两个<meta>标签。

<head>
  <meta charset="utf-8">
  **<meta name="viewport" content="width=device-width, initial-scale=1">**
  <title>Page Title</title>
</head>

上面例子中，第一个<meta>标签表示网页采用 UTF-8 格式编码，第二个<meta>标签表示网页在手机端可以自动缩放。

<meta>的 viewport 设置

<meta>的 viewport 设置用来控制网页的视觉大小。

<meta name="viewport" content="initial-scale=1">

这表示网页初始加载不进行放大或缩小。

下面代码指定网页适配的视口宽度。

<meta name="viewport" content="width=320">

下面代码指定网页宽度为设备宽度。

<meta name="viewport" content="width=device-width">

下面代码指定用户不能放大网页。

<meta name="viewport" content="maximum-scale=1">

适用手机的网页，一般要写成下面这样。

<meta name="viewport" content="width=device-width, initial-scale=1">

注释

HTML 代码可以包含注释，浏览器会自动忽略注释。注释以<!--开头，以-->结尾，下面就是一个注释的例子。

<!-- 这是一个注释 -->

注释可以是多行的，并且内部的 HTML 都不再生效了。

<!--
  <p>hello world</p>
-->

上面代码是一个注释的区块，内部的代码都是无效的，浏览器不会解析，更不会渲染它们。

注释有助于理解代码的含义，复杂的代码块前面最好加上注释。

<link>标签的其他属性如下。

• crossorigin：加载外部资源的跨域设置。
• href：外部资源的网址。
• referrerpolicy：加载时Referer头信息字段的处理方法。
• as：rel="preload"或rel="prefetch"时，设置外部资源的类型。
• type：外部资源的 MIME 类型，目前仅用于rel="preload"或rel="prefetch"的情况。
• title：加载样式表时，用来标识样式表的名称。
• sizes：用来声明图标文件的尺寸，比如加载苹果手机的图标文件。

<script>

<script>用于加载脚本代码，目前主要是加载 JavaScript 代码。

<script>
console.log('hello world');
</script>

上面代码嵌入网页，会立即执行。

<script>也可以加载外部脚本，src属性给出外部脚本的地址。

<script src="javascript.js"></script>

上面代码会加载javascript.js脚本文件，并执行。

<noscript>

<noscript>标签用于浏览器不支持或关闭 JavaScript 时，所要显示的内容。用户关闭 JavaScript 可能是为了节省带宽，以延长手机电池寿命，或者为了防止追踪，保护隐私。

<noscript>
  您的浏览器不能执行 JavaScript 语言，页面无法正常显示。
</noscript>

上面这段代码，只有浏览器不能执行 JavaScript 代码时才会显示，否则就不会显示。

<dl>，<dt>，<dd>

<dl>标签是一个块级元素，表示一组术语的列表（description list）。术语名（description term）由<dt>标签定义，术语解释（description detail）由<dd>标签定义。<dl>常用来定义词汇表。

<dl>
  <dt>CPU</dt>
  <dd>中央处理器</dd>

  <dt>Memory</dt>
  <dd>内存</dd>

  <dt>Hard Disk</dt>
  <dd>硬盘</dd>
</dl>

<dt>和<dd>都是块级元素，<dd>默认会在<dt>下方缩进显示。上面代码的默认渲染结果如下。

CPU
  中央处理器

Memory
  内存

Hard Disk
  硬盘

多个术语（<dt>）对应一个解释（<dd>），或者多个解释（<dd>）对应一个术语（<dt>），都是合法的。

<dl>
  <dt>A</dt>
  <dt>B</dt>
  <dd>C</dd>

  <dt>D</dt>
  <dd>E</dd>
  <dd>F</dd>
</dl>

上面代码中，A和B有共同的解释C，而D有两个解释E和F。

多媒体标签

除了图像，网页还可以放置视频和音频。

<video>

<video>标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示<video>内部的子元素。

<video src="example.mp4" controls>
  <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p>
</video>

上面代码中，如果浏览器不支持该种格式的视频，就会显示<video>内部的文字提示。

<video>有以下属性。

• src：视频文件的网址。
• controls：播放器是否显示控制栏。该属性是布尔属性，不用赋值，只要写上属性名，就表示打开。如果不想使用浏览器默认的播放器，而想使用自定义播放器，就不要使用该属性。
• width：视频播放器的宽度，单位像素。
• height：视频播放器的高度，单位像素。
• autoplay：视频是否自动播放，该属性为布尔属性。
• loop：视频是否循环播放，该属性为布尔属性。
• muted：是否默认静音，该属性为布尔属性。
• poster：视频播放器的封面图片的 URL。
• preload：视频播放之前，是否缓冲视频文件。这个属性仅适合没有设置autoplay的情况。它有三个值，分别是none（不缓冲）、metadata（仅仅缓冲视频文件的元数据）、auto（可以缓冲整个文件）。
• playsinline：iPhone 的 Safari 浏览器播放视频时，会自动全屏，该属性可以禁止这种行为。该属性为布尔属性。
• crossorigin：是否采用跨域的方式加载视频。它可以取两个值，分别是anonymous（跨域请求时，不发送用户凭证，主要是 Cookie），use-credentials（跨域时发送用户凭证）。
• currentTime：指定当前播放位置（双精度浮点数，单位为秒）。如果尚未开始播放，则会从这个属性指定的位置开始播放。
• duration：该属性只读，指示时间轴上的持续播放时间（总长度），值为双精度浮点数（单位为秒）。如果是流媒体，没有已知的结束时间，属性值为+Infinity。

下面是一个例子。

<video width="400" height="400"
       autoplay loop muted
       poster="poster.png">
</video>

上面代码中，视频播放器的大小是 400 x 400，会自动播放和循环播放，并且静音，还带有封面图。这是网站首页背景视频的常见写法。

HTML 标准没有规定浏览器需要支持哪些视频格式，完全由浏览器厂商自己决定。为了避免浏览器不支持视频格式，可以使用<source>标签，放置同一个视频的多种格式。

<video controls>
  <source src="example.mp4" type="video/mp4">
  <source src="example.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频，请下载<a href="example.mp4">视频文件</a>。</p>
</video>

上面代码中，<source>标签的type属性的值是视频文件的 MIME 类型，上例指定了两种格式的视频文件：MP4 和 WebM。如果浏览器支持 MP4，就加载 MP4 格式的视频，不再往下执行了。如果不支持 MP4，就检查是否支持 WebM，如果还是不支持，则显示提示。

<audio>

<audio>标签是一个块级元素，用于放置音频，用法与<video>标签基本一致。

<audio controls>
  <source src="foo.mp3" type="audio/mp3">
  <source src="foo.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，请直接下载<a href="foo.mp3">音频文件</a>。</p>
</audio>

上面代码中，<audio>标签内部使用<source>标签，指定了两种音频格式：优先使用 MP3 格式，如果浏览器不支持则使用 Ogg 格式。如果浏览器不能播放音频，则提供下载链接。

<audio>标签的属性与<video>标签类似，参见上一节。

• autoplay：是否自动播放，布尔属性。
• controls：是否显示播放工具栏，布尔属性。如果不设置，浏览器不显示播放界面，通常用于背景音乐。
• crossorigin：是否使用跨域方式请求。
• loop：是否循环播放，布尔属性。
• muted：是否静音，布尔属性。
• preload：音频文件的缓冲设置。
• src：音频文件网址。

<track>

<track>标签用于指定视频的字幕，格式是 WebVTT （.vtt文件），放置在<video>标签内部。它是一个单独使用的标签，没有结束标签。

<video controls src="sample.mp4">
   <track label="英文" kind="subtitles" src="subtitles_en.vtt" srclang="en">
   <track label="中文" kind="subtitles" src="subtitles_cn.vtt" srclang="cn" default>
</video>

上面代码指定视频文件的英文字幕和中文字幕。

<track>标签有以下属性。

• label：播放器显示的字幕名称，供用户选择。
• kind：字幕的类型，默认是subtitles，表示将原始声音成翻译外国文字，比如英文视频提供中文字幕。另一个常见的值是captions，表示原始声音的文字描述，通常是视频原始使用的语言，比如英文视频提供英文字幕。
• src：vtt 字幕文件的网址。
• srclang：字幕的语言，必须是有效的语言代码。
• default：是否默认打开，布尔属性。

<source>

<source>标签用于<picture>、<video>、<audio>的内部，用于指定一项外部资源。单标签是单独使用的，没有结束标签。

它有如下属性，具体示例请参见相应的容器标签。

• type：指定外部资源的 MIME 类型。
• src：指定源文件，用于<video>和<audio>。
• srcset：指定不同条件下加载的图像文件，用于<picture>。
• media：指定媒体查询表达式，用于<picture>。
• sizes：指定不同设备的显示大小，用于<picture>，必须跟srcset搭配使用。

<embed>

<embed>标签用于嵌入外部内容，这个外部内容通常由浏览器插件负责控制。由于浏览器的默认插件都不一致，很可能不是所有浏览器的用户都能访问这部分内容，建议谨慎使用。

下面是嵌入视频播放器的例子。

<embed type="video/webm"
       src="/media/examples/flower.mp4"
       width="250"
       height="200">

上面代码嵌入的视频，将由浏览器插件负责控制。如果浏览器没有安装 MP4 插件，视频就无法播放。

<embed>标签具有如下的通用属性。

• height：显示高度，单位为像素，不允许百分比。
• width：显示宽度，单位为像素，不允许百分比。
• src：嵌入的资源的 URL。
• type：嵌入资源的 MIME 类型。

浏览器通过type属性得到嵌入资源的 MIME 类型，一旦该种类型已经被某个插件注册了，就会启动该插件，负责处理嵌入的资源。

下面是 QuickTime 插件播放 MOV 视频文件的例子。

<embed type="video/quicktime" src="movie.mov" width="640" height="480">

下面是启动 Flash 插件的例子。

<embed src="whoosh.swf" quality="medium"
       bgcolor="#ffffff" width="550" height="400"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer">

上面代码中，如果浏览器没有安装 Flash 插件，就会提示去pluginspage属性指定的网址下载。

<object>，<param>

<object>标签作用跟<embed>相似，也是插入外部资源，由浏览器插件处理。它可以视为<embed>的替代品，有标准化行为，只限于插入少数几种通用资源，没有历史遗留问题，因此更推荐使用。

下面是插入 PDF 文件的例子。

<object type="application/pdf"
    data="/media/examples/In-CC0.pdf"
    width="250"
    height="200">
</object>

上面代码中，如果浏览器安装了 PDF 插件，就会在网页显示 PDF 浏览窗口。

<object>具有如下的通用属性。

• data：嵌入的资源的 URL。
• form：当前网页中相关联表单的id属性（如果有的话）。
• height：资源的显示高度，单位为像素，不能使用百分比。
• width：资源的显示宽度，单位为像素，不能使用百分比。
• type：资源的 MIME 类型。
• typemustmatch：布尔属性，表示data属性与type属性是否必须匹配。

下面是插入 Flash 影片的例子。

<object data="movie.swf"
  type="application/x-shockwave-flash"></object>

<object>标签是一个容器元素，内部可以使用<param>标签，给出插件所需要的运行参数。

<object data="movie.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar">
</object>

<nav>

<nav>标签用于放置页面或文档的导航信息。

<nav>
  <ol>
    <li><a href="item-a">商品 A</a></li>
    <li><a href="item-b">商品 B</a></li>
    <li>商品 C</li>
  </ol>
</nav>

一般来说，<nav>往往放置在<header>里面，不适合放入<footer>。另外，一个页面可以有多个<nav>，比如一个用于站点导航，另一个用于文章导航。

<hgroup>

如果主标题包含多级标题（比如带有副标题），那么可以使用<hgroup>标签，将多级标题放在其中。

<hgroup>
  <h1>Heading 1</h1>
  <h2>Subheading 1</h2>
  <h2>Subheading 2</h2>
</hgroup>

注意，<hgroup>只能包含<h1>~<h6>，不能包含其他标签。

<bdo>，<bdi>

大部分文字的阅读方向是从左到右，但是有些文字的方向是从右到左，比如阿拉伯语、希伯来语等。<bdo>标签是一个行内元素，表示文字方向与网页主体内容的方向不一致。

<p>床前明月光，<bdo dir="rtl">霜上地是疑</bdo>。</p>

上面代码中，<bdo>标签里面的文字，会以相反的方向渲染，结果就是“床前明月光，疑是地上霜”。

<bdo>的dir属性，指定具体的文字方向。它有两个值，ltr表示从左到右，rtl表示从右到左。

<bdi>标签用于不确定文字方向的情况。比如，网页有一个部分是用户输入的内容，但是不知道输入内容的文字方向。这种情况就可以使用<bdi>标签，告诉浏览器，不确定文字的方向，由浏览器自己决定。

<p><bdi>床前明月光，疑是地上霜。</bdi></p>

<ins>，<del>

<ins>标签是一个行内元素，表示原始文档添加（insert）的内容。<del>与之类似，表示删除（delete）的内容。它们通常用于展示文档的删改。

<del><p>会议定于5月8日举行。</p></del>
<ins><p>会议定于5月9日举行。</p></ins>

<s>标签是一个行内元素，为内容加上删除线。

<p>今天特价商品：<s>三文鱼</s>（售完）</p>

上面代码中，“三文鱼”会有一根删除线。
浏览器默认为<del>标签的内容加上删除线，为<ins>标签的内容加上下划线。

<address>

<address>标签是一个块级元素，表示某人或某个组织的联系方式。

<p>作者的联系方式：</p>

<address>
  <p><a href="mailto:foo@example.com">foo@example.com</a></p>
  <p><a href="tel:+555-34762301">+555-34762301</a></p>
</address>

该标签有几个注意点。

（1）如果是文章里提到的地址（比如提到搬家前的地址），而不是联系信息，不要使用<address>标签。

（2）<address>的内容不得有非联系信息，比如发布日期。

（3）<address>不能嵌套，并且内部不能有标题标签（<h1>~<h6>），也不能有<article>、<aside>、<section>、<nav>、<header>、<footer>等标签。

（4）通常，<address>会放在<footer>里面，下面是一个例子。

<footer>
  <address>
    文章的相关问题请联系<a href="mailto:zhangsan@example.com">张三
    McClure</a>。
  </address>
</footer>

<mark>

<mark>是一个行内标签，表示突出显示的内容。Chrome 浏览器默认会以亮黄色背景，显示该标签的内容。

<p>我们讨论以后决定，<mark>运行会在下周三举办</mark>。</p>

<mark>很适合在引用的内容（<q>或<blockquote>）中，标记出需要关注的句子。

<blockquote>
床前明月光，疑是地上霜。<mark>举头望明月，低头思故乡。</mark>
</blockquote>

除了标记感兴趣的文本，<mark>还可以用于在搜索结果中，标记出匹配的关键词。

注意，不要只为了高亮的效果，而使用这个标签，因为不能保证浏览器的处理方式。如果要保证高亮，还是要使用 CSS 样式。

<sub>，<sup>，<var>

<sub>标签将内容变为下标，<sup>标签将内容变为上标。它们都是行内元素，主要用于数学公式、分子式等。

<p>水分子是 H<sub>2</sub>O。</p>

<var>标签表示代码或数学公式的变量。

<p>勾股定理是
  <var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup>
。</p>

<em>，<i>

<em>是一个行内标签，表示强调（emphasize），浏览器会以斜体显示它包含的内容。

<pre>

<pre>是一个块级元素，表示保留原来的格式（preformatted），即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。

<pre>hello

   world</pre>

上面代码中，换行和连续空格都会由于<pre>标签，而被保留下来，浏览器按照原样输出。