HTML5元素周期表

HTML5元素周期表

1. 根元素

   1. html 文档根元素
   

   ---

2. 元数据和脚本

   1. head HTML文档中的第一个元素。包含文档元数据
   2. title 文档标题
   3. meta 文档的元数据。
       meta元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 meta标签位于文档的头部，不包含任何内容。meta标签的属性定义了与文档相关联的名称/值对。
       在 HTML 5 中，不再支持 scheme 属性。 在 HTML 5 中，有一个新的 charset 属性，它使字符集的定义更加容易。
   4. base 定义非绝对的链接地址所相对的默认 URL。<base>标签规定页面中所有链接的基准 url
   5. link 与文档相关的其它资源。注释：link 元素是空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任意次数。
   6. style 在文档中定义的样式。
       scoped 属性是 HTML 5 中的新属性，它允许我们为文档的指定部分定义样式，而不是整个文档。 在 HTML 5中，所有元素都不支持 style 属性，如需为一个元素添加样式，请在 style 元素中使用 scoped 属性。
       注释：如果没有定义 scoped 属性，则 <style>元素必须是 head 元素的子元素，或者是（属于 head 元素的子元素的） noscript 元素的子元素
   7. noscropt当脚本被禁用时显示的一部分文档内容。
       注释：如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。
       注释：无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做，您应当在注释标签中隐藏脚本。老式的（无法识别 <script> 标签的）浏览器会忽略注释，这样就不会把标签的内容写到页面上，而新式的浏览器则懂得执行这些脚本，即使它们被包围在注释标签中！
   8. script 当脚本被禁用时显示的一部分文档内容。
       注释：如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。
       注释：无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做，您应当在注释标签中隐藏脚本。老式的（无法识别 <script> 标签的）浏览器会忽略注释，这样就不会把标签的内容写到页面上，而新式的浏览器则懂得执行这些脚本，即使它们被包围在注释标签中！
   

   ---

3. 文本级别语义

   1.span 文本级别语义
   2.a 超链接。
       在 HTML 4.01 中，<a>标签既可以是超链接，也可以是锚。这取决于是否描述了 href 属性。 在 HTML 5 中，<a> 是超链接，但是假如没有 href 属性，它仅仅是超链接的一个占位符。 HTML 5 有一些新的属性，同时不再支持一些 HTML 4.01 的属性。
   3. rt 文本的解释
   4. rp 针对不支持ruby 注音的浏览器，用于注释信息
   5. dfn 由父级章节定义的项
   6. abbr 缩写或缩略词。
       表示一个缩写形式，比如 "Inc."、"etc."。通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
       <abbr>标签最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。 浏览器可能会根据这个信息改变对这些文本的显示方式，或者用其他文本代替。也许当前流行的浏览器对<abbr>标签中包含的文本还没有任何处理方式，但是我们无法预测将来的版本将会如何实现该标签。
   7. q 引用的文本。提示：请使用 cite 属性来定义该引用的来源。
   8. cite 对参考文献等的引用
   9. em 需要强调的文本。
   10. time 定义日期或时间，或者两者。 <time>标签是 HTML 5 中的新标签。
   11. var 定义数学或程序变量。您可以将此标签与 <pre> 及 <code>标签配合使用。
   12. samp 程序的样本
   13. i 斜体的文本。
       <i> 标签定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。在没有其他元素可以使用时，比如 <b>, <cite>, <dfn>, <em>, <q>, <small>, <strong>，请使用 <i> 标签。
       在 HTML 4.01 中，存在着一种理解，即应该使用 CSS 来制作斜体文本。在 HTML 5 中，情况没有改变，但是你应该使用 <i> 标签把部分文本定义为某种类型，而不只是利用它在布局中所呈现的样式。
   14. sub 上标。<sub>标签可定义下标文本。<sup> 可定义上标文本。
   15. sup 下标
   16. small 更小的旁注信息。<small> 标签制作更小字号的文本。在 HTML 5 中不支持<small>标签。
   17. strong 重要的文本。
       在 HTML4.01中，<strong> 定义语气更重的强调文本，但是在 HTML 5 中，<strong>定义重要的文本。
   18. mark 突出显示的文本
   19. ruby 东亚文字的注音，如中文的拼音
   20. ins 在文档编辑过程中插入的文本。<ins>标签定义文档的其余部分之外的插入文本。
       提示：请与 <del> 标签一起使用，来描述对文档的更新和修正
   21. del 在编辑过程中被删除的文本。提示：与 <ins> 一起使用，描述文档中的更新和修正
   22. bdi 在编辑过程中被删除的文本。提示：与 <ins> 一起使用，描述文档中的更新和修正
   23. bdo 定义内容的排版方向
   24. s 是失效或不再准确的文本。<s>标签定义加删除线的文本。HTML 5 中不再支持这个标签。请使用 CSS 代替。
   25. kbd 由键盘输入的文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
   26. wbr  软回车（必要时才回车）
   27. code 代码的片断
   

   ---

4. 组合元素

   1. div 无语义的元素
   2. pre 在HTML代码中预先格式化的文本。
       被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 pre标签的一个常见应用就是用来表示计算机的源代码。
       在 HTML 4.01 中，不赞成使用 width 属性，在 HTML 5 中不再支持该属性。
       提示：请使用pre标签来显示非常规的格式化内容，或者某类计算机代码。
   3. br 换行符
   4. hr 水平线/内容主题的变化。
       在 HTML4.01 中，不赞成使用 align, noshade, size 以及 width 属性。在 HTML 5 中不再支持这些属性。
       在 HTML5 中，<hr> 标签定义内容中的主题变化，并显示为一条水平线。 在 HTML4.01 中，它仅仅显示为一条水平线。
   5.figcaption 图片的标题，图题
   6. figure 独立的内容，如图像、代码等。figure 标签是 HTML 5 中的新标签。
       提示：请使用 <legend> 元素为元素组添加标题。
   7. p 段落内容。
       在 HTML 4.01 中，不赞成使用 align 属性，在 HTML 5 中不再支持该属性。
   8. ol 有序列表。
       在 HTML 4.01 中，不赞成使用 "start" 属性，在 HTML 5 中是允许的。
       在 HTML 4.01 中，不赞成使用 "compact" 和 "type" 属性，在 HTML 5 中，不再支持这两个属性。
   9. ul 无序列表。
       在 HTML 4.01 中，ul 元素的 "compact" 和 "type" 属性是不被赞成使用的。在 HTML 5 中，不再支持这两个属性。提示：请使用 CSS 来定义列表的类型。
   10. li 列表项目。
       在 HTML4.01 中， 不赞成使用 "type" 和 "value" 属性。
       在 HTML5 中，不再支持 "type" 属性。 在 HTML5 中， 并没有不赞成使用 "value" 属性，但是仅能够与 <ol> 元素一起使用。提示：请使用 CSS 来定义列表的类型。
   11.blockquo 从其它源引用的内容。HTML 4.01 与 HTML 5 无差异
   12. dl 带定义的列表
   13. dt 带定义的列表中的项目。HTML 5 引入了<dialog> 标签。在 dialog 中，<dt>标签定义句子所属的角色。
   14. dd 带定义列表中对项目的描述
   

   ---

5. 表单

   1. fieldset 按用途组合的一组表单控制元素。
       此标签将表单内容的一部分打包，生成一组相关表单的字段。此标签没有必需的或唯一的属性。 当一组表单元素放到该标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
   2. form 表单。
       在 HTML 5 中有一些新属性，同时不再支持 HTML 4.01 中的一些属性。 在 HTML 5 中有一个新属性：replace。它定义表单被提交后所做的事情。
   3. meter 控制在已知范围内输入度量值。
       meter标签定义度量（单位）。仅用于已知最大和最小值的度量。meter标签是 HTML 5 中的新标签。
       注释：必须定义度量的范围，既可以在 text 中，也可以在 min/max 属性中定义。
   4. select 有多选值的下拉列表
       HTML5 有一些新的属性，同时不再支持一些 HTML 4.01 的属性
   5. legend 图例或表的说明。
       <legend> 标签为 <fieldset>、<figure> 以及 <details> 元素定义标题。
       在 HTML 4.01 中， <legend> 仅用于 <fieldset> 元素。
       在 HTML 5 中， <legend> 标签应用于 <fieldset>、<figure> 以及 <details> 元素。 在 HTML 5 中，不支持 align 属性。请使用 CSS 代替。
   6. optgroup 选项组。
       <optgroup> 标签定义选项组。此元素允许您组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。HTML4.01与 HTML5之间无差异
   7. label 表单控件的标题（标签）。
       <label>标签定义控件的标注。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
       注释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
   8. option 下拉列表中的单一选项。
       在 HTML 5 中，<option> 标签也用于新元素 <datalist> 中。
       注释：<option> 标签能够在不带任何属性的情况下使用，但是通常需要 value 属性，该属性定义了发送到服务器的数据。
       请与 <select> 或 <datalist> 标签结合使用。在其他地方，<option> 标签是无意义的。
   9. datalist定义选项列表。<datalist>标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。<datalist>标签是 HTML 5 中的新标签。
   10. input 表单中的输入字段。
       在 HTML 5 中，该元素有很多新属性，同时不再支持 HTML 4.01 中的一些属性。
       在 HTML 5 中，type 属性有很多新的值。
   11. output 输出的结果。<output>标签是 HTML 5 中的新标签。
   12. keygen 生成密钥对
   13. textarea 多行的文本输入区域。
   14. button 按钮。
       您可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input 元素创建的按钮的不同之处。在 HTML 5 中有一个新属性：autofocus
   15. progress 运行中的进度控制。<progress> 标签是 HTML 5 中的新标签。
       提示：请使用<progress>标签来显示下载的进程
   

   ---

6. 文档章节

   1. body 文档的主体。
       在 HTML 5 中，删除了所有 <body> 的特殊属性。而那些属性在 HTML 4.01 中是不被赞成使用的。
   2. aside 与周围元素相关的内容，但分开显示
       定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
       aside标签是 HTML 5 的新标签
   3. address 当前文章的联系信息。
       注释：address 通常被呈现为斜体。大多数浏览器会在 address 元素的前后添加一个换行符，不过如果有必要的话，您需要在地址文本的内容添加额外的换行符。
   4. h1-h6 当前章节的标题。
   5. section 定义文档中的节（section）。比如章节、页眉、页脚或文档中的其他部分。
   6. header 当前章节的导航或引导性元素
       header标签定义 section 或 document 的页眉。
       header标签是 HTML 5 中的新标签。
   7. nav 导航链接的容器。<nav> 标签是 HTML 5 中的新标签。
       提示：如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中
   8. artcle 页面内容的独立部分，如博客文章、论坛帖子<article>标签是 HTML 5 的新标签。
   9. footer 当前章节的页脚。
       <footer> 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。<footer>标签是 HTML 5 中的新标签。
       提示：假如您使用 footer 来插入联系信息，应该使用 <address> 元素。
   10. hgroup 当前章节各标题的组合
   

7. 交互元素

   1. menu菜单列表。当希望列出表单控件时使用该标签。
       在 HTML4.01 中，不赞成使用 menu 元素。 在 HTML5 中，重新定义了 menu 元素，且使用用于排列表单控件
   2. command 用户可以执行的命令，如发表一篇文章。
       <command>标签定义命令按钮，比如单选按钮、复选框或按钮。<command>标签是 HTML 5 中的新标签
   3. summary dedails元素的标题
   4. details 附加的详细信息。
       <details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。
       <details> 标签是 HTML 5 中的新标签。
       提示：与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail
   

   ---

8. 表格元素

   1. col 表格中的列。为表格中的一个或多个列定义属性值。您只能在表格或列组中使用该元素。
   2. colgroup 对表格中的若干列进行组合。
       定义表格列的组。通过此标签，您可以对列进行组合，以便格式化。该元素只有在 <table> 中才是合法的。
       注释：colgroup 元素只能包含 col 元素。
       注释：colgroup 元素无法创建表格列。如需创建列，必须在 tr 元素内规定 td 元素。
       提示：如果需要向一个列组规定相同的属性值，请使用该元素。
       提示：如果需要为一个或多个列规定属性值，请使用 col 元素。
   3. caption 表格的标题<caption> 标签必须紧随 <table> 标签之后。
       HTML 4.01 不赞成使用 align 属性。在 HTML 5 中，不支持该标签。请使用 CSS 代替
   4. table 表格
   5. tr 表格中的一行单元 在 HTML 5 中， 不支持 <tr> 标签的任何属性。
   6. td 定义表格单元格。
       在 HTML4.01中，td 元素的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被赞成使用的。 在 HTML5中，仅仅支持"colspan" 和 "rowspan" 属性。
   7. th 表头。
       <th> 标签定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体。
       在 HTML 4.01 中，th 元素的 "bgcolor"、"height"、"width" 以及 "nowrap" 属性是不被赞成使用的。
       在 HTML 5 中，仅仅支持 "colspan" 、 "rowspan" 以及 "scope" 属性。
   8. tbody 表格主体。
       使用<tbody>标签，可以将表格分为一个单独的<tbody> 标签可将表格中的一行或几行合成一组。 虽然您可能想包括一个，甚至会在表格中包括两个或更多个 <tbody> 标签，但是我们建议最好在表格中没有 <tbody> 标签。
       在 <tbody> 标签中，只有 tr标签可以定义表格行。并且一旦定义，一个 <tbody> 标签就是表格中的一个独立的部分。例如不能从一个<tbody>跨越到另一个 <tbody> 中。
       thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上
   9. thead 定义表格中的表头行。
       head、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。在 HTML 5 中，不支持 <thead> 标签的任何属性。
       注释：<thead> 内部必须拥有 <tr>标签！
       如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
   10. tfoot 表格的页脚/脚注行。
   

   ---

9. 嵌入式内容

   1. img 图像
   2. area 图像映射的超链接区域
   3. map 在图像的一部分区域定义图像映射用于添加超链接
   4. embed 嵌入的非HTML内容
   5. object 嵌入的外部资源，如图像、iframe或插件。
   6. param 父级对象的参数。
   7. source 父级视频或音频元素的资源
   8. iframe 嵌套的框架。在 HTML 5 中，仅仅支持 src 属性
   9. canvas 可以通过客户端脚本编辑的图形（画布）
   10. track 媒体类元素的外部轨道
   11. audio 音频文件。<audio>标签是 HTML 5 的新标签。
   12. video 视频。<video> 标签是 HTML 5 的新标签。
   

   ---