HTML 元素
发表HTML1 小时读完 (大约12036个字)

HTML 元素

剖析 HTML 文档

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>
  1. <!DOCTYPE html>: 声明文档类型。必须写在第一行，且在<html>标签外面。
  2. <html></html>: <html>元素。这个元素包裹了页面中所有的内容，有时被称为根元素。
  3. <head></head>:<head>元素。这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述、CSS 样式、字符集声明等等。
  4. <meta charset="utf-8">: <meta> 元素。这个元素代表了不能由其他 HTML 元相关元素表示的元数据，比如 <base>、<link>、<script>、<style> 或 <title>。charset 属性将你的文档的字符集设置为 UTF-8，其中包括绝大多数人类书面语言的大多数字符。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
配置字符编码：
<meta charset="utf-8">

针对 IE 浏览器的兼容性配置：
<meta http-equiv="X-UA-Compatible" content="IE=edge">

针对移动端的配置（移动端课程中会详细讲解）：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

配置网页关键字：
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">

置网页描述信息：
<meta name="description" content="80字以内的一段话，与网站内容相关">

针对搜索引擎爬虫配置： 
<meta name="robots" content="此处可选值见下表">

配置网页作者： 
<meta name="author" content="tony">

配置网页生成工具：
<meta name="generator" content="Visual Studio Code">

配置定义网页版权信息：  
<meta name="copyright" content="2023-2027©版权所有"

配置网页自动刷新：
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">
  1. <title></title>: <title> 元素。这设置了页面的标题，也就是出现在该页面加载的浏览器标签中的内容。当页面被加入书签时，页面标题也被用来描述该页面。
  2. <body></body>: <body> 元素。包含了你访问页面时所有显示在页面上的内容，包含文本、图片、视频、游戏、可播放音频轨道等等。
  3. HTML 中的 head 部分是不会被显示在 Web 浏览器中的。
  4. HTML 标签不区分大小写，从一致性、可读性来说，最好仅使用小写字母。

三种 html 页面自动刷新的方式

  1. 页面自动刷新：把如下代码加入<head>区域中
    <meta http-equiv="refresh" content="20">,其中20指每隔20秒刷新一次页面.

  2. 页面自动跳转：把如下代码加入<head>区域中
    <meta http-equiv="refresh" content="20;url=http://www.jb51.net">,其中20指隔20秒后跳转到 http://www.jb51.net 页面

  3. 页面自动刷新js版
    <script language="JavaScript">function myrefresh(){window.location.reload();}setTimeout('myrefresh()',1000); //指定1秒刷新一次</script>

块级元素和内联元素

  • 块级元素在页面中以块的形式展现。

    • 独占一行（排版标签都是块级元素）。
    • 任何跟在块级元素后面的内容也会出现在新的行上。
    • 块级元素通常是页面上的结构元素。例如，一个块级元素可能代表标题、段落、列表、导航菜单或页脚。
    • 一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面。
    • <p> 是一个块级元素。

  • 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。

    • 内联元素不独占一行，不会导致文本换行。
    • 它通常与文本一起使用，例如，<a> 元素创建一个超链接，<em> 和 <strong>等元素创建强调。

位图和矢量图

  • 位图使用像素网格来定义，一个位图文件精确得包含了每个像素的位置和它的色彩信息。流行的位图格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)

    • jpg 格式：
      • 概述：扩展名为 .jpg 或 .jpeg ，是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）。
      • 主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。
      • 使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等 。—— 该格式网页中很常见。
    • png 格式：
      • 概述：扩展名为 .png ，是一种无损的压缩格式，能够更高质量的保存图片。
      • 主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
      • 使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如 ：公司logo图、重要配图等。
    • bmp 格式：
      • 概述：扩展名为 .bmp ，不进行压缩的一种格式，在最大程度上保留图片更多的细节。
      • 主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。
      • 使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片 。（网页中很少使用）
    • gif 格式：
      • 概述：扩展名为 .gif ，仅支持256种颜色，色彩呈现不是很完整。
      • 主要特点：支持的颜色较少、支持简单透明背景、支持动态图。
      • 使用场景：网页中的动态图片。
    • webp 格式：
      • 概述：扩展名为 .webp ，谷歌推出的一种格式，专门用来在网页中呈现图片。
      • 主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
      • 使用场景：网页中的各种图片。

    • base64 格式：

      • 本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
      • 原理：把图片进行 base64 编码，形成一串文本。
      • 如何生成：靠一些工具或网站。
      • 如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
      • 使用场景：一些较小的图片，或者需要和网页一起加载的图片。

  • 矢量图使用算法来定义 — 一个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。 SVG 格式可以让我们创造用于 Web 的精彩的矢量图形。

将 SVG 添加到页面

要通过 <img> 元素嵌入 SVG，你只需要按照预期的方式在 src 属性中引用它。你将需要一个height或width属性（或者如果你的 SVG 没有固有的宽高比）。

1
2
3
4
5
<img
  src="equilateral.svg"
  alt="triangle with all three sides equal"
  height="87px"
  width="100px" />

HTML 中引入 SVG 代码

1
2
3
<svg width="300" height="200">
  <rect width="100%" height="100%" fill="green" />
</svg>

路径

相对路径：以当前位置作为参考点，去建立路径。

img

注意点：

  1. 相对路径中的 ./ 可以省略不写。
  2. 相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。

绝对路径：以根位置作为参考点，去建立路径。

  1. 本地绝对路径： E:/a/b/c/奥特曼.jpg 。（很少使用）
  2. 网络绝对路径： http://www.atguigu.com/images/index_new/logo.png 。

注意点：

  1. 使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。
  2. 使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入
    失败。

HTML 实体

在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实 体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须 在 HTML 源码中插入字符实体。

字符实体由三部分组成：一个 & 和 一个实体名称（或者一个 # 和 一个实体编号），最后加上一 个分号 ; 。

img

语义化标签

语义化标签：用特定的标签，去表达特定的含义。

原则：标签的默认效果不重要（后期可以通过 CSS 随便控制效果），语义最重要！

举例：对于<h1> 标签，效果是文字很大（不重要），语义是网页主要内容（很重要）。

优势：

  • 代码结构清晰可读性强。
  • 有利于 SEO（搜索引擎优化）。
  • 方便设备解析（如屏幕阅读器、盲人阅读器等）。

常用标签

排版标签

标签名 标签含义 单 / 双 标签
h1 ~ h6 标题 双
p 段落 双
div 没有任何含义，用于整体布局。 双
  1. h1 最好写一个， h2~h6 能适当多写。
  2. h1~h6 不能互相嵌套，例如：h1 标签中最好不要写 h2 标签了。
  3. p 标签很特殊！它里面不能有：h1~h6 、p 、div 标签。

文本标签

  1. 用于包裹：词汇、短语等。
  2. 通常写在排版标签里面。
  3. 排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。
  4. 文本标签通常都是行内元素。
标签名 标签含义 单 / 双 标签
em 要着重阅读的内容 双
strong 十分重要的内容（语气比em要强） 双
span 没有语义，用于包裹短语的通用容器。 双

其他标签

标签名 标签含义 单 / 双 标签
br 换行 单
hr 分隔 单
pre 按原文显示(一般用于在页面中嵌入大段代码) 双

注意点：

  1. 不要用<br>来增加文本之间的行间隔，应使用<p>元素，或后面即将学到的 CSS margin 属性。

  2. <hr>的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用 CSS 完成。

元素集合

<a>

<a> 元素（或称锚元素）可以通过它的href属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。<a> 中的内容应该指明链接的目标。如果存在 href 属性，当 <a>元素聚焦时按下回车键就会激活它。

  • href：指定要跳转到的具体目标。
  • target：控制跳转时如何打开页面，常用值如下: _self ：在本窗口打开。 _blank ：在新窗口打开。
  • id：元素的唯一 标识，可用于设置锚点。
  • name：元素的名字，写在 a 标签中，也能设置锚点。
1
<a href="https://www.mozilla.com"> Mozilla </a>

<abbr>

缩写元素<abbr>用于代表缩写，并且可以通过可选的 title 属性提供完整的描述。若使用 title 属性，则它必须且仅可包含完整的描述内容。

1
2
3
<p>Using <abbr>HTML</abbr> is fun and easy!</p>

<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>
  • <abbr> 与 <dfn> 联合使用可以定义一个更加正式的缩写：
1
2
3
4
5
6
7
8
9
<p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a
  markup language used to create the semantics and structure of a web page.
</p>

<p>
  A <dfn id="spec">Specification</dfn> (<abbr title="Specification">spec</abbr>)
  is a document that outlines in detail how a technology or API is intended to
  function and how it is accessed.

<address>

<address>元素 表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。

  • 当表示一个和联系信息无关的任意的地址时，请改用<p>元素而不是<address>元素。
  • 这个元素不能包含除联系信息之外的任何信息，比如出版日期（这应当被包含在 <time> 元素之中）。
  • 通常，<address>元素可以放在 <footer> 元素之中（如果存在的话）。
1
2
3
4
5
6
7
8
9
10
11
<address>
  You can contact author at
  <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br />
  If you see any bugs, please
  <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br />
  You may also want to visit us:<br />
  Mozilla Foundation<br />
  331 E Evelyn Ave<br />
  Mountain View, CA 94041<br />
  USA
</address>

<area>：带有可点击区域的图像

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

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

<article>

<article> 元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框。

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

<audio>

<audio> HTML 元素用于在文档中嵌入音频内容。<audio> 元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者 <source>元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。

1
2
3
<audio src="AudioTest.ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>
1
2
3
4
5
6
7
8
<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support HTML5 audio. Here is a
    <a href="myAudio.mp4">link to the audio</a> instead.
  </p>
</audio>

<b>

提醒注意元素（<b>）用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 <b> 元素用于显示粗体文字；替代方案是使用 CSS font-weight 属性来创建粗体文字。

  • <b> 应用场合如：摘要中的关键字、评论中的产品名称，或其他典型的应该加粗显示的文字（除此之外无其他特别强调）。
  • 不要将<b>元素与 <strong>、<em>或<mark>元素混淆。 <strong>元素表示某些重要性的文本，<em>强调文本，而<mark>元素表示某些相关性的文本。 <b>元素不传达这样的特殊语义信息；仅在没有其他合适的元素时使用它。
  • 类似的，也不要用 <b>元素来标记标题。如果需要表示标题，请使用 <h1>到 <h6>标签。此外，可以通过样式表来改变这些元素的的默认样式，结果就是它们并不一定都是粗体。
  • 通过在 <b> 元素上添加 class 属性来表示额外的语义信息是一个很好的方式（例如 <b class="lead"> 来表示段落中的第一句）。这可以在样式需要变动的情况下更轻松地处理不同应用场合的 <b> 元素，无须改动 HTML。
  • 如果不是出于语义目的而使用 <b>元素，那么让文本显示粗体更好的方式是使用将 CSS 的 font-weight 属性设置为 “bold”。
1
2
3
4
<p>
  This article describes several <b>text-level</b> elements. It explains their
  usage in an <b>HTML</b> document.
</p>

<base>

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

  • 如果指定了多个 <base>元素，只会使用第一个 href 和 target 值，其余都会被忽略。
1
2
3
<base href="http://www.example.com/" />
<base target="_blank" />
<base target="_top" href="http://www.example.com/" />

<bdi>

双向隔离元素<bdi>告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。

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

img

<bdo>

双向文本替代元素 <bdo>改写了文本的方向性，使文本以不同的方向渲染呈现出来。

  • dir 属性：

    • ltr: 指示文本应从左到右的方向。
    • rtl: 指示文本应从右到左的方向。
1
<p><bdo dir="rtl">This text will go right to left.</bdo></p>

img

<blockquote>：块级引用元素

<blockquote> 元素（或者 HTML 块级引用元素），代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 <cite> 元素。

1
2
3
4
<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>
  <footer>—Aldous Huxley, <cite>Brave New World</cite></footer>
</blockquote>

<body>

body 元素表示文档的内容。必须是 html 元素的直接子元素。

1
2
3
4
5
6
7
8
<html>
  <head>
    <title>Document title</title>
  </head>
  <body>
    <p>This is a paragraph</p>
  </body>
</html>

<br>

<br> 元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。

  • 不要用 <br>来增加文本之间的行间隔；应使用 CSS margin 属性或<p> 元素。
1
2
Mozilla Foundation<br />
1981 Landings Drive<br />

<button>

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

<canvas>

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

1
2
3
4
5
6
7
8
9
<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);

img

<caption>

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

  • 当 <table> 元素是<caption> 的父元素，caption 是<figure> 元素的唯一后代的时候，使用<figcaption>元素替代 caption 元素。

<cite>

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

  • 通常，浏览器默认使用斜体来展示<cite>元素中的内容。可以通过指定<cite>元素的font-style样式来覆盖这种默认行为。
1
More information can be found in <cite>[ISO-0000]</cite>.

img

<code>

<code> 元素呈现一段计算机代码。默认情况下，它以浏览器的默认等宽字体显示。

1
<p>Regular text. <code>This is code.</code> Regular text.</p>

img

<col>

<col>元素 定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于<colgroup>元素内。

<colgroup>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</table>

img

<data>

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

1
2
3
4
5
6
<p>新产品</p>
<ul>
  <li><data value="398">迷你番茄酱</data></li>
  <li><data value="399">巨无霸番茄酱</data></li>
  <li><data value="400">超级巨无霸番茄酱</data></li>
</ul>

<datalist>

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

1
2
3
4
5
6
7
8
9
10
<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>

img

<dd>

<dd>元素（HTML 描述元素）用来指明一个描述列表 (<dl>) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个 <dt> 元素。

1
2
3
4
5
6
7
8
9
10
<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>

img

<del>

<del>标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。<ins>标签的作用恰恰于此相反：表示文档中添加的内容。

  • <del>和 <ins>一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。
1
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

img

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

img

<details>

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

展现组件通常在屏幕上使用一个小三角形，旋转（或扭转）以表示打开/关闭的状态，三角形旁边有一个标签。<summary> 元素的内容被用来作为展示小部件的标签。

  • 一个 <details> 小组件可以处于两种状态之一。默认的关闭状态只显示三角形和<summary>内的标签（如果没有 <summary> 则显示用户代理定义的默认字符串）。
1
2
3
4
<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

img

<dfn>

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

<dialog>

<dialog> 元素表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器或者窗口。

<div>

<div>元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。

<dl>：描述列表

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

1
2
3
4
5
6
7
<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
</dl>

img

描述列表使用与其他列表类型不同的闭合标签——<dl>；此外，每一项都用 <dt>（description term）元素闭合。每个描述都用 <dd>（description definition）元素闭合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<dl>
  <dt>内心独白</dt>
  <dd>
    戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。
  </dd>
  <dt>语言独白</dt>
  <dd>
    戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。
  </dd>
  <dt>旁白</dt>
  <dd>
    戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。
  </dd>
</dl>

浏览器的默认样式会在描述列表的术语及其定义之间产生缩进。

img

<dt>

<dt> 元素 （或 HTML 术语定义元素）用于在一个定义列表中声明一个术语。该元素仅能作为 <dl> 的子元素出现。通常在该元素后面会跟着 <dd> 元素，然而，多个连续出现的<dt> 元素都将由出现在它们后面的第一个 <dd> 元素定义。

<em>

着重元素<em>标记出需要用户着重阅读的内容，<em>元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。

1
2
3
4
<p>
  In HTML 5, what was previously called <em>block-level</em> content is now
  called <em>flow</em> content.
</p>

img

<embed>

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

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

<fieldset>

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

1
2
3
4
5
6
7
<form action="#">
  <fieldset>
    <legend>Simple fieldset</legend>
    <input type="radio" id="radio" />
    <label for="radio">Spirit of radio</label>
  </fieldset>
</form>

img

1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="#">
  <fieldset disabled>
    <legend>Disabled fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="text" id="name" value="Chris" />
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" id="pwd" value="Wookie" />
    </div>
  </fieldset>
</form>

img

<figcaption>

<figcaption> 元素是与其相关联的图片的说明/标题，用？于描述其父节点 <figure> 元素里的其他数据。这意味着 <figcaption> 在<figure> 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。

<figure>

<figure> 元素代表一段独立的内容，可能包含 <figcaption> 元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。

  • 通常，<figure>的内容为图像、插图、图表、代码片段等，在文档的主内容流中引用，但可以移动到文档的另一部分或附录而不影响主内容流。

<footer>

<footer>元素表示最近一个章节内容或者根节点（sectioning root）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

  • <footer>元素内的作者信息应包含在<address> 元素中。

<form>

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

1
2
3
4
5
6
7
<form>
  <label
    >Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

img

<h1>

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

  • 避免跳过某级标题：始终要从 <h1>开始，接下来依次使用 <h2> 等等。

<head>

<head> 元素规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。

<header>

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

1
2
3
4
<header>
  <h1>主页标题</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>

<hgroup>

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

1
2
3
4
<hgroup>
  <h1>Frankenstein</h1>
  <p>Or: The Modern Prometheus</p>
</hgroup>

<hr>

<hr> 元素表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。

<html>

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

1
2
3
4
5
6
7
8
9
<!doctype html>
<html lang="zh">
  <head>
    <!-- … -->
  </head>
  <body>
    <!-- … -->
  </body>
</html>

<i>：斜体

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

1
2
3
4
<p>
  The Latin phrase <i class="latin">Veni, vidi, vici</i> is often mentioned in
  music, art, and literature
</p>
  • 使用 <em> 表示强调或重读。
  • 使用 <strong> 表示重要性。
  • 使用 <mark> 表示相关性。
  • 使用 <cite> 标记著作名，如一本书、剧本或是一首歌。
  • 使用 <dfn> 标记术语的定义实例。
  • 最好的经验法则是：只有在没有更合适的元素时，才适合使用 <b>、<i> 或 <u> 来表达传统上用粗体、斜体或下划线表达的意思；而通常情况下是有更合适的元素可供使用的。<strong>、<em>、<mark> 或 <span>可能是更加合适的选择。
  • <i> 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
  • <b>被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
  • <u> 被用来传达传统上用下划线表达的意义：专有名词，拼写错误……

<iframe>

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

1
2
3
4
5
6
<iframe
  src="https://example.org"
  title="iframe Example 1"
  width="400"
  height="300">
</iframe>

<img>

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

  • src 属性是必须的，它包含了你想嵌入的图片的路径。

  • alt 属性包含一条对图像的文本描述，这不是强制性的，但对无障碍而言，它难以置信地有用。

    • 搜索引擎通过 alt 属性，得知图片的内容。—— 最主要的作用。
    • 当图片无法展示时候，有些浏览器会呈现 alt 属性的值。
    • 盲人阅读器会朗读 alt 属性的值。

  • 在支持 srcset 的用户代理中，当使用 w 描述符时，src 属性会被忽略。当匹配了媒体条件 (max-width: 600px) 时，将加载 200 像素宽的图像（最匹配的图像），否则将加载另一幅图像。

1
2
3
4
5
<img
  src="clock-demo-200px.png"
  alt="Clock"
  srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
  sizes="(max-width: 600px) 200px, 50vw" />

<input>

<input> 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。取决于设备和用户代理不同，表单可以使用各种类型的输入数据和控件。<input> 元素是目前是 HTML 中最强大、最复杂的元素之一，因为它有大量的输入类型和属性组合。

<ins>

<ins>元素定义已经被插入文档中的文本。

  • <del> 和 <ins>一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。

<kbd>

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

1
2
3
4
5
6
<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>

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

<legend>

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

1
2
3
4
5
6
7
8
9
10
11
12
<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>

img

<li>

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

<link>

外部资源链接元素 (<link>) 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标 (比如 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。

  • href 属性设置外部资源的路径。

<main>

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

<map>

<map>属性与 <area> 属性一起使用来定义一个图像映射 (一个可点击的链接区域).

  • name 属性 给 map 一个名字用来查询，这个属性是必须的，值必须不能为空并且不能带空格。
1
2
3
4
<map name="example-map-1">
  <area shape="circle" coords="200,250,25" href="another.htm" />
  <area shape="default" />
</map>

<mark>

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

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

img

<menu>

<menu> 元素呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单，也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。

  • <menu> 和 <ul> 元素都呈现了无序列表元素。最主要的区别是，<ul>主要是为了展示选项，而 <menu>则是为了交互。
1
2
3
4
5
6
7
8
<button type="menu" menu="popup-menu">Dropdown</button>

<menu type="context" id="popup-menu">
  <menuitem>Action</menuitem>
  <menuitem>Another action</menuitem>
  <hr />
  <menuitem>Separated action</menuitem>
</menu>

<meta>

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

1
<meta charset="utf-8" />

<meter>

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

1
2
3
<p>
  Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.
</p>

img

高低值区间示例：注意本例中 min 属性被省略，这是允许的，默认值为 0。

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

img

<nav>

<nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。

1
2
3
4
5
6
7
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<noscript>

如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 HTML <noscript> 元素中定义脚本未被执行时的替代内容。

<object>：引入一个外部资源

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

1
2
3
4
5
6
7
<object type="application/pdf" 
  data="/media/examples/In-CC0.pdf" width="250" height="200">
</object>
<object 
  data="move.swf" 
  type="application/x-shockwave-flash">
</object>

<ol>：有序列表

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

1
2
3
4
5
6
7
<ol>
  <li>沿这条路走到头</li>
  <li>右转</li>
  <li>直行穿过第一个十字路口</li>
  <li>在第三个十字路口处左转</li>
  <li>继续走 300 米，学校就在你的右手边</li>
</ol>

img

<optgroup>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

img

<option>

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

1
2
3
4
5
6
7
8
9
10
11
<label for="pet-select">Choose a pet:</label>

<select id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>

img

<output>：计算结果

<output> 标签表示计算或用户操作的结果。

1
2
3
4
5
<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>：段落

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

  • 段落是块级元素，如果在关闭的</p> 标签之前解析了另一个块级元素，则该标签将自动关闭。

<picture>

根据屏幕匹配的不同尺寸显示不同图片，如果没有匹配到或浏览器不支持 picture 属性则使用 img 元素。

  • picture 元素允许我们在不同的设备上显示不同的图片，一般用于响应式。
  • HTML5 引入了 <picture> 元素，该元素可以让图片资源的调整更加灵活。
  • <picture> 元素零或多个<source> 元素和一个 <img>元素，每个 <source> 元素匹配不同的设备并引用不同的图像源，如果没有匹配的，就选择 <img> 元素的 src 属性中的 url。

注意:<img> 元素是放在最后一个 <picture> 元素之后，如果浏览器不支持该属性则显示<img> 元素的的图片。

1
2
3
4
<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>
  • media 属性允许你提供一个用于给用户代理作为选择 <source>元素的依据的媒体条件 (media condition)（类似于媒体查询）。如果这个媒体条件匹配结果为 false，那么这个<source>元素会被跳过。
1
2
3
4
<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml" />
  <img src="mdn-logo.png" alt="MDN" />
</picture>
  • type 属性允许你为 <source>元素的 srcset 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型，那么这个 <source> 元素会被跳过。

<pre>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<pre>
  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE
      QUE TU
      PORTES
    ET QUI T'
    ORNE O CI
     VILISÉ
    OTE-  TU VEUX
     LA    BIEN
    SI      RESPI
            RER       - Apollinaire
</pre>

img

<progress>

<progress> 元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。

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

img

<q>

引用标签 (<q>) 表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用 <blockquote> 替代。

1
2
3
4
5
6
<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>

img

<rp>

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

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

img

<rt>

<rt>元素包含字符的发音，字符在 ruby 注解中出现，它用于描述东亚字符的发音。这个元素始终在 <ruby> 元素中使用。

<ruby>

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

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

img

<s>

<s> 元素使用删除线来渲染文本。使用<s>元素来表示不再相关，或者不再准确的事情。但是当表示文档编辑时，不提倡使用 <s> ；为此，提倡使用 <del>和 <ins> 元素。

1
2
3
<s>Today's Special: Salmon</s> SOLD OUT<br>
<span style="text-decoration:line-through;">Today's Special:
  Salmon</span> SOLD OUT

img

<samp>

<samp> 元素用于标识计算机程序输出，通常使用浏览器缺省的 monotype 字体。

1
<p>Regular text. <samp>This is sample text.</samp> Regular text.</p>

<script>

<script>元素用于嵌入可执行代码或数据，这通常用作嵌入或者引用 JavaScript 代码。<script> 元素也能在其他语言中使用，比如 WebGL 的 GLSL 着色器语言和 JSON。

<section>

<section> 元素表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。

1
2
3
4
<section>
  <h1>Heading</h1>
  <p>Bunch of awesome content</p>
</section>

<select>

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

1
2
3
4
5
<select name="select">
  <option value="value1">Value 1</option>
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

img

<slot>

<slot> 元素，作为 Web Component 技术套件的一部分，是 Web 组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充，这样你就可以创建单独的 DOM 树，并将它与其他的组件组合在一起。

<small>

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

1
2
3
4
5
6
7
8
<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>
small {
  font-size: 0.7em;
}

img

<span>

<span>元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span> 与 <div> 元素很相似，但 <div> 是一个 块元素 而 <span> 则是 行内元素。

<strong>：粗体

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

<style>

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

<sub>：下标元素

<sub> 元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。

1
<p>The chemical formula of water: H<sub>2</sub>O</p>

img

<summary>

<summary> 元素指定了 <details> 元素展开盒子的内容的摘要，标题或图例。点击 <summary> 元素可以切换父元素 <details> 开启和关闭的状态。

1
2
3
4
5
6
7
8
<details open>
  <summary>概况</summary>
  <ol>
    <li>手上的现钱：$500.00</li>
    <li>当前发票：$75.30</li>
    <li>到期日：5/6/19</li>
  </ol>
</details>

img

<sup>：上标元素

<sup>元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小

1
<p>This text is <sup>superscripted</sup></p>

img

<table>

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

允许的内容——按照这个顺序：

  1. 一个可选的 <caption> 元素
  2. 零个或多个的 <colgroup> 元素
  3. 一个可选的 <thead> 元素
  4. 下列任意一个：
    • 零个或多个 <tbody>
    • 零个或多个 <tr>
    • 零个或多个 <td>
      • rowspan ：指定要跨的行数。
      • colspan ：指定要跨的列数。
  1. 一个可选的 <tfoot> 元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<p>含有表头的表格</p>
<table>
  <tr>
    <th>姓</th>
    <th>名</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

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

<p>有列组的表格</p>
<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>国家</th>
    <th>首都</th>
    <th>人口数量</th>
    <th>语言</th>
  </tr>
  <tr>
    <td>美国</td>
    <td>华盛顿</td>
    <td>3.09 亿</td>
    <td>英语</td>
  </tr>
  <tr>
    <td>瑞典</td>
    <td>斯德哥尔摩</td>
    <td>900 万</td>
    <td>瑞典语</td>
  </tr>
</table>

<p>有列组和列的表格</p>
<table>
  <colgroup>
    <col style="background-color: #0f0" />
    <col span="2" />
  </colgroup>
  <tr>
    <th>青柠</th>
    <th>柠檬</th>
    <th>橘子</th>
  </tr>
  <tr>
    <td>绿色</td>
    <td>黄色</td>
    <td>橙色</td>
  </tr>
</table>

<p>有标题的简单表格</p>
<table>
  <caption>
    美妙的标题
  </caption>
  <tr>
    <td>美妙的数据</td>
  </tr>
</table>

img

<tbody>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
table>
  <thead>
    <tr>
      <th>学生 ID</th>
      <th>姓名</th>
      <th>专业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>计算机科学</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>俄国文学</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>天体物理学</td>
    </tr>
  </tbody>
</table>

<template>

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

将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理 <template> 元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。

1
2
3
4
5
6
<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>
  • 页面不会被渲染但是在开发者工具中可以看到。

<textarea>：多行纯文本编辑控件

<textarea>元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。

1
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

img

<tfoot>

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

<th>

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

<thead>

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

<time>

标签 <time> 用来表示 24 小时制时间或者公历日期，若表示日期则也可包含时间和时区。

1
2
3
<p>
  The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.
</p>

<title>

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

  • <title>元素始终在页面的 <head> 块内使用。
1
<title>Amazing！</title>

<tr>：表格中的行

<tr>元素定义表格中的行。同一行可同时出现<td>和<th>元素。

<track>

<track> 元素被当作媒体元素<audio> 和 <video>的子元素来使用。它允许指定时序文本字幕（或者基于时间的数据），例如自动处理字幕。字幕格式有 WebVTT 格式(en-US)（.vtt格式文件）— Web 视频文本字幕格式，以及指时序文本标记语言（TTML）格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<video controls poster="/images/sample.gif">
   <source src="sample.mp4" type="video/mp4">
   <source src="sample.ogv" type="video/ogv">
   <track kind="captions" src="sampleCaptions.vtt" srclang="en">
   <track kind="descriptions"
     src="sampleDescriptions.vtt" srclang="en">
   <track kind="chapters" src="sampleChapters.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
   <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz">
   <track kind="metadata" src="keyStage1.vtt" srclang="en"
     label="Key Stage 1">
   <track kind="metadata" src="keyStage2.vtt" srclang="en"
     label="Key Stage 2">
   <track kind="metadata" src="keyStage3.vtt" srclang="en"
     label="Key Stage 3">
</video>

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

<u>元素表示行内文本拥有一个非文本形式的注释，该注释需要以某种方式渲染出来。默认情况下渲染为一个实线下划线，可以用 CSS 替换。

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

<ul>：无序列表

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

1
2
3
4
5
6
<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

img

<var>

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

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

img

<video>

<video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。

  • 浏览器并不是都支持相同的视频格式(en-US)，所以你可以在 <source>(en-US) 元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。
1
2
3
4
5
6
7
8
<video controls>
  <source src="myVideo.mp4" type="video/mp4" />
  <source src="myVideo.webm" type="video/webm" />
  <p>
    Your browser doesn't support HTML5 video. Here is a
    <a href="myVideo.mp4">link to the video</a> instead.
  </p>
</video>

<wbr>

<wbr> 元素：一个文本中的位置，其中浏览器可以选择来换行，虽然它的换行规则可能不会在这里换行。

1
2
3
<p>
  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages
</p>

img

HTML 元素

http://example.com/2019/11/02/前端/HTML/HTML元素/

作者

冷冷

发布于

2019-11-02

更新于

2020-01-10

许可协议

CC BY-NC-SA 4.0

#
关注我

目录

最新文章

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×

×