recursal/MDN huggingface dataset:
draggable
=========

全局属性 **draggable** 是一种枚举 (en-US)属性，用于标识元素是否允许使用浏览器原生行为或 HTML 拖放操作 API 拖动。

`draggable` 属性可以应用于严格属于 HTML 命名空间 (en-US)的元素，这意味着它不能应用于 SVG。关于命名空间声明的简介和作用的更多信息，请参阅命名空间速成课。

`draggable` 可以有如下取值：

* `true`：表示元素可以被拖动
* `false`：表示元素不可以被拖动

如果该属性没有设值，则默认值 为 auto，表示使用浏览器定义的默认行为。

**警告：** 这个属性是*枚举类型* (en-US)，而不是*布尔类型*。这意味着必须显式指定值为 `true` 或者 `false`，像 `<img draggable>` 这样的简写是不允许的。正确的用法是 `<img draggable="false">`。

如果没有设置该属性，其默认值为 `auto`，这意味着拖动行为是浏览器的默认行为：只有选择的文本、图像和链接可以被拖动。对于其他元素，必须设置事件 `ondragstart` 以使拖放行为生效，如本综合实例所示。

规范
--

| Specification |
| --- |
| HTML Standard # the-draggable-attribute |

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

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

参考资料
----

* 所有全局属性。
virtualkeyboardpolicy
=====================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`virtualkeyboardpolicy`** 全局属性是一个枚举属性。当在一个元素上指定了该属性，且也同时使用了 `contenteditable` 属性时，它会控制在平板电脑、手机或其他设备上的虚拟键盘的行为，这些设备上可能没有硬件键盘。

该属性必须设置以下值之一：

* `auto` 或*空字符串*：在元素被聚焦或被点击时会自动显示虚拟键盘。
* `manual`：它会将元素的聚焦和点击与虚拟键盘的状态分离。
规范
--

| Specification |
| --- |
| VirtualKeyboard API # dom-elementcontenteditable-virtualkeyboardpolicy |

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

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

参见
--

* 所有的全局属性
* `HTMLElement.contentEditable` 和 `HTMLElement.isContentEditable`
* 虚拟键盘 API (en-US)
tabindex
========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

* Learn more
* See full compatibility
* Report feedback
**tabindex** 全局属性 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用`Tab`键，因此得名）。

尝试一下
----

它接受一个整数作为值，具有不同的结果，具体取决于整数的值：

* tabindex=负值 (通常是 tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用 JS 做页面小组件内部键盘导航的时候非常有用。
* `tabindex="0"` ，表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的 DOM 结构来决定的。
* tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照**tabindex** 的数值递增而滞后获焦。如果多个元素拥有相同的 **tabindex**，它们的相对顺序按照他们在当前 DOM 中的先后顺序决定。

根据键盘序列导航的顺序，值为 `0` 、非法值、或者没有 **tabindex** 值的元素应该放置在 **tabindex** 值为正值的元素后面。

如果我们在 `<div>` 上设置了 `tabindex` 属性，它的子元素内容不能使用箭头键来滚动，除非我们在内容上也设置 `tabindex`。查看这篇 fiddle 来理解 tabindex 的滚动影响。

**备注：** tabindex 的最大值不应超过 32767。如果没有指定，它的默认值为 0。

规范
--

| Specification |
| --- |
| HTML Standard # attr-tabindex |

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

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

另见
--

* 所有全局属性
* 反映这个属性的 `HTMLElement.tabIndex` (en-US)
* tabindex 的无障碍问题：请见 不要使用大于 0 的 Tabindex | Adrian Roselli。
popover
=======

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
全局属性 **`popover`** 用来指定一个元素为弹出式元素（popover element）。

弹出式元素通过 `display: none` 被隐藏，直到通过调用/控制元素（即带有 `popovertarget` 属性的 `<button>` 或 `<input type="button">`）或 `HTMLElement.showPopover()` (en-US) 调用打开。

当打开时，弹出式元素将出现在所有其他元素之上，即在顶层 (en-US)上，并且不会受到父元素的 `position` 或 `overflow` 样式的影响。

`popover` 属性可以有 `"auto"` (en-US)（默认）或 `"manual"` (en-US) 的取值。具有 `auto` 状态的弹窗可以通过在弹窗之外的区域进行选择，以达到“轻触关闭”的目的，并且通常一次仅允许屏幕上显示一个弹窗。相比之下，`manual` 弹窗必须始终明确隐藏，但可以用于菜单中嵌套弹窗等使用情况。

有关更详细的使用信息，请参阅 Popover API (en-US) 页面。

示例
--

下述代码将呈现一个按钮，它将打开一个弹出式元素。


```html
<button popovertarget="my-popover">打开 Popover</button>

<div popover id="my-popover">大家好！欢迎你们！</div>
```


**备注：** 请参阅我们的 Popover API 示例页面以访问所有的 MDN popover 示例。

规范
--

| Specification |
| --- |
| HTML Standard # the-popover-attribute |

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

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

参见
--

* Popover API (en-US)
id
==

**`id`** 全局属性定义了一个全文档唯一的标识符（ID）。它用于在链接（使用片段）、脚本和样式（通过 CSS）中辨识元素。

尝试一下
----

**警告：** 该属性的值是一个不透明（opaque）字符串，这意味着网页开发者不能使用它来传递人类可读的信息。然而，具有一定可读性的 ID（如使用 `ticket-18659` 而不是 `r45tgfe-freds&$@`）可以有助于理解代码。

`id` 的值不得包含空格和制表符等空白字符。浏览器会将不符合规范的 ID 中的空白字符视为 ID 的一部分。与允许以空格分隔值的 `class` 属性不同，元素只能拥有一个 ID 值。

**备注：** 从技术上讲，`id` 属性的值可以包含除了空白字符的任何字符。然而，为了避免无意中的错误，只能使用 ASCII 字母、数字、`'_'` 和 `'-'`，并且`id` 属性的值应该以字母开头。例如，`.` 在 CSS 中具有特殊的意义（它作为一个类选择器）。除非你注意在 CSS 中转义它，否则它不会被识别为 `id` 属性值的一部分。很容易忘记这样做，导致你的代码中出现难以检测的错误。

规范
--

| Specification |
| --- |
| HTML Standard # global-attributes:the-id-attribute-2 |

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

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

参见
--

* 所有的全局属性。
* 反映该属性的 `Element.id`。
* `Document.getElementById` 方法。
* CSS ID 选择器。
contenteditable
===============

全局属性 **`contenteditable`** 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑。

尝试一下
----

该属性必须是下面的值之一：

* `true` 或*空字符串*，表示元素是可编辑的。
* `false` 表示元素不是可编辑的。
* `plaintext-only` 表示元素的原始文本是可编辑的，但富文本格式会被禁用。

如果没有设置该属性的值（例如：`<label contenteditable>Example Label</label>`），则其值被视为空字符串。

如果没给出该属性或设置了无效的属性值，则其默认值*继承*自父元素：即，如果父元素可编辑，该子元素也可编辑。

注意，虽然该属性允许设定的值包括 `true` 和 `false`，但该属性仍是一个*枚举* (en-US)属性而非*布尔*属性。

你可以使用 CSS `caret-color` 属性设置用于绘制文本插入 caret (en-US) 的颜色。

规范
--

| Specification |
| --- |
| HTML Standard # attr-contenteditable |

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

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

参见
--

* 所有的全局属性
* `HTMLElement.contentEditable` 和 `HTMLElement.isContentEditable`
* CSS `caret-color` 属性
* Element `input` 事件
<header>
========

**HTML `<header>` 元素**用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

尝试一下
----

|  |  |
| --- | --- |
| 内容类型 (en-US) | Flow content (en-US)，palpable content。 |
| 许可内容 | Flow content (en-US)，但是不允许 `<header>` 或`<footer>` 成为子元素 |
| 标记省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受 flow content (en-US) 的元素。注意 `<header>` 元素不能作为 `<address>`、`<footer>` 或另一个 `<header>` 元素的子元素。 |
| 允许的 ARIA 角色 | `group` (en-US)，`presentation` (en-US) |
| DOM 接口 | `HTMLElement` |

使用提示
----

`<header>` 元素不是分段内容，因此不会往 大纲 中引入新的段落。也就是说，`<header>` 元素通常用于包含周围部分的标题（`h1` 至 `h6` 元素），但这**不是**必需的。

属性
--

此元素仅拥有 全局属性 (en-US)。

示例
--

### 页面的 Header


```html
<header>
  <h1>主页标题</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>
```

### 文章的 Header


```html
<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>Posted on Wednesday, 4 October 2017 by Jane Smith</p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p>
    <a href="https://janesmith.com/the-planet-earth/">Continue reading....</a>
  </p>
</article>
```

规范
--

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

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

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

参见
--

* Others section-related elements: `<body>`, `<nav>`, `<article>`, `<aside>`, `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), `<h6>` (en-US), `<hgroup>`, `<footer>`, `<section>`, `<address>`;
* Sections and outlines of an HTML5 document.
<head>：文档元数据（头部）元素
==================

HTML **`<head>`** 元素包含机器可读的文档相关信息（元数据），如文档的标题、脚本和样式表。

**备注：** `<head>` 主要保存供机器处理的信息，而非人类可读信息。对于人类可见的信息，如顶级标题和列出的作者，请参见 `<header>` 元素。

属性
--

该元素包含全局属性。

`profile` 
已弃用

非标准

由空白字符分隔的一个或多个元数据配置文件的 URI。

示例
--


```html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>文档标题</title>
  </head>
</html>
```

技术概要
----

|  |  |
| --- | --- |
| 内容分类 | 无 |
| 允许的内容 | 如果文档是 `<iframe>` `srcdoc` 文档，或者标题信息可从更高级别的协议（如 HTML 电子邮件中的主题行）中获得，则允许包含零个或多个元数据内容元素。
否则，可包含一个或多个元数据内容元素，其中 `<title>` 元素恰好有一个。 |
| 标签省略 | 如果 `<head>` 元素内的第一个内容是一个元素，则可以省略开始标记。如果 `<head>` 元素后的第一个内容不是空格符或注释，则可以省略结束标记。 |
| 允许的父元素 | 一个 `<html>` 元素，作为它的第一个子元素。 |
| 隐式 ARIA 角色 | 没有相应的角色 |
| 允许的 ARIA 角色 | 没有允许的 `role` |
| DOM 接口 | `HTMLHeadElement` |

规范
--

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

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

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

参见
--

* 可用于 `<head>` 内部的元素：
    + `<title>`
    + `<base>`
    + `<link>`
    + `<style>`
    + `<meta>`
    + `<script>`
    + `<noscript>`
    + `<template>`
<datalist>：HTML 数据列表元素
======================

HTML **`<datalist>`** 元素包含了一组 `<option>` 元素，这些元素表示其他表单控件可选值。

尝试一下
----

* *内容范畴 (en-US)*流内容 (en-US)，段落内容 (en-US)。
* *允许内容*要么 段落内容 (en-US) 要么 0 个或多个 `<option>`元素。
* *遗漏标签*不允许，开始标签和结束标签都不能省略。
* *允许父级元素*任何接受段落内容 (en-US)的元素。
* \_Permitted ARIA roles\_None
* *DOM 接口*`HTMLDataListElement` (en-US)
属性
--

该元素除了公用的全局属性之外，没有其他属性。

示例
--


```html
<label
 >Choose a browser from this list: <input list="browsers" name="myBrowser"
/></label>
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Internet Explorer"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
</datalist>
```

### 结果

规范
--

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

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

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

参见
--

* `<input>` 元素，它更特殊的 `list` 属性;
* `<option>`元素。
<rtc>
=====

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

**HTML `<rtc>` 元素**包含文字的语义注解，它们在 `<rb>` 元素中展示。`<rb>` 元素可以拥有发音 (`<rt>`) 和语义 (`<rtc>`) 注解。

|  |  |
| --- | --- |
| 内容分类 | 无 |
| 允许的内容 | 短语内容 或者 `<rt>` 元素 |
| 标签省略 | 如果它紧紧跟随`<rb>`，`<rtc>` 或者 `<rt>` 元素的起始标签，或父元素的闭合标签，它的闭合标签就可以省略。 |
| 允许的父元素 | `<ruby>` 元素。 |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLElement` |

属性
--

该元素仅仅包含 全局属性 (en-US)

示例
--


```html
<ruby>
  <rb>旧</rb>
  <rb>金</rb>
  <rb>山</rb>
  <rt>jiù</rt>
  <rt>jīn</rt>
  <rt>shān</rt>
  <rtc>San Francisco</rtc>
</ruby>
```

规范
--

| Specification |
| --- |
| HTML Standard # rtc |

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

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

另见
--

* `<ruby>`
* `<rp>`
* `<rb>`
* `<rt>`
<i>：术语文本元素
==========

概述
--

**HTML 元素 `<i>`** 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。

* *Content catergories* Flow content, phrasing content, palpable content.
* *允许量* phrasing content.
* *标签忽略* 不允许，开始标签和结束标签都不能省略。
* *Permitted parent elements* Any element that accepts phrasing content.
* *DOM interface* `HTMLElement` Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the `HTMLSpanElement` interface for this element.
属性
--

该元素只包含 全局属性。

示例
--


```html
<p>
  The Latin phrase <i class="latin">Veni, vidi, vici</i> is often mentioned in
  music, art, and literature
</p>
```

### 效果

The Latin phrase *Veni, vidi, vici* is often mentioned in music, art, and literature

注释
--

在较早版本的 HTML 技术参数声明中，`<i>` 标签只是一个用于将文本显示为斜体的表示性元素，很像 `<b>` 标签被用来将文本显示为粗体。情况不再是这样了，因为这些标签现在定义了更多的语义而不只是排版外观。`<i>` 标签应表现一系列带有不同语义的文本，它的典型样式显示为斜体。这意味着浏览器通常任会将内容显示为斜体，但是，根据定义，不再是必须的。

该元素只在没有更适合的语义元素表示时使用。例如：

* 使用 `<em>` 表示强调或重读。
* 使用 `<strong>` 表示重要性。
* 使用 `<mark>` 表示相关性。
* 使用 `<cite>` 标记著作名，如一本书、剧本或是一首歌。
* 使用 `<dfn>` 标记术语的定义实例。

使用**class**属性用来识别为何使用该元素是一个很好的办法，这样的话，如果该表示以后需要改变，就可以有选择性地改变样式表。

规范
--

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

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

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

**HTML `<ruby>` 元素** 被用来展示东亚文字注音或字符注释。

|  |  |
| --- | --- |
| 内容范畴 | 流式内容, 短语内容, palpable content. |
| 允许内容 | 短语内容 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父级元素 | See prose |
| DOM 接口 | `HTMLElement` |

属性
--

本元素支持 全局属性。

示例
--

### 示例 1: 字


```html
<ruby>
  汉 <rp>(</rp><rt>han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
```

### 示例 2: 词


```html
<ruby> 明 日 <rp>(</rp><rt>ming ri</rt><rp>)</rp> </ruby>
```

规范
--

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

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

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

参阅
--

* `<rt>`
* `<rp>`
* `<rb>`
* `<rtc>`
* `<rbc>`
* `text-transform`: full-size-kana
<sup>：上标元素
==========

HTML **`<sup>` 元素**定义仅出于排版目的而显示为上标的行内文本。上标通常以较小的文本在高出基线的位置呈现。

尝试一下
----

属性
--

该元素仅包含全局属性。

使用说明
----

`<sup>` 元素应该只用于排版目的，也就是改变文本的位置以符合印刷习惯或标准，而不能仅用于呈现或外观的目的。

例如，要为企业或产品的字体商标添加抬高基线的样式，应该使用 CSS（很可能是 `vertical-align`）而不是 `<sup>`。可以使用 `vertical-align: super` 或者 `vertical-align: 50%` 来将基线上移 50%。

适当的 `<sup>` 用例包括（但不限于）：

* 显示指数，例如“x3”。对于这种情况，尤其是在更复杂的情况下，考虑使用 MathML。请参阅下面的示例中的指数。
* 显示上标字母，在某些语言中用于呈现某些缩写词。例如，在法语中，单词“mademoiselle”可以缩写为“Mlle”；这是可接受的用例。请参阅示例上标字母。
* 表示序数，例如用“4th”来代替“fourth”。请参阅示例序数。
示例
--

### 指数

指数，或者说是数字的幂，是上标文本最常见的用法之一。例如：


```html
<p>
  物理学中最常见的方程之一：<var>E</var>=<var>m</var><var>c</var><sup>2</sup>。
</p>
```


#### 结果

### 上标字母

从技术上讲，上标字母与上标不是同一回事。但是，在 HTML 中使用 `<sup>` 来呈现上标字母是很常见的。一种最常见的上标字母用法是在法语中呈现某些缩写词：


```html
<p>Robert a présenté son rapport à M<sup>lle</sup> Bernard.</p>
```


#### 结果

### 序数

序数，例如英语中的“fourth”或西班牙语中的“quinto”，可以使用数字和以上标形式呈现的特定于语言的文本缩写来表示：


```html
<p>序数词“fifth”在不同语言中的缩写如下：</p>
<ul>
  <li>英语：5<sup>th</sup></li>
  <li>法语：5<sup>ème</sup></li>
</ul>
```


#### 结果

技术概要
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容、短语内容、可感知内容。 |
| 允许的内容 | 短语内容。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受短语内容的元素。 |
| 隐式 ARIA 角色 | `superscript (en-US)` |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLElement` |

规范
--

| Specification |
| --- |
| HTML Standard # the-sub-and-sup-elements |

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

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

参见
--

* HTML `<sub>` 元素会产生下标。注意，你不能同时使用它们，你需要使用 MathML 来同时产生化学符号旁边的下标和上标，代表它的序号和核子数。
* MathML 元素：`<msub>`、`<msup>` 和 `<msubsup>`。
* CSS `vertical-align` 属性。
<small>
=======

HTML 中的<small>元素將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在 HTML5 中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容 (en-US)， 短语内容 (en-US) |
| 允许的内容 | 短语内容 (en-US) |
| 标签省略 | 无，必须拥有起始和结束标签 |
| 允许的父元素 | 接受短语内容 (en-US)或者流式内容 (en-US)的任何元素。 |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLElement` |

属性
--

这个元素只有全局属性。

DOM 接口
------

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

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

例子
--

### 例子 1


```html
<p>
  This is the first sentence.
  <small>This whole sentence is in small letters.</small>
</p>
```


#### 结果

This is the first sentence. This whole sentence is in small letters.

### 例子 2 (CSS 替代)


```html
<p>
  This is the first sentence.
  <span style="font-size:0.8em">This whole sentence is in small letters.</span>
</p>
```


#### 结果

This is the first sentence. This whole sentence is in small letters.

规范
--

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

注意事项
----

尽管 <small> 元素，<b> 元素和 <i> 元素被认为违反了结构和样式分离的原则，但是在 HTML5 中是允许使用这三个元素的。读者应该自行判断使用 <small> 还是 CSS。

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

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

另请参考
----

* `<b>`
* `<font>`
* `<style>`
* HTML 4.01 规范： 字体样式
<bdo>: 双向文本替代元素
===============

HTML 双向文本替代元素 (**`<bdo>`**) 改写了文本的方向性，使文本以不同的方向渲染呈现出来 (override 可以翻译很多意思，编程语言中多用覆盖，重载；这里采用了 Google 的整体翻译，取替代替换改写之意)

尝试一下
----

文本的字符是从给定方向的起始点绘制的; 各个字符的方向不受影响 (因此字符集不会向后拉，例如).

|  |  |
| --- | --- |
| 内容分类 | 流式元素, 短语元素, 显式元素。 |
| 许可内容 | 短语元素. |
| 标记省略 | 不允许，开始标签和结束标签都不能省略。 |
| 许可父级元素 | 接受短语元素的任何元素 |
| 隐式 ARIA 角色 | No corresponding role |
| 许可 ARIA 角色 | 任何 |
| DOM 接口 | `HTMLElement`直到 Gecko 1.9.2 (包括 Firefox 4) 为止，Firefox 均为此元素实现 HTMLSpanElement 接口。 |

属性
--

元素属性包含全局属性

`dir`

在此元素内容中呈现文本的方向。可能的值是：

* ltr: 指示文本应从左到右的方向。
* rtl: 指示文本应从右到左的方向。

示例
--


```html
<!-- Switch text direction -->
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
```

### 结果

注意
--

HTML 4 规范未指定此元素的事件。它们是在 XHTML 中添加的。这很可能是疏忽。

规范
--

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

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

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

参见
--

* 相关 HTML: `<bdi>`
<kbd>
=====

摘要
--

HTML 键盘输入元素 (**<kbd>**) 用于表示用户输入，它将产生一个行内元素，以浏览器的默认 monospace 字体显示。

|  |  |
| --- | --- |
| Content categories (en-US) | Flow content (en-US), phrasing content (en-US), palpable content. |
| Permitted content | Phrasing content (en-US). |
| Tag omission | 不允许，开始标签和结束标签都不能省略。 |
| Permitted parent elements | Any element that accepts phrasing content (en-US). |
| DOM interface | `HTMLElement` Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the interface `HTMLSpanElement` for this element. |

属性
--

该元素仅支持全局属性 (en-US).

示例
--


```html
<p>
  Type the following in the Run dialog: <kbd>cmd</kbd><br />Then click the OK
  button.
</p>

<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
```

### 结果

 Type the following in the Run dialog: `cmd`
 Then click the OK button.

Save the document by pressing `Ctrl` + `S`

#### 结果说明：

此显示效果为 MDN 特殊显示效果，无法更改。具体显示效果请自行测试。

注意
--

通过定义 CSS 规则可以改变 kbd 的默认字体。用户首选项设置可能会比该 CSS 规则具有更高优先级。

当<kbd>元素处于<samp>元素之中时，它代表着被系统回显的输入。

当<kbd>元素中包含<samp>元素时，该输入是基于系统输出的，比如调用某个菜单项。

当<kbd>元素处于另一个<kbd>元素之中时，它代表了一个实际的按键，或是该输入机制下的某个单位输入。

规范
--

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

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

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

参阅
--

* `<code>`
<noframes>
==========

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

概述
--

`<noframes>` 是个 HTML 元素，用于支持不支持 `<frame>` 元素的浏览器，或者这样配置的浏览器。

你可以在 `<noframes>` 中使用任何 HTML 元素，它预期可以在 `<body>` 中看到，除了 `<frameset>` 和 `<frame>` 元素。

**备注：** 由于所有主流浏览器都支持帧，这个元素一般不需要使用。它也在 HTML5 中完全过时，并且应该避免使用，来遵循标准。

属性
--

就像其他 HTML 元素那样，这个元素支持 全局属性。

示例
--


```html
<frameset cols="50%,50%">
  <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" />
  <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
  <noframes>
    <p>
      It seems your browser does not support frames or is not configured do so.
    </p>
  </noframes>
</frameset>
```

另见
--

* `<frameset>`
* `<frame>`
<data>
======

**HTML `<data>` 元素**将一个指定内容和机器可读的翻译联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用 `<time>`。

尝试一下
----

|  |  |
| --- | --- |
| Content categories | Flow content, phrasing content, palpable content. |
| Permitted content | Phrasing content. |
| Tag omission | 不允许，开始标签和结束标签都不能省略。 |
| Permitted parents | Any element that accepts phrasing content. |
| DOM 接口 | `HTMLDataElement` (en-US) |

属性
--

该元素支持全局属性 (en-US)。

`value`

该属性指定元素内容所对应的数据，或者说“机器可读的翻译”。

示例
--

下面的示例展示了一些产品名称，而且每个名称都和一个产品编码相关联。


```html
<p>新产品</p>
<ul>
  <li><data value="398">迷你番茄酱</data></li>
  <li><data value="399">巨无霸番茄酱</data></li>
  <li><data value="400">超级巨无霸番茄酱</data></li>
</ul>
```

规范
--

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

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

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

参见
--

* HTML `<time>` 元素。
<frameset>
==========

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

概述
--

`<frameset>` 是一个用于包含 `<frame>` 的 HTML 元素。

**备注：** 现在不鼓励使用 frame，而是用`<iframe>`。现今的网站一般都不使用 frame。

属性
--

像所有其他的 HTML 元素一样，这个元素支持全局属性。

`cols`

这个属性指定一个框架集中列的数目和尺寸。

`rows`

这个属性指定一个框架集中行的数目和尺寸。

例子
--


```html
<frameset cols="50%,50%">
  <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" />
  <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
</frameset>
```

Browser compatibility
---------------------

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

参见
--

* `<frame>`
* `<iframe>`
<big>
=====

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

概要
--

The HTML Big Element (`<big>`) 会使字体加大一号（例如从小号 (small) 到中号 (medium)，从大号 (large) 到加大 (x-large)），最大不超过浏览器的最大字体。

**备注：** 由于它是纯显示性的，该元素在HTML5 (en-US)中已经被移除，不应当再使用。取而代之，网页开发者应当使用 CSS 属性。

属性
--

只包含 全局属性 (en-US)

示例 1
----


```xml
<p>
  This is the first sentence. <big>This whole
  sentence is in bigger letters.</big>
</p>
```

示例 2 (CSS 版)
------------


```xml
<p>
  This is the first sentence. <span style="font-size:1.2em">This whole
  sentence is in bigger letters.</span>
</p>
```

### 结果

This is the first sentence. This whole sentence is in bigger letters.

DOM 接口
------

该元素实现了 `HTMLElement`接口。

**备注：** 直到 Gecko 1.9.2, Firefox 为该元素实现了`HTMLSpanElement`接口。

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

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

参见
--

* `<small>`, `<font>`, `<style>`
* HTML 4.01 Specification: Font Styles
<frame>
=======

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

概述
--

`<frame>` 是 HTML 元素，它定义了一个特定区域，另一个 HTML 文档可以在里面展示。帧应该在 `<frameset>` 中使用。

`<frame>` 的使用不应提倡，因为有一些缺点，比如性能问题，以及使用屏幕阅读器的用户缺少无障碍。比起 `<frame>`，`<iframe>` 更应该提倡。

属性
--

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

`src`

这个属性指定了由帧展示的文档。

`name`

这个属性用于给帧添加标签。如果没有标签，所有链接都会在它们所在的帧中打开。

`noresize`

这个属性避免让用户改变帧的大小。

`scrolling`

这个属性定义了滚动条的存在。如果不使用这个属性，浏览器会按需放置滚动条。有两个选择：`"yes"` 用于展示滚动条，即使是多余的；`"no"` 用于不展示滚动条，即使它是必要的。

`marginheight`

这个属性定义了帧之间的边距有多高。

`marginwidth`

这个属性定义了帧之间的边距有多宽。

`frameborder`

这个属性允许你为帧添加边框。

示例
--


```html
<frameset cols="50%,50%">
  <frame src="https://developer.mozilla.org/en/HTML/Element/iframe" />
  <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
</frameset>
```

另见
--

* `<frameset>`
* `<iframe>`
<p>：段落元素
========

HTML **`<p>`** 元素表示文本的一个段落。在视觉媒体中，段落通常表现为用空行和/或首行缩进与相邻段落分隔的文本块，但 HTML 段落可以是相关内容的任何结构分组，如图像或表格字段。

段落是块级元素，如果在关闭的 `</p>` 标签之前解析了另一个块级元素，则该标签将自动关闭。请参阅下面的“标签省略”。

尝试一下
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容、可感知内容。 |
| 允许的内容类型 | 短语内容。 |
| 标签省略 | 开始标签是必要的。如果 `<p>` 元素后面紧跟 `<address>`、`<article>`、`<aside>`、`<blockquote>`、`<div>`、`<dl>`、`<fieldset>`、`<footer>`、`<form>`、h1、h2、h3、h4、h5、h6、`<header>`、`<hr>`、`<menu>`、`<nav>`、`<ol>`、`<pre>`、`<section>`、`<table>`、`<ul>` 或其他 `<p>` 元素，或者父元素中已没有内容，且父元素不是 `<a>` 元素，则可以省略结束标签。 |
| 允许的父元素 | 任何接受流式内容的元素。 |
| 隐式 ARIA 角色 | paragraph (en-US) |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLParagraphElement` |

属性
--

这个元素包含全局属性。

**备注：** `<p>` 标签的 `align` 属性已被弃用，请不要使用。

示例
--

### HTML


```html
<p>这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。</p>
<p>这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。</p>
```

### 运行结果

为段落添加样式
-------

默认情况下，浏览器会用一个空行来分隔段落。其他分隔方法，如首行缩进，可以通过 CSS 来实现：

### HTML


```html
<p>
  用空行分隔段落最便于读者扫描，但也可以通过缩进首行来分隔段落。这样做通常是为了减少所占空间，例如节省印刷用纸。
</p>

<p>
  学校试卷和草稿等需要编辑的写作，会同时使用空行和缩进进行分隔。在完成的作品中，将两者结合起来会被认为是多余和业余的。
</p>

<p>
  在非常古老的文字中，段落之间用一种特殊的字符：¶（称为<i>段落符号</i>）分隔。如今，这个符号太密集了，难以阅读。
</p>

<p>
  究竟有多难阅读？自己试一下：
  <button data-toggle-text="换回去！">使用段落符号分隔段落</button>
</p>
```

### CSS


```css
p {
  margin: 0;
  text-indent: 3ch;
}

p.pilcrow {
  text-indent: 0;
  display: inline;
}
p.pilcrow + p.pilcrow::before {
  content: " ¶ ";
}
```

### JavaScript


```js
document.querySelector("button").addEventListener("click", (event) => {
  document.querySelectorAll("p").forEach((paragraph) => {
    paragraph.classList.toggle("pilcrow");
  });

  [event.target.innerText, event.target.dataset.toggleText] = [
    event.target.dataset.toggleText,
    event.target.innerText,
  ];
});
```

### 运行结果

无障碍考虑
-----

将内容分成段落有助于使页面更易于访问。屏幕阅读器和其他辅助技术提供的快捷方式可以让用户跳到下一个或上一个段落，让他们可以略读内容，就像留白可以让视觉用户跳来跳去一样。

使用空的 `<p>` 元素在段落之间添加空格，对于使用读屏技术浏览的人来说是有问题的。屏幕阅读器可能会显示段落的存在，但不会显示其中包含的任何内容——因为没有内容。这会让使用屏幕阅读器的人感到困惑和沮丧。

如果需要额外的空间，可以使用 CSS 属性，如 `margin` 来创建效果：


```css
p {
  margin-bottom: 2em; /\* 增加段落之后的空白 \*/
}
```

规范
--

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

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

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

参见
--

* `<hr>`
* `<br>`