前端杂谈 · Web

HTML5 标签归纳

•̀.̫•́✧ · 4月18日 · 2020年本文6799字 · 阅读17分钟188

标签归纳

关键点

  • 过滤 H5 废除标签。
  • 过滤样式标签 (可以通过样式表进行解决)。
  • 过滤兼容性差的标签(表现为部分浏览器兼容或者实际应用少)。

目的

  • 该文章的目的是归纳出目前在 html 文档常用的一些标签,方便开发者进行查询和学习。
  • 标签的归类会从重要性依次递减

基础标签

1. <!DOCTYPE>

定义文档类型,在html5文档之前有html4、xhtml等文档类型,为了让浏览器解析并支持对应的文档结构,可以采用此标签进行声明,而我们就只需要关注html5如何进行声明,它很简洁,只有一种声明方式。

2. <html>

html标签又叫做根元素,所有标签都应该嵌套在html标签中,浏览器可以根据html根节点,解析出一个dom的节点树形结构文档,而该结构的根节点就是以html节点展开,其他元素都必须为该元素的子节点。

HTML5 标签归纳-歪?是3.1415926吗

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>
0 条回应