HTML 元素（2）

最新推荐文章于 2024-04-30 15:07:29 发布

鸿之翼

最新推荐文章于 2024-04-30 15:07:29 发布

阅读量6.6k

点赞数

分类专栏： # Html基础文章标签： html

本文链接：https://blog.csdn.net/weixin_42350100/article/details/134058619

版权

Html基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML 元素

<a>：锚元素

行内元素开始标签和结束标签都不能省略。

后代不可以为交互内容或 a 元素，且后代不可以指定 tabindex 属性

可以通过它的 href 属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。

<a> 中的内容应该指明链接的目标。如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。

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

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

使用 target=“_blank” 而不使用 rel=“noreferrer” 和 rel=“noopener” 会使网站容易受到 window.opener 的 API 攻击。不过，在较新的浏览器版本中，设置 target=“_blank” 隐式地提供了与设置 rel=“noopener” 同样的保护。

锚点元素经常被滥用为假按钮，将其 href 设置为 # 或 javascript:void(0) 以防止页面刷新，然后监听其 click 事件。这些假的 href 值在复制/拖动链接、在新的标签/窗口中打开链接、书签，或当 JavaScript 正在加载、出错或被禁用时，会导致意外行为。它们还向辅助技术（如屏幕阅读器）传达不正确的语义。请使用 <button> 代替。一般来说，你应该只使用超链接来导航到一个真正的 URL。

交互式元素，如链接，应提供足够大的区域，以便于激活它们。这有助于各种人，包括那些有运动控制问题的人和那些使用不精确输入的人，如触摸屏。建议最小尺寸为 44×44 CSS 像素

属性

download 导致浏览器将链接的 URL 视为下载资源。可以使用或不使用 filename 值：
- 如果没有指定值，浏览器会从多个来源决定文件名和扩展名：
Content-Disposition HTTP 标头。
URL 路径的最后一段。
媒体类型。来自 Content-Type 标头，data: URL 的开头，或 blob: URL 的 Blob.type。
- filename：决定文件名的值。/ 和 \ 被转化为下划线（_）。文件系统可能会阻止文件名中其他的字符，因此浏览器会在必要时适当调整文件名。
download 只在同源 URL 或 blob:、data: 协议起作用。
如果文件头指定了一个 filename，它将优先于 download 属性中指定的文件名。

href 超链接所指向的 URL。链接不限于基于 HTTP 的 URL——它们可以使用浏览器支持的任何 URL 协议：
- 使用文档片段链接到页面的某一段
- 使用文本片段链接到某一段文字
- 使用媒体片段链接到某个媒体文件
- 使用 tel: URL 链接到一个电话号码
- 使用 mailto: URL 链接到一个邮箱地址
- 如果 web 浏览器不能支持其他 URL 协议，网站可以使用 registerProtocolHandler()

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

ping 包含一个以空格分隔的 URL 列表，当跟随超链接时，浏览器会发送带有正文 PING 的 POST 请求。通常用于跟踪。

referrerpolicy 在跟随链接时，referrer 需要发送多少内容：
- no-referrer：Referer 标头将不会被发送。
- no-referrer-when-downgrade：如果没有 TLS（HTTPS），Referer 头将不会被发送到源上。
- 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 该属性指定在何处显示链接的 URL，作为浏览上下文的名称（标签、窗口或 <iframe>）。以下关键词对加载 URL 的位置有特殊含义：
- _self：当前页面加载。（默认）
- _blank：通常在新标签页打开，但用户可以通过配置选择在新窗口打开。
- _parent：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与 _self 相同。
- _top：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 _self 相同。
在 <a> 元素上使用 target=“_blank” 隐式提供了与使用 rel=“noopener” 相同的 rel 行为，即不会设置 window.opener。

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

~~charset~~ 已弃用
此属性定义链接资源的字符编码。
该属性已作废，不应使用。请在链接的 URL 上使用 HTTP Content-Type 标头。

~~coords~~ 已弃用
与 shape 属性一同使用，以逗号分隔的坐标列表。

~~name~~ 已弃用
在定义一个可能的目标位置时曾经是必需的。在 HTML 4.01 规范中，<a> 元素可以同时使用 id 和 name，只要它们有相同的值。
使用全局属性 id 来代替。

~~rev~~ 已弃用
指定一个反向链接；与 rel 属性作用相反。因为非常混乱而被废弃。

~~shape~~ 已弃用
图像映射（image map）中超链接区域的形状。
使用 <area> 元素来代替图像映射。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        a:visited {color: #336600;}
        a:link {color: #003399; text-decoration: none;}
        a:hover {color: #CC0000; text-decoration: none;}


        .skip-link {
          position: absolute;
          top: -3em;
          background: #fff;
        }
        .skip-link:focus {
          top: 0;
        }

    </style>

</head>
<body>
  <!-- 跳转链接（skip link）是在 <body> 内容中尽可能早地放置一个链接，指向页面主要内容的开头。通常情况下，CSS 会将跳转链接隐藏在屏幕之外，直到被聚焦。 -->
  <a href="#content" class="skip-link">跳转至主要内容</a>

  <p>You can reach Michael at:</p>

  <ul>
    <li><a href="https://example.com" title="Website">Website</a></li>
    <li><a href="mailto:m.bluth@example.com" title="Email">Email</a></li>
    <li><a href="tel:+123456789" title="Phone">Phone</a></li>
  </ul>

  <!-- 链接到绝对地址 -->
  <a href="https://www.mozilla.com"> Mozilla </a>

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

  <!-- 链接到相同页面的元素上 可以使用 href="#top" 或空片段（href="#"）来链接到当前页面的顶部。 -->
  <!-- <a> 元素链接到下面部分 -->
  <p><a href="#Section_further_down"> 跳转到下方标题 </a></p>

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


  <!-- 链接到 email 地址 -->
  <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
  <a href="mailto:test@abc.com?subject=我有话要说" title="写信给我们"></a>

  <!-- 链接到电话号码 -->
  <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>

  <!-- 通过 target="_blank" 在新标签/窗口中打开的链接，或指向下载文件的链接，应说明在跟踪链接时将发生什么。 -->
  <a target="_blank" href="https://www.wikipedia.org">
    Wikipedia（将在新标签页中打开）
  </a>

  <a target="_blank" href="https://www.wikipedia.org">
    Wikipedia
    <img alt="（在新标签页中打开）" src="newtab.svg" />
  </a>
  
  <!-- 链接至非 HTML 资源 -->
  <a href="2017-annual-report.ppt">
    2017 年度报告
    <img alt="（PowerPoint 文件）" src="ppt-icon.svg" />
  </a>

  
  <a href="2017-annual-report.ppt"> 2017 年度报告（PowerPoint） </a>

  <h4>下载范例程序请点击图片</h4>
  <a href="tracknews.rar" title="滚动式新闻栏目">
    <img src="images/earth.png" alt="图片" />
  </a>

  <!-- 使用 download 属性将 <canvas> 保存为 PNG 格式 -->
    <p>
      按下鼠标并移动来完成你的作画。
      <a href="" class="downloadCanvas" download="my_painting.png" style="display: inline-block;background: #69c;color: #fff;padding: 5px 10px;">下载我的绘画</a>
    </p>
    
    <canvas width="300" height="300" style="background: #fff; border: 1px dashed;"></canvas>

    <main id="content"></main>
    <!-- 跳转链接会跳转至这里 -->

    <script>
      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.downloadCanvas").addEventListener("click",
          (event) => (event.target.href = canvas.toDataURL()),
        );

    </script>
 
</body>
</html>

在这里插入图片描述

<acronym>：已弃用

该元素已从 HTML5 中移除，不应再被使用。Web 开发者应使用元素。

HTML Acronym 元素 (<acronym>) 允许作者明确地声明一个字符序列，它们构成一个单词的首字母缩写或简略语。

尽管这个标签的目的纯粹是为了方便作者，它的默认样式却在各个浏览器中不尽相同：

一些浏览器，像 Internet Explorer，赋予它和 <span> 元素相同的样式。
Opera, Firefox，和一些其他的浏览器在元素内容下方添加了一条点状的下划线。
一小部分浏览器不仅添加了点状下划线，而且 put it in small caps; 为避免这种样式，可以在 CSS 中添加font-variant: none 处理这种情况。

因此强烈建议 Web 作者们不要依赖默认的样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

  <p>
    The <acronym title="World Wide Web">WWW</acronym> is only one component of the
    Internet.
  </p>
  
</body>
</html>

在这里插入图片描述

<area>：在图片上定义一个热点区域，可以关联一个超链接

只能允许有开始标签不允许有结束标签。

允许的父元素 <area>元素必须拥有一个<map>元素祖先元素，但不一定是直接的父元素。

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

属性

~~accesskey~~ 已弃用
为元素指定一个获取焦点的快捷键。在与指定字符关联的情况下，按 ALT 或类似键选择与该键序列相关联的表单控件。页面设计人员避免使用已经绑定到浏览器的快捷键。这个属性自 HTML5 以来是全局性的。

alt 在未显示图像的浏览器上显示代替的文本字符串。这个文本应该能传达给用户与显示图像而没有文本的情况下同等的选择（就是字和图片表达一个意思）。在 HTML4 中，这个属性时必需的，但是可以是一个空的串 (“”)。在 HTML5 中，这个属性只有在href 属性被使用的时候才是必需的。

coords 给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的形状属性。对于矩形或长方形，这个 coords 值为两个 X,Y 对：左上、右下。对于圆形，这个值是 x,y,r，这里的 x,y 是一对确定圆的中心的坐标而 r 则表示的是半径值。对于多边和多边形，这个值是用 x,y 对表示的多边形的每一个点：x1,y1,x2,y2,x3,y3 等等。HTML4 里，值可能是像素数量或者百分比，区别是不是有 % 出现; HTML5 里，只可能是像素的数量。

download 这个属性如果存在的话，表明作者想把超链接用于下载一个资源。

href area 的超链接，值为一个 URL. HTML4 里，这个值不管是不是有值都要明确指定出来。HTML5 里则不需要。

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

~~name~~ 已弃用
为可点击区域定义一个名字以使旧浏览器解析。

media 指明链接资源的媒体类型，例：print and screen。如果此属性省略，默认全部。仅在 href 属性存在情况下使用。

~~nohref~~ 已弃用
指明此区域没有超链接。在<area>中必须存在 nohref 或者 href。
此属性在 html5 中是废弃的，而忽略 href 属性就足够了。

rel 对于包含 href 属性的锚，该属性指定目标对象与链接对象的关系。该值是一个逗号分隔的链接类型值列表。这些值及其语义将由一些可能对文档作者有意义的权威进行注册。如果没有其他的关系，默认的关系是无效的。只有当 href 属性是 presen 时才使用该属性

shape 相关联的热点的形状。HTML 5 和 HTML 4 的规范定义了值 rect，它定义了一个矩形区域;圆圈，它定义了一个圆形区域;多边形，它定义了一个多边形;默认情况下，这表示整个区域超出了任何定义的形状。许多浏览器，特别是 Internet Explorer 4 和更高版本，支持弧形、多边形和矩形作为形状的有效值;这些值{ { Non-standard_inline } }。

~~tabindex~~ 已弃用
用于指定浏览器 tab 键获取焦点的顺序。在 html5 中是全局属性。

target 本属性指明了在什么地方显示链接的资源。HTML4 里，这个值是一个 frame 的链接或者关键字。HTML5 里，它是一个浏览器上下文 (比如：标签，窗口或者内嵌的 frame) 的链接或者关键字。值的含义：
- _self: 在当前区域加载链接指向的资源。这个是默认值。
- _blank: 在新的未命名的窗口或者 tab 里加载超链接资源。
- _parent: 在父级加载超链接资源。HTML4 里，是当前 frame 的父级，HTML5 里是当前的浏览器上下文，如果当前环境没有父级，行为和_self一样。
- _top: HTML4 里：将响应加载到完整的原始窗口中，取消所有其他帧。在 HTML5 中：将响应加载到顶级浏览上下文 (也就是说，浏览上下文是当前版本的祖先，并且没有父类)。如果没有父类，这个选项的行为方式与 self 相同本属性只能在指明 href 属性之后使用。

type 该属性指定了用于链接目标的 MIME 类型的媒体类型。一般来说，这是严格的咨询信息;然而，在未来，浏览器可能会为多媒体类型添加一个小图标。例如，当类型设置为音频/wav 时，浏览器可能会添加一个小的扬声器图标。只有当 href 属性存在时才使用该属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

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

<aside>：侧边栏或者标注框

始标签和结束标签都不能省略。

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

不要使用 <aside> 元素去尾随括号内的文本，因为这种文本被认为是主要流内容的一部分。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

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


    </style>

</head>
<body>

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

在这里插入图片描述

<audio>：嵌入音频内容

开始标签和结束标签都不能省略。

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

在浏览器不支持该元素时，会显示 <audio></audio> 标签之间的内容作为回退。

浏览器对文件类型和音频编码 (en-US) 的支持各有不同，你可以使用内嵌的 <source> 元素提供不同的播放源。浏览器会使用第一个它支持的播放源：

如果你没有声明 controls 属性，音频播放器不会包含浏览器的默认控件。但你可以使用 JavaScript 和 HTMLMediaElement API 创建自己的自定义控件。

<audio> 元素不能像 <video> 元素一样附加副标题（subtitle）或说明标题（caption）。

默认控件的 display 的默认值为 inline。将该值设为 block 通常会对定位和布局有好处，除非你想将控件放在文本块或类似元素中。

能够通过 addtrack 和 removetrack 事件来检测何时音轨从 <audio> 元素中添加和移除了。

给出其他内容（比如直接的下载链接）也是一种最佳实践，这能够作为一种用户浏览器不支持 <audio> 元素时的兜底方案。

属性

autoplay 布尔值属性；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成。
自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。

controls 如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。

crossorigin 枚举属性展示音频资源是否可以通过 CORS 加载。支持 CORS 的资源可以被 <canvas> 元素复用而不污染。可选值如下：
- anonymous
在发送跨域请求时不携带验证信息。换句话说，浏览器在发送Origin: HTTP 请求首部时将不携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本认证。如果服务器没有给予源站信任（也就是说没有设置 Access-Control-Allow-Origin: 响应首部），那么图片就被认为是污染的，它就会被限制使用。
- use-credentials
在发送跨域请求时携带验证信息。换句话说，在发送Origin: HTTP 请求首部时将携带 cookie、安全令牌、并且执行 HTTP 基本认证。如果服务器没有给予源站信任（通过设置Access-Control-Allow-Credentials: 响应首部）那么图片就被认为是污染的，它就会被限制使用。在未指定时，资源将不通过 CORS 请求来获取（也就是不发送 Origin:请求首部），以保护 <canvas> 元素中未污染的内容。如果验证失败，它会表现的好像 anonymous 选项是选中的。

currentTime 读取 currentTime 属性将返回一个双精度浮点值，用以标明以秒为单位的当前音频的播放位置。如果音频的元数据暂时无法访问——这意味着你无法的知道媒体的开始或持续时间。这时，currentTime 相对应的，能够被用于改变重播的时间。否则，设置 currentTime 将设置当前的播放位置，并且会自动搜寻到媒体的那个位置，如果媒体目前已经被加载的话。如果音频是以流的形式加载的，并且数据超出了媒体的缓冲区（buffer），user agent 可能无法获取资源的某些部分。另一些音频的时间轴可能并非从 0 秒开始，所以设置 currentTime 到一个开始时间之前的时间可能会失败。举个例子，如果音频媒体的时间轴从 12 小时开始，把 currentTime 设置到 3600 将会尝试把当前播放位置设置到媒体的开始位置之前，从而导致错误。getStartDate() 方法能够用于确定媒体时间轴的开始位置。

disableRemotePlayback 实验性
这是一个布尔值，用来禁用在远程设备上进行进度控制的能力。这些设备通过有线（比如 HDMI, DVI）或无线技术（比如 Miracast, Chromecast, DLNA, AirPlay,）来与 web 连接。

duration 只读
这是一个双精度浮点数，指明了音频在时间轴中的持续时间（总长度），以秒为单位。如果元素上没有媒体，或者媒体是不可用的，那么会返回 NaN。如果媒体找不到确切的结尾（比如不确定长度的直播流，网络电台，或者是通过 WebRTC 连接的流），那么这个值将返回 +Infinity。

loop 布尔属性；如果声明该属性，将循环播放音频。

muted 表示是否静音的布尔值。默认值为 false，表示有声音。

preload 枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一：
- none: 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；
- metadata: 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。
- auto: 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。
- 空字符串 : 等效于auto属性。不同浏览器会有自己的默认值，规范建议的默认值为 metadata。
autoplay 属性的优先级高于 preload。如果 autoplay 被指定，浏览器将显式地开始下载媒体以供播放。

src 嵌入的音频的 URL。该 URL 应遵从 HTTP access controls . 这是一个可选属性；你可以在 audio 元素中使用 <source> 元素来替代该属性指定嵌入的音频。

事件

事件名称	触发时机
audioprocess	一个 ScriptProcessorNode 的输入缓冲区已经准备开始处理。
canplay	浏览器已经可以播放媒体，但是预测已加载的数据不足以在不暂停的情况下顺利将其播放到结尾（即预测会在播放时暂停以获取更多的缓冲区内容）
canplaythrough	浏览器预测已经可以在不暂停的前提下将媒体播放到结束。
complete	一个 OfflineAudioContext 的渲染已经中止。
durationchange	duration 属性发生了变化。
emptied	媒体置空。举个例子，当一个媒体已经加载（或部分加载）的情况下话调用 load() 方法，这个事件就将被触发。
ended	播放到媒体的结束位置，播放停止。
loadeddata	媒体的第一帧加载完成。
loadedmetadata	元数据加载完成。
pause	播放暂停。
play	播放开始。
playing	因为缺少数据而暂停或延迟的状态结束，播放准备开始。
ratechange	播放速度变化。
seeked	一次获取操作结束。
seeking	一次获取操作开始。
stalled	用户代理试图获取媒体数据，但数据意外地没有进入。
suspend	媒体加载挂起。
timeupdate	由 currentTime 指定的时间更新。
volumechange	音量变化。
waiting	因为暂时性缺少数据，播放暂停。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

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

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

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

  <audio controls>
    <source src="foo.opus" type="audio/ogg; codecs=opus" />
    <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
    <source src="foo.mp3" type="audio/mpeg" />
  </audio>
  
  <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 download the audio</a> instead.
    </p>
  </audio>

  <h3>audio元素应用</h3>
  <audio src="img/10.mp3" controls="controls" autoplay>
    <p>  
    Your browser does not support the audio tag.
    您的浏览器尚未支持HTML5的audio元素标签
    </p>
  </audio>
  
  
  <script>

    var elem = document.querySelector("audio");

    elem.audioTrackList.onaddtrack = function (event) {
      trackEditor.addTrack(event.track);
    };

    elem.audioTrackList.onremovetrack = function (event) {
      trackEditor.removeTrack(event.track);
    };

  </script>
  
</body>
</html>

在这里插入图片描述

<base>：文档根 URL 元素

该标签不能有结束标签。

指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。如果指定了多个 <base> 元素，只会使用第一个 href 和 target 值，其余都会被忽略。

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

指向文档中某个片段的链接，例如 <a href=“#some-id”> 用 <base> 解析，触发对带有附加片段的基本 URL 的 HTTP 请求。例如：给定 <base href=“https://example.com”>以及此链接 <a href=“#anchor”>Anker</a> 链接指向 https://example.com/#anchor

属性

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

target 默认浏览上下文的关键字或作者定义的名称，当没有明确目标的链接 <a> 或表单 <form> 导致导航被激活时显示其结果。该属性值定位到浏览上下文（例如选项卡，窗口或内联框 <iframe>）。以下的关键字指定特殊的意思：
- _self: 载入结果到当前浏览上下文中。（该值是元素的默认值）。
- _blank: 载入结果到一个新的未命名的浏览上下文。
- _parent: 载入结果到父级浏览上下文（如果当前页是内联框）。如果没有父级结构，该选项的行为和_self一样。
- _top: 载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和_self 一样。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <base target="_blank" href="http://www.example.com/" />

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

  <div style="text-align:center;">
    <img src="logo.gif" alt="首页" />
    <p>欢迎光临：
      <a href="index.php" target="_blank">学园</a>
    </p>
  </div>
 
</body>
</html>

<bdi>：双向隔离元素

开始标签和结束标签都不能省略。

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

尽管同样的显示效果可以通过使用 CSS 规则 unicode-bidi：隔离<span>或者其他文本格式化元素，但语义信息只能通过<bdi>元素传递。特别是，当浏览器允许忽略 CSS 样式时，在这种情况下，使用<bdi>仍然可以保证文本正确显示，而使用 CSS 样式来传递语义时就显得毫无用处。

dir属性不继承父元素。如果没有设置，默认值即为 auto，以便浏览器根据元素内容决定元素内容的方向。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

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


    </style>

</head>
<body>

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

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

在这里插入图片描述

<big>：已弃用

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

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


    </style>

</head>
<body>

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

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

在这里插入图片描述

<canvas>：绘制图形及图形动画

不同于 <img> 元素， <canvas>元素需要有闭合标签 (</canvas>).

通过 JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。

直接在 html 标签中设置 width 和 height 属性或者使用 JavaScript 来指定画布尺寸，这将改变一个画布的水平像素和垂直像素数，就像定义了一张图片的大小一样。

可以使用 CSS 的 width 和 height 以在渲染期间缩放图像以适应样式大小，就像<img>元素一样。如果你发现<canvas>元素中展示的内容变形，你可以通过<canvas>自带的 height 和 width 属性进行相关设置，而不要使用 CSS。

画布的最大的尺寸取决于浏览器，下表的结论来自别处

浏览器	最大高度	最大宽度	最大面积
Chrome	32,767 pixels	32,767 pixels	268,435,456 pixels (i.e., 16,384 x 16,384)
Firefox	32,767 pixels	32,767 pixels	472,907,776 pixels (i.e., 22,528 x 20,992)
Safari	32,767 pixels	32,767 pixels	268,435,456 pixels (i.e., 16,384 x 16,384)
IE	8,192 pixels	8,192 pixels	?

<canvas> 元素本身只是一个位图，不提供任何绘制对象的信息。画布内容不像 HTML 那样具有语义并能暴露给无障碍工具。

属性

height 该元素占用空间的高度，以 CSS 像素（px）表示，默认为 150。

~~moz-opaque~~ 非标准已弃用
通过设置这个属性，来控制 canvas 元素是否半透明。如果你不想 canvas 元素被设置为半透明，使用这个元素将可以优化浏览器绘图性能。

width 该元素占用空间的宽度，以 CSS 像素（px）表示，默认为 300。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

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

  <button onclick="draw()">draw</button>
  <button onclick="drawText()">drawText</button>
  <button onclick="drawImage()">drawImage</button>

  <canvas id="myPic" width="600" height="300"></canvas>
  <canvas id="myPic2" width="600" height="300"></canvas>
  <canvas id="myPic3" width="600" height="300"></canvas>

  <script>

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

    function draw() {
      //取得绘图区域
      console.log('draw')
      var ctx = document.getElementById('myPic').getContext('2d');
      for (var i=0;i<12;i++){
        for (var j=0;j<24;j++){
          //设定填满色彩
          ctx.fillStyle = 'rgb(0,' + Math.floor(255-11.5*i) + ',' + Math.floor(255-11.5*j) + ')';
          //开始路径绘制
          ctx.beginPath();
          //设定圆形绘制路径
          ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
          //路径填充上色
          ctx.fill();
        }
      }
    }

    function drawText() {
      //取得绘图区域
      var ctx = document.getElementById('myPic2').getContext('2d');
      //设定阴影
      ctx.shadowOffsetX = 10;
      ctx.shadowOffsetY = 10;
      ctx.shadowBlur = 2;
      ctx.shadowColor = "rgba(245, 90, 210, 0.5)";
      //设定文字样式
      ctx.font = "24px 楷体";
      ctx.fillStyle = "Blue";
      //绘制文字
      ctx.fillText("canvas 元素是HTML5标准中新增的元素。", 5, 30);

      ctx.shadowColor = "rgba(100, 0, 250, 0.5)";
      ctx.fillStyle = "rgb(110, 210, 50)";
      ctx.fillText("canvas 元素是一个绘图的画布元素", 5, 60);
    }

    function drawImage() {
      //取得绘图区域
      var ctx = document.getElementById('myPic3').getContext('2d');

      //建立(读取)图像绘制的来源
      var myImg = new Image();
      myImg.src = './images/mars.jpg';
      
      //当图片文件载入完成后
      myImg.onload = function(){
        // 绘制图像
        var paintImg = ctx.createPattern(myImg,'repeat');
        ctx.fillStyle = paintImg;
        ctx.fillRect(0,0,800,300);
      }
    }

  </script>
</body>
</html>

在这里插入图片描述

<center>：已弃用

HTML Center 元素（<center>）是个块级元素，可以包含段落，以及其他块级和内联元素。这个元素的整个内容在它的上级元素中水平居中（通常是 <body>）。

这个标签已经在 HTML 4（以及 XHTML 1）中废除了，以支持 CSS text-align 属性，它可以用于 <div> 元素，或者独立的 <p>。对于居中的块，使用其他 CSS 属性，例如 margin-left 和 margin-right，并将其设置为 auto (或者将 margin 设为 0 auto).

向 <div> 或者 <p> 元素应用 text-align:center 会使这些元素的内容居中，同时保留其整体大小不变。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

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


    </style>

</head>
<body>

  <center>
    This text will be centered.
    <p>So will this paragraph.</p>
  </center>
  
  <div style="text-align:center">
    This text will be centered.
    <p>So will this paragraph.</p>
  </div>
  
  <p style="text-align:center">
    This line will be centered.<br />
    And so will this line.
  </p>

  
</body>
</html>

在这里插入图片描述

<data>：提供其自身内容的可读性

开始标签和结束标签都不能省略。

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

属性

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

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


    </style>

</head>
<body>


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

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

</body>
</html>

在这里插入图片描述

<details>：详细信息展现元素

开始标签和结束标签都不能省略。

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

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

一个 <details> 小组件可以处于两种状态之一。默认的关闭状态只显示三角形和 <summary> 内的标签（如果没有 <summary> 则显示用户代理定义的默认字符串）。

当用户点击小组件或聚焦它然后按空格键时，它就会“扭转”展开，显示出其中的内容。通常使用一个旋转或扭转的三角形来代表打开或关闭小组件，这就是为什么这些小组件有时被称为“旋钮”。

可以使用 CSS 来设计展示小组件，可以通过设置/移除 open 属性以编程方式打开和关闭该小组件。遗憾的是，目前还没有内置的方法来对打开和关闭之间的过渡进行动画处理。

默认情况下，当关闭时，该小组件的高度只足以显示展开三角形和摘要。当打开时，它就会展开以显示其中包含的细节。

完全符合标准的实现会自动将 CSS display: list-item 应用到 <summary> 元素。你可以用它来进一步定制其外观。

除了 HTML 元素支持的常规事件外，<details> 元素还支持 toggle 事件，当 <details> 元素的状态在打开和关闭之间变化时，该事件会被派发到该元素。该事件是在状态发生变化后发送的，不过如果状态在浏览器派发该事件之前发生了多次变化，那么这些事件就会被合并，从而只发送一个。

<summary> 元素支持 list-style 缩写属性或者完整属性，比如 list-style-type，可以使用它们任意改变三角（通常与 list-style-image 一起使用）。例如，我们可以使用 list-style: none 移除三角形展开图标。

属性

open 这个布尔属性表示细节内容——也就是 <details> 元素的内容——目前是否可见。默认情况下为 false，意味着细节内容是不可见的。
你必须完全删除这个属性来使细节内容隐藏。open=“false” 使细节内容可见，因为这个属性是布尔值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        details {
          font:
            16px "Open Sans",
            Calibri,
            sans-serif;
          width: 620px;
        }

        details > summary {
          padding: 2px 6px;
          width: 15em;
          background-color: #ddd;
          border: none;
          box-shadow: 3px 3px 4px black;
          cursor: pointer;
        }

        details > p {
          border-radius: 0 0 10px 10px;
          background-color: #ddd;
          padding: 2px 6px;
          margin: 0;
          box-shadow: 3px 3px 4px black;
        }

        details[open] > summary {
          background-color: #ccf;
        }

        .custom > summary {

          list-style: none;
        }


    </style>

</head>
<body>

  <details>
    <summary>系统需求</summary>
    <p>
      要求有一台运行操作系统的计算机。计算机必须有一些内存，最好有某种长期存储。建议有一个输入设备以及某种形式的输出设备。
    </p>
  </details>

  <!-- 使得 <details> 盒子初始为展开状态 open -->
  <details open>
    <summary>系统需求</summary>
    <p>
      要求有一台运行操作系统的计算机。计算机必须有一些内存，最好有某种长期存储。建议有一个输入设备以及某种形式的输出设备。
    </p>
  </details>
  
  <details class="custom">
    <summary>系统需求</summary>
    <p>
      要求有一台运行操作系统的计算机。计算机必须有一些内存，最好有某种长期存储。建议有一个输入设备以及某种形式的输出设备。
    </p>
  </details>

  <script>

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

  </script>
</body>
</html>

在这里插入图片描述

<dialog>：对话框元素

开始标签和结束标签都不能省略。

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

tabindex 属性不能被使用在 <dialog> 元素上。

浏览器使用 ARIA role="dialog"属性对 <dialog> 元素进行了类似于自定义对话框的暴露。由 showModal() 方法调用的 <dialog> 元素将有一个隐含的 aria-modal=“true” 。而由 show() 方法调用的 <dialog> 元素，或通过使用 open 属性，或改变 <dialog> 的默认 display 而呈现的，将被暴露为 [aria-modal=“false”]。建议使用适当的 showModal() 或 show() 方法来渲染对话框。

<form> 元素可关闭含有属性 method=“dialog” 的对话框。当提交表单时，对话框的 returnValue 属性将会等于表单中被使用的提交按钮的 value。

::backdrop CSS 伪元素可用于给使用 HTMLDialogElement.showModal() 显示的 <dialog> 元素背景添加样式，例如在对话框被打开激活时，调暗背景中不可访问的内容。

属性

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

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


    </style>

</head>
<body>


  <dialog open>
    <p>Greetings, one and all!</p>
    <form method="dialog">
      <button>OK</button>
    </form>
  </dialog>
  
  <!-- 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>


  <script>

    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()}`;
    });

  </script>
</body>
</html>

在这里插入图片描述

<dir>：目录元素，已弃用

已废弃的 HTML 目录元素（<dir>）被作为一个文件和/或文件夹的目录的容器，可能还有用户代理应用的样式与图标。

不要使用这个元素。虽然它出现在早期的 HTML 规范中，它已经在 HTML4 中废除了，并且在 HTML5 中过时。使用 <ul> 来代替。

属性

compact 这个布尔属性表明，列表应该以紧凑样式显示。这个属性的实现取决于浏览器，并且不在所有浏览器中工作。
用法注解：不要使用这个属性，因为它已经废除了： <dir> 元素应该使用 CSS 来设计。为了提供 compact 属性的相似效果，可以使用 CSS 属性 line-height，值为 80%。

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

开始标签必须存在，结束标签必须不存在。

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

大多数现代浏览器已经弃用并取消了对浏览器插件的支持，所以如果你希望你的网站可以在普通用户的浏览器上运行，那么依靠 <embed> 通常是不明智的。

属性

height 资源显示的高度，以CSS像素为单位。–（仅限绝对值。无百分比）

src 被嵌套的资源的 URL。

type 用于选择插件实例化的 MIME 类型。

width 资源显示的宽度，以CSS像素为单位。–（仅限绝对值。无百分比）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

  <h3>使用 embed 元素播放 Flash 动画</h3>
  <p>
    <embed src="images/paramflas.swf"
          type="application/x-shockwave-flash"
          width="400"
          height="250">
    </embed>
  </p>

  <h3>使用 embed 元素播放 AVI 影片</h3>
  <p>
    <embed src="images/P1050105-0.avi"
          type="video/mpeg"
          width="400"
          height="250">
    </embed>
  </p>

  <embed type="video/quicktime" src="images/P1040107.MOV" width="640" height="480" />

</body>
</html>

在这里插入图片描述

<figcaption>：是与其相关联的图片的说明/标题

开始标签和结束标签都不能省略。

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

<font>：已弃用

HTML Font 元素（<font>）定义了该内容的字体大小、顏色与表现。

不要使用这个元素！尽管它在 HTML 3.2 规范化，但在 HTML 4.01 中已废除，因为该元件只和样式相关，接着在 HTML5 过时。从 HTML 4 开始，HTML 不能在 <style> 元素，或各元素 style 属性以外，表现任何样式信息。今后的网页开发，样式只能使用 CSS 来编写。<font> 元素的行为，可以通过 CSS 属性实现，以及更好控制。

属性

color 这个属性使用颜色名称或是十六进制的 #RRGGBB 格式，来设置文字的颜色。

face 这个属性列出了一个或多个逗号分隔的字体名称。默认样式中的文档文字，会使用客户端浏览器所支持的，第一个字体风格来渲染。如果本地系统中并没有安装列出的字体，浏览器会使用系统预设的均衡（proportional）或等宽（fixed-width）字体。

size 这个属性使用数字或相对值指定文字大小。数字在最小的 7 到最大的 7 之间，默认值为 3。也可以用诸如 +2 或 -3 的相对值指定，这会将其设置为，相对于 <basefont> 元素 size属性的值，或者如果不存在，则是相对于 3 也就是默认值的值。

<footer>：最近一个章节内容或者根节点（sectioning root）元素的页脚

开始标签和结束标签都不能省略。

<footer>元素必须不能是 <address>, <header> 或者另一个<footer> 元素的后代元素。

一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

<footer>元素内的作者信息应包含在<address> 元素中。
<footer>元素不是章节内容，因此在outline中不能包含新的章节。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>


  <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>
  
  <footer>
    Some copyright info or perhaps some author info for an &lt;article&gt;?
  </footer>
 
</body>
</html>

在这里插入图片描述

<frame>：已弃用

已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；

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

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

属性

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<frameset cols="50%,50%" frameborder="yes">
    <frame src="https://www.csdn.com" />
    <frame src="https://www.hao123.com" />
</frameset>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

 
</body>
</html>

在这里插入图片描述

<frameset>：已弃用

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

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

属性

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

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

<!DOCTYPE html>
<html lang="en">

<frameset rows="*,3*" frameborder="yes">
  <frame name="top" src="https://www.csdn.com">
  <frame name="buttom" src="https://www.hao123.com">
</frameset>
<noframes></noframes>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

 
</body>
</html>

在这里插入图片描述

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

始标签和结束标签都不能省略。

它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>


  <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 snuggly soft!</p>
  </article>

  <hr>

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

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

在这里插入图片描述

<html>：HTML 文档/根元素

如果 <html> 元素中的第一个元素不是注释，则可以忽略开始标签。
如果 <html> 元素没有紧接着注释，则可以忽略结束标签。

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

虽然 HTML 并不要求作者指定 <html> 元素的开始和结束标记，但作者必须这样做，因为这将允许他们为网页指定 lang。根据 RFC 5646: 识别语言的标签（也称为 BCP 47），在 <html> 元素上提供一个带有有效语言标记的 lang 属性，将有助于屏幕阅读技术确定要发布的适当语言。标识语言标签应描述页面大部分内容所使用的语言。如果没有它，屏幕阅读器通常会默认使用操作系统设置的语言，这可能会导致发音错误。

在 <html> 元素中包含一个有效的 lang 声明，还可以确保页面的 <head> 中包含的重要元数据，如页面的 <title>，也会被正确地声明。

属性

~~manifest~~ 已弃用非标准
指定一个资源清单的 URI，指示应在本地缓存的资源。

~~version~~ 已弃用
指定控制当前文档的 HTML 版本文档类型定义。这个属性已不再需要，因为这在文档类型声明中是多余的版本信息。

xmlns 指派文档的 XML 命名空间。默认的值是"http://www.w3.org/1999/xhtml"。这在由 XML 解析器解析的文档中是必需的，而在 text/html 文档中是可选的。

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

<iframe>：内联框架元素，能够将另一个 HTML 页面嵌入到当前页面中

每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录 (session history)和 DOM 树。包含嵌入内容的浏览上下文称为父级浏览上下文。顶级浏览上下文（没有父级）通常是由 Window 对象表示的浏览器窗口。

页面上的每个<iframe>都需要增加内存和其他计算资源，这是因为每个浏览上下文都拥有完整的文档环境。虽然理论上来说你能够在代码中写出来无限多的<iframe>，但是最好还是先看看这么做会不会导致某些性能问题。

内联的框架，就像 <frame> 元素一样，会被包含在 window.frames 伪数组（类数组的对象）中。

在框架内部，脚本可以通过 window.parent 引用父窗口对象。

作为一个可替换元素，可以使用 object-position 和 object-fit 来定位、对齐、缩放 <iframe> 元素内的文档。

使用 iframe 的 title 属性来标识框架的主要内容，这样可以极大方便使用辅助技术（例如屏幕阅读器）浏览网页的人。框架的标题应该清楚地描述框架的内容。

属性

allow 用于为<iframe>指定其特征策略.

allowfullscreen 设置为true时，可以通过调用 <iframe> 的 requestFullscreen() 方法激活全屏模式。
这是一个历史遗留属性，已经被重新定义为 allow=“fullscreen”。

allowpaymentrequest 设置为true时，跨域的 <iframe> 就可以调用 Payment Request API。
这是一个历史遗留属性，已经被重新定义为 allow=“payment”.

csp 实验性
对嵌入的资源配置内容安全策略。

height 以 CSS 像素格式，或像素格式，或百分比格式指定 frame 的高度。默认值为150。

importance 实验性
表示 <iframe> 的 src 属性指定的资源的加载优先级。允许的值有：
- auto (default) 不指定优先级。浏览器根据自身情况决定资源的加载顺序
- high 资源的加载优先级较高
- low 资源的加载优先级较低

name 用于定位嵌入的浏览上下文的名称。该名称可以用作 <a> 标签与 <form> 标签的 target 属性值，也可以用作 <input> 标签和 <button> 标签的 formtarget 属性值，还可以用作 window.open() 方法的 windowName 参数值。

referrerpolicy 表示在获取 iframe 资源时如何发送 referrer 首部：
- no-referrer: 不发送 Referer 首部。
- no-referrer-when-downgrade (default): 向不受 TLS (HTTPS) 保护的 origin 发送请求时，不发送 Referer 首部。
- origin: referrer 首部中仅包含来源页面的源。换言之，仅包含来源页面的 scheme, host, 以及 port。
- origin-when-cross-origin: 发起跨域请求时，仅在 referrer 中包含来源页面的源。发起同源请求时，仍然会在 referrer 中包含来源页面在服务器上的路径信息。
- same-origin: 对于 same origin（同源）请求，发送 referrer 首部，否则不发送。
- strict-origin: 仅当被请求页面和来源页面具有相同的协议安全等级时才发送 referrer 首部（比如从采用 HTTPS 协议的页面请求另一个采用 HTTPS 协议的页面）。如果被请求页面的协议安全等级较低，则不会发送 referrer 首部（比如从采用 HTTPS 协议的页面请求采用 HTTP 协议的页面）。
- strict-origin-when-cross-origin: 当发起同源请求时，在 referrer 首部中包含完整的 URL。当被请求页面与来源页面不同源但是有相同协议安全等级时（比如 HTTPS→HTTPS），在 referrer 首部中仅包含来源页面的源。当被请求页面的协议安全等级较低时（比如 HTTPS→HTTP），不发送 referrer 首部。
- unsafe-url: 始终在 referrer 首部中包含源以及路径（但不包括 fragment，密码，或用户名）。这个值是不安全的, 因为这样做会暴露受 TLS 保护的资源的源和路径信息。

sandbox 控制应用于嵌入在 <iframe> 中的内容的限制。该属性的值可以为空以应用所有限制，也可以为空格分隔的标记以解除特定的限制：
- allow-downloads-without-user-activation 实验性: 允许在没有征求用户同意的情况下下载文件。
- allow-forms: 允许嵌入的浏览上下文提交表单。如果没有使用该关键字，则无法提交表单。
- allow-modals: 允许嵌入的浏览上下文打开模态窗口。
- allow-orientation-lock: 允许嵌入的浏览上下文锁定屏幕方向（比如智能手机、平板电脑的水平朝向或垂直朝向）。
- allow-pointer-lock: 允许嵌入的浏览上下文使用 Pointer Lock API.
- allow-popups: 允许弹窗 (例如 window.open, target=“_blank”, showModalDialog)。如果没有使用该关键字，相应的功能将自动被禁用。
- allow-popups-to-escape-sandbox: 允许沙箱化的文档打开新窗口，并且新窗口不会继承沙箱标记。例如，安全地沙箱化一个广告页面，而不会在广告链接到的新页面中启用相同的限制条件。
- allow-presentation: 允许嵌入的浏览上下文开始一个 presentation session 。
- allow-same-origin: 如果没有使用该关键字，嵌入的浏览上下文将被视为来自一个独立的源，这将使 same-origin policy 同源检查失败。
- allow-scripts: 允许嵌入的浏览上下文运行脚本（但不能创建弹窗）。如果没有使用该关键字，就无法运行脚本。
- allow-storage-access-by-user-activation 实验性: 允许嵌入的浏览上下文通过 Storage Access API 使用父级浏览上下文的存储功能。
- allow-top-navigation: 允许嵌入的浏览上下文导航（加载）内容到顶级的浏览上下文。
- allow-top-navigation-by-user-activation: 允许嵌入的浏览上下文在经过用户允许后导航（加载）内容到顶级的浏览上下文。
当被嵌入的文档与主页面同源时，强烈建议不要同时使用 allow-scripts 和 allow-same-origin。如果同时使用，嵌入的文档就可以通过代码删除 sandbox 属性，如此，就安全性而言还不如不用sandbox。

src 被嵌套的页面的 URL 地址。使用 about:blank 值可以嵌入一个遵从同源策略的空白页。在 Firefox（version 65 及更高版本）、基于 Chromium 的浏览器、Safari/iOS 中使用代码移除 iframe 的 src 属性（例如通过 Element.removeAttribute() ）会导致 about:blank 被载入 frame。

srcdoc 该属性是一段 HTML 代码，这些代码会被渲染到 iframe 中。如果浏览器不支持 srcdoc 属性，则会渲染 src 属性表示的内容。

width 以 CSS 像素格式，或以像素格式，或以百分比格式指定的 frame 的宽度。默认值是300。

~~align~~ 已弃用
此元素相对于周围元素的对齐方式。

~~frameborder~~ 已弃用
值为1（默认值）时，显示此框架的边框。值为0时移除边框。此属性已不赞成使用，请使用 CSS 属性 border 代替。

~~longdesc~~ 已弃用
表示框架内容的长描述的 URL。由于广泛的误用，该属性对于无图形界面的浏览器不起作用。

~~marginheight~~ 已弃用
这个属性定义了框架的内容距其上边框与下边框的距离，单位是像素。

~~marginwidth~~ 已弃用
这个属性定义了框架的内容距其左边框和右边框的距离，单位是像素。

~~scrolling~~ 已弃用
这个属性控制是否要在框架内显示滚动条，允许的值包括：
- auto: 仅当框架的内容超出框架的范围时显示滚动条。
- yes: 始终显示滚动条。
- no: 从不显示滚动条。

mozbrowser 非标准
这个属性可以让 <iframe> 变得像顶级浏览器窗口。这个属性只能在 WebExtensions 中使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>


  <h3>布置网页文件中的内联框架</h3>
  <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>


  <h3>布置网页文件中的内联框架</h3>
  <ul>
    <li><a href="https://www.baidu.com" target="myFrame">首页</a></li>
    <li><a href="https://www.hao123.com" target="myFrame">会员注册</a></li>
    <li><a href="https://www.jd.com" target="myFrame">会员旅游</a></li>
    <li><a href="https://www.ali.com" target="myFrame">论坛事件</a></li>
  </ul>
  <iframe id="myFrame" name="myFrame" src="https://www.baidu.com" width="600" height="350">
  </iframe>

</body>
</html>

在这里插入图片描述

<image>：图像元素，已弃用

HTML <image> 元素是 <img> 元素的一个古老且支持不足的前身。不应该使用它。

某些浏览器会尝试将它自动转化为 <img> 元素，在也指定了 src 属性时可能会成功。

<img>：图像嵌入元素

必须有开始标签，且不能有结束标签。

将一张图像嵌入文档。

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

alt 属性的值应该清晰、简洁地描述图像的内容。它不应该描述“图像的存在”，或仅仅包含图像的文件名。如果因为图像没有等价的文本描述，alt 属性只得不写或留白，那么可以考虑使用其他方法来呈现图像试图传递的内容。

title 属性不是 alt 属性可接受的替代品。并且，避免将 alt 属性的值直接复制到同一幅图片的title 属性上。这样可能会让一些屏幕阅读器把同一段描述读两遍，造成一定程度上的困扰。

title 属性也不该被用作一幅图片在 alt 之外的补充说明信息。如果一幅图片需要小标题，使用 figure 或 figcaption 元素。

title 元素的值一般作为提示条（tooltip）呈现给用户，在光标于图片上停下后显示出来。尽管这确实能给用户提供更多的信息，你不该假定用户真的能看到：用户可能只有键盘或触摸屏。如果要把特别重要的信息提供给用户，选择上面提供的一种方法将其内联显示，而不是使用 title。

由于 VoiceOver bug，VoiceOver 无法正确地将 SVG 图像渲染为图像。在所有使用 SVG 资源文件的 <img> 元素中包含 role=“img” 以保证无障碍技术正确地将 SVG 声明为图像内容。

使用 width 和 height 设置图像的固有尺寸（intrinsic size）：这将设置图像应占用的空间，以确保图像被加载之前页面的布局是稳定的。

使用 sizes 和 srcset 设置响应式图像。

<img> 是一个可替换元素。它的 display 属性的默认值是 inline，但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的，使得它就像 inline-block 一样。你可以为 <img> 设置 border/border-radius、padding/margin、width、height 等 CSS 属性。

Web 最常用的图像格式是：
APNG（动态可移植网络图形）——无损动画序列的不错选择（GIF 性能较差）。
AVIF（AV1 图像文件格式）——静态图像或动画的不错选择，其性能较好。
GIF（图像互换格式）——简单图像和动画的不错选择。
JPEG（联合图像专家组）——有损压缩静态图像的不错选择（目前最流行的格式）。
PNG（便携式网络图形）——对于无损压缩静态图像而言是不错的选择（质量略好于 JPEG）。
SVG（可缩放矢量图形）——矢量图像格式。用于必须以不同尺寸准确描绘的图像。
WebP（网络图片格式）——图像和动画的绝佳选择。

推荐使用诸如 WebP 和 AVIF 等图像格式，因为它们在静态图像和动画的性能均比 PNG、JPEG、JIF 好得多。WebP 得到了广泛的支持，而 AVIF 则缺乏 Safari 的支持。

对于必须以不同尺寸准确绘制的图像，则仍然推荐使用 SVG 格式。

属性

alt 定义了图像的备用文本描述。
浏览器并非总是会显示图像。比如：非可视化浏览器（Non-visual browsers）（比如有视力障碍的人使用的音频浏览器），用户选择不显示图像（比如为了节省带宽，或出于隐私考虑），图像文件无效，或是使用了不支持的格式。在这些情况下，浏览器很可能会将图像替换为图像所属 <img> 元素的 alt 属性所提供的文本。
将图像复制并粘贴为文本，或是将图像的链接保存为浏览器书签时，也会用到此属性。

crossorigin 这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取。启用 CORS 的图像可以在 <canvas> 元素中重复使用，而不会被标记为“污染（tainted）”。
如果未指定 crossorigin 属性，则会发送不启用 CORS 的请求（不会携带 Origin 请求标头），且浏览器会将图像标记为“被污染”并拒绝对图像数据的访问，阻止其在 <canvas> 元素中的使用。
如果指定了 crossorigin 属性，则会发送启用 CORS 的请求（会携带 Origin 请求标头）；但是如果服务器不选择允许源站点对图像数据进行跨源访问（不发送任何 Access-Control-Allow-Origin 响应标头，或发送的 Access-Control-Allow-Origin 标头中不包含源站点），浏览器则会阻止图像的加载，并在开发者工具的控制台中记录 CORS 错误。
允许的值有：
- anonymous 发送忽略凭据的跨源请求（即，不携带 cookie、X.509 证书或 Authorization 请求标头）。
- use-credentials 发送携带凭据的跨源请求（比如 cookie、X.509 证书和 Authorization 请求标头）。如果服务器不选择与源站共享凭据（通过返回 Access-Control-Allow-Credentials: true 响应标头），则浏览器会将图像标记为被污染且限制对其图像数据的访问。
如果属性是无效值，浏览器默认将其当做 anonymous 关键字。

decoding 为浏览器提供图像解码方式上的提示。允许的值：
- sync 同步解码图像，实现与其他内容互斥的原子渲染。
- async 异步解码图像，以减少其他内容的渲染延迟。
- auto 默认值：不指定解码方式，由浏览器决定哪一种对用户来说是最合适的。

fetchpriority 实验性
提供获取图像时要使用的相对的优先级提示。允许的值：
- high 表示其获取优先级相对其他图像要高。
- low 表示其获取优先级相对其他图像要低。
- auto 默认值：表示自动确定其相对其他图像的获取优先级。

height 图像的固有高度，以像素为单位。必须是没有单位的整数值。
同时包括 height 和 width 使浏览器在加载图像之前计算图像的长宽比。此长宽比用于保留显示图像所需的空间，减少甚至防止在下载图像并将其绘制到屏幕上时布局的偏移。

ismap 这个布尔属性表示图像是否是服务器端图像映射的一部分。如果是，那么点击图片的精准坐标将会被发送到服务器。
只有在 <img> 元素是一个拥有有效 href 属性的 <a> 元素的后代元素的情况下，这个属性才会被允许使用。

loading 指示浏览器应当如何加载该图像。允许的值：
- eager 立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。
- lazy 延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）。目的是在需要图像之前，避免加载图像所需要的网络和存储带宽。这通常会提高大多数典型用场景中内容的性能。
仅在启用 JavaScript 时才会延迟加载。这是一种反跟踪的措施

referrerpolicy 一个字符串，指示在获取资源时使用的来源地址（referrer）：
- no-referrer：不会发送 Referer 标头。
- no-referrer-when-downgrade：若未使用 TLS（HTTPS）导航到源站，则不发送 Referer 标头。
- origin：发送到源站的来源地址将被限制为：协议、主机和端口。
- origin-when-cross-origin：发送到其他来源的来源地址会被限制为协议、主机和端口。同源导航仍将包含路径。
- same-origin：仅同源请求发送来源地址，而跨源请求则不包含来源地址信息。
- strict-origin：仅在协议安全级别保持不变（HTTPS→HTTPS）的情况下将文档的来源作为来源地址发送。而在目标的安全性降低（HTTPS→HTTP）时则不发送来源地址。
- strict-origin-when-cross-origin（默认值）：执行同源请求时发送完整的 URL，且仅在协议安全级别保持不变（HTTPS→HTTPS）时发送来源（origin），在目标安全性降低（HTTPS→HTTP）时则不发送来源。
- unsafe-url：来源地址包括来源（origin）和路径（path）（但不包括片段、密码或用户名）。这个值是不安全的，因为它将来源和路径从受 TLS 保护的资源泄露到不安全的来源。

sizes 表示资源大小的、以逗号隔开的一个或多个字符串。每一个资源大小包括：
- 一个媒体条件。最后一项一定是被忽略的。
- 一个资源大小的值。
媒体条件描述视口的属性，而不是图像的属性。例如，如果视口不高于 500px，则建议使用 1000px 宽的资源：(max-height: 500px) 1000px。
资源尺寸的值被用来指定图像的预期尺寸。当 srcset 中的资源使用了宽度描述符 w 时，用户代理会使用当前图像大小来选择 srcset 中合适的一个图像 URL。被选中的尺寸影响图像的显示大小（如果没有影响大小的 CSS 样式被应用的话）。如果没有设置 srcset 属性，或者没有属性值，那么 sizes 属性也将不起作用。

src 图像的 URL，这个属性对 <img> 元素来说是必需的。在支持 srcset 的浏览器中，src 被当做拥有一个像素密度的描述符 1x 的候选图像处理，除非一个图像拥有这个像素密度描述符已经被在 srcset 或者 srcset 包含 w 描述符中定义了。

srcset 以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成：
- 指向图像的 URL。
- 可选地，再加一个空格之后，附加以下的其一：
一个宽度描述符（一个正整数，后面紧跟 w 符号）。该整数宽度除以 sizes 属性给出的资源（source）大小来计算得到有效的像素密度，即换算成和 x 描述符等价的值。
一个像素密度描述符（一个正浮点数，后面紧跟 x 符号）。
如果没有指定源描述符，那它会被指定为默认的 1x。
在相同的 srcset 属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。重复的描述符（比如，两个源在相同的 srcset 两个源都是 2x）也是无效的。
用户代理自行决定选择任何可用的来源。这位它们提供了一个很大的选择余地，可以根据用户偏好或带宽条件等因素来进行选择。

width 图像的宽度，以像素为单位。必须是没有单位的整数。

usemap 与元素相关联的图像映射（image map）的部分 URL（以 # 开始的部分）。
如果 <img> 元素是 <a> 或 <button> 元素的后代元素则不能使用这个属性。

~~align~~ 已弃用
图像相对于它周围上下文的对齐。使用 float 和/或 vertical-align 这两个 CSS 属性作为代替。允许的值：
- top 等价于 vertical-align: top 或 vertical-align: text-top
- middle 等价于 vertical-align: -moz-middle-with-baseline
- bottom默认值，等价于 vertical-align: unset 或 vertical-align: initial
- left 等价于 float: left
- right 等价于 float: right

~~border~~ 已弃用
图像周围的边框宽度。使用 CSS 属性 border 代替此废弃属性。

~~hspace~~ 已弃用
插入到图像的左侧和右侧的空白像素的值。使用 CSS 属性 margin 代替此废弃属性。

~~longdesc~~ 已弃用
一个指向更详细的图像描述的链接。可能的值是一个 URL 或一个页面上其他元素的 id。
此属性在当前最新的 W3C (en-US) 版本——HTML 5.2 中被提到，但在 WHATWG 组织的 HTML Living Standard 中依然处于被移除的状态。它的未来尚无定数；

~~name~~ 已弃用
元素的名字。使用 id 属性代替此废弃属性。

~~vspace~~ 已弃用
插入到图像的上方和下方的空白像素的数组。使用 CSS 属性 margin 代替此废弃属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

  <img alt="一只站在沙滩上的跳岩企鹅。" src="penguin.jpg" />

  <h3>周休二日快乐游</h3>
  <p>
    <img src="images/ari.gif" alt="淡水渔人码头" /><br />
    正确显示图像
  </p>
  <p>
    <img src="images/IMG.JPG" alt="淡水渔人码头" /><br />
    图像错误，显示替代文字
  </p>

  <!-- 图像链接 将 <img> 标签嵌套在 <a> 之内。这时，备用文本应当描述链接所指向的资源，就像是文本链接一样。 -->
  <a href="https://developer.mozilla.org">
    <img src="favicon144.png" alt="Visit the MDN site" />
  </a>

  <!-- 引用了 MDN 标志高清版本；在高分辨率设备上，它将被优先加载，取代 src 属性中的图像。在支持 srcset 的用户代理中，src 属性中的图片被作为 1x 候选项。 -->
  <img src="favicon72.png" alt="MDN logo" srcset="favicon144.png 2x" />

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


  <!-- VoiceOver 无法正确地将 SVG 图像渲染为图像。在所有使用 SVG 资源文件的 <img> 元素中包含 role="img" 以保证无障碍技术正确地将 SVG 声明为图像内容。 -->
  <img src="mdn.svg" alt="MDN logo" role="img" />

</body>
</html>

在这里插入图片描述

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

开始标签必须存在，结束标签必须不存在。

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

rel 表示“关系 (relationship) ”，它可能是<link>元素其中一个关键的特性——属性值表示<link>项的链接方式与包含它的文档之间的关系。

WebTV 支持rel使用next值，用于在一个 document series 中预加载下一页。

属性

as 该属性仅在<link>元素设置了 rel=“preload” 或者 rel=“prefetch” 时才能使用。它规定了<link>元素加载的内容的类型，对于内容的优先级、请求匹配、正确的内容安全策略的选择以及正确的 Accept请求头的设置，这个属性是必需的。可取的值如下：
- audio 应用于<audio> 元素
- document <iframe> 和 <frame> 元素
- embed <embed> 元素
- fetch XHR，该值还要求<link> 包含 crossorigin 属性。
- font CSS @font-face
- image 具有 srcset 或 imageset 属性的 <img> 和 <picture> 元素、SVG<image> 元素、CSS *-image规则
- object <object> 元素
- script <script> 元素, Worker importScripts
- style <link rel=stylesheet> 元素, CSS @import
- track <track> 元素
- video <video> 元素
- worker Worker, SharedWorker

crossorigin 此枚举属性指定在加载相关资源时是否必须使用 CORS. 启用 CORS 的图片可以在 <canvas> 元素中重复使用，并避免其被污染. 可取的值如下：
- “anonymous” 会发起一个跨域请求 (即包含 Origin: HTTP 头). 但不会发送任何认证信息 (即不发送 cookie, X.509 证书和 HTTP 基本认证信息). 如果服务器没有给出源站凭证 (不设置 Access-Control-Allow-Origin: HTTP 头), 资源就会被污染并限制使用.
- “use-credentials” 会发起一个带有认证信息 (发送 cookie, X.509 证书和 HTTP 基本认证信息) 的跨域请求 (即包含 Origin: HTTP 头). 如果服务器没有给出源站凭证 (不设置 Access-Control-Allow-Origin: HTTP 头), 资源就会被污染并限制使用.当不设置此属性时，资源将会不使用 CORS 加载 (即不发送 Origin: HTTP 头), 这将阻止其在 <canvas> 元素中进行使用。若设置了非法的值，则视为使用 anonymous.

disabled 仅对于rel=“stylesheet” ，disabled 的 Boolean 属性指示是否应加载所描述的样式表并将其应用于文档。如果在加载 HTML 时在 HTML 中指定了 Disabled，则在页面加载期间不会加载样式表。相反，如果禁用属性更改为 false 或删除时，样式表将按需加载。但是，一旦加载样式表，对 Disabled 属性的值所做的更改将不再与StyleSheet.disabled 属性的值有任何关系。相反，更改此属性的值只是启用和禁用应用于文档的样式表表单。这与 StyleSheet 的 disable 属性不同；将其更改为 true 会将样式表从文档的document.styleSheets 列表中删除，并且在切换回 false 时不会自动重新加载样式表。

href 此属性指定被链接资源的URL。URL 可以是绝对的，也可以是相对的。

hreflang 此属性指明了被链接资源的语言。其意义仅供参考。仅当设置了 href 属性时才应设置该属性。

importance 实验性
指示资源的相对重要性。优先级提示使用以下值委托：
- auto: 表示没有偏好。浏览器可以使用其自己的启发式方法来确定资源的优先级。
- high: 向浏览器指示资源具有高优先级。
- low: 向浏览器指示资源的优先级较低。
只有存在 rel=“preload”或 rel=“prefetch”时，importance 属性才能用于<link>元素。

integrity 实验性
包含行内元数据，它是一个你用浏览器获取的资源文件的哈希值，以 base64 编码的方式加的密，这样用户能用它来验证一个获取到的资源，在传送时未被非法篡改。

media 这个属性规定了外部资源适用的媒体类型。它的值必须是"媒体查询"。这个属性使得用户代理能选择最适合设备运行的媒体类型。
在 HTML 4 中，该属性只能是一组以空白符作为分隔的媒体描述文字，比如"媒体类型"规定了该元素可取的属性，如 print、screen、aural、braille。HTML5 将该属性值扩展为任意类型的"媒体查询"，"媒体查询"将 HTML4 的属性值都包括在内。
不支持"CSS3 媒体查询"的浏览器并不会强行识别这些链接，因此别忘了设置备用 link，即那些可用于 HTML4 的 link。

referrerpolicy 实验性
一个字符串，指示在获取资源时使用哪个引荐来源网址：
- ‘no-referrer’ 表示Referer 标头将不会发送。
- ‘no-referrer-when-downgrade’ 的原始位置时不会发送任何Referer标头。如果未指定其他政策，这是用户代理的默认行为。
- ‘origin’ 意味着引荐来源网址将是页面的来源，大致是方案，主机和端口。
- ‘origin-when-cross-origin’ 这意味着导航到其他来源将仅限于方案，主机和端口，而在同一来源上导航将包括引荐来源网址的路径。
- ‘unsafe-url’ 意味着引荐来源网址将包含来源和路径（但不包括片段，密码或用户名）。这种情况是不安全的，因为它可能会将来源和路径从受 TLS 保护的资源泄漏到不安全的来源。

rel 此属性命名链接文档与当前文档的关系。该属性必须是链接类型值的用空格分隔的列表。

sizes 这个属性定义了包含相应资源的可视化媒体中的 icons 的大小。它只有在rel包含 icon 的 link 类型值。它可能有如下的规则。
- any 表示图标可以按矢量格式缩放到任意大小，例如 image/svg+xml。
- 一个由空白符分隔的尺寸列表。每一个都以<width in pixels>x<height in pixels> 或 <width in pixels>X<height in pixels>给出。尺寸列表中的每一个尺寸都必须包含在资源里。sizes=“114x114”
大多数的 icon 格式只能存储一个 icon。因此绝大多数使用 sizes时只包含一个值。微软的 ICO 格式和苹果的 ICNS 格式都是这样，ICO 使用得更加广泛，推荐使用它。

title 属性在<link>元素上有特殊的语义。当用于<link rel=“stylesheet”>时，它定义了一个首选样式表或备用样式表。不正确地使用它可能会导致样式表被忽略。

type 这个属性被用于定义链接的内容的类型。这个属性的值应该是像 text/html，text/css 等 MIME 类型。这个属性常用的用法是定义链接的样式表，最常用的值是表明了 CSS 的 text/css。

methods 非标准
此属性的值提供有关可能在对象上执行的功能的信息。这些值通常在使用时由 HTTP 协议给出，但是（出于与“title”属性类似的原因）将其预先包含在链接中可能是有用的。例如，浏览器可能根据指定的方法选择不同的链接呈现方式。可搜索的内容可能会得到其他图标，或者外部链接可能会显示离开当前站点的指示。即使定义的浏览器 Internet Explorer 4 也无法很好地理解或支持此属性。

prefetch 非标准安全上下文
此属性标识下一个导航可能需要的资源，用户代理应检索该资源。这允许用户代理在将来请求资源时更快地做出响应。

target 非标准
定义具有已定义链接关系或将显示任何链接资源的呈现的框架或窗口名称。

~~charset~~ 已弃用
此属性定义链接资源的字符编码。该值为RFC 2045中定义的字符集的空格和/或逗号分隔列表。缺省值为 iso-8859-1。
该属性已淘汰且禁止使用。要实现相同效果，可在外链资源中使用 Content-Type HTTP header。

~~revt~~ 已弃用
此属性的值显示了 href 属性所定义的当前文档与链接文档的关系。因此，该属性定义了与 rel 属性的值相比的反向关系。该属性的 Link type value 类似于rel的可能值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <link href="a.html" rel="prev" />
    <link href="a_name.html" rel="next" />

    <!-- 样式表 -->
    <link href="styles/style.css" rel="stylesheet" type="text/css" />

    <!-- 用户可以在浏览器菜单 "查看>页面样式" 来选择网页的样式。通过这一办法，可以用多种样式浏览网页。 -->
    <link href="default.css" rel="stylesheet" title="Default Style" />
    <!-- 候选样式表 多数基于 Gecko 的浏览器，如 FireFox 和 Opera，都支持候选样式表。Internet Explorer 元素不支持，不过可以借助 JavaScript。基于 WebKit 的浏览器不支持候选样式表。 -->
    <link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
    <link href="basic.css" rel="alternate stylesheet" title="Basic" />

    <!-- 样式表加载事件 -->
    <script>
      function sheetLoaded() {
        // Do something interesting; the sheet has been loaded
        console.log('sheetLoaded')
      }
    
      function sheetError() {
        alert("An error occurred loading the stylesheet!");
      }
    </script>
    <link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()" />

    <!-- 网站图标 -->
    <!-- basic favicon -->
    <link rel="icon" href="favicon.ico" />

    <!-- third-generation iPad with high-resolution Retina display: -->
    <link
    rel="apple-touch-icon-precomposed"
    sizes="144x144"
    href="favicon144.png" />
    <!-- iPhone with high-resolution Retina display: -->
    <link
    rel="apple-touch-icon-precomposed"
    sizes="114x114"
    href="favicon114.png" />
    <!-- first- and second-generation iPad: -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
    <!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
    <link rel="apple-touch-icon-precomposed" href="favicon57.png" />

    <!-- 不同移动平台上特殊的图标类型 sizes属性表示图标大小，type属性包含了链接资源的 MIME 类型。 -->
    <link rel="apple-touch-icon-precomposed" 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="all" />
    <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)" />
    <link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)" />
    <link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)" />

    <!-- 将rel设定为preload，表示浏览器应该预加载该资源 as属性表示获取特定的内容类。crossorigin属性表示该资源是否应该使用一个CORS请求来获取。 -->
    <link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous" />


    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

  <table>
    <tr>
      <td>
        <h2>精选花卉</h2>
        <ul>
          <li><a href="prev">上一张</a></li>
          <li><a href="next">下一张</a></li>
        </ul>
      </td><td><img src="images/balloon-sq4.jpg" alt="花卉"/></td>
    </tr>
  </table>
 
</body>
</html>

在这里插入图片描述

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

开始与结束都是强制性。

主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

在文档中，<main> 元素的内容应当是独一无二的。任何同时存在于任意一系列文档中的相同、重复内容，比如侧边栏、导航栏链接、版权信息、网站 Logo，搜索框（除非搜索框为文档的主要功能），都不应当被包含在其内。

<main> 对文档的大纲（outline）没有贡献；也就是说，它与诸如 <body> 之类的元素，诸如 <h2> 之类的标题等不同，<main> 不会影响 DOM 的页面结构概念。它仅有提供信息的作用。（原文：It’s strictly informative.）

浏览器的阅读器模式会寻找文档中的 main 元素，以及标题元素和内容分区元素以便将内容转换至阅读器视图。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

  <header>Gecko facts</header>

  <main>
    <p>
      Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.
    </p>
  
    <p>Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.</p>
  </main>

  <!-- 其他内容 -->

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

  <!-- 其他内容 -->


  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>

  <main role="main">...</main>

</body>
</html>

在这里插入图片描述

<map>：用来定义一个图像映射 (一个可点击的链接区域)

开始标签和结束标签都不能省略。

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

属性

name name 属性给 map 一个名字用来查询，这个属性是必须的，值必须不能为空并且不能带空格。name 属性不准与同文档中其他 map 元素的值相同，如果 id 属性也被添加，name 属性和 id 属性的值必须相同。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

  <h3>影像地图操作</h3>
  <map id="myMap">
    <area href="http://forum.twts.com" shape="circle" coords="311, 111, 98" title="麻辣家族讨论区" alt="麻辣家族讨论区" tabindex="2" />
    <area href="http://valor.twts.com" shape="polygon" coords="475, 212, 593, 297, 548, 428, 409, 427,361, 295" title="昱得资讯" alt="昱得资讯" tabindex="3" />
    <area href="http://www.twbts.com/" shape="polygon" coords="138, 201, 170, 293, 262, 284, 184, 337,227, 433, 148, 372, 68, 440, 100, 340, 13, 291, 120, 291" title="麻辣学园" alt="麻辣学园" tabindex="1" />
  </map>
  <p>
    <img src="images/webmap.jpg" width="600" height="450" alt="网站链接" usemap="#myMap"/>
  </p>

  <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="https://interactive-examples.mdn.mozilla.net/media/examples/mdn-info2.png" alt="MDN infographic" />
  
  <!-- Photo by Juliana e Mariana Amorim on Unsplash -->
  <map name="primary">
    <area
      shape="circle"
      coords="75,75,75"
      href="https://developer.mozilla.org/docs/Web/JavaScript"
      target="_blank"
      alt="JavaScript" />
    <area
      shape="circle"
      coords="275,75,75"
      href="https://developer.mozilla.org/docs/Web/CSS"
      target="_blank"
      alt="CSS" />
  </map>
  <img
    usemap="#primary"
    src="https://interactive-examples.mdn.mozilla.net/parrots.jpg"
    alt="350 x 150 picture of two parrots" />

</body>
</html>

在这里插入图片描述

<marquee>：已弃用

HTML marquee 元素（<marquee>）用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。

<marquee> 元素已经过时，请不要再使用。尽管一些浏览器仍然支持它，但它不是必须的。

属性

behavior 设置文本在 marquee 元素内如何滚动。可选值有 scroll，slide 和 alternate。如果未指定值，默认值为 scroll。

bgcolor 通过颜色名称或十六进制值设置背景颜色。

direction 设置 marquee 内文本滚动的方向。可选值有 left, right, up and down。如果未指定值，默认值为 left。

height 以像素或百分比值设置高度。

hspace 设置水平边距。

loop 设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动。

scrollamount 设置每次滚动时移动的长度（以像素为单位）。默认值为 6。

scrolldelay 设置每次滚动时的时间间隔（以毫秒为单位）。默认值为 85。请注意，除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。

truespeed 默认情况下，会忽略小于 60 的 scrolldelay 值。如果存在 truespeed，那些值不会被忽略。

vspace 以像素或百分比值设置垂直边距。

width 以像素或百分比值设置宽度。

事件回调

onbounce 当 marquee 滚动到结尾时触发。它只能在 behavior 属性设置为 alternate 时触发。

onfinish 当 marquee 完成 loop 属性设置的值时触发。它只能在 loop 属性设置为大于 0 的某个数字时触发。

onstart 当 marquee 开始滚动时触发。

方法

start 开始滚动 marquee。

stop 停止滚动 marquee。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

  <marquee>This text will scroll from right to left</marquee>

  <marquee direction="up">This text will scroll from bottom to top</marquee>
  
  <marquee
    direction="down"
    width="250"
    height="200"
    behavior="alternate"
    style="border:solid">
    <marquee behavior="alternate"> This text will bounce </marquee>
  </marquee>
  

</body>
</html>

在这里插入图片描述

<menu>：呈现了一组用户可执行或激活的命令

开始标签和结束标签都不能省略。

既包含了可能出现在屏幕顶端的列表菜单，也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。

<menu> 和 <ul> 元素都呈现了无序列表元素。最主要的区别是，<ul> 主要是为了展示选项，而 <menu> 则是为了交互。

HTML菜单可用于创建上下文菜单（通常通过右键单击另一个元素来激活）或工具栏。

上下文菜单由<menu>元素组成，该元素包含菜单中每个可选选项的<menuitem>元素，菜单中子菜单的<menu>元件，以及分隔线的<hr>元件，用于将菜单内容分解为多个部分。然后，上下文菜单被附加到使用关联元素的上下文菜单属性激活的元素，或者，对于附加到\＜button\＞元素的按钮激活菜单，使用菜单属性。

工具栏菜单由<menu>元素组成，其内容以两种方式之一描述：要么是由<li>元素表示的无序项目列表（每个元素表示用户可以使用的命令或选项），要么（如果没有<li>元素），描述可用命令和选项的流内容。

这个元素在 HTML4 中被弃用，但在 HTML 5.1 和 HTML living standard 中被重新推荐使用。

右键菜单已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；

菜单按钮还没有在任何已知的浏览器中实现。<menu>元素上的type属性现在已过时。

<menuitem> 元素已过时。工具栏菜单(Toolbar)还没有在任何已知的浏览器中实现。

属性

~~label~~ 已弃用
显示给用户的菜单名称。在嵌套菜单中使用，以提供可以访问子菜单的标签。只有当父元素是上下文菜单状态中的<menu>时，才必须指定。

type 该属性指示要声明的菜单类型，可以是两个值之一。
- context 已弃用 : 指示弹出菜单状态，表示通过另一个元素激活的一组命令。这可能是<button> 元素的菜单属性引用的按钮菜单，也可能是具有 contextmenu 属性的元素的上下文菜单。如果属性未设置并且父元素也是<menu>元素，则此值为默认值。
- toolbar: 表示工具栏状态，表示由一系列用于用户交互的命令组成的工具栏。这可能是<li>元素的无序列表，或者，如果元素没有<li>子元素，则可以是描述可用命令的流内容。如果属性未设置，则此值为默认值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

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

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

  <menu type="toolbar">
    <li>
      <button type="menu" menu="file-menu">File</button>
      <menu type="context" id="file-menu">
        <menuitem label="New..." onclick="newFile()">
        <menuitem label="Save..." onclick="saveFile()">
      </menu>
    </li>
    <li>
      <button type="menu" menu="edit-menu">Edit</button>
      <menu type="context" id="edit-menu">
        <menuitem label="Cut..." onclick="cutEdit()">
        <menuitem label="Copy..." onclick="copyEdit()">
        <menuitem label="Paste..." onclick="pasteEdit()">
      </menu>
    </li>
  </menu>

  <menu label="蒲公英">
    <p>多年生草本植物，根深长，单一或分枝，外皮黄棕色。叶根生，排成莲座状，狭倒披针形，大头羽裂，裂片三角形，全缘或有数齿，先端稍钝或尖，基部渐狭成柄，无毛蔌有蛛丝状细软毛。花茎比叶短或等长，结果时伸长，上部密被白色蛛丝状毛。
    <li>科属：菊科</li>
    <li>别名：黄花地丁，白鼓丁，蒲公草</li>
    <li>原产地：温带~亚寒带地区</li>
  </menu>
  <hr/>
  <menu label="工具栏" type="toolbar">
    <button type="button" onclick="alert('向上移动')">向上</button>
    <button type="button" onclick="alert('向下移动')">向下</button>
    <button type="button" onclick="alert('向左移动')">向左</button>
    <button type="button" onclick="alert('向右移动')">向右</button>
  </menu>

</body>
</html>

在这里插入图片描述

<menuitem>：不再推荐使用该特性

必须有开始标签和结束标签。

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

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

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

属性

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

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

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

</body>
</html>

在这里插入图片描述

<nav>：提供导航链接

开始标签和结束标签都不能省略。

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

并不是所有的链接都必须使用<nav>元素，它只用来将一些热门的链接放入导航栏，例如<footer>元素就常用来在页面底部包含一个不常用到，没必要加入<nav>的链接列表。

一个网页也可能含有多个<nav>元素，例如一个是网站内的导航列表，另一个是本页面内的导航列表。

对于屏幕阅读障碍的人，可以使用这个元素来确定是否忽略初始内容。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

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


    </style>

</head>
<body>


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

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  
  
</body>
</html>

在这里插入图片描述

<nobr>：已弃用

HTML <nobr> 元素阻止文本自动拆分成新行，所以它展示为长的一行，可能还需要滚动。这个标签不是标准的 HTML，并且不应该使用。反之应该使用 CSS 属性 white-space，

<span style="white-space: nowrap">Long line with no breaks</span>

<noembed>：已弃用

<noembed> 元素是个废除的和不标准的方式，用于向不支持 <embed> ，或者不支持作者希望的嵌入式内容的浏览器提供替代（或者“后备”）内容。这个元素在 HTML 4.01 起废除，以支持 <object>。后备内容应该插在 <object> 的开始和结束标签之间。

虽然这个元素仍旧在许多浏览器中有效，它已经废除了，并且不应使用。使用 <object> 来代替。

<noframes>：已弃用

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

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

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

<!DOCTYPE html>
<html lang="en">

<frameset cols="50%,50%">
  <frame src="https://www.csdn.com" />
  <frame src="https://www.hao123.com" />
  <noframes>
    <p>
      It seems your browser does not support frames or is not configured do so.
    </p>
  </noframes>
</frameset>

<!-- <frameset rows="*,3*" frameborder="yes">
  <frame name="top" src="https://www.csdn.com">
  <frame name="buttom" src="https://www.hao123.com">
</frameset>
<noframes></noframes> -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

 
</body>
</html>

<object>：嵌入对象元素

开始标签和结束标签都不能省略。

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

属性

~~archive~~ 已弃用
用来指名对象资源列表的以空格分隔的 URI 列表。

~~border~~ 已弃用
元素周围的边框的宽度，单位为像素。

~~classid~~ 已弃用
对象实现的 URI，可以同时与 data 属性使用，或者使用 data 属性替代。

~~codebase~~ 已弃用
解析 classid，data 或者 archive 中定义的相对路径的根路径，如果没有定义，默认为当前文档的 base URI。

~~codetype~~ 已弃用
classid 定义的 data 的内容类型。

data 一个合法的 URL 作为资源的地址，需要为 data 和 type 中至少一个设置值。

~~declare~~ 已弃用
取值为布尔的属性可以设置这个元素为仅声明的格式。对象必须被随后的 <object> 元素实例化。在 HTML5 中，完整的重复 <object> 元素，可以重用元素。

form 对象元素关联的 form 元素（属于的 form）。取值必须是同一文档下的一个 <form> 元素的 ID。

height 资源显示的高度，单位是 CSS 像素。

name 浏览上下文名称（HTML5），或者控件名称（HTML 4）。

~~standby~~ 已弃用
对象的实现和数据加载过程中，浏览器可以显示的信息。

~~tabindex~~ 已弃用
当前元素在文档 Tab 导航中的顺序。

type data 指定的资源的 MIME 类型，需要为 data 和 type 中至少一个设置值。

usemap 指向一个 <map> 元素的 hash-name；格式为‘#’加 map 元素 name 元素的值。

width 资源显示的宽度，单位是 CSS 像素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

  <h3>利用object元素播放多媒体文件</h3>
  <p>
    <object data="img/P1040107.MOV" type="Video/quicktime" width="400" height="250">
    </object>
    <br /> 我好无聊喔!!
  </p>

  <h3>利用object元素播放多媒体文件</h3>
  <p>
    <object data="img/P1020247-2.mpg" type="video/mpeg" width="400" height="300">
    <param name="src" value="img/P1020247-2.mpg" />
    <param name="autoplay" value="false" />
    <param name="autoStart" value="0" />
    </object>
  </p>

  <object type="application/pdf" data="pdfs/mypdf.pdf" width="250" height="200"></object>

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

  <!-- Embed a flash movie with parameters -->
  <object data="images/paramflas.swf" type="application/x-shockwave-flash">
    <param name="foo" value="bar" />
  </object>

</body>
</html>

在这里插入图片描述

<param>：已弃用

由于它是一个 void 元素，所以开始标签必须出现，而结束标签必须不出现。

不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；

为 <object> 元素定义参数

属性

name 参数的名字。

~~type~~ 已弃用
仅当 valuetype 设置为“ref”时才使用。根据 URI 中给定的数据确定 MIME 类型。

value 确定参数的值。

~~valuetype~~ 已弃用
确定参数的类型。可选值如下：
- data: 默认值。该值作为字符串变量传递给对象实例。
- ref: 该值是存储运行时变量的资源的 URI。
- object: 同一页面（document）中另一个<\object>的 ID。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

  <h3>param 元素应用</h3>
  <p>
  <object type="application/x-shockwave-flash" data="images/paramflas.swf" width="400" height="300">
    <param name="movie" value="images/paramflas.swf" />
    <param name="quality" value="high" />
  </object>
  </p>

</body>
</html>

在这里插入图片描述

<picture>：picture 元素

开始标签和结束标签都不能省略。

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

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

<picture> 的常见使用场景：

艺术指导 (Art direction) —— 针对不同 media 条件裁剪或修改图像
遇到所有浏览器都不支持的特定格式时，提供不同的图像格式
如果要为高 DPI (Retina) 显示提供更高像素密度的图像版本，请在 <img> 元素上使用 srcset 。这使得浏览器可以在节约流量模式下选择低像素密度版本，且不需要你编写明确的 media 条件。

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

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }


    </style>

</head>
<body>

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

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

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

</body>
</html>

在这里插入图片描述

<plaintext>：已弃用

HTML 纯文本元素 (<plaintext>) 将起始标签后面的任何东西渲染为纯文本，不会解释为 HTML。它没有闭合标签，因为任何后面的东西都会看做纯文本。

不要使用这个元素，你应该使用 <pre> 元素，或者如果满足语义的话，使用 <code> 元素。要确保转义了任何 ‘<’ 、’ >’ 和 “&” 字符，来避免将内容解释为 HTML。

等宽字体也可以显示在 <div> 元素中，通过使用足够的 CSS 样式，在 font-family 中将 monospace 用作通用字体（generic-font）的值。

<portal>: 这是一项实验技术

允许将另一个HTML页面嵌入到当前页面中，以便更平滑地导航到新页面

<portal>类似于<iframe>。<iframe> 允许嵌入单独的浏览上下文。然而，<portal> 的嵌入内容比 <iframe> 的内容更为有限。它不能与之交互，因此不适合将小部件嵌入到文档中。相反，<portal>充当另一个页面内容的预览。它可以导航到，从而允许无缝过渡到嵌入式内容。

属性

referrerpolicy 设置在指定为src属性值的URL处请求页面时要使用的referr策略。

src 要嵌入的页面的URL。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }


    </style>

</head>
<body>

  <portal id="exampleportal" src="https://example.com/"></portal>


</body>
</html>

<s>：使用删除线来渲染文本

开始标签和结束标签都不能省略。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }


    </style>

</head>
<body>

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

</body>
</html>

在这里插入图片描述

<search>：通用搜索元素

开始标签和结束标签都不能省略。

<search> HTML元素是一个容器，表示文档或应用程序的各个部分，其中包含与执行搜索或筛选操作相关的表单控件或其他内容。<search> 元素在语义上将元素内容的目的标识为具有搜索或过滤功能。搜索或过滤功能可以用于网站或应用程序、当前网页或文档、或整个互联网或其子部分。

<search> 元素不用于显示搜索结果。相反，搜索或过滤结果应该作为该网页主要内容的一部分呈现。也就是说，作为搜索或过滤功能中“快速搜索”功能的一部分的建议和链接被适当地嵌套在 <search> 元素的内容中，因为它们是搜索功能。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }


    </style>

</head>
<body>

  <header>
    <h1>Movie website</h1>
    <search>
      <form action="./search/">
        <label for="movie">Find a Movie</label>
        <input type="search" id="movie" name="q" />
        <button type="submit">Search</button>
      </form>
    </search>
  </header>

  
  <search>
    <label>
      Find and filter your query
      <input type="search" id="query" />
    </label>
    <label>
      <input type="checkbox" id="exact-only" />
      Exact matches only
    </label>
  
    <section>
      <h3>Results:</h3>
      <ul id="results">
        <!-- search result content -->
      </ul>
      <output id="no-results">
        <!-- no results content -->
      </output>
    </section>
  </search>

  
    <header>
      <h1>Car rental agency</h1>
      <search title="Website">...</search>
    </header>
    <main>
      <h2>Cars available for rent</h2>
      <search title="Cars">
        <h3>Filter results</h3>
        ...
      </search>
      <article>
        <!-- search result content -->
      </article>
    </main>
  

</body>
</html>

在这里插入图片描述

<slot>：Web 组件内的一个占位符

开始标签和结束标签都不能省略。

该占位符可以在后期使用自己的标记语言填充，这样你就可以创建单独的 DOM 树，并将它与其他的组件组合在一起。

属性

name 插槽的名字。拥有 name 属性的插槽叫具名插槽。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        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>

</head>
<body>

    <details>
      <summary>
        <code class="name"
          >&lt;<slot name="element-name">NEED NAME</slot>&gt;</code
        >
        <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
      </summary>
      <div class="attributes">
        <h4>Attributes</h4>
        <slot name="attributes"><p>None</p></slot>
      </div>
    </details>
    <hr />
  
  

</body>
</html>

在这里插入图片描述

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

由于它是一个 void 元素，所以开始标签必须出现，而结束标签必须不出现。

通常用于以多种文件格式提供相同的媒体内容，以提供与各种浏览器的兼容性，因为它们对图像文件格式和媒体文件格式的支持不同。

属性

type 图像的MIME媒体类型或其他媒体类型，可选地带有编解码器参数。

src 媒体资源的地址。如果源元素的父元素是 <audio> 和 <video> 元素，则此项为必需项，但如果源元素父元素是 <picture> 元素，则不允许此项。

srcset 如果源元素的父元素是 <picture> 元素，则此项为必需项，但当源元素的母元素是 <audio> 和 <video> 元素时，则不允许此项。
一个或多个字符串的列表，用逗号分隔，表示由源表示的一组可能的图像供浏览器使用。每个字符串由以下部分组成：
一个指定图像的URL。
宽度描述符，由一个字符串组成，该字符串包含一个正整数，后跟“w”，例如300w。如果缺少默认值，则为无穷大。
一个像素密度描述符，它是一个直接跟在“x”后面的正浮点数。如果缺少，默认值为1x。
列表中的每个字符串必须至少有一个宽度描述符或一个像素密度描述符才能有效。这两种类型的描述符不应该混合在一起，在整个列表中只应该一致地使用一种描述符。在列表中，每个描述符的值必须是唯一的。浏览器选择在给定时间点显示的最合适的图像。如果存在size属性，则必须为每个字符串指定宽度描述符。如果浏览器不支持srcset，那么src将用于默认源。

sizes 如果源元素的父元素是 <picture> 元素，则允许，但如果源元素父元素是 <audio> 和 <video> 元素，则不允许。
源大小的列表，用于描述由源表示的图像的最终渲染宽度。每个源大小都由媒体条件长度对的逗号分隔列表组成。在布局页面之前，浏览器会使用这些信息来确定要使用srcset中定义的图像。请注意，只有当宽度维度描述符提供srcset而不是像素比值（例如，200w而不是2x）时，大小才会产生影响。

media 资源的预期媒体的媒体查询。

height 如果源元素的父元素是 <picture> 元素，则允许，但如果源元素父元素是 <audio> 和 <video> 元素，则不允许。
图像的固有高度，以像素为单位。必须是不带单位的整数。

width 图像的固有宽度（以像素为单位）。必须是不带单位的整数。
如果源元素的父元素是 <picture> 元素，则允许，但如果源元素父元素是 <audio> 和 <video> 元素，则不允许。

如果没有指定type属性，则从服务器检索媒体的类型，并检查用户代理是否可以处理它；如果无法渲染，则选中下一个 <source> 。如果指定了type属性，则会将其与用户代理可以呈现的类型进行比较，如果无法识别，则服务器甚至不会被查询；相反，会立即检查下一个 <source> 元素。

当在 <picture> 元素的上下文中使用时，如果浏览器在检查了每个提供的 <picture> 后找不到合适的图像来使用，它将返回使用 <picture> 元素的 <img> 子项指定的图像。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

  <h3>source元素应用</h3>
  <audio controls="controls" autoplay >
    <source src="img/10.ogg" />
    <source src="img/10.mp3" />
    <p>  
    Your browser does not support the audio tag.
    您的浏览器尚未支持HTML5的audio元素标签
    </p>
  </audio>

  <video controls width="250" height="200" muted>
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />
    Download the
    <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm">WEBM</a>
    or
    <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">MP4</a>
    video.
  </video>

  <!-- 带有类型属性示例的视频 -->
  <video controls>
    <source src="foo.webm" type="video/webm" />
    <source src="foo.ogg" type="video/ogg" />
    <source src="foo.mov" type="video/quicktime" />
    I'm sorry; your browser doesn't support HTML video.
  </video>

  <!-- 为某个宽度或以上的视口提供备用源文件 -->
  <video controls>
    <source src="foo-large.webm" media="(min-width: 800px)" />
    <source src="foo.webm" />
    I'm sorry; your browser doesn't support HTML video.
  </video>
  
  <!-- 对于 picture 元素，必须始终包含一个带有回退图像的 <img> ，并带有alt属性以确保可访问性（除非该图像是不相关的背景装饰图像）。 -->
  <picture>
    <source srcset="mdn-logo-wide.png" media="(min-width: 800px)" />
    <source srcset="mdn-logo-medium.png" media="(min-width: 600px)" />
    <img src="mdn-logo-narrow.png" alt="MDN Web Docs" />
  </picture>
  

  <!-- 媒体查询允许浏览器根据视口大小选择具有高度和宽度属性的图像进行显示。 -->
  <picture>
    <source
      srcset="landscape.png"
      media="(min-width: 1000px)"
      width="1000"
      height="400" />
    <source
      srcset="square.png"
      media="(min-width: 800px)"
      width="800"
      height="800" />
    <source
      srcset="portrait.png"
      media="(min-width: 600px)"
      width="600"
      height="800" />
    <img
      src="fallback.png"
      alt="Image used when the browser does not support the sources"
      width="500"
      height="400" />
  </picture>
  

</body>
</html>

在这里插入图片描述

<strike>：已弃用

HTML <strike> 元素在文本上放置水平的删除线。

这个元素在 HTML 4 和 XHTML 1 中废除了，并且在现存的 HTML 标准被弃用。如果语义上合适的话（也就是如果表示删除的内容），使用 <del> 来代替。在所有其他的情况中，使用 <s>。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }


    </style>

</head>
<body>

   
  &lt;strike&gt;: <strike>Today's Special: Salmon</strike> SOLD OUT<br />
&lt;s&gt;: <s>Today's Special: Salmon</s> SOLD OUT


</body>
</html>

在这里插入图片描述

<summary>：摘要展现元素

块级元素开始和结束标签都不能省略

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

<summary> 元素的内容可以是任意标题内容、纯文本，或是可以在段落内使用的 HTML 代码。

<summary> 元素仅可作为 <details> 元素的第一个子节点。当用户在 <summary> 元素上点击时，父元素 <details> 会切换开启和关闭的状态，并会向 <details> 元素发送 toggle 事件，令用户得知这样的状态改变何时发生。

如果一个<details> 元素的第一个子节点不是 <summary> 元素，用户代理会使用一个默认字符串（通常为“详细信息”或“详情”）作为展开盒子的标签内容。

<summary> 元素的默认样式包括 display: list-item。这使得改变或移除显示为标签旁边的展现部件的图标成为可能，默认的图标通常是一个三角形。可以将样式改变为 display: block 来移除展开三角形。

对于基于 Webkit 的浏览器，例如 Safari，可以通过非标准的 CSS 伪元素 ::-webkit-details-marker 来控制图标显示。要删除展开三角形，请使用 summary::-webkit-details-marker { display: none }。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

  <details>
    <summary>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?</summary>
    A keyboard.
  </details>

  <details>
    <p>I have keys</p>
    <summary>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?</summary>
    A keyboard.
  </details>

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

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

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

  <details>
    <summary>考试成绩分析</summary>
    <form name="myForm" id="myForm">
    您的成绩
    <meter max="100" value="65" low="55" high="80" optimum="90">65分</meter>
    </form>
    <ul>
    <li>低标分数：55分</li>
    <li>高标分数：80分</li>
    <li>推荐分数：90分</li>
    </ul>
  </details>
  

</body>
</html>

在这里插入图片描述

<table>：表格元素

块级元素开始标签和结束标签都不能省略。

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

在 <th> 元素上提供声明 scope=“col”，将有助于描述该单元格处于一列的顶部。在 <th> 元素上提供声明 scope=“row”，将有助于描述该单元格是某一行的第一个。

属性

~~align~~ 已弃用
这个枚举 (en-US)属性指定了包含在文档中的表格必须如何对齐。可能含有如下值：
- left：表格将在文档左侧显示；
- center：表格将在文档中央显示；
- right：表格将在文档右侧显示；
设置 margin-left、margin-right 为 auto，或者将 margin 设置为 0 auto 来实现类似于 align 属性的效果。

~~bgcolor~~ 已弃用
表格的背景颜色。它是一个 6 位的十六进制 RGB 编码，以 ‘#’ 作为前缀。当然也可以使用下面已经被预先定义的颜色关键字。
为了实现相似的效果，可以使用 CSS 属性 background-color。

~~border~~ 已弃用
这个整型属性定义了环绕表格外部的框的大小。如果设置为 0，这意味着 frame 属性被设置为空。
为了实现相似的效果，可以使用 CSS 简写属性 border。

~~cellpadding~~ 已弃用
这个属性定义了一个单元格的内容和它的边框之间的空间，无论显示与否。如果 cellpadding 的长度是用像素定义的，这个像素大小的空间将被应用到单元格内容的所有四边。如果长度是用百分比值定义的，内容将被居中，总的垂直空间（顶部和底部）将代表这个值。对于总的水平空间（左边和右边）也是如此。
为了实现相似的效果，可以在 <table> 元素上使用属性值为 collapse 的 border-collapse 属性，在 <td> 元素上使用属性 padding。

~~cellspacing~~ 已弃用
这个属性定义了水平和垂直方向上两个单元格之间空间的大小，使用百分比或像素，包括了表格的顶部与第一行的单元格、表的左边与第一列单元格、表的右边与最后一列的单元格、表的底部与最后一行单元格之间的空间。
为了实现相似的效果，可以在 <table> 元素上使用 CSS 属性 border-spacing。border-spacing 在 border-collapse 设置为 collapse 时将无效。

~~frame~~ 已弃用
这个枚举属性定义了包围在表格周围的框架的哪个边必须显示。
为了实现相似的效果，可以使用 CSS 属性 border-style 和 border-width。

~~rules~~ 已弃用
这个枚举属性定义了在一个表格中分隔线的显示位置。它可以有以下值：
- none，这表明没有分隔线将被显示；这是默认的值；
- groups，这将使得分隔线只显示在行组（row group，通过 <thead>、<tbody> 和 <tfoot> 元素定义）和列组（column group，通过 <col> 和 <colgroup> 元素定义）之间
- rows，这将使得分隔线在行之间显示；
- cols，这将使得分隔线在列之间显示；
- all，这将使得分隔线在列和行之间显示；
为了实现相似的效果，可以在适当的 <thead>、<tbody>、<tfoot>、<col> 或 <colgroup> 元素上使用 border 属性。

~~summary~~ 已弃用
该属性定义了概括表格内容的替代文本。请使用 <caption> 元素代替。

~~width~~ 已弃用
该属性定义了表格的宽度。请使用 CSS width 属性代替。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

        .batman {
          background-color: #d7d9f2;
        }

        .flash {
          background-color: #ffe8d4;
        }

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

        table {
          /* 相邻单元格之间共享边框线 */
          border-collapse: collapse;
          border: 2px solid rgb(100, 100, 100);
          letter-spacing: 1px;
          font-family: sans-serif;
          font-size: 0.7rem;
        }

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

        td {
          text-align: center;
        }


        thead > tr > th {
          background-color: #cce;
          font-size: 18px;
          border-bottom: 2px solid #999;
        }

        tbody > tr > th {
          background-color: #dde;
          border-bottom: 1.5px solid #bbb;
          font-weight: normal;
        }

    </style>

</head>
<body>

  <table>
    <tbody>
      <tr>
        <td>3</td>
      </tr>
      <tr>
        <td>2</td>
      </tr>
      <tr>
        <td>1</td>
      </tr>
    </tbody>
  </table>

  <table class="clickSort">
    <thead>
      <tr>
        <th>数字</th>
        <th>字母</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>3</td>
        <td>A</td>
      </tr>
      <tr>
        <td>2</td>
        <td>B</td>
      </tr>
      <tr>
        <td>1</td>
        <td>C</td>
      </tr>
    </tbody>
  </table>
  
  <table>
    <caption>
      表格名称和值
    </caption>
    <tbody>
      <tr>
        <th scope="col">名称</th>
        <th scope="col">HEX</th>
        <th scope="col">HSLa</th>
        <th scope="col">RGBa</th>
      </tr>
      <tr>
        <th scope="row">Teal</th>
        <td><code>#51F6F6</code></td>
        <td><code>hsla(180, 90%, 64%, 1)</code></td>
        <td><code>rgba(81, 246, 246, 1)</code></td>
      </tr>
      <tr>
        <th scope="row">Goldenrod</th>
        <td><code>#F6BC57</code></td>
        <td><code>hsla(38, 90%, 65%, 1)</code></td>
        <td><code>rgba(246, 188, 87, 1)</code></td>
      </tr>
    </tbody>
  </table>
  
 
  <script>

    HTMLTableSectionElement.prototype.sort = function (cb) {
      Array.from(this.rows)
        .sort(cb)
        .forEach((e) => this.appendChild(this.removeChild(e)));
    };

    document
      .querySelector("table")
      .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));


      const allTables = document.querySelectorAll(".clickSort");
      for (const table of allTables) {
        const tBody = table.tBodies[0];
        const rows = Array.from(tBody.rows);
        const headerCells = table.tHead.rows[0].cells;
        for (const th of headerCells) {
          const cellIndex = th.cellIndex;
          th.addEventListener("click", () => {
            console.log('click')
            rows.sort((tr1, tr2) => {
              const tr1Text = tr1.cells[cellIndex].textContent;
              const tr2Text = tr2.cells[cellIndex].textContent;
              return tr1Text.localeCompare(tr2Text);
            });
            tBody.append(...rows);
          });
        }
      } 
      


  </script>
</body>
</html>

在这里插入图片描述

<template>：内容模板元素

开始标签和结束标签都不能省略。

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }


    </style>

</head>
<body>

   
  <table id="producttable">
    <thead>
      <tr>
        <td>UPC_Code</td>
        <td>Product_Name</td>
      </tr>
    </thead>
    <tbody>
      <!-- 现有数据可以可选地包括在这里 -->
    </tbody>
  </table>
  
  <!-- 模板，它描述了表示单个表行的 HTML 片段的结构。 -->
  <template id="productrow">
    <tr>
      <td class="record"></td>
      <td></td>
    </tr>
  </template>
  

  <!-- 结果是原始的 HTML 表格，通过 JavaScript 添加了两行新内容： -->
  <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>

</body>
</html>

在这里插入图片描述

<track>：指定时序文本字幕（或者基于时间的数据），例如自动处理字幕

因为他是一个空元素，所以开始标签必须存在，结束标记可以省略。

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

track 给媒体元素添加的数据的类型在 kind 属性中设置，属性值可以是 subtitles, captions, descriptions, chapters 或 metadata。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。

一个media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 label属性。

属性

default 该属性定义了该 track 应该启用，除非用户首选项指定了更合适一个 track。每个媒体元素里面只有一个 track 元素可以有这个属性。

kind 定义了 text track 应该如何使用。如果省略了该属性，默认的 kind 值就是 subtitles。下面是允许的关键字：
- subtitles 字幕给观影者看不懂的内容提供了翻译。比如英文电影里非英文的对话框或者文字。
字幕可能包含额外的内容，通常有附加的背景信息。比如在电影星球大战开头的文字，或者某个场景的日期，时间，还有地点。
- captions 隐藏式字幕提供了音频的转录甚至是翻译。
可能包含重要的非言语的信息，比如音乐提示或者音效。可以指定提示音的源文件 (e.g. music, text, character).
适用于耳聋的用户或者当调成静音的时候。
- descriptions 视频内容的文本描述。
适用于失明用户或者当视频不可见的场景。
- chapters 章节标题用于用户浏览媒体资源的时候。
- metadata 脚本使用的 track。对用户不可见。

label 当列出可用的 text tracks 时，给浏览器使用的 text track 的标题，这种标题是用户可读的。

src track 的地址。必须是合法的 URL。该属性必须定义。

srclang track 文本数据的语言。它必须是合法的 BCP 47 语言标签。如果 kind 属性被设为 subtitles, 那么 srclang 必须定义。

一个media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 label属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }


    </style>

</head>
<body>

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

  <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">
    <!-- Fallback -->
    ...
 </video>
   
 

</body>
</html>

在这里插入图片描述

<tt>：已弃用

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

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

CSS 规范可以为 tt 选择器定义，来覆盖浏览器的默认字体。用于设置的偏好可能优先于指定的 CSS。

虽然这个元素没有在 HTML 4.01 规范中废弃，为了支持样式表，不建议使用它。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }


    </style>

</head>
<body>

  <p>
    Enter the following at the telnet command prompt: <code>set localecho</code
    ><br />
  
    The telnet client should display: <tt>Local Echo is on</tt>
  </p>
  

</body>
</html>

在这里插入图片描述

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

开始标签和结束标签都不能省略。

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

此元素以前在旧版本的 HTML 中称为“下划线”元素，但有时仍会以这种方式被滥用。要为文本加下划线，你应该应用包含 CSS text-decoration 属性设置为 underline 的样式。

就像所有纯样式元素那样，原本的下划线元素（<u>）在 HTML 4 中被废弃。但是 <u> 在 HTML 5 中被恢复，并被赋予了一个新的语义：将文本标记为应用了某种形式的非文本注释。

在可能和超链接混淆的地方，避免使用默认样式的元素，它们都默认用下划线装饰。

<u> 元素的有效用例包括标注拼写错误、向中文文本中的专有名称添加专名号，以及其他形式的注释。

你不应该使用 <u> 为文字添加视觉上的下划线，或者表示书籍的标题。

在大多数情况下，你应该使用 <u> 以外的元素，例如：

用 <em> 来强调重点
用 <b> 来吸引对文字的注意
用 <mark> 来标记关键词或短语
用 <strong> 来表明文本具有重要意义
用 <cite> 来标记书籍或其他出版物的标题
用 <i> 来表示西方文本中的技术术语、音译、思想或船名
要提供文本注释（与使用 <u> 创建的非文本注释相对），请使用 <ruby> 元素。

要在没有任何语义含义的情况下应用下划线外观，请使用 text-decoration 属性的 underline 属性值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }


        /* 当 <u> 元素使用类 spelling 进行样式化时，它的文本下面应该有一个红色的波浪下划线。这是拼写错误的常见样式。也可以使用另一种常见样式 red dashed underline。 */
        u.spelling {
          text-decoration: red wavy underline;
        }

        .underline {
          text-decoration: underline;
        }

        /* <cite> 元素的默认样式会以斜体显示文本，可以使用 CSS 覆盖它： */
        cite {
          font-style: normal;
          text-decoration: underline;
        }


    </style>

</head>
<body>

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


  <!-- 在 HTML 中，我们用 <u> 元素及 spelling 类来表示“wrnogly”一词的拼写错误。 -->
  <p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>


  <span class="underline">今日特供</span>
  <br />
  胡萝卜鸡丁面

  <!-- 书籍标题应使用 <cite> 元素而不是 <u> 甚至 <i> 来呈现。 -->
  <p>The class read <cite>Moby Dick</cite> in the first term.</p>

</body>
</html>

在这里插入图片描述

<video>: 视频嵌入元素

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

和 <img> 元素的使用类似，在 src 属性里加入一个我们需要展示的视频地址，同时也可以用其他属性来指定视频的宽度和高度、是否自动或者循环播放、是否展示浏览器默认的视频控件等。

在不支持 video 元素的浏览器中，<video></video> 标签中间的内容会显示，作为降级处理。

浏览器并不是都支持相同的视频格式，所以可以在 <source> 元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。

如果你没有指定 controls 属性，那么视频不会展示浏览器自带的控件，你也可以用 JavaScript 和 HTMLMediaElement API 来创建你自己的控件。

你可以用 CSS 属性 object-position 来调整视频在元素内部的位置，它可以控制视频尺寸适应于元素外框的方式

如果想在视频里展示字幕或者标题，你可以在 <track> 元素和 WebVTT 格式的基础上使用 JavaScript 来实现。

如果视频的 MIME 类型设置不正确，视频可能不会显示，或者显示包含一个 X 的灰色盒子

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

AddType video/webm .webm

属性

autoplay 布尔属性；声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。
自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。
如果使用 autoplay=“false” 来关闭视频的自动播放功能，会不起作用；只要 <video> 标签中有 autoplay 属性，视频就会自动播放。要移除自动播放，需要完全删除该属性。
在某些浏览器（例如 Chrome 70.0）中，如果没有设置 muted 属性，autoplay 将不会生效。

controls 加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。

controlslist 实验性非标准
当浏览器显示视频底部的播放控制面板（例如，指定了 controls 属性）时，controlslist 属性会帮助浏览器选择在控制面板上显示哪些控件。
允许的值有 nodownload、nofullscreen 和 noremoteplayback。
如果要禁用画中画模式（和控件），请使用 disablePictureInPicture 属性。

crossorigin 该枚举属性指明是否使用 CORS（跨域资源共享）来获取相关视频。允许 CORS 的资源可在 <canvas> 元素中被重用，而不会被污染。允许的值如下：
- anonymous 在发送跨域请求时不携带凭证（credential）信息。也就是说，浏览器在发送 Origin: HTTP 请求首部时将不会携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任（也就是说没有设置 Access-Control-Allow-Origin: HTTP 响应首部），图像会被污染，并且它的使用会受到限制。
- use-credentials 在发送跨域请求时携带凭证（credential）信息。也就是说，浏览器在发送 Origin: HTTP 请求首部时将会携带 cookie、安全令牌、并且执行 HTTP 基本身份验证。如果服务器没有给予源站点信任（通过设置 Access-Control-Allow-Credentials: HTTP 响应首部），图像会被污染，并且它的使用会受到限制。不加这个属性时，获取资源不会使用 CORS 请求（即不会发送 Origin: HTTP 请求首部），保证其在 <canvas> 元素中使用时不会被污染。如果指定非法值，会被当作指定了枚举关键字 anonymous 一样使用。

disablepictureinpicture 实验性
防止浏览器显示画中画上下文菜单或在某些情况下自动请求画中画模式。该属性可以禁用 video 元素的画中画特性，右键菜单中的“画中画”选项会被禁用

disableRemotePlayback 实验性
布尔属性，用于在使用有线（HDMI、DVI 等）和无线技术（Miracast、Chromecast、DLNA、AirPlay 等）连接设备时，禁用远程播放功能。在 Safari 中，你可以使用 x-webkit-airplay=“deny” 作为兜底方案。

height 视频显示区域的高度，单位是 CSS 像素（仅限绝对值；不支持百分比）。

loop 布尔属性；指定后，会在视频播放结束的时候，自动返回视频开始的地方，继续播放。

muted 布尔属性，指明在视频中音频的默认设置。设置后，音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放。

playsinline 布尔属性，指明视频将内联（inline）播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。

poster 海报帧图片 URL，用于在视频处于下载中的状态时显示。如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报（poster）帧来显示。

preload 该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：
- none: 表示不应该预加载视频。
- metadata: 表示仅预先获取视频的元数据（例如长度）。
- auto: 表示可以下载整个视频文件，即使用户不希望使用它。
- 空字符串: 和值为 auto 一致。每个浏览器的默认值都不相同，即使规范建议设置为 metadata。
autoplay 属性的优先级比 preload 高。如果制定了 autopaly属性，浏览器显然需要开始下载视频以便回放。规范没有强制浏览器去遵循该属性的值，这仅仅只是个提示。

src 要嵌到页面的视频的 URL。可选；你也可以使用 video 块内的 <source> 元素来指定需要嵌到页面的视频。

width 视频显示区域的宽度，单位是 CSS 像素（仅限绝对值；不支持百分比）。

事件

事件名	触发时机
~~audioprocess~~ 已弃用	ScriptProcessorNode的输入缓冲区已准备好进行处理。
canplay	浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容。
canplaythrough	浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束。
complete	OfflineAudioContext 渲染完成。
durationchange	duration 属性的值改变时触发。
emptied	媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它。
ended	视频停止播放，因为 media 已经到达结束点。
loadeddata	media 中的首帧已经完成加载。
loadedmetadata	已加载元数据。
pause	播放已暂停。
play	播放已开始。
playing	由于缺乏数据而暂停或延迟后，播放准备开始。
progress	在浏览器加载资源时周期性触发。
ratechange	播放速率发生变化。
seeked	跳帧（seek）操作完成。
seeking	跳帧（seek）操作开始。
stalled	用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现。
suspend	媒体数据加载已暂停。
timeupdate	currentTime 属性指定的时间发生变化。
volumechange	音量发生变化。
waiting	由于暂时缺少数据，播放已停止。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

  <h3>video元素应用</h3>
  <video width="320" height="240" src="images/sample.mp4" controls="controls">
    <p>  
    Your browser does not support the video tag.
    您的浏览器尚未支持HTML5的video元素标签
    </p>
  </video>

  <video controls width="250">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />
  
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />
  
    Download the
    <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm">WEBM</a>
    or
    <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">MP4</a>
    video.
  </video>

  <!-- 图片 "balloon-sq6.jpg" 会一直展示在视频区域，直到开始播放。 -->
  <video width="320" height="240" src="images/sample.mp4" autoplay muted poster="images/balloon-sq6.jpg">
    抱歉，你的浏览器不支持内嵌视频，不过不用担心，你可以
    <a href="images/sample.mp4">下载</a>
    并用你喜欢的播放器观看！
  </video>

  <!-- 允许用户选择不同的字幕。 -->
  <video width="320" height="240"  src="foo.mp4">
    <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English" />
    <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska" />
  </video>

</body>
</html>

在这里插入图片描述

<wbr>: 一个文本中的位置，其中浏览器可以选择来换行

由于它是一个 void 元素，所以开始标签必须出现，而结束标签必须不出现。

在 UTF-8 编码的页面中， <wbr> 表现为 U+200B ZERO-WIDTH SPACE （零宽空格）代码点。特别是，它表现为 Unicode bidi BN 代码点，也就是说，它对 bidi-ordering 没有影响：<div dir=rtl>123,<wbr>456</div> 展示 123,456 而不是 456,123，当不拆成的两行时候。

出于相同原因， <wbr>元素不会在换行的地方引入连字符。为了使连字符仅仅在行尾出现，使用连字符软实体 (& shy;) 来代替。

这个元素首先在 Internet Explorer 5.5 中实现，并且在 HTML5 中官方定义。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Tag</title>

    <style>
        /* 添加背景颜色 */
        body {

            background-color: aquamarine;
        }

    </style>

</head>
<body>

  <p style="width: 100px;">
    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>
  

</body>
</html>