HTML语义化标签和属性

牧林阳

于 2023-11-17 10:17:56 发布

阅读量85

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_62169295/article/details/134456915

版权

上标和下标

当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标，以确保它们的正确含义。<sup>(上标) 和 <sub>(下标) 元素可以解决这样的问题。

展示计算机代码

<code>：用于标记计算机通用代码。
<pre>：用于保留空白字符（通常用于代码块）——如果文本中使用了缩进或多余的空白，浏览器将忽略它，你将不会在呈现的页面上看到它。但是，如果你将文本包含在 <pre></pre>标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
<var>：用于标记具体变量名。
<kbd>：用于标记输入电脑的键盘（或其他类型）输入。
<samp>：用于标记计算机程序的输出。

标记时间和日期

HTML 还支持将时间和日期标记为可供机器识别的格式的 <time>元素.

文档架构

<header>：页眉。
<nav>：导航栏。
<main>：主内容。主内容中还可以有各种子内容区段，可用<article>,<section>和 <div>等元素表示。
<aside>：侧边栏，经常嵌套在 <main>中。
<footer>：页脚。

HTML 布局元素细节

<main>存放每个页面独有的内容。每个页面上只能用一次<main>，且直接位于 <body> 中。最好不要把它嵌套进其他元素。
<article> 包围的内容即一篇文章，与页面其他部分无关（比如一篇博文）。

<section> 与<article>类似，但 <section>更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以标题作为开头；也可以把一篇 <article>分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section>分成若干部分并分别置于不同的 <article>中，取决于上下文。
<aside>包含一些间接信息（术语条目、作者简介、相关链接，等等）。
<header> 是简介形式的内容。如果它是 <body> 的子元素，那么就是网站的全局页眉。如果它是 <article> 或<section>的子元素，那么它是这些部分特有的页眉（此 <header>非彼标题）。
<nav> 包含页面主导航功能。其中不应包含二级链接等内容。
<footer>包含了页面的页脚部分。

figure标签

<figure>标签通常用于包含图片、图表或其他媒体，并且可以添加标题或说明文字。

video标签

width 和 height
你可以用属性控制视频的尺寸，也可以用 CSS 来控制视频尺寸。无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。
autoplay
这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。
loop
这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。
muted
这个属性会导致媒体播放时，默认关闭声音。
poster
这个属性指向了一个图像的 URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。
preload
这个属性被用来缓冲较大的文件，有 3 个值可选：

“none” ：不缓冲
“auto” ：页面加载后缓存媒体文件
“metadata” ：仅缓冲文件的元数据

显示音轨文本

WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做 cues ，你可以根据不同的需求来显示不同的样式，最常见的如下：
subtitles
通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容。
captions
同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容。
timed descriptions
将文字转换为音频，用于服务那些有视觉障碍的人。

`<iframe>`基本要素

allowfullscreen
如果设置，<iframe>则可以通过全屏 API 设置为全屏模式（稍微超出本文的范围）。
frameborder
如果设置为 1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0 删除边框。不推荐这样设置，因为在 CSS 中可以更好地实现相同的效果。border: none;
src
该属性与 <video>/ 元素表示文档中的图像。<img>一样包含指向要嵌入文档的 URL 路径。
width 和 height
这些属性指定你想要的 iframe 的宽度和高度。
备选内容
与 <video>等其他类似元素相同，你可以在 <iframe></iframe> 标签之间包含备选内容，如果浏览器不支持 <iframe>，将会显示备选内容，这种情况下，我们已经添加了一个到该页面的链接。现在你几乎不可能遇到任何不支持 <iframe> 的浏览器。
sandbox
该属性需要在已经支持其他<iframe>功能（例如 IE 10 及更高版本）但稍微更现代的浏览器上才能工作，该属性可以提高安全性设置；我们将在下一节中更加详细地谈到。

使用 HTTPS

HTTPS 是 HTTP 的加密版本。你应该尽可能使用 HTTPS 为你的网站提供服务：

HTTPS 减少了远程内容在传输过程中被篡改的机会，
HTTPS 防止嵌入式内容访问你的父文档中的内容，反之亦然。

矢量图形

位图使用像素网格来定义 — 一个位图文件精确得包含了每个像素的位置和它的色彩信息。流行的位图格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)
矢量图使用算法来定义 — 一个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。 SVG 格式可以让我们创造用于 Web 的精彩的矢量图形。

svg支持

对于不支持 SVG（IE 8 及更低版本，Android 2.3 及更低版本）的浏览器，你可以从src属性引用 PNG 或 JPG，并使用srcset属性只有最近的浏览器才能识别）来引用 SVG。在这种情况下，仅支持浏览器将加载 SVG - 较旧的浏览器将加载 PNG：
浏览器不能像缓存普通图片一样缓存内联 SVG。
triangle with equal sides

分辨率切换：不同的尺寸

我们可以使用两个新的属性——srcset 和 sizes——来提供更多额外的资源图像和提示，帮助浏览器选择合适的一个资源。

srcset 定义了浏览器可选择的图片设置以及每个图片的大小，每张图片信息的设置和前一个用逗号隔开，每个设置要写：
一个文件名（elva-fairy-480w.jpg）
一个空格
图片的固有宽度（以像素为单位）（480w）。注意，这里使用宽度描述符 w，而非你可能期望的 px。图片的固有宽度 (en-US)是它的真实大小，可以通过检查你电脑上的图片文件找到（例如，在 Mac 上，你可以在 Finder 上选择这个图片，然后按 Cmd + I 来显示信息）。
sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择——这就是我们之前提到的提示。上面的示例中，在每个逗号之前，我们写：
一个媒体条件（(max-width:600px)）——你会在 CSS 主题中学到更多相关的知识，这里我们说一个媒体条件描述了一种屏幕可能处于的状态。上面示例中，我们说“当视口的宽度小于等于 600px 时”。
一个空格
当媒体条件为真时，图像将填充的槽的宽度（480px）

分辨率切换：相同的尺寸，不同的分辨率

如果你要支持多分辨率显示，但希望每个人在屏幕上看到的图片的实际尺寸是相同的，你可以使用 srcset 结合 x 语法——一种更简单的语法——而不用 sizes，来让浏览器选择合适分辨率的图片。

美术设计

回顾一下，美术设计问题涉及到更改显示的图像以适应不同的显示尺寸。例如，如果在桌面浏览器上的一个网站上显示一张大的、横向的照片，照片中央有个人，然后当在移动端浏览器上浏览这个网站时，照片会缩小，这时照片上的人会变得非常小，看起来会很糟糕。这种情况可能在移动端显示一个更小的、聚焦到这个人的肖像图会更好。<picture>元素允许我们这样实现。
1.<source> 元素包含一个 media 属性，这一属性包含一个媒体条件——就像第一个 srcset 例子，这些条件来决定哪张图片会显示——第一个条件返回真，那么就会显示这张图片。在上述示例中，如果视窗的宽度为 799px 或更少，第一个 <source>元素的图片就会显示。如果视窗的宽度是 800px 或更大，就显示第二张图片。
2. srcset 属性包含要显示图片的路径。请注意，正如我们在 <img> 上面看到的那样，<source>可以使用引用多个图像的 srcset 属性，还有 sizes 属性。所以你可以通过一个 <picture> 元素提供多个图片，不过也可以给每个图片提供多分辨率的图片。实际上，你可能不想经常做这样的事情。
在任何情况下，你都必须在 </picture>之前正确提供一个 <img>元素以及它的 src 和 alt 属性，否则不会有图片显示。当媒体条件都不返回真的时候（你可以在这个例子中删除第二个 <source>元素），它会显示默认图片；如果浏览器不支持 <picture>元素时，它可以作为后备方案
3. 不要使用 media 属性，除非你也需要用到美术设计。
4. 在 <source>元素中，你只可以引用在 type 中声明的文件类型。
5. 像之前一样，如果必要，你可以在 srcset 和 sizes 中使用逗号分割的列表。

表格的高级特性和无障碍

你可以通过 <caption>元素为你的表格增加一个标题，再把 <caption>元素放入 <table>元素中。
<thead>元素必须包住表格中作为表头的部分。一般是第一行，往往都是每列的标题，但是不是每种情况都是这样的。如果你使用了 <col>/<colgroup>元素，那么 <thead>元素就需要放在它们的下面。
<tfoot>元素需要包住表格中作为表脚的部分。一般是最后一行，往往是对前面所有行的总结，比如，你可以按照预想的方式将<tfoot>放在表格的底部，或者就放在 <thead>的下面。(浏览器仍将它呈现在表格的底部)
4.<tbody>元素需要包住表格内容中不在表头或表尾的其他部分。它可以出现在表头的下方，或者有时出现在表脚下方，这取决于你如何安排它。

标签汇总

<abbr>
HTML 缩写元素（<abbr>）用于代表缩写，并且可以通过可选的 title 属性提供完整的描述。若使用 title 属性，则它必须且仅可包含完整的描述内容。
<address>
HTML<address>元素表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。
<area>
HTML <area>元素在图片上定义一个热点区域，可以关联一个超链接。<area>元素仅在<map>元素内部使用。
内容分类 (en-US) 流内容 (en-US), 短语内容 (en-US).
允许的内容它是一个空的元素不允许嵌套任何子元素或者文本。
标签省略只能允许有开始标签不允许有结束标签。
允许的父元素 <area>元素必须拥有一个<map>元素祖先元素，但不一定是直接的父元素。
DOM 接口 HTMLAreaElement
4.<article>
HTML<article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
<aside>
HTML <aside>元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。
<audio>
<audio>HTML 元素用于在文档中嵌入音频内容。<audio>元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者<source> (en-US) 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。
<b>
HTML 提醒注意（Bring Attention To）元素（<b>）用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 <b>元素用于显示粗体文字；替代方案是使用 CSS font-weight 属性来创建粗体文字。
<base>
HTML <base>元素指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base>元素。
<bdi>
HTML 双向隔离元素（<bdi>）告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。
<bdo>: 双向文本替代元素
HTML 双向文本替代元素 (<bdo>) 改写了文本的方向性，使文本以不同的方向渲染呈现出来 (override 可以翻译很多意思，编程语言中多用覆盖，重载；这里采用了 Google 的整体翻译，取替代替换改写之意)
<blockquote>：块级引用元素
HTML <blockquote>元素（或者 HTML 块级引用元素），代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进（注中说明了如何更改）。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 <cite>元素。
<canvas>
<canvas>元素可被用来通过 JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。
<caption>
HTML <caption>元素 (or HTML 表格标题元素) 展示一个表格的标题，它常常作为<table> 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被 CSS 样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。
<cite>
<code>
HTML <code>元素呈现一段计算机代码。默认情况下，它以浏览器的默认等宽字体显示。
<col>
HTML <col>元素定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于<colgroup>元素内。
<colgroup>
HTML 中的表格列组（Column Group <colgroup>）标签用来定义表中的一组列表。
<data>
HTML<data> 元素将一个指定内容和机器可读的翻译联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用<time>。
<datalist>：HTML 数据列表元素
HTML <datalist>元素包含了一组 <option>元素，这些元素表示其他表单控件可选值。
<details>：详细信息展现元素
HTML <details> 元素可创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息。<summary>元素可为该部件提供概要或者标签。
展现组件通常在屏幕上使用一个小三角形，旋转（或扭转）以表示打开/关闭的状态，三角形旁边有一个标签。<summary>元素的内容被用来作为展示小部件的标签。
<dfn>
HTML 定义元素 (<dfn>) 表示术语的一个定义。
<dialog>：对话框元素
HTML <dialog>元素表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器或者窗口。
<embed>：外部内容嵌入元素
HTML <embed>元素将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供
<fieldset>
HTML <fieldset>元素用于对表单中的控制元素进行分组（也包括 label 元素）
<figcaption>
HTML <figcaption>元素是与其相关联的图片的说明/标题，用？于描述其父节点 <figure>元素里的其他数据。这意味着 <figcaption>在<figure>块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。
<figure>：可附标题内容元素
HTML <figure>元素代表一段独立的内容，可能包含 <figcaption>元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。
<footer>
HTML <footer>元素表示最近一个章节内容或者根节点（sectioning root）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
<head>
HTML head 元素规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
<header>
HTML <header>元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。
<hgroup>
<hgroup>HTML 元素代表文档标题和与标题相关联的内容，它将一个 <h1>–<h6>元素与一个或多个 <p>元素组合在一起。
<i>：术语文本元素
HTML 元素 <i>用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。
<ins>
HTML <ins>元素定义已经被插入文档中的文本。
<kbd>
HTML 键盘输入元素 (<kbd>) 用于表示用户输入，它将产生一个行内元素，以浏览器的默认 monospace 字体显示。
<label>
HTML <label>元素（标签）表示用户界面中某个元素的说明。
<legend>
HTML <legend>元素用于表示其父元素<fieldset>的内容标题。
<main>
HTML <main>元素呈现了文档的 <body>或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
37.<map>
HTML <map>属性与 <area>属性一起使用来定义一个图像映射 (一个可点击的链接区域).
<mark>
HTML 标记文本元素 (< Mark >) 表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。
这个 HTML mark 标签代表突出显示的文字，例如可以为了标记特定上下文中的文本而使用这个标签**.** 举个例子，它可以用来显示搜索引擎搜索后关键词
39.<menu>
HTML <menu>元素呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单，也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。
<meta>：元数据元素
HTML <meta>元素表示那些不能由其他 HTML 元相关（meta-related）元素表示的元数据信息。如：<base>、<link>、<script>、<style> 或 <title>。

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

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

<nav>
HTML<nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
<noscript>
如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 HTML <noscript> 元素中定义脚本未被执行时的替代内容。
<object>
HTML <object> 元素（或者称作 HTML 嵌入对象元素）表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。
<optgroup>
**HTML 元素 <optgroup>**为<select>元素中的选项创建分组。
<output>
HTML <output>标签表示计算或用户操作的结果。
<picture>：picture 元素
HTML<picture>元素通过包含零或多个 <source>(en-US) 元素和一个 <img>元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source>元素，如果没有匹配的，就选择 <img>元素的 src 属性中的 URL。然后，所选图像呈现在<img>元素占据的空间中。
<pre>
HTML <pre>元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre>开始标签后的换行符也会被省略)
<progress>：进度指示元素
HTML中的 <progress>元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。
<q>
HTML 引用标签 (<q>) 表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用请使用 <blockquote>替代。
<rp>
HTML <rp> 元素用于为那些不能使用 <ruby>元素展示 ruby 注解的浏览器，提供随后的圆括号。
<rt>
HTML Ruby 文本 (<rt>) 元素包含字符的发音，字符在 ruby 注解中出现，它用于描述东亚字符的发音。这个元素始终在 <ruby>元素中使用。
<ruby>
HTML <ruby>元素被用来展示东亚文字注音或字符注释。
<s>
HTML<s>元素使用删除线来渲染文本。使用 <s> 元素来表示不再相关，或者不再准确的事情。但是当表示文档编辑时，不提倡使用 <s>；为此，提倡使用 <del>和 <ins> 元素。
<samp>
<samp>元素用于标识计算机程序输出，通常使用浏览器缺省的 monotype 字体（例如 Lucida Console）。
<script>：脚本元素
HTML <script>元素用于嵌入可执行代码或数据，这通常用作嵌入或者引用 JavaScript 代码。<script>元素也能在其他语言中使用，比如 WebGL 的 GLSL 着色器语言和 JSON。
<section>
HTML <section>元素表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。
<slot>
HTML <slot>元素，作为 Web Component 技术套件的一部分，是 Web 组件内的一个占位符。该占位符可以在后期使用自己的标记语言填充，这样你就可以创建单独的 DOM 树，并将它与其他的组件组合在一起。
<small>
HTML 中的<small>元素將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在 HTML5 中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。
<sub>：下标元素
HTML<sub>元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。
<summary>：摘要展现元素
HTML <summary>元素指定了 <details>元素展开盒子的内容的摘要，标题或图例。点击 <summary>元素可以切换父元素 <details>开启和关闭的状态。
<sup>
HTML <sup>元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小。
<template>：内容模板元素
HTML 内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化。
将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理 <template>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。
64.<time>：（日期）时间元素
HTML time 标签 (<time>) 用来表示 24 小时制时间或者公历日期，若表示日期则也可包含时间和时区。
此元素意在以机器可读的格式表示日期和时间。有安排日程表功能的应用可以利用这一点。
<track>
HTML <track>元素被当作媒体元素—<audio>和 <video>的子元素来使用。它允许指定时序文本字幕（或者基于时间的数据），例如自动处理字幕。字幕格式有 WebVTT 格式 (en-US)（.vtt格式文件）— Web 视频文本字幕格式，以及指时序文本标记语言（TTML）格式。
track 给媒体元素添加的数据的类型在 kind 属性中设置，属性值可以是 subtitles, captions, descriptions, chapters 或 metadata。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。
一个media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 label属性。
<var>：表示变量的元素
HTML <var>元素表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器，但通常使用当前字体的斜体形式显示。
<wbr>
HTML <wbr>元素 — 一个文本中的位置，其中浏览器可以选择来换行，虽然它的换行规则可能不会在这里换行。

微数据

微数据是 WHATWG HTML 标准的一部分，用于在网页上的现有内容中嵌套元数据。搜索引擎、网络抓取工具可以从网页中提取和处理微数据，并使用它为用户提供更丰富的浏览体验。搜索引擎从直接访问此结构化数据中受益匪浅，因为它允许搜索引擎了解网页上的信息并向用户提供更相关的结果。微数据使用支持词汇表来描述项目和 name-value 对，以便为其属性赋值。与使用 RDFa 和微格式的类似方法相比，微数据试图提供一种使用机器可读标签注释 HTML 元素的简单方法。
从更高的角度来看，微数据由一组 name-value 对组成。这些组称为元素，每个 name-value 对都是一个属性。项目和属性由常规元素表示。
创建元素使用了 itemscope 属性。
向元素添加属性，itemprop 属性将用于其中一个元素的后代。