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

概要
--

**HTML** 的 `<style>` 元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。

尝试一下
----

* *内容类别 (en-US)*元数据内容，如果指定了 `scoped` 属性：流内容
* *允许的内容*与 `type` 属性相匹配的文本内容，也就是 `text/css`
* *标签忽略* 不允许，开始标签和结束标签都不能省略。
* *允许的父元素* 任意接受元数据内容的元素
* \_Permitted ARIA roles\_None
* *DOM 接口* `HTMLStyleElement`
属性
--

该元素包含所有全局属性。

`type`

该属性以 MIME 类型（不应该指定字符集）定义样式语言。如果该属性未指定，则默认为 `text/css`。

`media`

该属性规定该样式适用于哪个媒体。属性的取值CSS 媒体查询，默认值为 `all`。

`nonce`

一种加密的随机数（一次使用的数字），用于在style-src Content-Security-Policy (en-US)中将内联样式列入白名单。服务器每次发送策略时都必须生成一个唯一的随机数值。提供一个无法猜测的随机数非常重要，因为绕开资源策略是微不足道的。

`title`

指定可选的样式表。

### 已淘汰属性

`scoped` 
非标准

已弃用

此属性指定样式仅适用于其父项和子项的元素。

**备注：** 以后可能会根据https://github.com/w3c/csswg-drafts/issues/3547重新引入此属性。如果要立即使用该属性，则可以使用polyfill。

示例
--

### 一个简单的样式表

在下面的例子中，我们将简单的样式应用到文档中：


```html
<!doctype html>
<html>
  <head>
    <style>
 p {
 color: red;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```

### 多种样式元素

在这个例子中包含两种样式 `<style>` 元素


```html
<!doctype html>
<html>
  <head>
    <style>
 p {
 color: white;
 background-color: blue;
 padding: 5px;
 border: 1px solid black;
 }
 </style>
    <style>
 p {
 color: blue;
 background-color: yellow;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```

### 包含媒体 (media) 选择

这个例子根据前一个例子构建，在第二个 `<style>` 中，视图宽度小于 500px 时生效


```html
<!doctype html>
<html>
  <head>
    <style>
 p {
 color: white;
 background-color: blue;
 padding: 5px;
 border: 1px solid black;
 }
 </style>
    <style media="all and (max-width: 500px)">
 p {
 color: blue;
 background-color: yellow;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```

规范
--

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

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

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

查看更多
----

* `<link>`元素允许使用外部的样式表。
* Alternative Style Sheets
<meta>：元数据元素
============

HTML **`<meta>`** 元素表示那些不能由其他 HTML 元相关（meta-related）元素表示的元数据信息。如：`<base>`、`<link>`、`<script>`、`<style>` 或 `<title>`。

|  |  |
| --- | --- |
| 内容分类 | 元数据内容。如果 `itemprop` 属性存在：流式内容、分段内容 |
| 允许的内容 | 无；这是一个空元素。 |
| 标签省略 | 由于这是一个空元素，所以必须有开始标签并且不能有结束标签。 |
| 允许的父元素 | * `<meta charset>`、`<meta http-equiv>`：`<head>` 元素。如果
 `http-equiv` 不是编码声明，它也可以放在
 `<noscript>` 元素中，它本身在一个
 `<head>` 元素内部。
* `<meta name>`：任何可以接受元数据内容的元素。
* `<meta itemprop>`：任何可以接受元数据内容或流式内容。
 |
| 默认的无障碍角色 | 没有相应的角色 |
| 允许的无障碍角色 | 没有允许的`角色（role）` |
| DOM 接口 | `HTMLMetaElement` (en-US) |

`<meta>` 元素定义的元数据的类型包括以下几种：

* 如果设置了 `name` 属性，`<meta>` 元素提供的是文档级别（*document-level*）的元数据，应用于整个页面。
* 如果设置了 `http-equiv` 属性，`<meta>` 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。
* 如果设置了 `charset` 属性，`<meta>` 元素是一个字符集声明，告诉文档使用哪种字符编码。
* 如果设置了 `itemprop` 属性，`<meta>` 元素提供用户定义的元数据。
属性
--

此元素包括全局属性。

**备注：** `name` 属性在 `<meta>` 元素中具有特殊的语义；另外，当一个 `<meta>` 标签中，有 `name`、`http-equiv` 或者 `charset` 三者中任何一个属性时，`itemprop` 属性不能被使用。

`charset`

该属性声明了文档的字符编码。如果存在该属性，则其值必须是字符串 `"utf-8"` 的不区分 ASCII 大小写的匹配，因为 UTF-8 是 HTML5 文档的唯一有效编码。声明字符编码的 `<meta>` 元素必须完全位于文档的前 1024 个字节内。

`content`

此属性包含 `http-equiv` 或 `name` 属性的值，具体取决于所使用的值。

`http-equiv`

属性定义了一个编译指示指令。这个属性叫做 `http-equiv(alent)` 是因为所有允许的值都是特定 HTTP 标头的名称，如下：

* `content-security-policy`
 允许页面作者定义当前页面的内容策略。内容策略常用来指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。
* `content-type`
 声明 MIME 类型和文档的字符编码。如果使用 `content-type` 属性，与之在同一个 `<meta>` 元素中使用的 `content` 属性的值必须是 `"text/html; charset=utf-8"`。这相当于一个具有指定 `charset` 属性的 `<meta>` 元素，并对其在文档中的放置位置有相同的限制。**注意**：该属性只能用于 MIME 类型为 `text/html` 的文档，不能用于 MIME 类型为 XML 的文档。
* `default-style`
 设置默认 CSS 样式表组的名称。
* `x-ua-compatible`
 如果指定，则 `content` 属性必须具有值 `"IE=edge"`。用户代理必须忽略此指示。
* `refresh`
 这个属性指定：
    + 页面重新加载的秒数——仅当 `content` 属性包含非负整数时。
    + 页面重定向到指定链接的秒数——仅当 content 属性包含非负整数后跟字符串“`;url=`”和有效的 URL 时。
**警告：**

设置了 `refresh` 值的页面存在时间间隔过短的风险。借助屏幕阅读器等辅助技术进行导航的用户可能无法在自动重定向之前通读和理解页面内容。突然的、未通知的页面内容更新也可能会让视力低下的人迷失方向。

    + MDN Understanding WCAG, Guideline 2.1 explanations (en-US)
    + MDN Understanding WCAG, Guideline 3.1 explanations (en-US)
    + Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0
    + Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0
    + Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0

`name`

`name` 和 `content` 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。
 在标准元数据名称中查看 HTML 规范等规范中定义的标准元数据名称。


示例
--


```html
<meta charset="utf-8" />

<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org" />
```

规范
--

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

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

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

参见
--

* 标准元数据名称
* 学习：`<meta>`
* viewport 元标签
<menuitem>
==========

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

用户可以通过**HTML `<menuitem>` 元素**生成一个弹出式菜单。这包括上下文菜单，以及按钮可能附带的菜单。

这个标签可以被显式定义，带有文本标签和可选图标来描述其外观，或者作为一个*间接命令*，其行为由一个单独的元素定义。命令还可以选择包含复选框或分组共享单选按钮。（`<input type="checkbox">` 和 `<input type="radio">`）

|  |  |
| --- | --- |
| 内容类别 | None. |
| 允许的内容 | None，这是一个空元素。 |
| 标签省略 | 必须有开始标签和结束标签。 |
| 允许的父元素 | The `<menu>` element, where that element is in the *popup menu* state. (If specified, the `type` attribute of the `<menu>` element must be `popup`; if missing, the parent element of the `<menu>` must itself be a `<menu>` in the *popup menu* state.) |
| 允许的 ARIA roles | None |
| DOM 接口 | `HTMLMenuItemElement` (en-US) |

属性
--

该标签支持全局属性；特别地， `title` 常常用来描述命令，或者提供有用的注释。

`checked`

布尔值，指示是否选择了命令。只能作为属性使用在 `checkbox` 或 `radio` 中。

`command`

指定一个单独元素的 ID，指示要间接调用的命令。在包含属性的菜单项中也不能使用。`checked`、`disabled`、`icon`、`label`、`radiogroup` 或 `type`。

`default`

布尔值，表示使用与菜单主题元素相同的命令。（如 `button` 或 `input`）。

`disabled`

布尔值，表示命令在当前状态下不可用。请注意，禁用与隐藏不同；禁用的属性适用于任何环境变化可能导致命令相关的上下文中。

`icon`

图片 URL，用于提供图片来表示命令。

`label`

展示给用户一个命令的名字，当 `command` 属性不存在时是必须的。

`radiogroup`

此属性指定要切换为单选按钮时，选定的一组命令的名称。只能作为 radio 的属性使用。

`type`

这个属性指定命令的类型，可以为以下三个命令之一。

* `command`：有关联动作的常规命令。这是缺少时的值默认值。
* `checkbox`：代表一个命令可以在两个不同状态之间的切换。
* `radio`：代表一组单选按钮，可切换为命令中的一个选择。

示例
--

### HTML


```html
<!-- A <div> element with a context menu -->
<div contextmenu="popup-menu">Right-click to see the adjusted context menu</div>

<menu type="context" id="popup-menu">
  <menuitem type="checkbox" checked>Checkbox</menuitem>
  <hr />
  <menuitem
 type="command"
 label="This command does nothing"
 icon="https://developer.mozilla.org/static/img/favicon144.png">
    Commands don't render their contents.
  </menuitem>
  <menuitem
 type="command"
 label="This command has javascript"
 onclick="alert('command clicked')">
    Commands don't render their contents.
  </menuitem>
  <hr />
  <menuitem type="radio" radiogroup="group1">Radio Button 1</menuitem>
  <menuitem type="radio" radiogroup="group1">Radio Button 2</menuitem>
</menu>
```

### CSS


```css
div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}
```

### 结果

规范
--

不属于任何现行的规范。

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

不再被任何浏览器支持。唯一支持过该元素的浏览器 Firefox 在版本 85 时也移除了支持。

参见
--

* HTML context menus in Firefox (Screencast and Code)
<li>
====

**HTML `<li>` 元素** （或称 *HTML 列表条目元素）* 用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表 (`<ol>`)，一个无序列表 (`<ul>`)，或者一个菜单 (`<menu>`)。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。

|  |  |
| --- | --- |
| 内容类别 | 无 |
| 允许的内容 | 流式内容 |
| 标签省略 | 如果列表元素的后面紧随另一个 `<li>` 元素，或者它的父元素中没有更多内容，结束标签可以省略。 |
| 允许的父元素 | `<ul>`、 `<ol>`、或者 `<menu>` 元素。过时的 `<dir>` 也可以作为父元素，但是并不提倡。 |
| DOM 接口 | `HTMLLIElement` |
| 元素类型 | 块级 |

属性
--

这个元素拥有全局属性。

`value`

这个整数型属性表明了本 `<li>` 元素在有序列表（由 `<ol>` 元素定义）中的序号。本属性值只能用数字，即使列表使用罗马数字或字母来展示。随后的列表条目会从设置的值开始计数。**value** 属性对于无序列表 (`<ul>`) 或者菜单 (`<menu>`) 无效。

**备注：** 这个属性在 HTML 4 中废弃，但是在 HTML 5 中重新引入。

**备注：** 在 Gecko 9.0 之前，负值会错误地转换为 0。Gecko 9.0 开始，所有整数值都可以正确解析。

`type` 
已弃用

这个字符型属性表明了数字的类型：

* `a`: 小写字母
* `A`: 大写字母
* `i`: 小写罗马数字
* `I`: 大写罗马数字
* `1`: 数字本属性值将覆盖 `<ol>` 元素中的同名属性值（若存在）。

**备注：** 本属性已废弃：使用 CSS `list-style-type` 属性来代替。

示例
--

### 有序列表


```html
<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>
```


上面的 HTML 会输出：

### 无序列表


```html
<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>
```


更多具体示例请见 <ol> 和 <ul> 页面。

规范
--

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

浏览兼容性
-----

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

另见
--

* 其他列表相关的 HTML 元素： `<ul>`, `<li>`, `<menu>`, 和过时的 `<dir>`；
* 可能特定用于排版 `<li>` 元素的 CSS 属性：
    + `list-style` 属性，用于选择序号的展示方式，
    + CSS 计数器，用于处理复杂的嵌套列表，
    + `margin` 属性，用于控制列表条目的缩进。
<cite>
======

*HTML 引用（Citation）标签* (**<cite>**) 表示一个作品的引用，且必须包含作品的标题。这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写。

尝试一下
----

|  |  |
| --- | --- |
| 内容类别 | 流内容（Flow Content），叙述内容（Phrasing Content），可触及的内容（Palpable Content）。 |
| 允许的内容 | 叙述内容（Phrasing Content） |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父级元素 | 任何接受叙述内容（Phrasing Content）的元素。 |
| DOM 接口 | 这个元素在 Gecko 1.9.2 (Firefox 4) 及之前的版本中 实现为 HTMLElement, Firefox 实现为 HTMLSpanElement。 |

属性
--

这个元素仅包含了 所有的全局属性 (en-US).

**备注：** 适用场合可能包括一本书，一张纸，一篇散文，一首诗，一个分数，一首歌，一部电影，一个电视节目，一个游戏，一个雕塑，一幅画，戏剧制作，一个剧本，一个歌剧，一种音乐，一个展览，一个法律案件报告，一个计算机程序，一个网站，一个网页，博客或评论，论坛帖子或评论，鸣叫，或者书面或口头陈述，等等。

* W3C 规范，对创造性的工作可能包括作者的名字，而 WHATWG 宣布，它可能不包括在任何情况下，一个人的名字。
* 在 blockquote 元素或者 q 元素上使用 cite 或者 blockquote 属性来标明参考的在线资源。
* 为了避免在使用 cite 元素时默认字体为斜体，可以使用 css 的 font-style 属性重新进行设置。

使用说明
----

在 `<cite>` 标签中，可能引用的内容类型如下：

* A book
* A research paper
* An essay
* A poem
* A musical score
* A song
* A play or film script
* A film
* A television show
* A game
* A sculpture
* A painting
* A theatrical production
* A play
* An opera
* A musical
* An exhibition
* A legal case report
* A computer program
* A web site
* A web page
* A blog post or comment
* A forum post or comment
* A tweet
* A Facebook post
* A written or oral statement
* And so forth.

值得注意的是，W3C 标准允许在 `<cite>` 元素中包含引用内容的作者信息。然而 WHATWG 规范不允许在 `<cite>` 元素中出现人名。

要标明`<blockquote>` 或 `<q>`之中内容的引用来源，可以使用元素的`cite`属性。

通常，浏览器默认使用斜体来展示`<cite>`元素中的内容。可以通过指定`<cite>`元素的`font-style`样式来覆盖这种默认行为。

示例
--


```html
More information can be found in <cite>[ISO-0000]</cite>.
```


该段代码的输出如下：

规范
--

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

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

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

参见
--

* 适用于长引用的 `<blockquote>` 元素。
* 适用于行内引用的 `<q>` 元素。
<option>
========

**HTML 元素 *`<option>`*** 用于定义在 `<select>`, `<optgroup>` 或 `<datalist>` 元素中包含的项。`<option>` 可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。

尝试一下
----

* *内容类别* 无
* *允许的内容*带有最终转义字符（例如 `&eacute;`）的文本
* *标记省略* 开始标记是必需的。如果此元素紧接着是另一个 `<option>` 元素或`<optgroup>`, 或者父元素没有其他内容，则结束标记是可选的。
* *Implicit ARIA role* `option` (en-US)
* *Permitted ARIA roles* No `role` permitted
* *允许的父元素* A `<select>`, an `<optgroup>` or a `<datalist>` element.
* *DOM 接口* `HTMLOptionElement`
属性
--

此元素包括全局属性。

`disabled`

如果设置了这个布尔属性，则该选项不可选。浏览器通常会将这种控件显示为灰色，并且不再接受任何浏览器事件，例如鼠标点击或者焦点相关的事件。如果这个属性没有设置，而这个元素的其中一个父元素是被禁用的 `<optgroup>` 元素，则这个元素仍然是禁用的。

`label`

这个属性是用于表示选项含义的文本。如果 **`label`** 属性没有定义，它的值就是元素文本内容。

`selected`

这个布尔属性存在时表明这个选项是否一开始就被选中。如果 `<option>` 元素是 `<select>` 元素的子元素，并且 `<select>` 元素的 `multiple` 属性没有设置，则 `<select>` 元素中只有一个 `<option>` 元素可以拥有 `selected` 属性。

`value`

这个属性的值表示该选项被选中时提交给表单的值。如果省略了这个属性，值就从选项元素的文本内容中获取。

示例
--

参见 `<select>` 示例。

规范
--

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

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

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

参见
--

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

**HTML `<ol>` 元素**表示有序列表，通常渲染为一个带编号的列表。

尝试一下
----

|  |  |
| --- | --- |
| 内容类别 (en-US) | Flow content (en-US), and if the `<ol>` element's children include at least one `<li>` element, palpable content. |
| 允许的内容 | Zero or more `<li>`, `<script>` and `<template>` elements. |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父级 | Any element that accepts flow content. |
| 隐含的 ARIA 角色 | `list` |
| 允许的 ARIA 角色 | `directory` (en-US), `group` (en-US), `listbox`, `menu` (en-US), `menubar` (en-US), `none` (en-US), `presentation` (en-US), `radiogroup` (en-US), `tablist` (en-US), `toolbar` (en-US), `tree` (en-US) |
| DOM 接口 | `HTMLOListElement` (en-US) |

属性
--

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

`reversed`

此布尔值属性指定列表中的条目是否是倒序排列的，即编号是否应从高到低反向标注。

`start`

一个整数值属性，指定了列表编号的起始值。此属性的值应为阿拉伯数字，尽管列表条目的编号类型 `type` 属性可能指定为了罗马数字编号等其他类型的编号。比如说，想要让元素的编号从英文字母 "d" 或者罗马数字 "iv" 开始，都应当使用 `start="4"`。

**备注：** 这个属性在 HTML4 中弃用，但是在 HTML5 中被重新引入。

`type`

设置编号的类型：

* `a` 表示小写英文字母编号
* `A` 表示大写英文字母编号
* `i` 表示小写罗马数字编号
* `I` 表示大写罗马数字编号
* `1` 表示数字编号（默认）编号类型适用于整个列表，除非在 `<ol>` 元素的 `<li>` 元素中使用不同的 `type` 属性。

**备注：** 这个属性在 HTML4 中弃用，但是在 HTML5 中被重新引入。除非列表中序号很重要（比如，在法律或者技术文件中条目通常被需要所引用），否则请使用 CSS `list-style-type` 属性替代。

使用说明
----

通常，有序列表的条目会和它前面的编号标记一起显示，编号标记可以是数字或者字母。

`<ol>` 和 `<ul>` 元素两者可以无限嵌套，既可以同类嵌套，也可以互相嵌套。

`<ol>` 和 `<ul>` 元素都表示列表。区别在于，`<ol>` 元素的有序列表的顺序是有意义的。举一些例子：

* 烹饪食谱中的各个步骤
* 指路时的各处转弯方向
* 营养信息标签上 按含量排序的成分列表

至于如何确定该选择哪一个列表元素，可以尝试更改列表项的顺序，如果其含义会发生改变，那么就应当使用 `<ol>` 元素，否则使用 `<ul>` 更合适。

**备注：** “更改顺序”时，不应当算上一些固定位于列表最前或最后的项，比如未完成的列表最后的占位项。
 如果只有一个元素，以至于根本不存在什么顺序可言，可能最好先考虑是否应当使用列表元素，以及是否要在列表最后增加一些占位的空项。


示例
--

### 简单示例


```html
<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>
```


以上 HTML 输出如下：

### 使用小写罗马数字编号


```html
<ol type="i">
  <li>Introduction</li>
  <li>List of Greivances</li>
  <li>Conclusion</li>
</ol>
```


以上 HTML 输出如下：

### 使用 `start` 属性


```html
<p>Finishing places of contestants not in the winners' circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin’ Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>
```


以上 HTML 输出如下：

### 嵌套列表


```html
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>
```


以上 HTML 输出如下：

### 嵌套有序列表和无序列表


```html
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>
```


以上 HTML 输出如下：

规范
--

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

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

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

相关
--

* 其他列表相关的 HTML 元素：`<ul>`, `<li>`, `<menu>` and the obsolete `<dir>`;
* 对 `<ol>` 元素常用的 CSS 属性：
    + the `list-style` 属性，有用的选择序数的显示方式，
    + CSS 计数器 (en-US), 用于处理复杂的嵌套列表，
    + `line-height` 属性，可以模拟过时的 `compact` 属性；
    + `margin` 属性，用来控制列表的缩进。
<tt>
====

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

概述
--

HTML 电报文本元素 (`<tt>`) 产生一个内联元素，使用浏览器内置的 monotype 字体展示。这个元素用于给文本排版，使其等宽展示，就像电报那样。使用 `<code>` 元素来展示等宽文本可能更加普遍。

**备注：** 这个元素已废弃。使用更加适当的元素，例如带有 CSS 的 `<code>` 或者 `<span>` 来代替。

属性
--

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

DOM 接口
------

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

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

示例
--


```html
<p>
  Enter the following at the telnet command prompt: <code>set localecho</code
 ><br />

  The telnet client should display: <tt>Local Echo is on</tt>
</p>
```

### 结果

 Enter the following at the telnet command prompt: `set localecho`
 The telnet client should display: `Local Echo is on`

注
-

* CSS 规范可以为 `tt` 选择器定义，来覆盖浏览器的默认字体。用于设置的偏好可能优先于指定的 CSS。
* 虽然这个元素没有在 HTML 4.01 规范中废弃，为了支持样式表，不建议使用它。
另见
--

* `<code>`
* HTML 4.01 规范：字体样式
<picture>：picture 元素
====================

**HTML `<picture>` 元素**通过包含零或多个 `<source>` 元素和一个 `<img>` 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 `<source>` 元素，如果没有匹配的，就选择 `<img>` 元素的 `src` 属性中的 URL。然后，所选图像呈现在<img>元素占据的空间中。

尝试一下
----

要决定加载哪个 URL，user agent 检查每个 `<source>` 的 `srcset`、`media` 和 `type` 属性，来选择最匹配页面当前布局、显示设备特征等的兼容图像。

`<img>` 元素有两个目的：

* 描述图像的大小和其他属性及其呈现。
* 在所有的 `<source>` 元素提供的图片都不可用时提供备选图片。

`<picture>` 的常见使用场景：

* **艺术指导**（Art direction）。针对不同 `media` 条件裁剪或修改图像（例如，在较小的显示器或图像的详细内容太多时显示较为图像的简单版本）。
* 遇到不支持的特定格式时，**提供替代的图像格式**。

**备注：** 例如，像 AVIF 或 WEBP 这样的新格式具有诸多优点，但可能不受浏览器的支持。可以在图像文件格式和格式指南中找到支持的图像格式的列表。
* 通过加载最适合观看者显示的图像来**节省带宽和提高页面加载速度**。

如果要为高 DPI（Retina）显示提供更高像素密度的图像版本，请在 `<img>` 元素上使用 `srcset`。这使得浏览器可以在节约流量模式下选择低像素密度版本，且不需要你编写明确的 `media` 条件。

|  |  |
| --- | --- |
| 内容分类 | 流内容，表述内容，嵌入内容。 |
| 允许的内容 | 零或多个 `<source>` 元素，以及紧随其后的一个 `<img>` 元素，可以混合一些脚本支持的元素。 |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何可以包含嵌入内容的元素。 |
| 允许的 ARIA roles | 无 |
| DOM 接口 | `HTMLPictureElement` (en-US) |

属性
--

这个元素只包含全局属性。

用法提示
----

你可以使用 `object-position` 属性调整元素框架内图像的位置，用 `object-fit` 属性控制图片如何调整大小来适应框架。

**备注：** 在子 `<img>` 元素上使用这些属性，不是 `<picture>` 元素。

示例
--

这些示例演示了 `<source>` 元素的不同属性如何更改`<picture>`中图像的选择。

### `media` 属性

`media` 属性允许你提供一个用于给用户代理作为选择 `<source>` 元素的依据的媒体条件 (media condition)（类似于媒体查询）。如果这个媒体条件匹配结果为 `false`，那么这个 `<source>` 元素会被跳过。


```html
<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>
```

### `type` 属性

`type` 属性允许你为 `<source>` 元素的 `srcset` 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型，那么这个 `<source>` 元素会被跳过。


```html
<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml" />
  <img src="mdn-logo.png" alt="MDN" />
</picture>
```

规范
--

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

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

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

参考链接
----

* `<img>` 元素
* `<source>` 元素
* 在其框架内定位和缩放图片：`object-position` 和 `object-fit`
<meter>
=======

HTML **`<meter>`** 元素用来显示已知范围的标量值或者分数值。

尝试一下
----

|  |  |
| --- | --- |
| Content categories (en-US) | Flow content (en-US), phrasing content (en-US), labelable content, palpable content. |
| Permitted content | Phrasing content (en-US), but there must be no `<meter>` element among its descendants. |
| Tag omission | 不允许，开始标签和结束标签都不能省略。 |
| Permitted parents | Any element that accepts phrasing content (en-US). |
| Permitted ARIA roles | None |
| DOM interface | `HTMLMeterElement` (en-US) |

属性
--

该元素包含所有的全局属性 (en-US).

`value`

当前的数值。如果设置了最小值和最大值（分别由 min 属性和 max 属性定义），它必须介于最小值和最大值之间。如果没有指定或者格式有误，值即为 0。如果给定的值不在最小值和最大值之间，它的值就等于它最接近的一端的值。

**备注：** 除非值域在 0 到 1（闭区间）, 否则最小值和最大值属性需要定义，以保证 value 属性在值域范围内。换言之，默认的 min 和 max 值分别为 0 和 1。

`min`

值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为 0。

`max`

值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为 1。

`low`

定义了低值区间的上限值（译者注：如果 value 介于 min 和 low 之间，该元素就会表现出低值的视觉效果，value 落在 [min,low]、[high,max] 等不同的区间会使浏览器渲染该元素时出不同的视觉效果）。如果设置了，它必须比最小值属性大，并且不能超过 high 值和最大值。未设置或者比最小值还要小时，其值即为最小值。

`high`

定义了高值区间的下限值。如果设置了，它必须小于最大值，同时必须大于 low 值和最小值。如果没有设置，或者比最大值还大，其值即为最大值。

`optimum`

这个属性用来指示最优/最佳取值。它必须在正确的值域内（由最小值属性和最大值属性定义）。当使用了 low 和 high 属性时，它指明哪一个取值范围是更好的。例如，假设它介于最小值和 low 之间，那么 lower 区间就被认为是更佳的取值范围。

`form`

该属性将本元素与对应的 form 元素关联。例如，一个计量器可能用来显示某个数值输入框（input 元素，number 类型）的范围。只有当计量器元素被用作表单关联的元素时，该属性才应当被使用；即便如此，如果它作为表单的后代元素出现，它仍然有可能被省略。

示例
--

### 简单示例

#### HTML


```html
<p>
  Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.
</p>
```


#### 结果

在 Google Chrome 浏览器上，计量器结果如下：

![current look of 'meter' in Google Chrome](/zh-CN/docs/Web/HTML/Element/meter/screen_shot_2020-10-12_at_10.10.53_pm.png)

### 高低值区间示例

注意本例中 min 属性被省略，这是允许的，默认值为 0。

#### HTML


```html
<p>
  He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.
</p>
```


#### 结果

Google Chrome 浏览器中，计量器显示效果如下：

![red meter in Google Chrome](/zh-CN/docs/Web/HTML/Element/meter/screen_shot_2020-10-12_at_10.11.52_pm.png)

规范
--

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

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

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

参见
--

* `<progress>`
<base>：文档根 URL 元素
=================

**HTML <base> 元素** 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。

一个文档的基本 URL，可以通过使用 `document.baseURI` (en-US) 的 JS 脚本查询。如果文档不包含 `<base>` 元素，`baseURI` 默认为 `document.location.href`。

|  |  |
| --- | --- |
| 内容类别 | 元数据内容。 |
| 合法的内容 | 无，它是一个empty element |
| 标签省略 | 该标签不能有结束标签。 |
| 合法的父级 | 任何不带有任何其他 `<base>` 元素的`<head>` 元素 |
| 合法的 ARIA 角色 | 无 |
| DOM 接口 | `HTMLBaseElement` |

属性
--

该标签包含全局属性 (en-US)。

如果指定了以下任一属性，这个元素**必须**在其他任何属性是 URL 的元素之前。例如：`<link>` 的 `href` 属性。

`href`

用于文档中相对 URL 地址的基础 URL。允许绝对和相对 URL。

`target`

默认浏览上下文的关键字或作者定义的名称，当没有明确目标的链接 `<a>` 或表单 `<form>` 导致导航被激活时显示其结果。该属性值定位到*浏览上下文*（例如选项卡，窗口或内联框 `<iframe>`）。以下的关键字指定特殊的意思：

* `_self`: 载入结果到当前浏览上下文中。（该值是元素的默认值）。
* `_blank`: 载入结果到一个新的未命名的浏览上下文。
* `_parent`: 载入结果到父级浏览上下文（如果当前页是内联框）。如果没有父级结构，该选项的行为和`_self`一样。
* `_top`: 载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和\_self 一样。

使用说明
----

### 多个 `<base>` 元素

如果指定了多个 `<base>` 元素，只会使用第一个 `href` 和 `target` 值，其余都会被忽略。

### 页内锚

指向文档中某个片段的链接，例如 `<a href="#some-id">` 用 `<base>` 解析，触发对带有附加片段的基本 URL 的 HTTP 请求。

例如：给定 `<base href="https://example.com">`

以及此链接 `<a href="#anchor">Anker</a>`

链接指向 `https://example.com/#anchor`

### Open Graph

Open Graph 标签不接受 `<base>`，并且应该始终具有完整的绝对 URL。例如：
```

<meta property="og:image" content="https://example.com/thumbnail.jpg">
```

示例
--


```html
<base href="http://www.example.com/" />
<base target="\_blank" />
<base target="\_top" href="http://www.example.com/" />
```

规范
--

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

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

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

**`<hgroup>`** HTML 元素代表文档标题和与标题相关联的内容，它将一个 `<h1>–<h6>` 元素与一个或多个 `<p>` 元素组合在一起。

尝试一下
----

属性
--

这个元素仅包含全局属性。

使用说明
----

`<hgroup>` 元素允许将一个标题与任意次要内容（例如子标题、副标题或口号）组合在一起。在 `<hgroup>` 中，这些类型的内容也表示为 `<p>` 元素。

`<hgroup>` 本身对网页的的文档大纲没有任何影响。而 `<hgroup>` 中所允许的单个标题则会被用于文档大纲。

示例
--


```html
<!doctype html>
<title>HTML 标准</title>
<body>
  <hgroup id="document-title">
    <h1>HTML：现行标准</h1>
    <p>更新于 2022 年 7 月 12 日</p>
  </hgroup>
  <p>文档的介绍。</p>
  <h2>目录</h2>
  <ol id="toc">
    …
  </ol>
  <h2>第一节</h2>
  <p>第一节的介绍。</p>
</body>
```

无障碍考虑
-----

目前，`<hgroup>` 没有无障碍的语义。只有其中的元素（标题和可选的段落）会被暴露给浏览器的无障碍 API。

技术概要
----

|  |  |
| --- | --- |
| 内容分类 | 流式内容、标题内容、可感知内容。 |
| 允许的内容 | 
 零个或多个 `<p>` 元素，后跟一个
 `<h1>` (en-US)、`<h2>` (en-US)、`<h3>` (en-US)、`<h4>` (en-US)、`<h5>` (en-US)
 或 `<h6>` (en-US) 元素，后跟零个或多个
 `<p>` 元素。
  |
| 省略标签 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何接受流式内容的元素。 |
| 隐式 ARIA 角色 | 没有对应的角色 |
| 允许的 ARIA 角色 | 任意 |
| DOM 接口 | `HTMLElement` |

规范
--

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

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

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

参见
--

* 与本章节相关的其他元素：`<body>`、`<article>`、`<section>`、`<aside>`、`<h1>` (en-US)、`<h2>` (en-US)、`<h3>` (en-US)、`<h4>` (en-US)、`<h5>` (en-US)、`<h6>` (en-US)、`<nav>`、`<header>`、`<footer>`、`<address>`；
* HTML 文档的章节和大纲。