HTML中的主根元素、文档元数据、分区根元素、内容分区、文本内容和内联文本语义

本文主要介绍了HTML中主根元素<html>、文档元数据<base>、<head>、<link>、<meta>、<style>、<title>、分区根元素<body>、内容分区<address>、<article>、<aside>、<footer>、<h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h6> (en-US)、<main>、<nav>、<section>、文本内容和内联文本语义

文章目录

前言
一、主根元素 `<html>`
- 定义和用法：
- 浏览器支持：
二、文档元数据
- 1.`<base>`
- - 定义和用法：
  - 浏览器支持：
- 2.`<head>`
- - 定义和用法：
  - 浏览器支持：
- 3.`<link>`
- - 定义和用法：
  - 浏览器支持：
- 3.`<meta>`
- - 定义和用法：
  - 浏览器支持：
- 4.`<style>`
- - 定义和用法：
  - 浏览器支持：
- 5.`<title>`
- - 定义和用法：
  - 浏览器支持：
三、分区根元素
- 1.`<body>`
- - 定义和用法：
  - 浏览器支持：
四、内容分区
- 1.`<address>`
- - 定义和用法：
  - 浏览器支持：
- 2.`<article>`
- - 定义和用法：
  - 浏览器支持：
- 3.`<aside>`
- - 定义和用法：
  - 浏览器支持：
- 4.`<footer>`
- - 定义和用法：
  - 浏览器支持：
- 5.`<h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h6> (en-US)`
- - 定义和用法：
  - 浏览器支持：
- 6. `<main>`
- - 定义和用法：
  - 浏览器支持：
- 7.`<nav>`
- - 定义和用法：
  - 浏览器支持：
- 8.`<section>`
- - 定义和用法：
  - 浏览器支持：
五、文本内容
六、内联文本语义

前言

本文主要介绍了HTML中主根元素<html>、文档元数据<base>、<head>、<link>、<meta>、<style>、<title>、分区根元素<body>、内容分区<address>、<article>、<aside>、<footer>、<h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h6> (en-US)、<main>、<nav>、<section>、文本内容和内联文本语义的一些定义用法和适用浏览器

提示：以下是本篇文章正文内容，下面案例可供参考

一、主根元素 `<html>`

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

所有 html 文件都拥有 <html> 元素。

定义和用法：

此元素可告知浏览器其自身是一个 HTML 文档。

<html>与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由标签定义，而主体由标签定义。

浏览器支持：

在这里插入图片描述

二、文档元数据

1.`<base>`

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

定义和用法：

标签为页面上的所有链接规定默认地址或默认目标。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

浏览器支持：

在这里插入图片描述

2.`<head>`

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

定义和用法：

标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和·信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

定义文档的标题，它是 head 部分中唯一必需的元素。

浏览器支持：

在这里插入图片描述

3.`<link>`

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

定义和用法：

<link> 标签定义文档与外部资源的关系。

<link> 标签最常见的用途是链接样式表。

<link> 定义文档的标题，它是 head 部分中唯一必需的元素。

浏览器支持：

在这里插入图片描述

3.`<meta>`

HTML <meta> 元素表示那些不能由其它 HTML 元相关（meta-related）元素（(base、link, script、style 或 title）之一表示的任何Metadata信息。

定义和用法：

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

浏览器支持：

在这里插入图片描述

4.`<style>`

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

定义和用法：

<style> 标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css”。style 元素位于 head 部分中

浏览器支持：

在这里插入图片描述

5.`<title>`

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

定义和用法：

**<title> 元素可定义文档的标题。**浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

浏览器支持：

在这里插入图片描述

三、分区根元素

1.`<body>`

HTML body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。

定义和用法：

body 元素定义文档的主体。

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

浏览器支持：

在这里插入图片描述

<body>
    <head style="color: rgb(197, 56, 56);">
        摘抄
    </head>

    <main>
        <article>
            <h1>《白鹿原》</h1>
            <h3>陈忠实</h3>
            朱先生下了涝池上了官道，便瞧见了她的模样，转身对媒人说：“就是这个，八字不合也是这个。”
        </article>
    </main>

    <footer>
        <address>
            联系我们<a href="mailto:lud5251@163.com">邮箱</a>
        </address>
    
    </footer>
   
</body>

在这里插入图片描述

四、内容分区

1.`<address>`

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

定义和用法：

<address> 标签定义文档或文章的作者/拥有者的联系信息。

如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。

如果元素位于 <article> 元素内，则它表示文章的联系信息。

<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。

浏览器支持：

在这里插入图片描述

2.`<article>`

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

定义和用法：

<article> 标签规定独立的自包含内容。

一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。

<article> 元素的潜在来源：

论坛帖子
报纸文章
博客条目
用户评论

浏览器支持：

在这里插入图片描述

3.`<aside>`

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

定义和用法：

<aside> 标签定义其所处内容之外的内容。

aside 的内容应该与附近的内容相关。

浏览器支持：

在这里插入图片描述

4.`<footer>`

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

定义和用法：

<footer> 标签定义文档或节的页脚。

<footer> 元素应当含有其包含元素的信息。

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

您可以在一个文档中使用多个 <footer> 元素。

浏览器支持：

在这里插入图片描述

5.`<h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h6> (en-US)`

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

定义和用法：

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

浏览器支持：

在这里插入图片描述

6. `<main>`

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

定义和用法：

<main> 标签规定文档的主要内容。

<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

**注释：**在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

浏览器支持：

在这里插入图片描述

7.`<nav>`

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

定义和用法：

<nav> 标签定义导航链接的部分

浏览器支持：

在这里插入图片描述

8.`<section>`

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

定义和用法：

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

浏览器支持：

在这里插入图片描述

五、文本内容

元素	描述
`<blockquote>`	HTML `<blockquote>` 元素（或者 HTML 块级引用元素），代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 `cite` 元素。
`<dd>`	HTML `<dd>` 元素（HTML 描述元素）用来指明一个描述列表 (`dl`) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个 `dt` 元素。
`<div>`	HTML `<div>` 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。
`<dl>`	HTML `<dl>` 元素（或 HTML 描述列表元素）是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)。
`<dt>`	HTML `<dt>` 元素（或 HTML 术语定义元素）用于在一个定义列表中声明一个术语。该元素仅能作为 `dl` 的子元素出现。通常在该元素后面会跟着 `dd` 元素，然而，多个连续出现的 `<dt>` 元素都将由出现在它们后面的第一个 `dd` 元素定义。
`<figcaption>`	HTML `<figcaption>` 元素是与其相关联的图片的说明/标题，用？于描述其父节点 `figure` 元素里的其他数据。这意味着 `<figcaption>` 在`figure` 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。
`<figure>`	HTML `<figure>` 元素代表一段独立的内容，经常与说明（caption）`figcaption` 配合使用，并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。
`<hr>`	HTML `<hr>` 元素表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。
`<li>`	HTML `<li>` 元素（或称 HTML 列表条目元素）用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表 (`ol`)，一个无序列表 (`ul`)，或者一个菜单 (`menu`)。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。
`<menu>`	HTML `<menu>` 元素呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单，也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。
`<ol>`	HTML `<ol>` 元素表示有序列表，通常渲染为一个带编号的列表
`<p>`	HTML `<p>`元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，`<p>` 是块级元素。
`<pre>`	HTML `<pre>` 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 `<pre>` 开始标签后的换行符也会被省略)
`<ul>`	HTML `<ul>` 元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。

六、内联文本语义

元素	描述
`<a>`	HTML `<a>` 元素（或称锚元素）可以通过它的 `href` 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。`<a>` 中的内容应该应该指明链接的意图。如果存在 `href` 属性，当 `<a>` 元素聚焦时按下回车键就会激活它。
`<abbr>`	HTML 缩写元素（`<abbr>`）用于代表缩写，并且可以通过可选的 `title` 属性提供完整的描述。若使用 `title` 属性，则它必须且仅可包含完整的描述内容。
`<b>`	*HTML 提醒注意（Bring Attention To）元素（`<b>`）用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是*粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 `<b>` 元素用于显示粗体文字；替代方案是使用 CSS `font-weight` 属性来创建粗体文字。
`<bdi>`	HTML 双向隔离元素 (`<bdi>`) 告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。
`<bdo>`	HTML 双向文本替代元素 (`<bdo>`) 改写了文本的方向性，使文本以不同的方向渲染呈现出来 (override 可以翻译很多意思，编程语言中多用覆盖，重载；这里采用了 Google 的整体翻译，取替代替换改写之意)
`<br>`	HTML `<br/>` 元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。
`<cite>`	HTML 引用（ Citation）标签 (`<cite>`) 表示一个作品的引用，且必须包含作品的标题。这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写。
`<code>`	HTML `<code>` 元素呈现一段计算机代码。默认情况下，它以浏览器的默认等宽字体显示。
`<data>`	HTML `<data>` 元素将一个指定内容和机器可读的翻译联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用 `time`。
`<dfn>`	HTML 定义元素 (`<dfn>`) 表示术语的一个定义。
`<em>`	HTML 着重元素 (`<em>`) 标记出需要用户着重阅读的内容， `<em>` 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。
`<i>`	HTML 元素 `<i>` 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。
`<kbd>`	HTML 键盘输入元素 (`<kbd>`) 用于表示用户输入，它将产生一个行内元素，以浏览器的默认 monospace 字体显示。
`<Mark >`	HTML 标记文本元素 (< Mark >) 表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。
`<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）。
`<small>`	HTML 中的`<small>`元素將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在 HTML5 中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。
`<div>`	HTML `<span>` 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。`<span>` 与 `div` 元素很相似，但 `div` 是一个块元素而 `<span>` 则是行内元素 (en-US).
`<strong>`	Strong 元素 (`<strong>`) 表示文本十分重要，一般用粗体显示。
`<sub>`	HTML `<sub>` 元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。
`<sup>`	HTML `<sup>` 元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小。
`<time>`	HTML time 标签 (`<time>`) 用来表示 24 小时制时间或者公历日期，若表示日期则也可包含时间和时区。
`<u>`	HTML `<u>` 元素（表意不清标注元素）表示一个需要标注为非文本化（non-textual）的内联文本域。默认情况下渲染为一个实线下划线，可以用 CSS 替换。
`<var>`	HTML Variable 元素（`<var>`）表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器，但通常使用当前字体的斜体形式显示。
`<wbr>`	HTML `<wbr>` 元素 — 一个文本中的位置，其中浏览器可以选择来换行，虽然它的换行规则可能不会在这里换行。