标签归纳
关键点
- 过滤 H5 废除标签。
- 过滤样式标签 （可以通过样式表进行解决）。
- 过滤兼容性差的标签（表现为部分浏览器兼容或者实际应用少）。
目的
- 该文章的目的是归纳出目前在 html 文档常用的一些标签，方便开发者进行查询和学习。
- 标签的归类会从重要性依次递减
基础标签
1. <!DOCTYPE>
定义文档类型，在html5文档之前有html4、xhtml等文档类型，为了让浏览器解析并支持对应的文档结构，可以采用此标签进行声明，而我们就只需要关注html5如何进行声明，它很简洁，只有一种声明方式。
2. <html>
html标签又叫做根元素，所有标签都应该嵌套在html标签中，浏览器可以根据html根节点，解析出一个dom的节点树形结构文档，而该结构的根节点就是以html节点展开，其他元素都必须为该元素的子节点。
3. <head>
head标签定义文档的头部，就是个放置头部元素的容器，主要内容：元信息，比如做有meta标签声明的一些内容，有助于浏览器进行搜索；标题，文档的标题；样式和脚本标签等。
4. <meta>
元元素，主要描述文档的一些信息，比如
<meta charset="UTF-8"> : 声明文档默认的字符集是utf8；
<meta name="keywords" content="html5，h5">： 声明文档的一些关键词，有助于搜索引擎的搜索；
<meta http-equiv="content-type" content="text/js"> : 服务器将把名称/值对添加到发送给浏览器的内容头部；
更多的应用可以查询该元素的用法。5. <title>
在head元素中，必须包含的就是title标签，用来声明文档的标题，可以显示在浏览器的窗口中，在进行收藏文档的时候，也会作为书签名称，该标题的定义也是至关重要的。
6. <base>
<base> 标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。7. <body>
定义文档的主体，文档显示的内容都是放置在body元素中。
8. <!-- -->
html注释标签，在进行文档结构设计的时候，可以声明注释，助于理解。
文档布局标签
1. <div>
块级元素，最早之前都是用div来布局文档结构，html5之后，我们可以采用更多的语义化元素配合div元素进行更合理的布局
2. <header>
头部元素结构，通常用来布局文档的头部，里面可以包含文档的标题，导航，Logo等信息，也可以是布局某个章节或某部分的标题部分
3. <nav>
导航链接，如果里面包含了a链接等跳转到其他页面的，就应用使用该标签
4. <section>
表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。
注意：
通常在section中都会包含一个标题元素h1-h6，来辨别每一个section
如果元素内容被分割成几个部分的话，更多是采用article元素代替section
不要把section当成一个普通的容器来使用，这本是div的用法
5. <article>
独立的内容，潜在来源：文章，论坛帖子，评论，博客条目等
6. <h1> - <h6>
标题元素，样式表现为加粗模式，但更重要的是语义化，h1是最重要的标题，依次递减
7. <p>
段落元素，块级元素
8. <span>
普通文本元素
9. <br\>
换行元素
10. <pre>
html文档中多个空格和换行被浏览器解析的时候只会变成一个空格，为了保持我们定义的空格和换行结构，我们可以pre来保持预格式化的文本，应用场景比如代码，与code标签一起应用
11. <hr>
水平切割线，用来划分段落、文章
12. <aside>
定义内容之外的内容，通常可以用作文章的侧边栏
13. <footer>
<footer> 标签定义文档或节的页脚。
<footer> 元素应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
可以在一个文档中使用多个 <footer> 元素。链接标签
1. <a>
定义一个超链接，可以用从一个页面跳转到另一个页面，通过href属性指定资源路径，同时a标签也可以用来做锚，通过声明name或者id，在href属性用#加对应的name值或者id值，可以跳到对应的位置，name在html已经被废除，最好通过id来命名。
2. <style>
内部样式表，为当前文档页定义样式，优先级大于外部样式表link，小于元素属性style，通常有个默认且唯一的属性，type=“text/css”。位于head元素中。因为style跟link存在关系，所以归类在一起了。
3. <link>
定义文档与外部资源的关系，rel属性可以定很多种，其中我们经常用就是styleshhet（样式表）和icon（图标），然后href属性可以指定外部资源的路径。
编程标签
1. <script>
定义客户端脚本，通常都是加载javascript脚本，可以在元素内容里面写脚本逻辑，也可以通过src属性加载外部脚本。
2. <noscript>
定义客户端脚本，通常都是加载javascript脚本，可以在元素内容里面写脚本逻辑，也可以通过src属性加载外部脚本。
图像标签
1. <img>
从网页上嵌入一张 图像，有两个必需属性，src属性指定图像路径，alt属性在图像不可加载时，用来代替的文本描述。
因为标签是应用比较多的元素，所以该归类比较靠前，如果对其他图像元素应用比较少的，可以靠后记忆
2. <map>
定义图像映射区域的容器，所有具体的映射区域都是在子节点<area>标签中进行定义。
注意点：
1. 要使用图片映射，必须在<img>标签中使用usemap属性指定映射容器。
2. 我们在<map>标签中应指定name和id属性，与上面<img>标签中的usemap属性挂钩，而且因为浏览器的不同，他们可能使用<map>标签中的name或者id属性，所以我们应该在定义<map>的时候，都同时定义name和id属性且保持一致，防止兼容性产生的问题。3. <area>
定义图像映射的区域，<area>标签总是要作为<map>标签的子节点。
<area>标签定义图像的区域主要取决于shape属性和coords属性，shape 属性与 coords 属性配合，可以规定区域的尺寸、形状和位置。
如何定位区域可以自查属性的应用，其次<area>标签上可以定义是进行跳转（href）或者不进行跳转（nohref）。4. <canvas>
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。5. <figure>
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。6. <figcaption>
<figcaption> 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。列表标签
1. <ul>
定义一个无序列表，全称：unorder list
2. <ol>
定义一个有序列表，全称：order list
3. <li>
列表的一个项，作为<ul>或者<ol>的子节点
4. <dl>
自定义列表，全称：definition list
5. <dt>
自定义列表的项，全称：definition title
6. <dd>
自定义列表的项的内容，全称：definition data
表单标签
1. <form>
<form>标签为用户输入创建表单，收集数据，提交到服务器。form 元素是块级元素。2. <input>
<input>标签为用户输入数据，根据 type 属性的多样性，input元素可以包含文本、隐藏值、密码、单选按钮、复选框等多种格式输入框。3. <textarea>
多行文本的输入控件。
4. <button>
定义按钮，根据type属性，可以设置不同类型的按钮。
5. <select>
下拉框，提供多种数据进行选择。
6. <optgroup>
<optgroup> 标签定义选项组。optgroup 元素用于组合选项。 当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。
7. <option>
option 元素定义下拉列表中的一个选项（一个条目）。
浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。
option 元素位于 select 元素内部。8. <label>
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。9. <fieldset>
fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<fieldset> 标签没有必需的或唯一的属性。
<legend> 标签为 fieldset 元素定义标题。10. <legend>
legend 元素为 fieldset 元素定义标题（caption）。
11. <datalist>
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。表格标签
1. <table>
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。2. <caption>
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。
您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。3. <thead>
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。4. <tbody>
<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。5. <tfoot>
<tfoot> 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。6. <tr>
<tr> 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。7. <th>
定义表格内的表头单元格。
HTML 表单中有两种类型的单元格：
表头单元格 - 包含表头信息（由 th 元素创建）
标准单元格 - 包含数据（由 td 元素创建）
th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。8. <td>
<td> 标签定义 HTML 表格中的标准单元格。9. <col>
<col> 标签为表格中一个或多个列定义属性值。
如需对全部列应用样式，<col> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。
您只能在 table 或 colgroup 元素中使用 <col> 标签。10. <colgroup>
<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。
如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。
<colgroup> 标签只能在 table 元素中使用。格式标签
1. <em>
<em> 标签告诉浏览器把其中的文本表示为强调的内容。2. <strong>
<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。3. <mark>
<mark> 标签定义带有记号的文本。4. <sup>
<sup> 标签可定义上标文本。5. <sub>
<sup> 标签可定义下标文本。6. <del>
定义文档中已被删除的文本。7. <ins>
定义文档中已被删除的文本。8. <bdo>
bdo 元素可覆盖默认的文本方向。9. <code>
<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。10. <var>
<var> 标签表示变量的名称，或者由用户提供的值。11. <samp>
代表程序或电脑的输出 。12. <kbd>
<kbd> 标签定义键盘文本。13. <abbr>
通过对缩写进行标记，能对浏览器，搜索引擎提供有用的信息，通常会配合title属性，来显示其全称。14. <address>
<address> 标签定义文档或文章的作者/拥有者的联系信息。
如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。
如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。
<address> 元素中的文本通常呈现为斜体。
大多数浏览器会在 address 元素前后添加折行。15. <q>
<q> 标签定义短的引用。
浏览器经常在引用的内容周围添加引号。16. <blockquote>
<blockquote> 标签定义块引用。
<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。17. <cite>
<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
按照惯例，引用的文本将以斜体显示。
用 <cite> 标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个 <a> 标签中，从而把一个超链接指向该联机版本。
<cite> 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。18. <progress>
<progress> 标签标示任务的进度（进程）。19. <ruby>
<ruby> 标签定义 ruby 注释（中文注音或字符）。
在东亚使用，显示的是东亚字符的发音。
与 <ruby> 以及 <rt> 标签一同使用：ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容20. <rt>
<rt> 标签定义字符（中文注音或字符）的解释或发音。21. <rp>
<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。音频 / 视频标签
1. <audio>
<audio> 标签定义声音，比如音乐或其他音频流2. <vedio>
<video> 标签定义视频，比如电影片段或其他视频流。3. <source>
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。框架标签
1. <iframe>
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。被过滤标签
这些标签，我们无须理它，或者记忆它
兼容性支持问题：<details>、<dialog>、<summary>、<embed>、<object>、<param>、<command> 、<output>、<bdi>、<meter> 、<time>、<wbr>、<track>、<main>
html5 废除标签： <acronym>、<center>、<font>、<applet>、<dir>、<menu>、<menuitem>、<basefont>、<isindex>、<keygen>、<big>、<s>、<tt>、<u>、<frame>、<frameset> 、<noframes>
样式标签：<b>、<i>、<small>、<strike>
建议少用：<dfn>
必须 注册 为本站用户， 登录 后才可以发表评论！