HTML Element

根元素

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

文档元数据

元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件 (如搜索引擎， 浏览器等等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件

  • <link> 指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架.这个元素经常用来链接css文件

  • <meta> 表示那些不能由其它HTML元相关元素 (<base>，<link>，<script>，<style>或<title>）之一表示的任何元数据信息

  • <style> 包含了文档的样式化信息或者文档的一部分。指定的样式化星系包含的该元素内，通常是CSS的格式

内容分区

内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容

  • <address> 可以让作者为它最近的<article>或者<body>祖先元素提供联系信息。在后一种情况下，它应用于整个文档

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

  • <aside> 表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容

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

  • <h1-h6> 标题信息

  • <header> 表示一组引导性的帮助，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等

  • <hgroup> 代表一个段的标题

  • <nav> 描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表

  • <section> 表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）

文本内容

使用 HTML 文本内容元素来组织在开标签<body>和闭标签</body> 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于 accessibility 和 SEO很重要

  • <blockquote> 引用块

  • <div> 是一个通用型的流内容容器

  • <dl> 是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)

  • <dt> 用于在一个定义列表中声明一个术语。通常在该元素后面会跟着 <dd>元素

  • <dd> 用来指明一个描述列表 ( <dl> ) 元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个 <dt> 元素

  • <hr> 表示段落级元素之间的主题转换。在HTML的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上

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

  • <ol> 表示多个有序列表项，通常渲染为有带编号的列表

  • <ul> 代表多项的无序列表，即无数值排序项的集合，且它们在列表中的顺序是没有意义的

  • <li> 用于表示列表里的条目。它必须被包含在一个父元素 <ul> <ol> 里

  • <p> 表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进

  • <pre> 表示预定义格式文本

内联文本语义

使用 HTML 内联文本语义(Inline text semantics)定义语句，结构，可以是一个词，一段，或任意风格的文字

  • <a> 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接

  • <abbr> 代表缩写，并可选择提供一个完整的描述

  • <b> 表示相对于普通文本字体上的区别，但不表示任何特殊的强调或者关联，通常以粗体显示

  • <bdi> (双向隔离元素) 会隔离可能以不同方向进行格式化的外部文本

  • <bdo> (HTML双向覆盖元素)用于覆盖当前文本的朝向，它使得字符按给定的方向排列

  • <br> 文本中产生一个换行（回车键）

  • <cite> 表示一个作品的引用

  • <code> 现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示

  • <data> 将一个指定内容和机器可读的翻译联系在一起

  • <em> 标记出需要用户着重阅读的内容

  • <i> 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示

  • <kbd> 用于表示用户输入，它将产生一个行内元素，以浏览器的默认monospace字体显示

  • <mark> 代表突出显示的文字

  • <q> 表示一个封闭的并且是短的行内引用的文本。这个标签是用来引用短的文本，所以请不要引入换行符； 对于长的文本的引用请使用<blockquote>替代

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

  • <small> 使文本的字体变小一号

  • <span> 短语内容的通用行内容器，并没有任何特殊语义

  • <strong> 表示文本十分重要，一般用粗体显示

  • <sub> 定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。下标

  • <sup> 定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小。上标

  • <u> 使文本在其内容的基线下的一行呈现下划线

图片和多媒体

HTML 支持各种多媒体资源，例如图像，音频和视频

  • <area> 在图片上定义一个热点区域

  • <audio> 用于在文档中表示音频内容。 <audio>元素可以包含多个音频资源， 这些音频资源可以使用 src属性或者<source>元素来进行描述； 浏览器将会选择最合适的一个来使用。对于不支持 <audio> 元素的浏览器，<audio> 元素也可以作为浏览器不识别的内容加入到文档中

  • <img> 代表文档中的一个图像

  • <track> 被当作媒体元素—<audio>和<video>的子元素来使用。它允许指定计时字幕（或者基于事件的数据），例如自动处理字幕

  • <video> 用于在HTML或者XHTML文档中嵌入视频内容

内嵌内容

除了常规的多媒体内容，HTML 可以包括各种其他的内容，即使它并不容易交互

  • <embed> 用于表示一个外部应用或交互式内容的集合点，换句话说，就是一个插件

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

  • <param> 定义了 <object>的参数

  • <source>

脚本

为了创建动态内容和 Web 应用程序，HTML 支持使用脚本语言，最突出的就是 JavaScript。某些元素支持此功能

  • <canvas> 可被用来通过脚本（通常是JavaScript）绘制图形

  • <noscript> 如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则HTML

  • <script> 用于嵌入或引用可执行脚本

编辑标识

这些元素能标示出某个文本被更改过的部分

  • <del> 表示已经从文档中删除的文本范围。此元素通常是（但不必）呈现删除线的文本

  • <ins> 定义已经被插入文档中的文本

表单

HTML 提供了许多可一起使用的元素，这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单

  • <button> 表示一个可点击的按钮

  • <datalist> 包含了一组<option>元素,这些元素表示其它表单控件可选值

  • <fieldset> 用来对表单中的控制元素进行分组(也包括 label 元素)

  • <form> 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息

  • <input> 用于为基于Web的表单创建交互式控件，以便接受来自用户的数据

  • <label> 表示用户界面中项目的标题

  • <legend> 代表一个用于表示它的父元素<fieldset>的内容的标题

  • <meter> 用来显示已知范围的标量值或者分数值

  • <option> 用于定义在<select>、<optgroup> 或 <datalist> 元素中包含的项

  • <output> 表示计算或用户操作的结果

  • <progress> 用来显示一项任务的完成进度。通常情况下,该元素都显示为一个进度条形式

  • <select> 一种表单控件，可创建选项菜单

  • <textarea> 表示一个多行纯文本编辑控件

交互元素

HTML 提供了一系列有助于创建交互式用户界面对象的元素

  • <details> 被用作发现小部件，用户可以从其中检索附加信息

  • <dialog> 表示一个对话框或其他交互式组件，例如一个检查员或窗口

  • <menu> 呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单，也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单

  • <menuitem> 生成一个弹出式菜单。这包括上下文菜单，以及按钮可能附带的菜单。

  • <summary> 用作 一个 <details> 元素的一个内容的摘要，标题或图例

web组件

Web 组件是种近似 HTML（HTML-related） 的技术，这使得它能够，从本质上讲，创建和使用自定义元素，就好像它是普通的 HTML。此外，你甚至可以创建自定义版本的标准 HTML 元素

  • <slot> web组件技术的一部分，slot是web组件的一个占位符，可以用来插入自定义的标记文本。可以创建不同的DOM树并进行渲染

  • <template> 一种用于保存客户端内容的机制，该内容在页面加载时不被渲染，但可以在运行时使用JavaScript进行实例化