recursal/MDN huggingface dataset:
<pre>
=====

**HTML <pre>** 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)

尝试一下
----

**备注：** 你需要将该元素里的 '<' 字符转义为 '&lt;' 以保证代码里的关闭代码不被浏览器解释为标签。


|  |  |
| --- | --- |
| 内容类别 | 流内容 ( flow content) , 可触知的内容 (palpable content). |
| 允许的 内容 | Phrasing content. |
| 省略标签 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的 父元素 | 任何可以接受流内容 ( flow content) 的元素 |
| 允许的 ARIA 角色 | 任何 |
| DOM 接口 | `HTMLPreElement` (en-US) |

属性
--

这个元素只具有全局属性。

`cols` 
非标准

已弃用

定义每行的最大字符数。这是一个非标准的属性，作用与`width`相同。要实现这样的效果，应该使用 CSS。

`width` 
已弃用

包含每行的最大字符数。虽然在技术上仍被实现，但这个属性没有视觉效果。要实现这样的效果，应该使用 CSS。

`wrap` 
非标准

提示溢出怎样发生。在现代浏览器中，这个提示会被忽略，且被没有视觉效果。要实现这样的效果，应该使用 CSS。

示例
--

### HTML


```html
<p>Using CSS to change the font color is easy.</p>
<pre>
body {
  color: red;
}
</pre>
```

### 结果

无障碍
---

It is important to provide an alternate description for any images or diagrams created using preformatted text. The alternate description should clearly and concisely describe the image or diagram's content.

People experiencing low vision conditions and browsing with the aid of assistive technology such as a screen reader may not understand what the preformatted text characters are representing when they are read out in sequence.

A combination of the `<figure>` and `<figcaption>` elements, supplemented by a combination of an `id` and the ARIA `role` and `aria-labelledby` attributes allow the preformatted text to be announced as an image, with the `figcaption` serving as the image's alternate description.

### 示例
```

<figure role="img" aria-labelledby="cow-caption">
  <pre>
  ___________________________
< I'm an expert in my field. >
  ---------------------------
         \   ^__^
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
  </pre>
  <figcaption id="cow-caption">
    A cow saying, "I'm an expert in my field." The cow is illustrated using preformatted text characters.
  </figcaption>
</figure>
```


* MDN Understanding WCAG, Guideline 1.1 explanations (en-US)
* H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0
规范
--

| Specification |
| --- |
| HTML Standard # the-pre-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* CSS: `white-space`, `word-break`
<dir>：目录元素
==========

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

已废弃的 **HTML 目录元素**（**`<dir>`**）被作为一个文件和/或文件夹的目录的容器，可能还有 用户代理 应用的样式与图标。Do not use this obsolete element; instead, you should use the `<ul>` element for lists, including lists of files.

**备注：** 不要使用这个元素。虽然它出现在早期的 HTML 规范中，它已经在 HTML4 中废除了，并且在 HTML5 (en-US) 中过时。使用 `<ul>` 来代替。

DOM 接口
------

元素实现了 `HTMLDirectoryElement` 接口。

属性
--

就像其他 HTML 元素，这个元素支持 全局属性 (en-US)。

`compact`

这个布尔属性表明，列表应该以紧凑样式显示。这个属性的实现取决于浏览器，并且不在所有浏览器中工作。

**备注：** 用法注解：不要使用这个属性，因为它已经废除了： `<dir>` 元素应该使用 CSS 来设计。为了提供 `compact` 属性的相似效果，可以使用 CSS 属性 `line-height`，值为 `80%`。

另见
--

* 其他和列表相关的 HTML 元素： `<ol>`，`<ul>`，`<li>`，`<menu>`；
* 特定用于 `<dir>` 元素的 CSS 属性：
    + `list-style` 属性，用于选择序号展示的方式。
    + CSS 计数器 (en-US)，用于处理复杂的嵌套列表。
    + `line-height` 属性，用于模拟废除的 `compact` 属性。
    + `margin` 属性，用于控制列表的缩进。
<canvas>
========

`<canvas>` 元素可被用来通过 JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。

属性
--

本元素支持全局属性。

`height`

该元素占用空间的高度，以 CSS 像素（px）表示，默认为 150。

`moz-opaque` 
非标准

已弃用

通过设置这个属性，来控制 canvas 元素是否半透明。如果你不想 canvas 元素被设置为半透明，使用这个元素将可以优化浏览器绘图性能。

`width`

该元素占用空间的宽度，以 CSS 像素（px）表示，默认为 300。

注意事项
----

### 标签需要闭合

不同于 `<img>` 元素， `<canvas>`元素需要有闭合标签 (`</canvas>`).

### 设置画布 (canvas) 的大小

直接在 html 标签中设置 width 和 height 属性或者使用 JavaScript 来指定画布尺寸，这将改变一个画布的水平像素和垂直像素数，就像定义了一张图片的大小一样。

可以使用 CSS 的 width 和 height 以在渲染期间缩放图像以适应样式大小，就像<img>元素一样。如果你发现<canvas>元素中展示的内容变形，你可以通过<canvas>自带的 height 和 width 属性进行相关设置，而不要使用 CSS。

### 最大的画布尺寸

画布的最大的尺寸取决于浏览器，下表的结论来自别处 (e.g. Stack Overflow):

| 浏览器 | 最大高度 | 最大宽度 | 最大面积 |
| --- | --- | --- | --- |
| Chrome | 32,767 pixels | 32,767 pixels | 268,435,456 pixels (i.e., 16,384 x 16,384) |
| Firefox | 32,767 pixels | 32,767 pixels | 472,907,776 pixels (i.e., 22,528 x 20,992) |
| Safari | 32,767 pixels | 32,767 pixels | 268,435,456 pixels (i.e., 16,384 x 16,384) |
| IE | 8,192 pixels | 8,192 pixels | ? |

示例
--

### HTML


```html
<canvas id="canvas" width="300" height="300">
  抱歉，你的浏览器不支持 canvas 元素
  （这些内容将会在不支持&lt;canvas%gt;元素的浏览器或是禁用了 JavaScript
  的浏览器内渲染并展现）
</canvas>
```

### JavaScript

使用`HTMLCanvasElement.getContext()`获得一个绘图上下文并开始绘制


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
```

### 结果

无障碍
---

`<canvas>` 元素本身只是一个位图，不提供任何绘制对象的信息。画布内容不像 HTML 那样具有语义并能暴露给无障碍工具。以下指南可以帮助你更方便地访问它。

* MDN Hit regions and accessability
* Canvas accessibility use cases
* Canvas element accessibility issues
* HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner
* Best practices for interactive canvas elements
规范
--

| Specification |
| --- |
| HTML Standard # the-canvas-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* MDN canvas portal
* Canvas tutorial
* Canvas cheat sheet
* Canvas-related demos
* Canvas introduction by Apple
<map>：图像映射元素
============

HTML **`<map>`** 元素与 `<area>` 元素一起使用来定义一个图像映射（一个可点击的链接区域）。

尝试一下
----

属性
--

这个元素包含全局属性。

`name`

`name` 属性给予该映射引用的名称，这个属性必须存在，值不得为空并且不能带空格。`name` 属性的值不得与同文档中其他 `<map>` 元素的该属性值相同，如果还指定了 `id` 属性，则两个属性的值必须相同。

示例
--

### 含有两个区域的图像映射

单击左侧的鹦鹉访问 JavaScript 页面，单击右侧的鹦鹉访问 CSS 页面。

#### HTML


```html
<!-- 图片由 Unsplash 上的 Juliana e Mariana Amorim 创作 -->
<map name="primary">
  <area
 shape="circle"
 coords="75,75,75"
 href="https://developer.mozilla.org/docs/Web/JavaScript"
 target="\_blank"
 alt="JavaScript" />
  <area
 shape="circle"
 coords="275,75,75"
 href="https://developer.mozilla.org/docs/Web/CSS"
 target="\_blank"
 alt="CSS" />
</map>
<img
 usemap="#primary"
 src="parrots.jpg"
 alt="两只鹦鹉的照片，大小为 350 x 150" />
```


#### 结果

技术概要
----

|  |  |
| --- | --- |
| 内容类别 | 流式内容、短语内容、可感知内容。 |
| 允许的内容 | 任何透明元素。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受短语内容的元素。 |
| 隐式 ARIA 角色 | 没有相应的角色 |
| 允许的 ARIA 角色 | 没有允许的 `role` |
| DOM 接口 | `HTMLMapElement` (en-US) |

规范
--

| Specification |
| --- |
| HTML Standard # the-map-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<a>`
* `<area>`
<marquee>
=========

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

HTML marquee 元素（`<marquee>`）用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。

**警告：** `<marquee>` 元素已经**过时**，请不要再使用。尽管一些浏览器仍然支持它，但它不是必须的。此外，使用这个元素基本上是你可以对你的用户做最糟糕的事情之一，所以请不要这样做。

属性
--

`behavior`

设置文本在 marquee 元素内如何滚动。可选值有 `scroll`，`slide` 和 `alternate`。如果未指定值，默认值为 `scroll`。

`bgcolor`

通过颜色名称或十六进制值设置背景颜色。

`direction`

设置 marquee 内文本滚动的方向。可选值有 `left`, `right`, `up` and `down。`如果未指定值，默认值为 `left`。

`height`

以像素或百分比值设置高度。

`hspace`

设置水平边距。

`loop`

设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动。

`scrollamount`

设置每次滚动时移动的长度（以像素为单位）。默认值为 6。

`scrolldelay`

设置每次滚动时的时间间隔（以毫秒为单位）。默认值为 85。请注意，除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。

`truespeed`

默认情况下，会忽略小于 60 的 scrolldelay 值。如果存在 truespeed，那些值不会被忽略。

`vspace`

以像素或百分比值设置垂直边距。

`width`

以像素或百分比值设置宽度。

事件回调
----

`onbounce`

当 marquee 滚动到结尾时触发。它只能在 behavior 属性设置为 alternate 时触发。

`onfinish`

当 marquee 完成 loop 属性设置的值时触发。它只能在 loop 属性设置为大于 0 的某个数字时触发。

`onstart`

当 marquee 开始滚动时触发。

方法
--

start

开始滚动 marquee。

stop

停止滚动 marquee。

示例
--


```html
<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee
 direction="down"
 width="250"
 height="200"
 behavior="alternate"
 style="border:solid">
  <marquee behavior="alternate">This text will bounce</marquee>
</marquee>
```

规范
--

| Specification |
| --- |
| HTML Standard # the-marquee-element-2 |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<main>
======

HTML **`<main>` 元素**呈现了文档的 `<body>` 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

尝试一下
----

* *内容类别*Flow content, palpable content.
* *允许内容* Flow content.
* *标签省略*无; 开始与结束都是强制性。
* *被允许的父级元素*任何支持流内容但可能不是继承元素的 元素`<article>`, `<aside>`, `<footer>`, `<header>`, 或`<nav>`
* *DOM 接口* `HTMLElement`
属性
--

此元素仅包含全局属性。

使用说明
----

在文档中，`<main>` 元素的内容应当是独一无二的。任何同时存在于任意一系列文档中的相同、重复内容，比如侧边栏、导航栏链接、版权信息、网站 Logo，搜索框（除非搜索框为文档的主要功能），都不应当被包含在其内。

`<main>` 对文档的大纲（outline）没有贡献；也就是说，它与诸如 `<body>` 之类的元素，诸如 `<h2>` (en-US) 之类的标题等不同，`<main>` 不会影响 DOM 的页面结构概念。它仅有提供信息的作用。（原文：It's strictly informative.）

示例
--


```html
<!-- 其他内容 -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>
      These bright red apples are the most common found in many supermarkets.
    </p>
    <p>...</p>
    <p>...</p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for apple pies.</p>
    <p>...</p>
    <p>...</p>
  </article>
</main>

<!-- 其他内容 -->
```

无障碍相关
-----

### 界标

`<main>` 元素的行为与 `main` 界标 (en-US)所定义的角色相一致。 界标可被辅助技术使用，以快速识别并将用户导航到文档中的分段。通常使用 `<main>` 元素，而不是定义 `role="main"`，除非是考虑对于旧浏览器的兼容性.

### 直达内容

直达内容（skipnav），是一种辅助功能技术，使其用户可以快速跳过大段的重复内容（如主导航栏、信息横幅等）。这允许用户更快地访问到页面的主要内容。

向 `<main>` 元素添加 `id` 属性后，该元素可成为直达内容链接的目标。
```

<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>
</body>
```


* WebAIM: 直达链接
### 阅读器模式

浏览器的阅读器模式会寻找文档中的`main` 元素，以及 标题元素 和 内容分区元素 以便将内容转换至阅读器视图。

* 为 Safari 阅读器模式以及其他阅读器应用构建网站
规范
--

| Specification |
| --- |
| HTML Standard # the-main-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

`<main>` 标签受广泛支持。对于 IE 浏览器 11 版本和低于 11 的版本，推荐向 `<main>` 元素添加 `"main" 这一` ARIA 角色，以保证其无障碍。(屏幕阅读器，如 JAWS，当与较旧版本的 Internet Explorer 一起使用时，需包括此 `role` 属性才能理解 `<main>` 元素的语义含义）


```html
<main role="main">...</main>
```

参见
--

* 基本结构元素：`<html>`、`<head>`、`<body>`
* 分段相关元素：`<article>`、`<aside>`、`<footer>`、`<header>`, 或 `<nav>`
<dfn>
=====

摘要
--

*HTML 定义元素* (**<dfn>**) 表示术语的一个定义。

**备注：** `<dfn>` 元素标记了被定义的术语；术语定义应当在 `<p>`, `<section>`或定义列表 (通常是`<dt>`, `<dd>` 对) 中给出。

* 被定义术语的值由下列规则确定：
    1. 如果 `<dfn>` 元素有一个 **`title`** 属性，那么该术语的值就是该属性的值。
    2. 否则，如果它仅包含一个 `<abbr>` 元素，该元素拥有 `title` 属性，那么该术语的值就是该属性的值。
    3. 否则，`<dfn>` 元素的文本内容就是该术语的值。


|  |  |
| --- | --- |
| 内容分类 | Flow content, phrasing content, palpable content. |
| 允许的内容 | Phrasing content, but no `<dfn>` element must be a descendant. |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | Any element that accepts phrasing content. |
| DOM 接口 | `HTMLElement` |

属性
--

该元素包括 全局属性 (en-US)。

在 HTML5 中，**`title`** 属性拥有特殊含义，见上文。

示例
--

下列示例是合法的 HTML5。


```html
<!-- Define "The Internet" -->
<p>
  <dfn id="def-internet">The Internet</dfn> is a global system of interconnected
  networks that use the Internet Protocol Suite (TCP/IP) to serve billions of
  users worldwide.
</p>
```


在同一文档的后面：


```html
<dl>
  <!-- Define "World-Wide Web" and reference definition for "the Internet" -->
  <dt>
    <dfn>
      <abbr title="World-Wide Web">WWW</abbr>
    </dfn>
  </dt>
  <dd>
    The World-Wide Web (WWW) is a system of interlinked hypertext documents
    accessed on <a href="#def-internet">the Internet</a>.
  </dd>
</dl>
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # the-dfn-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

相关链接
----

* 定义列表的相关元素：`<dl>`, `<dt>`, `<dd>`
* `<abbr>`
<mark>
======

概要
--

HTML 标记文本元素 (< Mark >) 表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。

这个 *HTML mark* 标签代表突出显示的文字，例如可以为了**标记**特定上下文中的文本而使用这个标签\*\*.\*\* 举个例子，它可以用来显示搜索引擎搜索后关键词

* *内容分类* Flow content (en-US), phrasing content (en-US), palpable content.
* *允许的内容* Phrasing content (en-US).
* *标签省略* 不允许，开始标签和结束标签都不能省略。
* *允许的父元素*任何接受phrasing content (en-US) 的元素。
* *DOM 接口* `HTMLElement`
属性
--

这个元素只包含了 全局属性 (en-US).

使用说明
----

`<mark>`元素的典型使用场景包括：

* 当用在引用（`<q>`、`<blockquote>`）中时，通常用来显示有特殊意义的文本，但不在原材料中标记出来；或者是用来显示特殊审查的材料，即使原作者不认为它特别重要。
* 另外，<mark>元素还用来显示与用户当前活动相关的一部分文档内容。例如，它可能被用于显示匹配搜索结果中的单词。
* 不要为了语法高亮而用 `<mark>` 元素; 你应该用 *`<strong>`* 元素结合适当的 CSS 来实现这个目的（语法高亮）。

**备注：** 不要把 `<mark>` 元素和 `<strong>` 元素搞混淆；`<strong>` 元素用来表示文本在上下文的重要性的，而 `<mark>` 元素是用来表示上下文的关联性的。

示例
--


```html
<p>&lt;mark&gt; 元素用于 <mark>高亮</mark> 文本</p>
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # the-mark-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Other text-level semantics elements: `<a>`, `<em>`, `<strong>`, `<cite>`, `<q>`, `<dfn>`, `<abbr>`, `<time>`, `<code>`, `<var>`, `<samp>`, `<kbd>`, `<sub>`, `<sup>`, `<i>`, `<b>`, `<mark>`, `<ruby>`, `<rp>`, `<rt>`, `<bdo>`, `<span>`, `<br>`, `<wbr>`.
<var>：表示变量的元素
=============

HTML **`<var>`** 元素表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器，但通常使用当前字体的斜体形式显示。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容、
 短语内容、可感知内容
  |
| 允许的内容 | 短语内容 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 显式 ARIA 角色 | 没有相应角色 |
| 允许的 ARIA 角色 | 任何 |
|
| DOM 接口 | `HTMLElement` |

属性
--

本元素仅包含全局属性。

使用说明
----

### 相关元素

与 `<var>` 一同使用的元素一般包含：

* `<code>`：HTML 代码元素
* `<kbd>`：HTML 键盘输入元素
* `<samp>`：HTML 示例输出元素

如果遇到的代码是出于样式目的而不是语义目的地错误使用 `<var>`，应该使用带有适当 CSS 的 `<span>` 元素或者在下列元素中使用适当的语义元素。

* `<em>`
* `<i>`
* `<q>`
### 默认样式

大部分浏览器在渲染 `<var>` 元素时为 `font-style` 赋予 `"italic"` 样式，此样式可像这样由 CSS 覆盖：


```css
var {
  font-style: normal;
}
```

示例
--

### 基本示例

这里有一条基本示例，使用 `<var>` 来代表数学方程式的变量名称。


```html
<p>一个简单的方程式：<var>x</var> = <var>y</var> + 2</p>
```


输出为：

### 覆盖默认样式

使用 CSS 可以为 `<var>` 元素覆盖样式。在这个示例中，如果 Courier 字体可用，将使用该字体渲染变量名称，否则会回退至默认的等宽字体。

#### CSS


```css
var {
  font:
    bold 15px "Courier",
    "Courier New",
    monospace;
}
```


#### HTML


```html
<p>
  变量 <var>minSpeed</var> 和
  <var>maxSpeed</var> 控制设备的最低和最高速度，以每分钟转数（RPM）计算。
</p>
```


此 HTML 使用 `<var>` 来包裹两个变量的名称。

#### 运行结果

规范
--

| Specification |
| --- |
| HTML Standard # the-var-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<plaintext>
===========

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

概述
--

*HTML 纯文本元素* (`<plaintext>`) 将起始标签后面的任何东西渲染为纯文本，不会解释为 HTML。它没有闭合标签，因为任何后面的东西都会看做纯文本。

**备注：** 不要使用这个元素。

* 它自从 HTML3.2 就废弃了，并且所有浏览器也不会实现它。此外，它在 HTML5 中已过时；仍然接受它的浏览器，可能将其看做 `<pre>` 元素，它仍然会解释其中的 HTML，即使这不是你想要的结果。
* 如果 `<plaintext>` 元素是页面的第一个元素（除了任何不显示的元素），那就不要使用 HTML 了。配置你的服务器，使用 `text/plain` MIME-type (en-US) 来发送你的页面。
* 不要使用这个元素，你应该使用 `<pre>` 元素，或者如果满足语义的话，使用 `<code>` 元素。要确保转义了任何 '`<`' 、' `>`' 和 "&" 字符，来避免将内容解释为 HTML。
* 等宽字体也可以显示在 `<div>` 元素中，通过使用足够的 CSS 样式，在 `font-family` 中将 `monospace` 用作通用字体（generic-font）的值。

属性
--

除了 全局属性 之外，这个元素没有其他属性。

DOM 接口
------

元素实现了 `HTMLElement` 接口。

**备注：** 直到 Gecko 1.9.2（包含），Firefox 为这个元素实现了 `HTMLSpanElement` 接口。

另见
--

* `<pre>` 和 `<code>` 元素可以用于替代。
* `<listing>` 和 `<xmp>` 元素，类似于 `<plaintext>` 但是也过时了。
<font>
======

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

概要
--

*HTML Font 元素*（`<font>`）定义了该内容的字体大小、顏色与表现。

**备注：** 不要使用这个元素！请使用 CSS 字体属性来为文本添加样式。

属性
--

如同其他 HTML 元素，这个元素支持全局属性 (en-US)。

`color` 
已弃用

这个属性使用颜色名称或是十六进制的 #RRGGBB 格式，来设置文字的颜色。

`face` 
已弃用

这个属性列出了一个或多个逗号分隔的字体名称。默认样式中的文档文字，会使用客户端浏览器所支持的，第一个字体风格来渲染。如果本地系统中并没有安装列出的字体，浏览器会使用系统预设的均衡（proportional）或等宽（fixed-width）字体。

`size` 
已弃用

该属性将字体大小指定为数字或相对值。数值范围从 `1` 到 `7`，其中 `1` 是最小的，`3` 是默认值。可以使用相对值来定义它，例如 `+2` 或 `-3`，这将其设置为相对于默认值 `3`。

DOM 接口
------

这个元素实现了 `HTMLFontElement` (en-US) 接口。

规范
--

| Specification |
| --- |
| HTML Standard # font |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<embed>：外部内容嵌入元素
================

**HTML `<embed>` 元素**将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供。

**备注：** 这篇文档仅定义该元素在 HTML5 中定义的部分，不包含该元素之前的声明内容和非标准的实现。

请记住，大多数现代浏览器已经弃用并取消了对浏览器插件的支持，所以如果你希望你的网站可以在普通用户的浏览器上运行，那么依靠 `<embed>` 通常是不明智的。

|  |  |
| --- | --- |
| Content categories (en-US) | Flow content (en-US), phrasing content (en-US), embedded content, interactive content, palpable content. |
| Permitted content | None, it is an empty element. |
| Tag omission | Must have a start tag, and must not have an end tag. |
| Permitted parents | Any element that accepts embedded content. |
| Permitted ARIA roles | `application` (en-US), `document` (en-US), `img` (en-US), `presentation` (en-US) |
| DOM interface | `HTMLEmbedElement` (en-US) |

属性
--

这个元素的属性包括 全局属性 (en-US)。

`height`

资源显示的高度，in CSS pixels. — (Absolute values only. NO percentages)

`src`

被嵌套的资源的 URL。

`type`

用于选择插件实例化的 MIME 类型。

`width`

资源显示的宽度，in CSS pixels. — (Absolute values only. NO percentages)

例子
--


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

规范
--

| Specification |
| --- |
| HTML Standard # the-embed-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

**备注：** 不同浏览器之间显示有差异。Blink 内核浏览器（Chrome，Opera）会显示 HTML 资源的内容，但 Firefox 会显示一条通知消息，指出内容需要一个插件（见 Firefox bug 730768）。建议使用 <object> 或 <iframe> 元素。

参见
--

* 其他用于嵌入各种类型内容的元素还包括：`<audio>`, `<canvas>`, `<iframe>`, `<img>`, `<math>`, `<object>`, `<svg>` 和 `<video>`.
<title>
=======

**HTML `<title>` 元素** 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。


```html
<title>第十五届秋季运动会</title>
```


|  |  |
| --- | --- |
| 内容分类 | 元数据内容。 |
| 允许内容 | 非空字符或特殊字符（whitespace）的文本 |
| 标签遗漏 | 同时需要开标签和闭标签。注意：遗漏 `</title>` 标签会导致浏览器忽略掉页面的剩余部分。 |
| 允许的父标签 | 一个 `<head>` 元素只能包含一个 `<title>` 元素 |
| 允许的无障碍角色 | 无 |
| DOM 接口 | `HTMLTitleElement` (en-US) |

属性
--

这个元素只拥有全局属性。

使用说明
----

<title>元素始终在页面的 `<head>` 块内使用。

### 页面标题和 SEO

页面标题的内容可能对搜索引擎优化（SEO）具有重要意义。通常，较长的描述性标题要比简短或一般性标题更好。标题的内容是搜索引擎算法用来确定在搜索结果中列出页面顺序的组件之一。同样，标题是初始的“挂钩”，你可以通过它吸引浏览浏览结果页面的读者的注意力。

撰写好标题的一些准则和技巧：

* 避免使用一两个单词的标题。对于词汇表或参考样式的页面，请使用描述性短语或术语 - 定义对。
* 搜索引擎通常显示页面标题的前 55 至 60 个字符。超出此范围的文本可能会丢失，因此请尽量不要使标题更长。如果你必须使用较长的标题，请确保重要的部分出现在前面，并且标题中可能要删除的部分中没有关键内容。
* 不要使用“关键字集合”。如果标题只是单词列表，则算法通常会降低页面在搜索结果中的位置。
* 尝试确保你的标题在你自己的网站中尽可能唯一。标题重复（或几乎重复）可能会导致搜索结果不准确。
示例
--


```html
<title>Amazing！</title>
```


本示例建立一个页面，其标题（如显示在窗口顶部或在窗口的选项卡中）为“Amazing！”。

无障碍问题
-----

提供描述页面用途的标题值很重要。

辅助技术用户的常用导航技术是读取页面标题并推断页面包含的内容。这是因为导航到页面以确定其内容可能是一个耗时且可能引起混乱的过程。

### 示例


```html
<title>菜单 - 蓝屋中餐 - FoodYum：今日可送达的在线外卖！</title>
```


为了帮助用户，更新页面标题值以反映重大的页面状态更改（例如表单验证问题）。


```html
<title>2 个异常 - 你的订单 - 海鲜店铺 - Food：今日可送达的在线外卖！</title>
```


* MDN Understanding WCAG, Guideline 2.4 explanations (en-US)
* Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0
规范
--

| Specification |
| --- |
| HTML Standard # the-title-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<center>
========

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

HTML Center 元素（`<center>`）是个块级元素，可以包含段落，以及其他块级和内联元素。这个元素的整个内容在它的上级元素中水平居中（通常是 `<body>`）。

这个标签已经在 HTML 4（以及 XHTML 1）中废除了，以支持 CSS `text-align` 属性，它可以用于 `<div>` 元素，或者独立的 `<p>`。对于居中的块，使用其他 CSS 属性，例如 `margin-left` 和 `margin-right`，并将其设置为 `auto` (或者将 `margin` 设为 `0 auto`).

DOM 接口
------

这个元素实现了 `HTMLElement` 接口。

**备注：** 直到 Gecko 1.9.2（包含）, Firefox 为这个元素实现了 `HTMLSpanElement` 接口。

示例 1
----


```html
<center>
  This text will be centered.
  <p>So will this paragraph.</p>
</center>
```

示例 2 (CSS 替代)
-------------


```html
<div style="text-align:center">
  This text will be centered.
  <p>So will this paragraph.</p>
</div>
```

示例 3 (CSS 替代)
-------------


```html
<p style="text-align:center">
  This line will be centered.<br />
  And so will this line.
</p>
```

注
-

向 `<div>` 或者 `<p>` 元素应用 `text-align``:center` 会使这些元素的*内容*居中，同时保留其整体大小不变。

另见
--

* `text-align`
* `display`
<legend>
========

**HTML <legend>** 元素用于表示其父元素 `<fieldset>` 的内容标题。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 (en-US) | 无。 |
| 允许的内容 | 语句内容（Phrasing content）。 |
| 标签忽略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | `<fieldset>` ，并且`<legend>`作为第一个子元素 |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No `role` permitted |
| DOM 接口 | `HTMLLegendElement` (en-US) |

属性
--

这个元素只有全局属性。

示例
--

在 `<form>` 中查看关于 `<legend>` 元素的示例。

规范
--

| Specification |
| --- |
| HTML Standard # the-legend-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 其他与表单相关的元素：`<form>`, `<option>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<optgroup>`, `<fieldset>`, `<textarea>`, `<input>`, `<output>`, `<progress>` 和 `<meter>`。
* ARIA: Form role (en-US)
<html>：HTML 文档/根元素
==================

HTML **`<html>`** 元素表示一个 HTML 文档的根（顶级元素），所以它也被称为*根元素*。所有其他元素必须是此元素的后代。

|  |  |
| --- | --- |
| 内容分类 | 无 |
| 允许的内容 | 一个 `<head>` 元素，后跟一个 `<body>` 元素 |
| 忽略标签 | 如果 `<html>` 元素中的第一个元素不是注释，则可以忽略开始标签。如果 `<html>` 元素没有紧接着注释，则可以忽略结束标签。 |
| 允许的父元素 | 无。这是文档的根元素。 |
| 隐式 ARIA 角色 | document (en-US) |
| 允许的 ARIA 角色 | 无 |
| DOM 接口 | `HTMLHtmlElement` |

属性
--

元素包含全局属性。

`manifest` 
已弃用

非标准

指定一个资源清单的 URI，指示应在本地缓存的资源。

`version` 
已弃用

指定控制当前文档的 HTML 版本文档类型定义。这个属性已不再需要，因为这在文档类型声明中是多余的版本信息。

`xmlns`

指派文档的 XML 命名空间 (en-US)。默认的值是`"http://www.w3.org/1999/xhtml"`。这在由 XML 解析器 (en-US)解析的文档中是必需的，而在 text/html 文档中是可选的。

示例
--


```html
<!doctype html>
<html lang="zh">
  <head>
    <!-- … -->
  </head>
  <body>
    <!-- … -->
  </body>
</html>
```

无障碍考虑
-----

虽然 HTML 并不要求作者指定 `<html>` 元素的开始和结束标记，但作者必须这样做，因为这将允许他们为网页指定 `lang`。根据 RFC 5646: 识别语言的标签（也称为 BCP 47），在 `<html>` 元素上提供一个带有有效语言标记的 `lang` 属性，将有助于屏幕阅读技术确定要发布的适当语言。标识语言标签应描述页面大部分内容所使用的语言。如果没有它，屏幕阅读器通常会默认使用操作系统设置的语言，这可能会导致发音错误。

在 `<html>` 元素中包含一个有效的 `lang` 声明，还可以确保页面的 `<head>` 中包含的重要元数据，如页面的 `<title>`，也会被正确地声明。

* MDN | 理解 WCAG，指引 3.1 的解释 (en-US)
* 理解成功准则 3.1.1 | W3C 理解 WCAG 2.1
规范
--

| Specification |
| --- |
| HTML Standard # the-html-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* MathML 顶级元素：`<math>`
* SVG 顶级元素：`<svg>`
<optgroup>
==========

\*\*HTML 元素 `<optgroup>` \*\*为`<select>` 元素中的选项创建分组。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 (en-US) | 无 |
| 允许的内容 | 0 或多个 `<option>` 元素 |
| 标签省略 | 开始标签是必须的。当该元素后面也跟着一个 <optgroup> 元素，或该元素的父元素没有其他内容时，结束标签可省略。 |
| 允许的父元素 | 一个 `<select>` 元素。 |
| Implicit ARIA role | `group` (en-US) |
| Permitted ARIA roles | No `role` permitted |
| DOM 接口 | `HTMLOptGroupElement` |

**备注：** Optgroup elements may not be nested.

属性
--

这个元素包含 global attributes (en-US)。

`disabled`

如果设置了这个布尔值，则不能选择这个选项组中的任何选项。通常浏览器会置灰这样的控件，它不接受任何浏览器事件，如鼠标点击或者焦点相关的事件。

`label`

选项组的名字，浏览器用以在用户界面中标记选项。使用这个元素时必须加上这个属性。

示例
--


```html
<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup>
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>
```

### 结果

规范
--

| Specification |
| --- |
| HTML Standard # the-optgroup-element |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 其他表单相关的元素：`<form>`, `<legend>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<option>`, `<fieldset>`, `<textarea>`, `<input>`, `<output>`, `<progress>` 和 `<meter>`。