HTML 元素

<a>

属性

• download 属性:下载文件

• href:链接地址

  • 文档片段链接到页面的某一段
  • 链接到某一段文字
  • 媒体片段链接到某个媒体文件
  • 使用tel:URL 链接到一个电话号码
  • 使用mailto: URL 链接到一个邮箱地址
  • 如果 web 浏览器不能支持其他 URL 协议，网站可以使用registerProtocolHandler()

• hreflang:用于制定所链接到文档的人类语言。其仅提供建议，没有内置的功能。其允许的值与全局的lang属性一致

• ping:包含一个以空格分割的 URL 列表，党跟随超链接时，浏览器会发送带有正文

• referrerpolicy:定义跟随链接时，referrer 需要发送多少内容

  • no-referrer:不发送任何信息
  • no-referrer-when-downgrade:不发送任何信息，除非从 HTTPS 页面链接到 HTTP 页面
  • origin:发送的 referrer 将被限制在其页面的来源：协议、主机和端口
  • origin-when-cross-origin:发送到其他源的 referrer 将只包含协议、主机和端口，而导航到相同的源仍将包括路径。
  • same-origin:将向同源地址发送 referrer，但跨源请求不包含 referrer 信息。
  • strict-origin：当协议安全级别保持不变（HTTPS→HTTPS）时，只将文档的来源作为 referrer 发送，但不要将其发送到安全性较低的目的地（HTTPS→HTTP）。
  • strict-origin-when-cross-origin（默认）：在执行同源请求时发送完整的 URL，在协议安全级别保持不变时只发送源（HTTPS->HTTPS）,对安全性较低的目的地不发送标头（HTTPS->HTTP）。
  • unsafe-url：表示 referrer 将会包含源和路径（但是不包含片段、密码或用户名）。此值是不安全的，因为它可能会将受 TLS 保护的资源的源和路径泄露到不安全的源中。

• rel:该属性指定了目标对象到链接对象的关系。

• target:规定在何处打开链接文档 - _blank:在新窗口中打开被链接文档 - _self:默认。在相同的框架中打开被链接文档 - _parent:在父框架集中打开被链接文档 - _top:在整个窗口中打开被链接文档 注：在<a>元素上使用target='_blank'隐式提供与使用rel="noopener"相同的rel行为，即不会设置window.opener。

• type:该属性指定在一个MIME 类型链接目标的形式的媒体类型。没有内置功能。

链接到绝对地址

<a href="https://www.baidu.com">百度</a>

链接到相对地址

<a href="//example.com">相对于协议的 URL</a>
<a href="/zh-CN/docs/Web/HTML">相对于源的 URL</a>
<a href="./p">相对于路径的 URL</a>

链接到文档片段

<!-- <a> 元素链接到下面部分 -->
<p><a href="#Section_further_down"> 跳转到下方标题 </a></p>

<!-- 要链接到的标题 -->
<h2 id="Section_further_down">更下面的部分</h2>

注：如 HTML 规范所定义的那样，你可以使用 href="#top"或空片段(href='#')来链接到当前页面的顶部。

链接到 email 地址

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

链接到电话号码

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

tel:链接行为随设备能力而变化：

• 蜂窝设备会自动拨出号码。
• 大多数操作系统都有可以打电话的程序，如 Skype 或 FaceTime。
• 网站可以通过 registerProtocolHandler 拨打电话，如 web.skype.com。
• 其他行为包括将号码保存到联系人，或将号码发送到另一个设备。

关于 tel: URL 协议的语法、附加特性和其他细节，见 RFC 3966。

使用 download 属性将<canvas>保存为 PNG 格式

要把 <canvas> 元素的内容保存为图片，你可以创建一个链接，其中 href 是用 JavaScript 创建的 data: URL 的 canvas 数据， download 属性提供了下载的 PNG 文件的文件名：

<p>
  按下鼠标并移动来完成你的作画。
  <a href="" download="my_painting.png">下载我的绘画</a>
</p>

<canvas width="300" height="300"></canvas>

html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}

const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI * 2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY)
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));

document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL())
  );

防止页面刷新

<a href="javascript:void(0);">点击我</a>

<abbr> 缩写元素

• title:该属性定义了缩写的完整描述。

<abbr>HTML 元素表示一个缩写词或首字母缩略词 比如 CSS，是 Cascading Style Sheets 的缩写。

<abbr title="Cascading Style Sheets" style="text-decoration: none;">CSS</abbr>

dfn 定义缩略语

<dfn>HTML 元素定义一个术语。术语的精确含义由其父元素的内容提供。

<p>
  <dfn id="html"><abbr title="超文本标记语言">HTML</abbr></dfn>
  是一种用于创建网页的语义和结构的标记语言。
</p>

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

<address> 联系人地址元素

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

示例：

<p>Contact the author of this page:</p>

<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> 元素定义图像映射内部的区域（图像映射是带有可点击区域的图像）。仅在<map>元素内部使用。

• alt:定义当图像无法显示时显示的替代文本。

• coords:定义可点击区域的坐标。

  • 矩形：两个 X，Y。左上、右下
  • 圆形：(x,y)、r。
  • 多边形：x1、y1、x2、y2、x3、y3 等等。HTML4 里，值可能是像素数量或者百分比，区别是不是有%出现；HTML5 里只可能是像素的数量。

• download：下载资源链接

• href:定义链接的目标 URL。HTML4 中需要指定，HTML5 中可以省略。

• hreflang：指明链接资源的语言类型，值的范围参考BCP47,这个属性只能在指明href之后使用。

• media：定义链接资源的媒体类型。如果此属性省略，默认全部。仅在 href 属性存在情况下使用。

• rel：定义当前文档与被链接文档之间的关系。仅在 href 属性存在情况下使用。

• shape：定义可点击区域的形状。默认是矩形。仅在 href 属性存在情况下使用。

• target：定义在何处打开链接文档。仅在 href 属性存在情况下使用。

• top：指定用于链接目标的 MIME 类型的媒体类型。仅在 href 属性存在情况下使用。MIME 类型完整列表

示例

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

<article>

表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。

.forecast {
  margin: 0;
  padding: 0.3rem;
  background-color: #eee;
}

.forecast > h1,
.day-forecast {
  margin: 0.5rem;
  padding: 0.3rem;
  font-size: 1.2rem;
}

.day-forecast {
  background: right/contain content-box border-box no-repeat
    url("/media/examples/rain.svg") white;
}

.day-forecast > h2,
.day-forecast > p {
  margin: 0.2rem;
  font-size: 1rem;
}

<article class="forecast">
  <h1>Weather forecast for Seattle</h1>
  <article class="day-forecast">
    <h2>03 March 2018</h2>
    <p>Rain.</p>
  </article>
  <article class="day-forecast">
    <h2>04 March 2018</h2>
    <p>Periods of rain.</p>
  </article>
  <article class="day-forecast">
    <h2>05 March 2018</h2>
    <p>Heavy rain.</p>
  </article>
</article>

<aside>

表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独拆分出来而不会使整体受影响。其通常表现为侧边栏或标注框。

aside {
  width: 40%;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
  float: right;
  box-shadow: inset 5px 0 5px -5px #29627e;
  font-style: italic;
  color: #29627e;
}

aside > p {
  margin: 0.5rem;
}

<p>
  Salamanders are a group of amphibians with a lizard-like appearance, including
  short legs and a tail in both larval and adult forms.
</p>

<aside>
  <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>

<p>
  Several species of salamander inhabit the temperate rainforest of the Pacific
  Northwest, including the Ensatina, the Northwestern Salamander and the
  Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects,
  worms and other small creatures.
</p>

<audio>

表示音频内容。

figure {
  margin: 0;
}

<figure>
  <figcaption>Listen to the T-Rex:</figcaption>
  <audio controls src="/media/cc0-audio/t-rex-roar.mp3"></audio>
  <a href="/media/cc0-audio/t-rex-roar.mp3"> Download audio </a>
</figure>

• autoplay:音频会尽快自动播放，不会等哎整个音频文件下载完成。（自动播放音频可能会破坏用户的体验，所以应该尽可能避免）。
• controls：向用户现实音频播放控件。
• crossorigin：配置如何处理跨源请求。
  • anonymous：对请求不验证。
  • use-credentials：对请求进行验证。
• currentTime：返回一个双精度浮点值，用以标明以秒为单位的当前音频的播放位置。
• duration：返回音频的总时长，以秒为单位。
• loop：音频播放完后会重新开始。
• muted：音频会静音。
• paused：返回音频是否暂停。
• play()：开始播放音频。
• pause()：暂停播放音频。
• preload：配置音频的预加载行为。
  • none：不进行预加载。
  • metadata：仅加载音频的元数据。
  • auto：示意用户可能会播放音频
  • 空字符串：等效于 auto 属性。不同浏览器有自己的默认值。
• src：嵌入的音频的 URL。 备注：autoplay 属性优先级高于 preload。如果 autoplay 被指定，浏览器会显式地开始下载媒体以供播放。

<b>

用于表示文本中的非文本重要内容，通常用于需要突出显示的文本。

如果希望创建粗体文本，应该使用 CSSfont-weight属性。如果你希望指示某个元素特别重要，应该使用<strongg>元素。

<p>
  The two most popular science courses offered by the school are
  <b class="term">chemistry</b> (the study of chemicals and the composition of
  substances) and <b class="term">physics</b> (the study of the nature and
  properties of matter and energy).
</p>

<base>

用于指定用于一个文档中所有相对 URL 的基本 URL。

<head>
  <base href="https://www.example.com/" />
</head>

<body>
  <img src="images/logo.png" alt="Example logo" />
</body>

• href：基本 URL
• target：所有相对 URL 的默认打开方式

<bdi>

告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道插入文本的方向性时，这个标签会很有用。

html {
  font-family: sans-serif;
}

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

.name {
  color: red;
}

<h1>World wrestling championships</h1>

<ul>
  <li><bdi class="name">Evil Steven</bdi>: 1st place</li>
  <li><bdi class="name">François fatale</bdi>: 2nd place</li>
  <li><span class="name">سما</span>: 3rd place</li>
  <li><bdi class="name">الرجل القوي إيان</bdi>: 4th place</li>
  <li><span class="name" dir="auto">سما</span>: 5th place</li>
</ul>

<bdo>

用于覆盖当前文本的方向

html {
  font-family: sans-serif;
}

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

<h1>Famous seaside songs</h1>

<p>The English song "Oh I do like to be beside the seaside"</p>

<p>
  Looks like this in Hebrew:
  <span dir="rtl">אה, אני אוהב להיות ליד חוף הים</span>
</p>

<p>
  In the computer's memory, this is stored as
  <bdo dir="ltr">אה, אני אוהב להיות ליד חוף הים</bdo>
</p>

dir：文本的方向，可以是 ltr（从左到右）或 rtl（从右到左）。

<blockquote>块级引用元素

<div>
  <blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>
      Words can be like X-rays, if you use them properly—they’ll go through
      anything. You read and you’re pierced.
    </p>
  </blockquote>
  <p>—Aldous Huxley, <cite>Brave New World</cite></p>
</div>

div:has(> blockquote) {
  background-color: #ededed;
  margin: 10px auto;
  padding: 15px;
  border-radius: 5px;
}

blockquote p::before {
  content: "\201C";
}

blockquote p::after {
  content: "\201D";
}

blockquote + p {
  text-align: right;
}

• cite：标注引用的信息的来源文档或者相关信息的 URL。通常用来描述能够解释引文的上下文或者引用的信息。

使用说明

• 修改被引用内容的缩进距离，可以使用 CSS 的 margin-left 或 margin-right
• 引用较短的内容而非创建一个单独的引用块，可以使用<q>标签

<body>文档主体元素

• onafterprint：当文档打印完成后触发的函数
• onbeforeprint：当文档即将打印时触发的函数
• onbeforeunload：当文档即将卸载时触发的函数
• onblur：当文档失去焦点时调用的函数
• onerror：当文档加载发生错误时触发的函数
• onfocus：当文档获得焦点时触发的函数
• onhashchange：当文档的 URL 的锚部分发生改变时触发的函数
• onlanguagechange：当首选语言发生变化时调用的函数
• onload：当文档加载完成时触发的函数
• onmessage：当文档接收到消息时触发的函数
• onoffline：当网络失败时调用的函数
• ononline：当网络通信恢复后调用的函数
• onpopstate：当用户浏览会话历史时调用的函数
• onresize：当文档窗口大小发生变化时触发的函数
• onstorage：当文档存储时触发的函数
• onunload：当文档即将被卸载时调用的函数

<br>换行元素

<button>按钮

• autofocus：当页面加载时，按钮将自动获得焦点
• disabled：当设置为 true 时，按钮将被禁用，无法点击
• form：按钮所属的表单的 ID
• formaction：当按钮被点击时，表单提交到的 URL。如果指定了，将重写 button 表单拥有者的 action 属性。
• formenctype：指定提交表单到服务器的内容类型。可选值：
  • application/x-www-form-urlencoded：默认值，将表单数据编码为键值对
  • multipart/form-data：将表单数据编码为多部分数据
  • text/plain：将表单数据编码为纯文本
• formmethod：指定提交表单到服务器时使用的 HTTP 方法。可选值：
  • get：默认值，将表单数据附加到 URL 中
  • post：将表单数据作为请求体发送
• formnovalidate：如果 button 时 submit 类型，则表单提交时不会进行验证。如果有这个属性，它会重写 button 拥有者的 novalodate 属性
• formtarget：指定提交表单到服务器时打开的窗口或框架。可选值：_self、_blank、_parent、_top、framename。
• name：button 的名称，与表单数据一起提交。
• type：button 的类型，可选值：button、submit、reset。
• value：button 的值。它定义的值与表单数据的提交有关。

<cite>

表示一个作品的引用，且必须包含作品的标题。通常与<blockquote>标签一起使用，以引用一个完整的段落或章节。

<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>

<code>

行内代码元素

<data>

讲一个指定内容和机器可读的翻译联系在一起。但是如果是和时间或日期相关的，则一定要使用<time>标签。

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

<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>

<datalist>

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

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

<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>

<del>

删除线，可以通过 css 作出同样的效果

• cite：表示删除原因的引用
• datetime：表示删除的时间

<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>

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

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;
}

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

属性：

• open:默认 false,表示 details 是否展开

事件：

details.addEventListener("toggle", (event) => {
  if (details.open) {
    /* 元素切换至打开状态 */
  } else {
    /* 元素切换至关闭状态 */
  }
});

<dfn>

定义一个术语，该术语在文档的其他地方被定义过，或者一个读者可能不熟悉的术语。

<p>
  <dfn>World Wide Web</dfn> (also known as WWW and the Web) is an information
  space where documents and other web resources are identified by Uniform
  Resource Locators (URLs), interlinked by hypertext links, and accessible via
  the Internet.
</p>

<dialog>

创建一个对话框，例如提示框，确认框，或者自定义的模态对话框。

div

容器元素，自身没有特殊意义

.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

<div class="shadowbox">
  <p>这是一张非常有趣的说明，陈列在一个可爱的影盒里。</p>
</div>

<em>

强调元素，表现为斜体文字。和<i>不同的是，<em>表示强调，而<i>表示引用。

<fieldset>

将表单内的元素进行分组，通常还配合<legend>元素来为该组元素添加标题。

<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>

属性：

• disabled：禁用组内所有元素，legend 除外。
• form：指定该组元素所属的表单，即使该元素不在表单内。值为一个 form 元素的 id。
• name：元素分组的名称。

<figcaption>

描述其父节点<figure>元素里的奇遇内容的标题或说明。为<figure>提供一个无障碍描述。

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;
}

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

<footer>

页脚元素，通常包含版权信息，作者信息，或者指向其他相关文档的链接。

article {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

footer {
  display: flex;
  justify-content: center;
  padding: 5px;
  background-color: #45a1ff;
  color: #fff;
}

<article>
  <h1>How to be a wizard</h1>
  <ol>
    <li>Grow a long, majestic beard.</li>
    <li>Wear a tall, pointed hat.</li>
    <li>Have I mentioned the beard?</li>
  </ol>
  <footer>
    <p>© 2018 Gandalf</p>
  </footer>
</article>

<form>

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

form.form-example {
  display: table;
}

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

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

label {
  padding-right: 10px;
}

<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>

属性：

• accept-charset：定义服务器接受的字符集。默认"UNKNOWN"。在 HTML5 中只能通过空格作为分隔符。

• autocapitalize：定义是否自动将输入值的首字母大写。默认为sentences。这是一个被 IOS Safari 使用的非标准属性。

  • none:完全禁用
  • sentences:自动对每句话首字母大写
  • words:自动对每个单子首字母大写
  • characters:自动大写所有字母

• autocomplete：定义是否启用表单的自动完成功能。默认为on。

• name：表单的名称。该值不能是空字符串，而且在其所在的表单集合中的所有表单（form）元素中必须是独一无二的。

• rel：控制注释和表单创建的链接类型。注释包括 external、nofollow、opener、noopener 和 noreferrer。链接类型包括 help、prev、next、search 和 lincense。rel 值是这些枚举值的空格分割列表。

关于提交表单的属性：

• action：处理表单提交的 URL。这些纸可被 button、<input type='submit'> 或 <input type='image'>元素上的 formaction 属性覆盖。

• enctype：当 method 属性值 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型。可能的取值有：

  • application/x-www-form-urlencoded:默认值
  • multipart/form-data：当表单包含type=file的 input 元素时，必须使用该值。
  • text/plain：出现于 HTML5，用于调试。这个值可以被button、<input type='submit'> 或 <input type='image'>元素上的 formenctype 属性覆盖。

• method：定义提交表单的 HTTP 方法。可能的取值有：

  • get：默认值
  • post：
  • dialog：如果表单在 <dialog> 元素中，提交时关闭对话框。此值可以被 <button>、<input type="submit"> 或 <input type="image"> 元素中的 formmethod 属性覆盖。

• novalidate：如果设置，提交表单时不进行验证。此值可以被 <button>、<input type="submit"> 或 <input type="image"> 元素中的 formnovalidate 属性覆盖。

• target：表示提交表单之后，在哪里显示响应信息。这是一个浏览上下文的名字/关键字（如标签页、窗口或 iframe）。

  • _self：默认值，在当前标签页显示响应信息
  • _blank：在新的标签页显示响应信息
  • _parent：在父标签页显示响应信息
  • _top：在顶级标签页显示响应信息，没有父级，就和_self一样。此值可以被 <button>、<input type="submit"> 或 <input type="image"> 元素中的 formtarget 属性覆盖。

<h1>-<h6>

标题标签，用于定义 HTML 标题元素。

<head>

文档元数据（头部）元素。

<header>

主要用来展示介绍性内容，如文章的标题、Logo、作者信息、搜索框等。

<hgroup>

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

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

hgroup h1 {
  margin-bottom: 0;
}

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

<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>

<hr>

水平分割线

hr {
  border: none;
  border-top: 3px double #333;
  color: #333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr::after {
  background: #fff;
  content: "§";
  padding: 0 4px;
  position: relative;
  top: -13px;
}

<p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p>

<hr />

<p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>

html

文档根元素。它描述了整个 HTML 文档。

<i>

斜体文本

注释：当下面这些标签无法满足你的表示时，再考虑<i>

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

<iframe>

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

示例：

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

<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>

示例：

<iframe
  src="https://example.org"
  title="iframe Example 1"
  width="400"
  height="300"
>
</iframe>

<img>

图像标签，用于在网页中嵌入图像。

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

常用的图像格式：

• APNG
• AVIF
• GIF
• JPEG
• PNG
• SVG
• WebP

<input>

输入标签，用于创建交互式控件，以接受来自用户的数据。

• type：输入类型
• name：输入控件的名称
• value：输入控件的值
• placeholder：输入控件的占位符文本
• required：输入控件是否为必填项
• readonly：输入控件是否为只读
• disabled：输入控件是否为禁用
• autofocus：输入控件是否为自动聚焦
• form：输入控件所属的表单
• formaction：输入控件提交表单的 URL
• formmethod：输入控件提交表单的方法

type 类型：

• button：按钮
• checkbox：复选框
• color：颜色选择器
• date：日期选择器
• datetime-local：本地日期和时间选择器
• email：邮箱
• file：文件选择器
• hidden：隐藏的输入
• image：图像化 submit 按钮。
• month：月份选择器
• number：数字输入
• password：密码输入
• radio：单选按钮
• range：范围选择器
• reset：重置按钮
• search：搜索框
• submit：提交按钮
• tel：电话号码输入
• text：文本输入
• time：时间选择器
• url：URL 输入
• week：周选择器

input 还有很多属性具体看MDN input

<ins>

定义已经被插入文档中的文本，类似于 github 的修改记录

<p>“You're late!”</p>
<del>
  <p>“I apologize for the delay.”</p>
</del>
<ins cite="../howtobeawizard.html" datetime="2018-05">
  <p>“A wizard is never late …”</p>
</ins>

属性：

• cite
• datetime

<kbd>

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

<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>

关联 form 元素的说明

.preference {
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin: 0.5rem;
}

<div class="preference">
  <label for="cheese">Do you like cheese?</label>
  <input type="checkbox" name="cheese" id="cheese" />
</div>

<div class="preference">
  <label for="peas">Do you like peas?</label>
  <input type="checkbox" name="peas" id="peas" />
</div>

• for：关联的 input 的 id
• form：关联的 form 的 id,关联后就不需要将 label 放入到 form 中了

<legend>

定义 fieldset 元素的标题

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

input {
  margin: 0.4rem;
}

<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>

<link>

外部资源链接元素

<main>

定义文档的主要内容。

<map>

定义图像映射，图像映射是带有可点击区域的图像。

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

<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"
/>

<mark>

突出显示的文字。

<menu>

定义无序列表，都是用来表示无序列表。它们关键的区别在于 ul 主要用于显示内容，而 menu 则用于交互式内容。

.news {
  background-color: bisque;
  padding: 1em;
  border: solid thin black;
}

menu {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin-bottom: 0;
  gap: 1em;
}

<div class="news">
  <a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>
  <menu>
    <li><button id="save">Save for later</button></li>
    <li><button id="share">Share this news</button></li>
  </menu>
</div>

<meta>

定义文档元数据，元数据不会显示在页面上，但会被浏览器解析。

<meter>

表示已知范围内的标量值或分数值。

<label for="fuel">Fuel level:</label>

<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
  at 50/100
</meter>

<nav>

定义导航链接的部分。

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;
}

<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>

<noscript>

定义当浏览器不支持脚本时显示的内容。

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

<object>

引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦可以是一个插件所使用的资源。

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

<ol>

有序列表，通常渲染为一个带编号的列表。

li {
  font:
    1rem 'Fira Sans',
    sans-serif;
  margin-bottom: 0.5rem;
}

<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>

属性：

• reversed：是否倒序排列。
• start：列表的起始值。
• type：列表的标记类型。a、A、i、I、1。

<optgroup>

为select元素的选项创建分组。

<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
  <optgroup label="Theropods">
    <option>Tyrannosaurus</option>
    <option>Velociraptor</option>
    <option>Deinonychus</option>
  </optgroup>
  <optgroup label="Sauropods">
    <option>Diplodocus</option>
    <option>Saltasaurus</option>
    <option>Apatosaurus</option>
  </optgroup>
</select>

属性：

• disabled：禁用该选项组。
• label：选项组的标签。

<output>

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

<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>

属性：

• for其他影响计算结果的标签id，可以多个
• form指定表单id
• name name属性

<p>

段落

<picture>

根据屏幕大小或分辨率显示不同的图片。

<picture>
  <source srcset="/media/cc0-images/surfer-240-200.jpg" media="(orientation: portrait)" />
  <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>

• media：媒体查询
• srcset：图片路径

<pre>

预格式化文本，保留文本中的空格和换行符。不过'<' 字符需要转译。

<pre>
  <code>
    const a = 5;
    const b = 10;
    console.log(a + b);
  </code>
</pre>

<progress>

表示一个任务的完成进度。

<progress value="75" max="100"></progress>

属性：

• max：最大值
• value：当前值

<q>

短引用。

属性

• cite:这个属性的值的URL，意在指出被引用的文本的源文档或者源信息。这个属性重在解释这个引用的参考或者是上下文。

示例：

<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>

section

表示文档中的一个独立部分，通常有标题。

h1,
h2 {
  margin: 0;
}

<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>

下拉列表。

<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

属性：

• autofocus：页面加载时自动聚焦
• disabled：禁用
• form：指定表单id
• multiple：多选
• name：name属性
• required：必填
• size：显示的选项数量

<slot>

插槽，用于将内容插入到组件中。

属性：

• name：插槽名称。

具名插槽具有name属性的<slot>元素。

<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 变为 x-small。

small {
  font-size: 0.7em;
}

<p>MDN Web Docs is a learning platform for Web technologies and the software that powers the Web.</p>

<hr />

<p><small>The content is licensed under a Creative Commons Attribution-ShareAlike 2.5 Generic License.</small></p>

<span>

内联容器，用于对文档中的行内元素进行组合。

<p>This is a <span>span element</span>.</p>

<style>

定义样式表。

sub

下标元素

<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>

<sup>

上标元素

<table>

表格元素

<tbody>

表格主体。

<td>

表格单元格。

<tfoot>

表格页脚。

<th>

表格表头单元格。

<thead>

表格表头。

<tr>

表格行。

<template>

模板元素，用于存储客户端内容，该内容在页面加载时不呈现，但随后在运行时由脚本实例化。

<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>

<script>
    // 通过检查来测试浏览器是否支持 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 模板元素。
}
</script>

<textarea>

多行文本输入控件。

<track>

定义媒体元素的子轨道。用于字幕或章节。

<u>

一般用于标记错误。

<var>

用于表示数学表达式或编程上下文中的变量。

<video>

视频元素，用于嵌入视频内容。

<wbr>

软换行符，用于指示浏览器可以在文本中插入换行符。