青训营 Day 2
HTML 元素(部分)
以下总结来源与MDN(HTML 元素参考 - HTML(超文本标记语言) | MDN (mozilla.org))
主根元素
<html>表示一个 HTML 文档的根(顶级元素),所以它也被称为根元素。所有其它元素必须是此元素的后代。
文档元元素
<base>指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个该元素。<head>包含文档相关的配置信息(元数据),包括文档的[标题]、[脚本]和[样式表]等。<link>指定当前文档与外部资源的关系。该元素最常用于链接 CSS,此外也可以被用来创建站点图标(比如“favicon”样式图标和移动设备上用以显示在主屏幕的图标)。 -<meta>表示那些不能由其它 HTML 元相关(meta-related)元素表示的元数据信息。如<base>,<link>,<style>,<title>,<script>。<style>包含文档或者文档部分内容的样式信息,它们会被应用于包含此元素的文档。<title>定义文档的标题,显示在浏览器的标题栏或标签页上。它只应该包含文本,若是包含有标签,则它包含的任何标签都将被忽略。
分区根元素
<body>表示文档的内容。文档中只能有一个该的元素。
内容分区
内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素,来为页面内容创建明确的大纲,以便区分各个章节的内容,也代表了HTML语义化。
<address>表示其中的 HTML 提供了某个人、某些人或某个组织(等等)的联系信息。<article>表示文档、页面、应用或网站中的独立结构,旨在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其它独立的内容项目。<aside>表示文档的一部分,其内容仅与文档的主要内容间接相关。其通常以侧边栏或标注框(call-out box)的形式出现。<footer>表示最近的一个父分段内容或分段的根元素的页脚。<footer>通常包含该章节作者、版权数据或者与文档相关的链接等信息。<header>表示介绍性内容,通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素,但也可能包含其它元素,比如 Logo、搜索框、作者名称和其它元素。<h1>~~<h6>表示六个不同的级别的章节标题,<h1>级别最高,而<h6>级别最低。<main>呈现了文档正文的主体部分。主体部分由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成。<header>表示页面的一部分,其目的是在当前文档或其它文档中提供导航链接。导航部分的常见示例是菜单、目录和索引。<section>表示 HTML 文档中一个通用独立章节,它没有更具体的语义元素来表示。一般来说会包含一个标题。
文本内容
<blockquote>代表其中的文字是引用内容。通常在渲染时,这部分的内容会有一定的缩进。引文来源的 URL 地址可以使用属性 cite 给出,而来源的文本可以使用<cite>元素给出。<dd>用来指明一个描述列表(<dl>)元素中先前术语(<dt>)的描述、定义或值。<div>在描述或定义列表中声明一个术语。该元素仅能作为<dl>的子元素出现。通常在该元素后面会跟着一个<dd>元素;但多个连续出现的<dt>元素也将由出现在它们后面的第一个<dd>元素定义。<dl>一个包含一组术语(使用<dt>元素指定)以及描述(由<dd>元素提供)的列表。通常用于展示词汇表或者元数据(键—值对列表)。<dt>在描述或定义列表中声明一个术语。该元素仅能作为<dl>的子元素出现。通常在该元素后面会跟着一个<dd>元素;但多个连续出现的<dt>元素也将由出现在它们后面的第一个<dd>元素定义。<figcaption>描述其父元素<figure>里其它内容的标题或图例。<figure>表示一段独立的内容,可能包含<figcaption>元素定义的标题。该插图、标题和其中的内容通常作为一个独立的引用单元。<hr>表示段落级元素之间的主题转换:例如,一个故事中的场景的改变,或一个章节的主题的改变。<li>表示列表里的条目。它必须包含在一个父元素里:有序列表(<ol>)、无序列表(<ul>)或者菜单(<menu>)。在菜单或者无序列表里,列表条目通常用点排列显示;在有序列表里,列表条目通常在左边显示按升序排列的计数,例如数字或者字母。<menu><ul>的语意替换,但被浏览器视为(并向无障碍树暴露为)与<ul>没有区别。它表示了条目的无序列表(使用<li>表示)。<ol>表示有序列表,通常渲染为一个带编号的列表。<p>表示文本的一个段落。该元素通常表现为通过空行和/或首行缩进与相邻块分隔的文本块。但 HTML 段落可以与任何相关内容(例如,图像或表单字段)构成结构分组。<pre>表示预定义格式文本。在该元素中的文本通常按照 HTML 文件中的编排,以非比例或等宽字体的形式展现出来,文本中的空白符都会显示出来。<ul>表示一系列无序的列表项目,通常渲染为项目符号列表。
内联文本语句
<a>可以通过它的 href 属性创建通向其它网页、文件、电子邮件地址、同一页面内的位置或任何其它 URL 的超链接。<abbr>用于代表缩写。<b>用于吸引读者的注意到该元素的内容上(如果没有另加特别强调)。这个元素过去被认为是粗体(Boldface)元素,并且大多数浏览器仍然将文字显示为粗体。尽管如此,你不应将<b>元素用于显示粗体文字;替代方案是使用 CSS font-weight 属性来创建粗体文字。<bdi>告诉浏览器的双向算法将其包含的文本与周围的文本隔离,当网站动态插入一些文本且不知道所插入文本的方向性时,此功能特别有用。<bdo>覆盖文本的方向性,使文本以不同的方向渲染呈现出来。<br>在文本中生成一个换行(回车)符号。此元素在写诗和地址时很有用,这些地方的换行都非常重要。<cite>用于包含引用作品的标题。这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写。<code>以一种旨在表明其中的内容是计算机代码片段的方式显示其内容。默认情况下,它以用户代理的默认等宽字体显示。<data>将指定内容和机器可读的翻译联系在一起。但是,如果内容是与时间或者日期相关的,则一定要使用 time 元素。<dfn>用于表示在定义短语或句子的上下文中定义的术语。父级<p>元素、<dt>/<dd>对,或与<dfn>元素最近的分区元素被认定为是术语的定义。<em>标记出需要用户着重阅读的内容,<em>元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读。<i>用于表现因某些原因需要区分普通文本的一系列文本。例如惯用文本、技术术语、分类名称等。它通常使用斜体表示,这也是该元素(<i>)命名的来源。<ruby>用来在基础文本上方、下方或一旁展现小注解,通常用于显示东亚字符的发音。它还用于注解其他类型的文本,但这种用法不太常见。<s>删除线来渲染文本。使用<s>来表示不再相关或者不再准确的事情。但是当表示文档编辑时,不建议使用<s>。<samp>用于标识计算机程序输出,通常使用浏览器缺省的等宽字体来渲染(例如 Courier 或 Lucida Console)。<small>代表旁注和小字体,如版权和法律等独立于其样式展示的文本。默认情况下,它将其中的文本使用小一号的字体渲染,例如从 small 到 x-small。<span>短语内容的通用行内容器,并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图(通过使用 class 或者 id 属性),或者这些元素有着共同的属性,比如 lang。应该在没有其他合适的语义元素时才使用它。<span>与 div 元素很相似,但<div>是一个块级元素而<span>则是行级元素。<strong>表示其内容十分重要、严肃或紧迫。浏览器通常用粗体显示。<sub>定义因排版原因而应显示为下标的内联文本。下标通常显示得更小且更低。<sup>定义因排版原因而应显示为上标的内联文本。上标通常显示得更小且更高。<time>表示特定的时间段。可能包括 datetime 属性,以将日期转换为机器可读的格式,从而获得更好的搜索引擎结果或自定义功能(如,提醒)。<u>表示一个需要标注为非文本化(non-textual)的内联文本域。默认情况下渲染为一个实线下划线,但可以用 CSS 替换。<var>表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器,但通常使用当前字体的斜体形式显示。<wbr>一个文本中的位置,其中浏览器可以选择来换行,虽然它的换行规则可能不会在这里换行。
图片和多媒体
<area>在图片上定义一个可点击区域。图像映射(image map)允许图像上的几何区域与超链接关联。<audio>用于在文档中嵌入音频内容。它可以包含一个或多个音频资源,这些音频资源可以使用 src 属性或者 source 元素来进行表示:浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。<img>将一张图像嵌入文档。<map>与<area>元素一起使用,以定义一个图像映射(可点击链接区域)。<track>被当作媒体元素——音频(audio)和视频(video)的子元素来使用。它允许指定时序文本轨道(或者基于时间的数据),例如自动处理字幕。轨道格式有 WebVTT 格式(.vtt 格式文件)——Web 视频文本轨格式。<video>用于在文档中嵌入媒体播放器,支持文档内的视频播放。你也可以将<video>标签用于音频内容,但是 audio 元素可能在用户体验上更合适。
表格内容
<caption>指定表格的标题。<col>定义表格中的列,并用于定义所有公共单元格上的公共语义。它通常位于<colgroup>元素内。<colgroup>定义表中的一组列表。<table><表示表格数据——即通过二维(由行和列组成)数据表表示的信息。<tbody><封装了一系列表格的行(<tr>元素),代表了它们是表格(<table>)主要内容的组成部分。<td>定义了一个包含数据的表格单元格。它是表格模型(table model)的一部分。<tfoot>定义了一组表格中各列的汇总行。<th>定义表格内的表头单元格。这部分特征是由 scope 和 headers 属性准确定义的。<thead>定义了一组定义表格的列头的行。<tr>定义表格中的行。同一行可同时出现<td>(数据单元格)和<th>(列头单元格)元素。
标题:HTML 元素参考 - HTML(超文本标记语言) | MDN