青训营笔记--HTML 这是我参与「第四届青训营 」笔记创作活动的第1天 概念 HTML是一种相当简单的、由不同元素组成的标记语言，它可以被应用于文本片段，使文本在文档中具有不同的含义（它是段落吗？它是项目列表吗？它是表格吗？），将文档结构化为逻辑块（文档是否有头部？有三列内容？有一个导航菜单？），并且可以将图片，影像等内容嵌入到页面中。
HTML负责内容的传输
主根
| 元素 | 描述 |
|---|---|
<html> | <html> HTML 元素表示 HTML 文档的根（顶级元素），因此它也被称为根元素。所有其他元素必须是此元素的后代。 |
文档元数据
元数据包含有关页面的信息。这包括有关样式，脚本和数据的信息，以帮助软件（搜索引擎，浏览器等）使用和呈现页面。样式和脚本的元数据可以在页面中定义，也可以链接到具有该信息的另一个文件。
| 元素 | 描述 |
|---|---|
<base> | <base> HTML 元素指定要用于文档中所有相对 URL 的基 URL。一个文档中只能有一个元素。<base> |
<head> | <head> HTML 元素包含有关文档的机器可读信息（元数据），如文档的标题、脚本和样式表。 |
<link> | <链接> HTML 元素指定当前文档与外部资源之间的关系。此元素最常用于链接到CSS，但也用于建立网站图标（“favicon”样式图标以及主屏幕和移动设备上的应用程序的图标）等。 |
<meta> | <meta> HTML 元素表示其他 HTML 元相关元素（如 、 或 .base``link``script``style``title |
<style> | <style> HTML 元素包含文档或文档一部分的样式信息。它包含 CSS，它应用于包含该元素的文档的内容。<style> |
<title> | <标题> HTML 元素定义在浏览器的标题栏或页面选项卡中显示的文档标题。它只包含文本;标记将被忽略。 |
切块根
| 元素 | 描述 |
|---|---|
<body> | <正文> HTML 元素表示 HTML 文档的内容。一个文档中只能有一个元素。<body> |
内容分区
内容分区元素允许您将文档内容组织成逻辑片段。使用分区元素为页面内容创建大致轮廓，包括页眉和页脚导航，并使用标题元素标识内容部分。
| 元素 | 描述 |
|---|---|
<address> | <地址> HTML 元素指示随附的 HTML 为一个或多个人员或组织提供联系信息。 |
<article> | <文章> HTML 元素表示文档、页面、应用程序或站点中的自包含组合，旨在独立分发或可重用（例如，在联合中）。示例包括：论坛帖子、杂志或报纸文章，或博客条目、产品卡片、用户提交的评论、交互式小部件或小工具，或任何其他独立的内容项。 |
<aside> | <附加> HTML 元素表示其内容仅与文档的主要内容间接相关的文档的一部分。旁注通常显示为侧边栏或标注框。 |
<footer> | <页脚> HTML 元素表示其最近的祖先分区内容或分区根元素的页脚。A 通常包含有关该部分的作者、版权数据或指向相关文档的链接的信息。<footer> |
<header> | <标题> HTML 元素表示介绍性内容，通常是一组介绍性或导航辅助工具。它可能包含一些标题元素，但也包含徽标，搜索表单，作者姓名和其他元素。 |
<h1>、 <h2><h3><h4> <><h6> | <h1> 到 <h6> HTML 元素表示六个级别的节标题。 是最高节级别，也是最低级别。<h1>``<h6> |
<main> | <主> HTML 元素表示文档的主要内容。主要内容区域由与文档的中心主题或应用程序的中心功能直接相关或扩展的内容组成。body |
<nav> | <nav> HTML 元素表示页面的一部分，其目的是在当前文档中提供导航链接或指向其他文档的链接。导航节的常见示例包括菜单、目录和索引。 |
<section> | <section> HTML 元素表示文档的通用独立部分，该部分没有更具体的语义元素来表示它。各节应始终有标题，只有极少数例外。 |
文本内容
使用 HTML 文本内容元素来组织放置在开始标记和结束标记之间的块或内容<>和结束标记之间的部分。对于可访问性和SEO非常重要，这些元素标识了该内容的目的或结构。</body>
| 元素 | 描述 |
|---|---|
<blockquote> | <块引用> HTML 元素指示所包含的文本是扩展引用。通常，这是通过缩进直观呈现的（有关如何更改它，请参阅注释）。可以使用 cite 属性给出引文来源的 URL，而可以使用该元素给出来源的文本表示形式。cite |
<dd> | <dd> HTML 元素在说明列表 （） 中提供前一个术语 （） 的说明、定义或值。dt``dl |
<div> | <div> HTML 元素是流内容的通用容器。它对内容或布局没有影响，直到使用CSS以某种方式设置样式（例如，样式直接应用于它，或者将某种布局模型（如Flexbox）应用于其父元素）。 |
<dl> | <dl> HTML 元素表示说明列表。该元素包含术语组（使用元素指定）和说明（由元素提供）的列表。此元素的常见用途是实现词汇表或显示元数据（键值对列表）。dt``dd |
<dt> | <dt> HTML 元素在说明或定义列表中指定一个术语，因此必须在元素内部使用。它通常后面跟着一个元素;但是，一行中的多个元素表示多个术语，这些术语均由紧挨着的下一个元素定义。dl``dd``<dt>``dd |
<figcaption> | <> 大写字母 HTML 元素表示描述其父元素其余内容的标题或图例。figure |
<figure> | <图> HTML 元素表示自包含的内容，可能带有使用该元素指定的可选标题。该图、其标题及其内容作为单个单元进行引用。figcaption |
<hr> | <hr> HTML 元素表示段落级元素之间的主题分隔符：例如，故事中的场景更改或部分内主题的转移。 |
<li> | <li> HTML 元素用于表示列表中的项。它必须包含在父元素中：有序列表 （）、无序列表 （） 或菜单 （）。在菜单和无序列表中，列表项通常使用项目符号点显示。在有序列表中，它们通常显示在左侧的升序计数器，如数字或字母。ol``ul``menu |
<menu> | <menu> HTML 元素在 HTML 规范中被描述为 的语义替代，但浏览器将其视为 （并通过辅助功能树公开）与 .它表示项（由元素表示）的无序列表。ul``ul``li |
<ol> | <ol> HTML 元素表示项的有序列表 — 通常呈现为编号列表。 |
<p> | <p> HTML 元素表示一个段落。段落在视觉媒体中通常表示为文本块，这些文本块由空行和/或第一行缩进与相邻块分隔，但 HTML 段落可以是相关内容（如图像或表单字段）的任何结构分组。 |
<pre> | <pre> HTML 元素表示预先格式化的文本，该文本的显示方式与 HTML 文件中的编写完全相同。文本通常使用非比例或等宽字体呈现。此元素内的空格显示为已写入。 |
<ul> | <ul> HTML 元素表示项的无序列表，通常呈现为项目符号列表。 |
内联文本语义
使用 HTML 内联文本语义可以定义单词、行或任何任意文本段的含义、结构或样式。
| 元素 | 描述 |
|---|---|
<a> | <a> HTML 元素（或锚点元素）及其 href 属性可创建指向网页、文件、电子邮件地址、同一页面中的位置或 URL 可以解决的任何其他内容的超链接。 |
<abbr> | <abbr> HTML 元素表示缩写或首字母缩略词。 |
<b> | <b> HTML 元素用于将读者的注意力吸引到元素的内容上，否则这些内容不会被赋予特殊重要性。这以前称为粗体元素，大多数浏览器仍然以粗体绘制文本。但是，您不应该用于样式文本;相反，您应该使用 CSS 属性来创建粗体文本，或者使用元素来指示文本具有特殊重要性。<b>``font-weight``strong |
<bdi> | <bdi> HTML 元素告诉浏览器的双向算法将它所包含的文本与周围的文本隔离处理。当网站动态插入一些文本并且不知道所插入文本的方向性时，它特别有用。 |
<bdo> | <bdo> HTML 元素将覆盖文本的当前方向性，以便其中的文本以不同的方向呈现。 |
<br> | <br> HTML 元素在文本中生成换行符（回车符）。它对于写诗或地址很有用，其中行的划分很重要。 |
<cite> | <cite> HTML 元素用于描述对引用的创意作品的引用，并且必须包含该作品的标题。根据与引文元数据相关的上下文相关约定，参考文献可以采用缩写形式。 |
<code> | <code> HTML 元素显示其内容的样式，旨在指示文本是计算机代码的简短片段。默认情况下，内容文本使用用户代理默认等宽字体显示。 |
<data> | <data> HTML 元素将给定的内容片段与机器可读的翻译链接在一起。如果内容与时间或日期相关，则必须使用该元素。time |
<dfn> | <dfn> HTML 元素用于指示在定义短语或句子的上下文中定义的术语。元素、/ 配对或最接近的祖先的元素被认为是该术语的定义。p``dt``dd``section``<dfn> |
<em> | <em> HTML 元素标记具有重音强调的文本。元素可以嵌套，每个嵌套级别都表示更大的强调程度。<em> |
<i> | <i> HTML 元素表示由于某种原因（如惯用语文本、技术术语、分类名称等）而偏离正常文本的一系列文本。从历史上看，这些都是使用斜体类型呈现的，这是此元素命名的原始来源。<i> |
<kbd> | <kbd> HTML 元素表示来自键盘、语音输入或任何其他文本输入设备的文本用户输入的内联文本范围。按照惯例，用户代理默认使用其默认等宽字体呈现元素的内容，尽管 HTML 标准没有强制要求这样做。<kbd> |
<mark> | <mark> HTML 元素表示由于标记的段落在封闭上下文中的相关性或重要性而标记或突出显示以供参考或表示法的文本。 |
<q> | <q> HTML 元素指示所包含的文本是简短的内联引号。大多数现代浏览器通过将文本括在引号中来实现这一点。此元素适用于不需要段落分隔符的短引号;对于长引号，请使用该元素。blockquote |
<rp> | <rp> HTML 元素用于为不支持使用该元素显示 ruby 批注的浏览器提供回退括号。一个元素应将每个左括号和右括号括起来，这些括号和右括号将包含批注文本的元素括起来。ruby``<rp>``rt |
<rt> | <rt> HTML 元素指定拼音批注的拼音文本组件，该成分用于为东亚版式提供发音、翻译或音译信息。该元素必须始终包含在元素中。<rt>``ruby |
<ruby> | <ruby> HTML 元素表示在基本文本上方、下方或旁边呈现的小批注，通常用于显示东亚字符的发音。它也可用于注释其他类型的文本，但这种用法不太常见。 |
<s> | <s> HTML 元素呈现带有删除线或一行穿过它的文本。使用该元素来表示不再相关或不再准确的事物。但是，在指示文档编辑时不合适;为此，请根据需要使用 和 元素。<s>``<s>``del``ins |
<samp> | <samp> HTML 元素用于将表示计算机程序的示例（或引号）输出的内联文本括起来。其内容通常使用浏览器的默认等宽字体（如 Courier 或 Lucida Console）进行呈现。 |
<small> | <小> HTML 元素表示侧面注释和小字体，如版权和法律文本，独立于其样式表示。默认情况下，它在其中呈现的文本字体大小小一个，例如 from to 。small``x-small |
<span> | <span> HTML 元素是短语内容的通用内联容器，它本身并不表示任何内容。它可用于对元素进行分组以用于样式设置目的（使用 或 属性），或者因为它们共享属性值，例如 。仅当没有其他语义元素合适时才应使用它。 非常像一个元素，但它是一个块级元素，而 a 是一个内联元素。class``id``lang``<span>``div``div``<span> |
<strong> | <强> HTML 元素表示其内容具有很强的重要性、严重性或紧迫性。浏览器通常以粗体呈现内容。 |
<sub> | <sub> HTML 元素指定内联文本，这些文本应仅出于印刷原因显示为下标。下标通常使用较小的文本以较低的基线呈现。 |
<sup> | <sup> HTML 元素指定仅出于印刷原因显示为上标的内联文本。上标通常使用较小的文本以凸起的基线呈现。 |
<time> | <时间> HTML 元素表示特定的时间段。它可能包括将日期转换为机器可读格式的属性，从而允许更好的搜索引擎结果或自定义功能，例如提醒。datetime |
<u> | <u> HTML 元素表示内联文本的范围，应以指示它具有非文本批注的方式呈现。默认情况下，这呈现为简单的实心下划线，但可以使用CSS进行更改。 |
<var> | <var> HTML 元素表示数学表达式或编程上下文中变量的名称。它通常使用当前字体的斜体版本来表示，尽管该行为与浏览器有关。 |
<wbr> | <wbr> HTML 元素表示分词机会，即文本中的一个位置，浏览器可以选择性地换行，尽管其换行规则不会在该位置创建换行符。 |
图像和多媒体
HTML 支持各种多媒体资源，如图像、音频和视频。
| 元素 | 描述 |
|---|---|
<area> | <area> HTML 元素定义图像映射中具有预定义可单击区域的区域。图像映射允许将图像上的几何区域与超链接相关联。 |
<audio> | <音频> HTML 元素用于在文档中嵌入声音内容。它可能包含一个或多个音频源，使用属性或元素表示：浏览器将选择最合适的一个。它也可以是流媒体的目标，使用 .src``source``MediaStream |
<img> | <img> HTML 元素将图像嵌入到文档中。 |
<map> | <map> HTML 元素与元素一起使用来定义图像映射（可单击的链接区域）。area |
<track> | <跟踪> HTML 元素用作媒体元素的子元素，并且 .它允许您指定定时字幕信息（或基于时间的数据），例如自动处理字幕。曲目以WebVTT格式格式化（文件） - Web视频文本轨道。audio``video``.vtt |
<video> | <视频> HTML 元素将支持视频播放的媒体播放器嵌入到文档中。您也可以用于音频内容，但该元素可能会提供更合适的用户体验。<video>``audio |
嵌入内容
除了常规的多媒体内容之外，HTML还可以包含各种其他内容，即使它并不总是容易与之交互。
| 元素 | 描述 |
|---|---|
<embed> | <嵌入> HTML 元素在文档中的指定点嵌入外部内容。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供。 |
<iframe> | <iframe> HTML 元素表示嵌套的浏览上下文，将另一个 HTML 页面嵌入到当前页面中。 |
<object> | <对象> HTML 元素表示外部资源，可以将其视为图像、嵌套浏览上下文或插件要处理的资源。 |
<picture> | <图片> HTML 元素包含零个或多个元素和一个元素，用于为不同的显示/设备方案提供图像的替代版本。source``img |
<portal> | <portal> HTML 元素允许将另一个 HTML 页面嵌入到当前页面中，以便更流畅地导航到新页面。 |
<source> | <源> HTML 元素为 、 元素或元素指定多个媒体资源。它是一个空元素，这意味着它没有内容，也没有结束标记。它通常用于以多种文件格式提供相同的媒体内容，以便提供与各种浏览器的兼容性，因为它们对图像文件格式和媒体文件格式的支持不同。picture``audio``video |
