HTML元素

`<a>` 锚元素

描述

HTML <a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。

属性

download 浏览器将链接的 URL 视为下载资源
- filename 决定文件名的值
href 超链接所指向的 URL
ping
referrerpolicy referrer策略
- no-referrer 不发送
- no-referrer-when-downgrade HTTPS协议下发送
- origin 同源发送
- origin-when-cross-origin 不同源时只包含协议、主机和端口
- same-origin 同源发送
- strict-origin HTTPS->HTTPS发送源；HTTPS->HTTP不发送
- strict-origin-when-cross-origin(默认) 同源时发送完整路径；HTTPS->HTTPS发送源；HTTPS->HTTP不发送
- unsafe-url 包含源和路径
rel 目标对象到链接对象的关系
target
- _self 当前页面
- _blank 新标签页
- _parent 当前浏览环境的父级浏览上下文
- _top 最顶级的浏览上下文

html

<!-- 链接到绝对地址 -->
<a href="https://www.mozilla.com"> Mozilla </a>
<!-- 链接到相对地址 -->
<a href="./links.html"> 资源 </a>
<!-- 链接到元素 -->
<a href="#header"> 跳转到下方标题 </a>
<!-- 链接到 email 地址 -->
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
<!-- 链接到电话号码 -->
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

`<abbr>` 缩写元素

描述

<abbr> HTML 元素表示一个缩写词或首字母缩略词

属性

title

示例

HTML

<!-- 语义化标记缩写 -->
<p>使用 <abbr>HTML</abbr> 既有趣又简单！</p>
<!-- 提供扩展解释 -->
<p>你可以用 <abbr title="邮政特快专递服务">EMS</abbr> 把这个包裹寄给我。</p>
<!-- 定义缩略语 -->
<p>
  <dfn id="html"><abbr title="超文本标记语言">HTML</abbr></dfn>
  是一种用于创建网页的语义和结构的标记语言。
</p>

<p>
  <dfn id="spec">规范</dfn>（<abbr>spec</abbr>）是一份详细说明某项技术或 API
  的预期功能和访问方式的文档。
</p>

`<address>` 联系人地址元素

描述

<address> HTML 元素表示其包含的 HTML 内容提供了与个人、团体或组织联系的信息。

属性

全局属性

示例

HTML

<address>
  <a href="mailto:jim@example.com">jim@example.com</a><br />
  <a href="tel:+14155550132">+1 (415) 555‑0132</a>
</address>

`<area>`

描述

HTML <area> 元素在图片上定义一个热点区域，可以关联一个超链接。<area>元素仅在<map>元素内部使用。

属性

全局属性

示例

HTML

<map name="primary">
  <area shape="circle" coords="200,250,25" href="another.htm" />
  <area shape="default" nohref />
</map>

`<article>`

描述

HTML <article> 元素表示文档、页面、应用或网站中的独立结构

属性

全局属性

示例

HTML

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

`<aside>`

描述

HTML <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响

属性

全局属性

示例

html

<article>
  <p>
    迪斯尼电影<cite>海的女儿</cite>（<cite>The Little Mermaid</cite>）于 1989
    年首次登上银幕。
  </p>
  <aside>在首次发行期间，该片便收获了 8700 万美元的票房。</aside>
  <p>更多有关该电影的信息…</p>
</article>

`<audio>`

描述

<audio> HTML 元素用于在文档中嵌入音频内容

属性

autoplay
controls 控制面板
crossorigin 是否可以通过 CORS 加载
- anonymous 不携带验证信息
- use-credentials 携带验证信息
currentTime 当前音频的播放位置
duration 总长度
loop 循环播放
muted 是否静音
preload 加载方式
- none
- metadata
- auto
- 空字符串
src 音频资源地址

示例

html

<!-- Simple audio playback -->
<audio src="AudioTest.ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>
<audio controls>
  <source src="foo.wav" type="audio/wav" />
  Your browser does not support the <code>audio</code> element.
</audio>

`<bdi>`

描述

HTML 双向隔离元素

属性

全局属性

示例

html

<p dir="ltr">
  This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed
  right-to-left.
</p>

`<bdo>` 双向文本覆盖元素

描述

HTML <bdo> 元素覆盖了当前文本的方向，使文本以不同的方向渲染出来。

属性

全局属性

示例

html

<!-- 反转文本方向 -->
<p>该文本应从左到右绘制。</p>
<p><bdo dir="rtl">该文本应从右到左绘制。</bdo></p>

`<blockquote>` 块级引用元素

描述

HTML <blockquote> 元素（或者 HTML 块级引用元素），代表其中的文字是引用内容

属性

cite 标注引用的信息的来源文档或者相关信息的 URL

示例

html

<blockquote cite="https://tools.ietf.org/html/rfc1149">
  <p>
    Avian carriers can provide high delay, low throughput, and low altitude
    service. The connection topology is limited to a single point-to-point path
    for each carrier, used with standard carriers, but many carriers can be used
    without significant interference with each other, outside of early spring.
    This is because of the 3D ether space available to the carriers, in contrast
    to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
    avoidance system, which increases availability.
  </p>
</blockquote>

`<body>` 文档主体元素

描述

属性

示例

html

<html>
  <head>
    <title>Document title</title>
  </head>
  <body>
    <p>This is a paragraph</p>
  </body>
</html>

`<br>`

描述

HTML <br> 元素在文本中生成一个换行（回车）符号

属性

示例

html

Mozilla Foundation<br />
1981 Landings Drive<br />
Building K<br />
Mountain View, CA 94043-0801<br />
USA

`<button>`

描述

HTML <button> 元素表示一个可点击的按钮，可以用在表单或文档其他需要使用简单标准按钮的地方

属性

autofocus
disabled 禁用按钮点击
form 关联的<form>元素的id
formaction 指定表单提交信息的URL
formenctype 指定表单提交格式
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
formmethod 指定提交表单的方式
- post
- get
formnovalidate 不需要验证
formtarget
name
type
- submit
- reset
- button
value

示例

html

<button name="button">Click me</button>

TIP

`<canvas>`

描述

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

属性

height 默认为 150
width 默认为 300

示例

html

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

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

`<caption>`

描述

HTML <caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题，它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被 CSS 样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。

属性

align 表明了 caption 相对于 table 应该如何排列
- left
- top
- right
- bottom

示例

index.html

html

<table>
  <caption>
    美妙的标题
  </caption>
  <tr>
    <td>美妙的数据</td>
  </tr>
</table>

`<cite>`

描述

表示一个作品的引用，且包含作品的标题

属性

全局属性

示例

HTMLCSS

HTML

<figure>
  <blockquote>
    <p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
  </blockquote>
  <figcaption>
    First sentence in <cite><a href="http://www.george-orwell.org/1984/0.html">Nineteen Eighty-Four</a></cite> by George
    Orwell (Part 1, Chapter 1).
  </figcaption>
</figure>

CSS

/* stylelint-disable-next-line block-no-empty */
cite {
}

`<code>`: 行内代码元素

描述

HTML <code> 元素为其显示的内容添加用以表明其中的文本是一段简短的计算机代码的样式

属性

全局属性

示例

HTMLCSS

HTML

<p>
  The <code>push()</code> method adds one or more elements to the end of an array and returns the new length of the
  array.
</p>

CSS

code {
  background-color: #eee;
  border-radius: 3px;
  font-family: courier, monospace;
  padding: 0 3px;
}

`<col>`: 表格列元素

描述

<col> HTML 元素在其父 <colgroup> 元素所代表的列组中定义一列或多列。<col> 元素只有作为没有定义 span 属性的 <colgroup> 元素的子元素才有效。

属性

span 指定元素跨越的连续列数。该值必须是大于 0 的正整数。如果不存在，其默认值为 1

示例

HTMLCSS

HTML

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <tr>
    <td></td>
    <th scope="col">Batman</th>
    <th scope="col">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
  </tr>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts, strong</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</table>

CSS

.batman {
  background-color: #d7d9f2;
}

.flash {
  background-color: #ffe8d4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 6px;
}

td {
  text-align: center;
}

`<colgroup>`

描述

HTML 中的表格列组（Column Group <colgroup>）标签用来定义表中的一组列表

属性

span 该属性包含一个正整数，表示<colgroup>元素跨越的连续列数。如果不存在，则其默认值为1。

示例

HTMLCSS

HTML

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <tr>
    <td></td>
    <th scope="col">Batman</th>
    <th scope="col">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
  </tr>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts, strong</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</table>

CSS

.batman {
  background-color: #d7d9f2;
}

.flash {
  background-color: #ffe8d4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 6px;
}

td {
  text-align: center;
}

`<data>`

描述

HTML <data> 元素将一个指定内容和机器可读的翻译联系在一起

属性

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

示例

HTMLCSS

HTML

<p>New Products:</p>
<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

CSS

data:hover::after {
  content: ' (ID ' attr(value) ')';
  font-size: 0.7em;
}

`<datalist>`: HTML 数据列表元素

描述

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

属性

示例

HTMLCSS

HTML

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>

CSS

label {
  display: block;
  margin-bottom: 10px;
}

`<dd>`

描述

HTML <dd> 元素（HTML 描述元素）用来指明一个描述列表 (<dl>) 元素中一个术语的描述。

属性

示例

HTMLCSS

HTML

<p>Cryptids of Cornwall:</p>

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

CSS

p,
dt {
  font-weight: bold;
}

dl,
dd {
  font-size: 0.9rem;
}

dd {
  margin-bottom: 1em;
}

`<del>`

描述

HTML 的 <del> 标签表示一些被从文档中删除的文字内容。

属性

示例

HTML

<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del><p>This paragraph has been deleted.</p></del>

`<details>`: 详细信息展示元素

描述

HTML <details> 元素可创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。

属性

open 目前是否可见

示例

HTMLCSS

HTML

<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

CSS

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}

`<dfn>`

描述

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

属性

示例

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>

`<dialog>` 对话框元素

描述

表示一个对话框或其他交互式组件

属性

open 指示这个对话框是激活的和能互动的。当没有设置 open 属性时，对话框不应该显示给用户。推荐使用 .show() 或 .showModal() 方法来渲染对话框，而不是使用 open 属性

示例

HTMLjs

HTML

<!-- Simple modal dialog containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <p>
      <label
        >Favorite animal:
        <select>
          <option value="default">Choose…</option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label>
    </p>
    <div>
      <button value="cancel">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </div>
  </form>
</dialog>
<p>
  <button id="updateDetails">Update details</button>
</p>
<output></output>

const updateButton = document.getElementById("updateDetails");
const favDialog = document.getElementById("favDialog");
const outputBox = document.querySelector("output");
const selectEl = favDialog.querySelector("select");
const confirmBtn = favDialog.querySelector("#confirmBtn");

// If a browser doesn't support the dialog, then hide the
// dialog contents by default.
if (typeof favDialog.showModal !== "function") {
  favDialog.hidden = true;
  /* a fallback script to allow this dialog/form to function
     for legacy browsers that do not support <dialog>
     could be provided here.
  */
}
// "Update details" button opens the <dialog> modally
updateButton.addEventListener("click", () => {
  if (typeof favDialog.showModal === "function") {
    favDialog.showModal();
  } else {
    outputBox.value =
      "Sorry, the <dialog> API is not supported by this browser.";
  }
});
// "Favorite animal" input sets the value of the submit button
selectEl.addEventListener("change", (e) => {
  confirmBtn.value = selectEl.value;
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
favDialog.addEventListener("close", () => {
  outputBox.value = `${
    favDialog.returnValue
  } button clicked - ${new Date().toString()}`;
});

`<div>` 内容划分元素

描述

流式内容的通用容器

属性

示例

HTMLCSS

HTML

<div class="warning">
  <img src="/media/examples/leopard.jpg" alt="An intimidating leopard." />
  <p>Beware of the leopard</p>
</div>

CSS

.warning {
  border: 10px ridge #f00;
  background-color: #ff0;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}

.warning img {
  width: 100%;
}

.warning p {
  font: small-caps bold 1.2rem sans-serif;
  text-align: center;
}

`<dl>`

描述

HTML <dl> 元素（或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。

属性

示例

HTMLCSS

HTML

<p>Cryptids of Cornwall:</p>

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

  <dt>Morgawr</dt>
  <dd>A sea serpent.</dd>

  <dt>Owlman</dt>
  <dd>A giant owl-like creature.</dd>
</dl>

CSS

p,
dt {
  font-weight: bold;
}

dl,
dd {
  font-size: 0.9rem;
}

dd {
  margin-bottom: 1em;
}

`<dt>`

描述

HTML <dt> 元素（或 HTML 术语定义元素）用于在一个定义列表中声明一个术语

属性

示例

`<em>` 强调元素

描述

HTML <em> 元素将文本标记为强调（emphasis）格式

属性

示例

HTML

<p>Get out of bed <em>now</em>!</p>

<p>We <em>had</em> to do something about it.</p>

<p>This is <em>not</em> a drill!</p>

`<embed>` 外部内容嵌入元素

描述

HTML <embed> 元素将外部内容嵌入文档中的指定位置

属性

height 资源显示的高度
src 被嵌套的资源的 URL
type 用于选择插件实例化的 MIME 类型
width 资源显示的宽度

示例

HTML

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

`<fieldset>`

描述

HTML <fieldset> 元素用于对表单中的控制元素进行分组（也包括 label 元素）

属性

disabeld 不可编辑
form 关联表单
name 元素分组的名称

示例

HTMLCSS

HTML

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster" value="K" />
    <label for="kraken">Kraken</label><br />

    <input type="radio" id="sasquatch" name="monster" value="S" />
    <label for="sasquatch">Sasquatch</label><br />

    <input type="radio" id="mothman" name="monster" value="M" />
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

CSS

legend {
  background-color: #000;
  color: #fff;
  padding: 3px 6px;
}

input {
  margin: 0.4rem;
}

`<figure>` 可附标题内容元素

描述

HTML <figure> 元素代表一段独立的内容，可能包含 <figcaption> 元素定义的说明元素

属性

示例

HTMLCSS

HTML

<figure>
  <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>
</figure>

CSS

figure {
  border: thin #c0c0c0 solid;
  display: flex;
  flex-flow: column;
  padding: 5px;
  max-width: 220px;
  margin: auto;
}

img {
  max-width: 220px;
  max-height: 150px;
}

figcaption {
  background-color: #222;
  color: #fff;
  font: italic smaller sans-serif;
  padding: 3px;
  text-align: center;
}

`<figcaption>`

描述

HTML <figcaption> 元素是与其相关联的图片的说明/标题，用于描述其父节点 <figure> 元素里的其他数据

属性

示例

`<footer>` 页脚元素

描述

HTML <footer> 元素表示其最近的祖先分段内容的页脚或分段根元素

属性

示例

HTMLCSS

HTML

<body>
  <h3>FIFA 世界杯最佳射手</h3>
  <ol>
    <li>米罗斯拉夫 · 克洛泽，16</li>
    <li>罗纳尔多 · 纳扎里奥，15</li>
    <li>格尔德 · 穆勒，14</li>
  </ol>

  <footer>
    <small> 版权所有 © 2023 足球历史档案馆。保留所有权利。 </small>
  </footer>
</body>

CSS

footer {
  text-align: center;
  padding: 5px;
  background-color: #abbaba;
  color: #000;
}

`<form>`

描述

HTML <form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息

属性

accept-charset 一个空格分隔或逗号分隔的列表，此列表包括了服务器支持的字符编码
autocomplete 用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的
- off
- on
name 表单的名称
rel 根据 value 创建一个超链接
action 处理表单提交的 URL
enctype 当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
method 表单提交方式
- post
- get
- dialog 如果表单在 <dialog> 元素中，提交时关闭对话框
novalidate 提交表单时不需要验证表单
target 表示在提交表单之后，在哪里显示响应信息
- _self 在相同浏览上下文中加载
- _blank 在新的未命名的浏览上下文中加载
- _parent 当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致
- _top 在最顶级的浏览上下文中，如果没有父级，则与 _self 表现一致

示例

HTMLCSS

HTML

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required />
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required />
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!" />
  </div>
</form>

CSS

form.form-example {
  display: table;
}

div.form-example {
  display: table-row;
}

label,
input {
  display: table-cell;
  margin-bottom: 10px;
}

label {
  padding-right: 10px;
}

`<h1>` HTML 区域标题元素

描述

HTML <h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。

属性

示例

HTMLCSS

HTML

<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>

CSS

h1,
h2,
h3,
h4 {
  margin: 0.1rem 0;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
  padding-left: 20px;
}

h3 {
  font-size: 1.2rem;
  padding-left: 40px;
}

h4 {
  font-size: 1rem;
  font-style: italic;
  padding-left: 60px;
}

`<head>` 文档元数据（头部）元素

描述

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

属性

示例

HTML

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

`<header>`

描述

HTML <header> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素

属性

示例

HTMLCSS

HTML

<header>
  <a class="logo" href="#">Cute Puppies Express!</a>
</header>

<article>
  <header>
    <h1>Beagles</h1>
    <time>08.12.2014</time>
  </header>
  <p>I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and their ears are so, so snugly soft!</p>
</article>

CSS

.logo {
  background: left / cover url('/media/examples/puppy-header-logo.jpg');
  display: flex;
  height: 120px;
  align-items: center;
  justify-content: center;
  font:
    bold calc(1em + 2 * (100vw - 120px) / 100) 'Dancing Script',
    fantasy;
  color: #ff0083;
  text-shadow: #000 2px 2px 0.2rem;
}

header > h1 {
  margin-bottom: 0;
}

header > time {
  font: italic 0.7rem sans-serif;
}

`<hgroup>`

描述

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

属性

示例

HTMLCSS

HTML

<hgroup>
  <h1>Frankenstein</h1>
  <p>Or: The Modern Prometheus</p>
</hgroup>
<p>
  Victor Frankenstein, a Swiss scientist, has a great ambition: to create intelligent life. But when his creature first
  stirs, he realizes he has made a monster. A monster which, abandoned by his master and shunned by everyone who sees
  it, follows Dr Frankenstein to the very ends of the earth.
</p>

CSS

hgroup {
  text-align: right;
  padding-right: 16px;
  border-right: 10px solid #00c8d7;
}

hgroup h1 {
  margin-bottom: 0;
}

hgroup p {
  margin: 0;
  font-weight: bold;
}

`<hr>` 主题分割（水平分割线）元素

描述

HTML <hr> 元素表示段落级元素之间的主题转换

属性

示例

HTML

<p>这是文本的第一段。这是文本的第一段。这是文本的第一段。这是文本的第一段。</p>
<hr />
<p>这是文本的第二段。这是文本的第二段。这是文本的第二段。这是文本的第二段。</p>

`<html>` HTML 文档/根元素

描述

HTML <html> 元素表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素

属性

xmlns 指派文档的 XML 命名空间,默认的值是"http://www.w3.org/1999/xhtml"

示例

HTML

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

`<i>` 术语文本元素

描述

HTML 元素 <i> 用于表现因某些原因需要区分普通文本的一系列文本

属性

示例

HTML

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

`<iframe>`

描述

HTML 内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。

属性

allow 用于为<iframe>指定其特征策略
width 以 CSS 像素格式，或以像素格式，或以百分比格式指定的 frame 的宽度。默认值是300
height 以 CSS 像素格式，或像素格式，或百分比格式指定 frame 的高度。默认值为150
name 用于定位嵌入的浏览上下文的名称
referrerpolicy 表示在获取 iframe 资源时如何发送 referrer 首部
sandbox 控制应用于嵌入在 <iframe> 中的内容的限制
src 被嵌套的页面的 URL 地址
srcdoc 该属性是一段 HTML 代码，这些代码会被渲染到 iframe 中

示例

HTMLCSS

HTML

<iframe
  id="inlineFrameExample"
  title="Inline Frame Example"
  width="300"
  height="200"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>

CSS

iframe {
  border: 1px solid black;
  width: 100%; /* takes precedence over the width set with the HTML width attribute */
}

`<img>` 图像嵌入元素

描述

<img> HTML 元素将一张图像嵌入文档

属性

src 图片的路径
alt 图像的文本描述

示例

HTMLCSS

HTML

<img
  class="fit-picture"
  src="/media/cc0-images/grapefruit-slice-332-332.jpg"
  alt="Grapefruit slice atop a pile of other slices" />

CSS

.fit-picture {
  width: 250px;
}

`<input>` 输入（表单输入）元素

描述

HTML <input> 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据

类型

属性

示例

HTMLCSS

HTML

<label for="name">Name (4 to 8 characters):</label>

<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10" />

CSS

label {
  display: block;
  font:
    1rem 'Fira Sans',
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

`<kbd>`

描述

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

属性

示例

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>

`<label>`

描述

HTML <label> 元素（标签）表示用户界面中某个元素的说明

属性

for 和 <label> 元素在同一文档中的可关联标签的元素的 id
form 表示与 label 元素关联的 <form> 元素

示例

HTML

<label
  >Do you like peas?
  <input type="checkbox" name="peas" />
</label>
<label for="username">Click me</label> <input type="text" id="username" />

`<legend>` 字段集标题元素

描述

<legend> HTML 元素表示其父元素 <fieldset> 内容的标题

属性

示例

`<li>` 列表项元素

描述

<li> HTML 元素用于表示列表中的项目

属性

value 这个整数属性指示由 <ol> 元素定义的列表项当前序数值

示例

HTML

<ul>
  <li>Neil Armstrong</li>
  <li>Alan Bean</li>
  <li>Peter Conrad</li>
  <li>Edgar Mitchell</li>
  <li>Alan Shepard</li>
</ul>

`<link>` 外部资源链接元素

描述

HTML <link> 元素规定了当前文档与某个外部资源的关系

属性

示例

HTMLCSS

HTML

<link href="main.css" rel="stylesheet" />
<link href="main.css" rel="stylesheet" />
<link
  rel="apple-touch-icon"
  sizes="114x114"
  href="apple-icon-114.png"
  type="image/png" />
<link href="print.css" rel="stylesheet" media="print" />
<link
  href="mobile.css"
  rel="stylesheet"
  media="screen and (max-width: 600px)" />
<link
  rel="preload"
  href="myFont.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous" />

CSS

`<main>`

描述

HTML <main> 元素呈现了文档的 <body> 或应用的主体部分

属性

示例

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>
<!-- 其他内容 -->

`<map>` 图像映射元素

描述

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

属性

示例

HTMLCSS

HTML

<map name="infographic">
  <area
    shape="poly"
    coords="130,147,200,107,254,219,130,228"
    href="https://developer.mozilla.org/docs/Web/HTML"
    target="_blank"
    alt="HTML" />
  <area
    shape="poly"
    coords="130,147,130,228,6,219,59,107"
    href="https://developer.mozilla.org/docs/Web/CSS"
    target="_blank"
    alt="CSS" />
  <area
    shape="poly"
    coords="130,147,200,107,130,4,59,107"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    target="_blank"
    alt="JavaScript" />
</map>
<img usemap="#infographic" src="/media/examples/mdn-info2.png" alt="MDN infographic" />

CSS

img {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 232px;
}

`<mark>`

描述

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

属性

示例

HTML

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

`<menu>` 菜单元素

描述

<menu> HTML 元素在 HTML 规范中被描述为 <ul> 的语义替代，但浏览器将其视为与 <ul> 没有区别

属性

示例

HTML

<menu>
  <li><button onclick="copy()">复制</button></li>
  <li><button onclick="cut()">剪切</button></li>
  <li><button onclick="paste()">粘贴</button></li>
</menu>

`<meta>` 元数据元素

描述

HTML <meta> 元素表示那些不能由其他 HTML 元相关（meta-related）元素表示的元数据信息

属性

示例

HTML

<meta charset="utf-8" />

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

`<meter>`

描述

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

属性

示例

HTML

<meter min="200" max="500" value="350">350 degrees</meter>

`<nav>`

描述

HTML <nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接

属性

示例

HTMLCSS

HTML

<nav class="crumbs">
  <ol>
    <li class="crumb"><a href="#">Bikes</a></li>
    <li class="crumb"><a href="#">BMX</a></li>
    <li class="crumb">Jump Bike 3000</li>
  </ol>
</nav>

<h1>Jump Bike 3000</h1>
<p>
  This BMX bike is a solid step into the pro world. It looks as legit as it rides and is built to polish your skills.
</p>

CSS

nav {
  border-bottom: 1px solid black;
}

.crumbs ol {
  list-style-type: none;
  padding-left: 0;
}

.crumb {
  display: inline-block;
}

.crumb a::after {
  display: inline-block;
  color: #000;
  content: '>';
  font-size: 80%;
  font-weight: bold;
  padding: 0 3px;
}

`<noscript>` 无脚本元素

描述

<noscript> HTML 元素定义了在页面上的脚本类型不支持或浏览器当前关闭脚本时插入的 HTML 部分

属性

示例

HTML

<noscript>
  <!-- 外部文件的锚链接 -->
  <a href="https://www.mozilla.org/">外部链接</a>
</noscript>
<p>摇滚！</p>

`<object>`

描述

HTML <object> 元素（或者称作 HTML 嵌入对象元素）表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源

属性

示例

HTML

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

<!-- Embed a flash movie with parameters -->
<object data="move.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar" />
</object>
<object type="application/pdf" data="/media/examples/In-CC0.pdf" width="250" height="200"></object>

`<ol>`

描述

有序列表

属性

reversed 倒序
start 起始值
type 编号类型
- a 小写英文
- A 大写英文
- i 小写罗马
- I 大写罗马
- 1 数字

示例

HTML

<ol>
  <li>Mix flour, baking powder, sugar, and salt.</li>
  <li>In another bowl, mix eggs, milk, and oil.</li>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ol>

`<optgroup>`

描述

select 分组选项

属性

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>

`<option>`

描述

选项

属性

diabled
label
selected
value

示例

`<output>`

描述

表示计算或用户操作的结果

属性

for 其他影响计算结果的标签的 ID，可以多个
form 与当前标签有关联的 form
name name

示例

HTML

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" name="b" value="50" /> +
  <input type="number" name="a" value="10" /> =
  <output name="result"></output>
</form>

`<p>` 段落

描述

表示文本的一个段落

属性

示例

HTML

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

`<picture>`

描述

HTML <picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本

属性

示例

HTML

<!--Change the browser window width to see the image change.-->
<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

`<pre>`

描述

HTML <pre> 元素表示预定义格式文本

属性

示例

HTML

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

`<progress>` 进度条

描述

HTML中的 <progress> 元素用来显示一项任务的完成进度

属性

max
value

示例

HTML

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

`<q>`

描述

行内引用

属性

cite 引用的文本的源文档

示例

HTML

<p>
  Everytime Kenny is killed, Stan will announce
  <q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact">
    Oh my God, you/they killed Kenny! </q
  >.
</p>

`<rp>`

描述

HTML <rp> 元素用于为那些不能使用 <ruby> 元素展示 ruby 注解的浏览器，提供随后的圆括号

属性

示例

HTML

<ruby>
  漢 <rp>(</rp><rt>han</rt><rp>)</rp> 字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

`<rt>`

描述

HTML Ruby 文本 (<rt>) 元素包含字符的发音，字符在 ruby 注解中出现，它用于描述东亚字符的发音

`<ruby>`

描述

<h1>Choosing an Apple</h1>
<section>
  <h2>Introduction</h2>
  <p>This document provides a guide to help with the important task of choosing the correct Apple.</p>
</section>

<section>
  <h2>Criteria</h2>
  <p>
    There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness,
    tartness...
  </p>
</section>

`<select>`

描述

HTML <select> 元素表示一个提供选项菜单的控件

属性

autocomplete 一个 DOMString，为用户代理提供自动填充功能的线索
autofocus 获得焦点
disabled 禁用
form select 所关联的form
multiple 是否支持多选
name 控件的名称
required 必填
size 如果控件显示为滚动列表框（如声明了 multiple），则此属性表示为控件中同时可见的行数

示例

HTML

<label
  >Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
  </select>
</label>

`<slot>` Web组件插槽元素

描述

<slot> HTML 元素是——Web 组件技术套件的一部分——它是一个在 web 组件内部的占位符，你可以使用自己的标记来填充该占位符，从而创建单独的 DOM 树并将其一起呈现

属性

name 插槽名称

示例

HTML

<template id="element-details-template">
  <style>
    details {
      font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
    }
    .name {
      font-weight: bold;
      color: #217ac0;
      font-size: 120%;
    }
    h4 {
      margin: 10px 0 -8px 0;
      background: #217ac0;
      color: white;
      padding: 2px 6px;
      border: 1px solid #cee9f9;
      border-radius: 4px;
    }
    .attributes {
      margin-left: 22px;
      font-size: 90%;
    }
    .attributes p {
      margin-left: 16px;
      font-style: italic;
    }
  </style>
  <details>
    <summary>
      <code class="name">
        &lt;<slot name="element-name">需要名称</slot>&gt;
      </code>
      <span class="desc"><slot name="description">需要描述</slot></span>
    </summary>
    <div class="attributes">
      <h4>属性</h4>
      <slot name="attributes"><p>无</p></slot>
    </div>
  </details>
  <hr />
</template>

`<small>` 备注元素

描述

<small> HTML 元素代表旁注和小字印刷（如版权和法律文本），与其样式的呈现方式无关

属性

示例

HTML

<p>
  这是第一句。
  <small>整个句子采用了较小的字体显示。</small>
</p>

`<source>` 媒体或图像资源元素

描述

HTML <source> 元素为 <picture>、<audio> 和 <video> 元素指定一个或多个媒体资源

属性

示例

HTML

<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  抱歉，你的浏览器不支持 HTML 视频。
</video>

`<span>` 内容跨越元素

描述

<span> HTML 元素是一个通用的行级容器，本身不具备特殊含义

属性

示例

HTMLCSS

HTML

<p>
  Add the <span class="ingredient">basil</span>, <span class="ingredient">pine nuts</span> and
  <span class="ingredient">garlic</span> to a blender and blend into a paste.
</p>

<p>Gradually add the <span class="ingredient">olive oil</span> while running the blender slowly.</p>

CSS

span.ingredient {
  color: #f00;
}

`<strong>`

描述

Strong 元素 (<strong>) 表示文本十分重要，一般用粗体显示

属性

示例

HTML

<p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p>

`<style>` 样式信息元素

描述

HTML 的 <style> 元素包含文档的样式信息或文档的部分内容

属性

示例

HTML

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>测试页面</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>这是一个段落。</p>
  </body>
</html>

`<sub>` 下标元素

描述

HTML <sub> 元素用于指定应显示为下标的行内文本，这完全是出于排版的原因

属性

示例

HTML

<p>
  Almost every developer's favorite molecule is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, also known as
  "caffeine."
</p>

`<summary>` 摘要展现元素

描述

HTML <summary> 元素指定了 <details> 元素展开盒子的内容的摘要，标题或图例

属性

示例

`<sup>` 上标元素

描述

HTML <sup> 元素定义仅出于排版目的而显示为上标的行内文本

属性

示例

HTML

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

`<table>` 表格元素

描述

HTML <table> 元素表示表格数据——即在一个由包含数据的行和列组成的二维表格中呈现的信息

属性

示例

`<tbody>` 表格主体元素

描述

<tbody> HTML 元素封装了一系列表格的行（<tr> 元素），代表了它们是表格（<table>）主要内容的组成部分。

属性

示例

`<td>` 表格数据单元元素

描述

定义包含数据的表格单元格

属性

示例

:::

`<template>` 内容模板元素

描述

HTML 内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化

属性

示例

HTMLjs

HTML

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- 现有数据可以可选地包括在这里 -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

// 通过检查来测试浏览器是否支持 HTML 模板元素
// 用于保存模板元素的内容属性。
if ("content" in document.createElement("template")) {
  // 使用现有的 HTML tbody 实例化表和该行与模板
  let t = document.querySelector("#productrow"),
    td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // 克隆新行并将其插入表中
  let tb = document.getElementsByTagName("tbody");
  let clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);

  // 创建一个新行
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // 克隆新行并将其插入表中
  let clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);
} else {
  // 找到另一种方法来添加行到表，因为不支持 HTML 模板元素。
}

`<textarea>` 文本区域元素

描述

多行纯文本编辑控件

属性

示例

HTMLCSS

HTML

<label for="story">Tell us your story:</label>

<textarea id="story" name="story" rows="5" cols="33">
It was a dark and stormy night...
</textarea>

CSS

label,
textarea {
  font-size: 0.8rem;
  letter-spacing: 1px;
}

textarea {
  padding: 10px;
  max-width: 100%;
  line-height: 1.5;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 1px #999;
}

label {
  display: block;
  margin-bottom: 10px;
}

`<tfooter>`

描述

HTML 元素 <tfoot> 定义了一组表格中各列的汇总行。

属性

示例

HTML

<p>含有表头、表尾和表格主体的表格</p>
<table>
  <thead>
    <tr>
      <th>表头内容 1</th>
      <th>表头内容 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>表格主体内容 1</td>
      <td>表格主体内容 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>表尾内容 1</td>
      <td>表尾内容 2</td>
    </tr>
  </tfoot>
</table>

`<th>`

描述

HTML <th> 元素定义表格内的表头单元格,这部分特征是由 scope 和 headers 属性准确定义的

属性

示例

`<thead>`

描述

HTML 的 <thead> 元素定义了一组定义表格的列头的行

属性

HTML

<table>
  <caption>
    Alien football stars
  </caption>
  <tr>
    <th scope="col">Player</th>
    <th scope="col">Gloobles</th>
    <th scope="col">Za'taak</th>
  </tr>
  <tr>
    <th scope="row">TR-7</th>
    <td>7</td>
    <td>4,569</td>
  </tr>
  <tr>
    <th scope="row">Khiresh Odo</th>
    <td>7</td>
    <td>7,223</td>
  </tr>
  <tr>
    <th scope="row">Mia Oolong</th>
    <td>9</td>
    <td>6,219</td>
  </tr>
</table>

CSS

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th[scope='col'] {
  background-color: #505050;
  color: #fff;
}

th[scope='row'] {
  background-color: #d6ecd4;
}

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eee;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

`<track>` 字幕

描述

HTML <track> 元素被当作媒体元素—<audio> 和 <video>的子元素来使用

属性

示例

HTMLCSS

HTML

<video controls src="/media/cc0-videos/friday.mp4">
  <track default kind="captions" srclang="en" src="/media/examples/friday.vtt" />
  Download the
  <a href="/media/cc0-videos/friday.mp4">MP4</a>
  video, and
  <a href="/media/examples/friday.vtt">subtitles</a>.
</video>

CSS

video {
  width: 250px;
}

video::cue {
  font-size: 1rem;
}

`<u>` 未阐明的注释（下划线）元素

描述

<u> HTML 元素表示行内文本拥有一个非文本形式的注释，该注释需要以某种方式渲染出来

属性

示例

HTMLCSS

HTML

<p>You could use this element to highlight <u>speling</u> mistakes, so the writer can <u>corect</u> them.</p>

CSS

p {
  margin: 0;
}

u {
  text-decoration: #f00 wavy underline;
}

`<ul>` 无序列表元素

描述

HTML <ul> 元素表示无序的项目列表，通常渲染为项目符号列表

属性

示例

HTMLCSS

HTML

  <ul>
  <li>Milk</li>
  <li>
    Cheese
    <ul>
      <li>Blue cheese</li>
      <li>Feta</li>
    </ul>
  </li>
</ul>

CSS

li {
  list-style-type: circle;
}

li li {
  list-style-type: square;
}

`<var>` 表示变量的元素

描述

HTML <var> 元素表示数学表达式或编程上下文中的变量名称

属性

示例

HTMLCSS

HTML

<p>
  The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where <var>l</var> represents the length,
  <var>w</var> the width and <var>h</var> the height of the box.
</p>

CSS

var {
  font-weight: bold;
}

`<video>` 视频嵌入元素

描述

<video> HTML 元素用于在文档中嵌入媒体播放器，用于支持文档内的视频播放

属性

示例

HTML

<video controls width="250">
  <source src="/media/cc0-videos/flower.webm" type="video/webm" />

  <source src="/media/cc0-videos/flower.mp4" type="video/mp4" />

  Download the
  <a href="/media/cc0-videos/flower.webm">WEBM</a>
  or
  <a href="/media/cc0-videos/flower.mp4">MP4</a>
  video.
</video>

`<wbr>` 换行机会元素

描述

<wbr> HTML 元素表示一个单词换行机会——文本中的一个位置，浏览器可以选择在此处换行，即使其换行规则不会在此处换行

属性

示例

HTMLCSS

HTML

<div id="example-paragraphs">
  <p>Fernstraßenbauprivatfinanzierungsgesetz</p>
  <p>Fernstraßen<wbr />bau<wbr />privat<wbr />finanzierungs<wbr />gesetz</p>
  <p>Fernstraßen&shy;bau&shy;privat&shy;finanzierungs&shy;gesetz</p>
</div>

CSS

#example-paragraphs {
  background-color: white;
  overflow: hidden;
  resize: horizontal;
  width: 9rem;
  border: 2px dashed #999;
}

元素组

address article aside footer header hgroup hr main nav search section
meta iframe link noscript style html body title
h1 abbr b bdi bdo br code em i kbd pre blockquote cite dfn q s samp small del ins strong sub sup time u var wbr
dl dt dd
li ul ol menu
table caption tbody thead colgroup col tr td th tfooter
button div span fieldset legend form label optgroup datalist option output select input textarea
canvas img video audio area map object picture source track embed figure figcaption
data
details summary dialog progress
ruby rp rt
slot template

HTML元素 ​

<a> 锚元素 ​

描述 ​

属性 ​

<abbr> 缩写元素 ​

描述 ​

属性 ​

示例 ​

<address> 联系人地址元素 ​

描述 ​

属性 ​

示例 ​

<area> ​

描述 ​

属性 ​

示例 ​

<article> ​

描述 ​

属性 ​

示例 ​

<aside> ​

描述 ​

属性 ​

示例 ​

<audio> ​

描述 ​

属性 ​

示例 ​

<bdi> ​

描述 ​

属性 ​

示例 ​

<bdo> 双向文本覆盖元素 ​

描述 ​

属性 ​

示例 ​

<blockquote> 块级引用元素 ​

描述 ​

属性 ​

示例 ​

<body> 文档主体元素 ​

描述 ​

属性 ​

示例 ​

<br> ​

描述 ​

属性 ​

示例 ​

<button> ​

描述 ​

属性 ​

示例 ​

<canvas> ​

描述 ​

属性 ​

示例 ​

<caption> ​

描述 ​

属性 ​

示例 ​

<cite> ​

描述 ​

属性 ​

示例 ​

<code>: 行内代码元素 ​

描述 ​

属性 ​

示例 ​

<col>: 表格列元素 ​

描述 ​

属性 ​

示例 ​

<colgroup> ​

描述 ​

属性 ​

示例 ​

<data> ​

描述 ​

属性 ​

示例 ​

HTML元素

`<a>` 锚元素

描述

属性

`<abbr>` 缩写元素

描述

属性

示例

`<address>` 联系人地址元素

描述

属性

示例

`<area>`

描述

属性

示例

`<article>`

描述

属性

示例

`<aside>`

描述

属性

示例

`<audio>`

描述

属性

示例

`<bdi>`

描述

属性

示例

`<bdo>` 双向文本覆盖元素

描述

属性

示例

`<blockquote>` 块级引用元素

描述

属性

示例

`<body>` 文档主体元素

描述

属性

示例

`<br>`

描述

属性

示例

`<button>`

描述

属性

示例

`<canvas>`

描述

属性

示例

`<caption>`

描述

属性

示例

`<cite>`

描述

属性

示例

`<code>`: 行内代码元素

描述

属性

示例

`<col>`: 表格列元素

描述

属性

示例

`<colgroup>`

描述

属性

示例

`<data>`

描述

属性

示例