html中的标签

html中标签众多，不同的标签有它的语义化用法，也就是说标签有具体的含义，根据标签名称浏览器就能知道内容的意义。

我们在使用标签的时候需要遵循一些原则：

少亦可为多有时候在开发的时候会把文档弄的标记密布，标记只应该对那些需要语义的内容添加标签
别误用元素我们在使用标签的时候不能乱用，如果实在是不知道该用哪个的时候，我们就用通用的标签，div---块级元素，span---内联元素
具体为佳如果有具体的标签能表现出内容的语义就使用具体的标签，不要用通用标签。如果没有找到的话就可以使用通用标签
对用户不要想当然不要以为用户不会关注标签的语义化内容，其实标签的语义分离原则就是为了让HTML文档更易于程序化处理。

在介绍标签之前，首先需要介绍几个概念：虚元素：指只能使用一个标签表示，不能在其中放任何内容。如：元数据元素：用来构建html文档的基本结构，以及就如何处理文档向浏览器提供信息和指示短语元素：是html的基本成分。短语内容定义文本及其包含的标记。短语内容构成段落。流元素：是短语元素的超集，即所有短语元素都是流元素，但并非所有流元素都是短语元素，属于流内容类别的元素通常包含文本或嵌入的内容。

关于标签，我们可以根据其具体的功能，将标签分为以下几类

1. 文档和元数据元素

DOCTYPE

说明	含义
元素	DOCTYPE
元素类型	无
允许具有的父元素	无
局部属性	无
内容	无
标签用法	<!DOCTYPE html>
是否为HTML5新增	否
在HTML5中的变化	比如HTML4中要求要有的DTD已不再使用
习惯样式	无

html

说明	含义
元素	html
元素类型	无
允许具有的父元素	无
局部属性	manifest
内容	head和body元素各一个
标签用法	<!DOCTYPE html> <html><head></head><body></body></html>
是否为HTML5新增	否
在HTML5中的变化	manifest是HTML5中新增的，HTML4中的属性已不再使用
习惯样式	html { display: block; } html:focus { outline: none; }

head

说明	含义
元素	head
元素类型	无
允许具有的父元素	html
局部属性	无
内容	title, style, meta，base, 其中title必须有，其他的可有可无
标签用法	<html><head><meta></meta><title></title><style></style></head></html>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	无

meta

说明	含义
元素	meta
元素类型	元数据
允许具有的父元素	head
局部属性	name, content, charset和http-equiv
内容	无
标签用法	虚元素形式
是否为HTML5新增	否
在HTML5中的变化	charset是html5新增的，在html4中，http-equiv属性可以有多个值，而在html5中已经不行，只有特定的值才行，具体参考meta标签详解。在html4中具有schema属性，但是在html5中已经没有了，现在也很少使用meta标签来定义语言的类型啦。
习惯样式	无

link

说明	含义
元素	link
元素类型	元数据
允许具有的父元素	head, noscript
局部属性	type, href, rel, sizes, media, hreflang
内容	无
标签用法	虚元素类型: <head><link rel="stylesheet" type="text/css" href="style.css"/></head>
是否为HTML5新增	否
在HTML5中的变化	新增加了sizes属性，以前的charset、rev、target属性在html5中已经不能使用
习惯样式	无
link标签是用来指定外部资源的，用来在html文档和外部资源之间建立联系。主要有以下几个作用
1）载入样式表

`<link rel="stylesheet" type="text/css" href="style.css"/>`
载入样式表可以使用rel属性来指定载入的是样式表, type定义的是文档的类型是css文档，href则是css文件的路径。
多个link可以用来载入多个外部资源。

2）为页面定义网站标志我们知道title可以定义网站在标签页上的名称，那么使用link标签就可以定义标签页上的图标，格式为.ico。 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> 定义网站标志可以使用rel属性来指定载入的是图标, type定义的是文档的类型是icon，href则是css文件的路径。 3) 预先加载资源使用预先加载资源可以要求浏览器预先获取预计很快就要用到的资源 <link rel="prefetch" href="/pageTest.html"/> 将rel属性设置成prefetch，并且要求载入页面，为用户点击某个链接以执行其他需要这个页面的操作做好准备。

title

说明	含义
元素	title
元素类型	元数据
允许具有的父元素	head
局部属性	无
内容	文本，主要是文档标题或文档内容言简意赅的说明
标签用法	<head><title>这是html的title内容</title></head>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	title { display: none; }

base base标签主要是用来设置一个基准URL，让HTML文档中的相对链接在此基础上进行解析，即默认的URL和默认目标。在一个文档中，最多使用一个base元素

说明	含义
元素	base
元素类型	元数据
允许具有的父元素	head
局部属性	href, target
内容	无
标签用法	虚元素形式： <head><base href="www.baidu.com" target="_blank" /></head>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	无

style

说明	含义
元素	style
元素类型	无
允许具有的父元素	任何可包含元数据的元素，如head, div, noscript, section, article, aside
局部属性	type, media, scoped
内容	选择器和对应的css代码
标签用法	<head><style> div{ display: block; } </style></head>
是否为HTML5新增	否
在HTML5中的变化	scoped属性为html5新增
习惯样式	无

style可以出现在html文档中的各个部分，一个文档中可以有多个style标签，style具有以下这几个特性： 1）指定样式类型这个特性需要是通过属性type来设置的，比如可以设置成css,less,scss,sass等 2）指定样式范围这个特性可以设置样式是只作用于该元素的父元素和所有兄弟元素还是作用于整个文档，可以根据scoped来设置。在vue项目中经常会用到。 3）指定样式适用的媒体 media熟悉可以用来表明文档在什么情况下应该使用该元素中定义的样式，有点类似于媒体查询，但是和媒体查询的写法不太一样。而且media的属性值主要是针对设备类型来区分，也可以区分的更细致，可以对特定高度，宽度的设备进行差异化定义样式。这点上和媒体查询特别相似。

      <style media="screen"> div{ display: block; } </style>
      <style media="screen AND (max-width: 500px)"> div{ display: block; } </style>

body

说明	含义
元素	body
元素类型	无
允许具有的父元素	html
局部属性	无
内容	标签, 所有短语元素和流元素
标签用法	<html><body><div></div></body></html>
是否为HTML5新增	否
在HTML5中的变化	alink，background, bgcolor, link, marigintop, marginbottom, marginleft, marginright, marginwidth, text和vlink属性已不再使用，这些属性的效果可以使用css实现
习惯样式	body { display: block; margin: 8px; } body:focus { outline: none; }

script

说明	含义
元素	script
元素类型	元数据或短语
允许具有的父元素	可以包含元数据或短语的任何元素，如：body, head, section。其中位于head中就属于元数据，位于body和section中就属于短语
局部属性	src, type, defer, async, charset
内容	脚本语言句。用于导入外部JavaScript库时元素没有内容
标签用法	<html><body><script></script></body></html>
是否为HTML5新增	否
在HTML5中的变化	在html5中type属性可有可无，async属性是新增的，html4中的language属性不再使用
习惯样式	无

script标签在使用的时候具有以下几种特性： 1）定义文档内嵌脚本即可以在script标签里写任何脚本代码。这时候的script可以不写任何属性。

    <script> console.log('2222'); </script>

2）载入外部脚本库和导入外部样式表一样，通过script标签也可以导入外部脚本库。

<script src="/js/test.js"> console.log('2222'); </script>

和link中不同的是，引入外部资源文件的属性的值是src, 而在link中是href。

3）推迟脚本的执行按照正常的流程，浏览器一遇到script标签就会停止解析html文档，转而载入脚本文件并执行其中的脚本，可以使用defer和async属性对脚本的执行方式加以控制，其中defer是告诉浏览器要等页面载入和解析完毕之后才能执行脚本。

  <script src="/js/test.js" defer> console.log('2222'); </script>

4）异步加载脚本文件浏览器在遇到script标签时，会阻断html的解析开始加载脚本文件，为了让解析html文件和加载脚本文件同时执行，就可以使用async属性。但是使用这个属性的时候需要注意一个问题：如果页面中的script载入的脚本文件很多，可能不再按照定义它们的次序执行。因此如果脚本中使用了其他脚本中定义的函数或值，那就不宜使用async属性了。

   <script src="/js/test.js" async> console.log('2222'); </script>

noscript

noscript元素可以用来向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。

 <noscript> console.log('js脚本语言很重要的'); </noscript>

说明	含义
元素	noscript
元素类型	元数据或短语或流
允许具有的父元素	任何可以包含元数据或短语或流的元素：如head, body, section
局部属性	无
内容	短语元素或流元素
标签用法	<noscript></noscript>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	无

特别说明：以下各类元素都具有公共属性，也就是全局属性：id, class, style, title, accesskey, contenteditable, contextmenu, dir, draggable, dropzone, hidden, lang, spellcheck, tabindex,

文本元素 a 说明 | 含义 | --- | --- | 元素 | a 元素类型 | 包含短语内容时被视为短语元素，包含流内容时被视为流元素允许具有的父元素 | 任何可以包含短语元素和流元素的元素，如：div, body, span 局部属性 | href, target, hreflang, media, rel 内容 | 短语内容和流元素标签用法 | <a href="www.baidu.com" target="_blank">百度一下</a> 是否为HTML5新增 | 否在HTML5中的变化 | 该元素现在既能包含短语元素又能包含流元素。meta标签是新增的，html4中已经丢弃的target现在又恢复使用了。在html5中，不含href属性的a标签作为链接的占位符使用，原来的id, coords, shape, urn, charset，methods, rev属性现已不再使用。习惯样式 | a:link, a: visited { color: blue; text-decoration: underline; cursor: suto; } a:link, a: visited { color: blue; }

a标签主要就是为了生成链接。

可以生成指向外部的超链接：href="www.baidu.com"
可以使用相对URL：href="page1.html"
可以生成内部链接，也就是在页面中创建锚点，点击可以跳转到指定的地方：在指定位置的元素上添加id，然后在a标签上添加属性href="#id"
设定浏览器的环境：指定以某种方式打开超链接：

_blank: 重新打开一个空白的标签页
_parent: 在父窗组(frameset)中打开文档
_self: 在当前窗口中打开文档（默认行为）
_top: 在顶层窗口中打开文档

span

说明	含义
元素	span
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	短语内容
标签用法	<span> </span>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	无

mark

说明	含义
元素	mark
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	短语内容
标签用法	<mark>需要标记的内容</mark>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	mark { background-color: yellow; color: black; }

ins

说明	含义
元素	ins
元素类型	身为短语元素的子元素时是短语元素，身为流元素的子元素时是流元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	短语内容
标签用法	<ins>文档中添加的文字 </ins>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	ins { text-decoration: underline; }

del

说明	含义
元素	del
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	短语内容
标签用法	<del>文档中删除（更正）的文字</del>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	del { text-decoration: line-through; }

说明	含义
元素	b
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	短语内容
标签用法	<b></b>
是否为HTML5新增	否
在HTML5中的变化	在html4中b元素只有呈现性质的含义。在html5中，其语义如前所述，其呈现性的一面已被破降格为习惯样式
习惯样式	b { font-weight: bolder; }

特别说明：b标签是用来标记一段文字，但并不代表特别的强调或重要性，只是它的开始标签和结束标签之间的内容会从周围内容中凸显出来。

说明	含义
元素	em
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	短语内容
标签用法	<em></em>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式 em { font-style: italic; }
em标签是用来强调一段文字的。以斜体的样式呈现。
样例：

i i标签表示一段文字与周围内容有本质区别，它的样式表现和em一样，但是它没有强调的语义。

说明	含义
元素	i
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	短语内容
标签用法	<i>这是斜体内容</i>
是否为HTML5新增	否
在HTML5中的变化	在html4中b元素只有呈现性质的含义。在html5中，其语义如前所述，其呈现性的一面已被破降格为习惯样式
习惯样式	i { font-style: italic; }

s标签表示一段文字不准确，样式表现为在内容上添加一条删除线。

说明	含义
元素	s
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	短语内容
标签用法	<s>这是斜体内容 </s>
是否为HTML5新增	否
在HTML5中的变化	在html4中b元素只有呈现性质的含义。在html5中，其语义如前所述，其呈现性的一面已被破降格为习惯样式
习惯样式	s { text-decoration: line-through; }

strong

strong表示强调一段内容，样式表现为加粗，它和b类似，但是b没有强调的语义在里面

说明	含义
元素	strong
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	短语内容
标签用法	<strong>这是需要强调的文本内容</strong>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	strong { font-weight: bolder; }

u表示让一段文字从周围内容中凸显出来，样式表现为内容添加下划线，没有强调其重要性的语义

说明	含义
元素	u
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	短语内容
标签用法	<u>这是需要添加下划线的文本内容</u>
是否为HTML5新增	否
在HTML5中的变化	在html4中b元素只有呈现性质的含义。在html5中，其语义如前所述，其呈现性的一面已被破降格为习惯样式
习惯样式	u { text-decoration: underline; }

说明	含义
元素	br
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	无
标签用法	虚元素形式：<div>这是第一行内容<br />这是第二行内容</div>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	让后续内容从新行开始显示（无法用新行办到）

wbr

wbr是html5新增的，用来表示长超过当前浏览器窗口的内容适合在此换行，究竟换不换行由浏览器说了算。这是一种对换行的建议。

说明	含义
元素	wbr
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	无
标签用法	虚元素形式：<div>这是第一行内容<wbr />这是第二行内容</div>
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	如果需要换行，则让后续内容从新行开始显示（无法用新行办到）

small

说明	含义
元素	small
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	短语内容
标签用法	<small>这是小号字体内容</small>
是否为HTML5新增	否
在HTML5中的变化	在html4中b元素只有呈现性质的含义。在html5中，其语义如前所述，其呈现性的一面已被破降格为习惯样式
习惯样式	small { font-size: smaller; }

sub

说明	含义
元素	sub
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	短语内容
标签用法	<span>给内容添加下标<sub>下标值</sub></span>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	sub { vertical-align: sub; font-size: smaller; }

sup

说明	含义
元素	sup
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	短语内容
标签用法	<span>给内容添加上标<sup>上标值</sup></span>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	sup { vertical-align: super; font-size: smaller; }

以上这些元素大概是我们在平时开发中用到的比较多的元素，下面介绍的元素就是用的不多的元素啦，我们大概看一下每个元素的作用输入输出元素：

元素	说明	习惯样式
code	表示计算机代码片段	code { font-family: monospace; }
var	在编程环境中表示变量，也可表示一个供读者在想象中插入一个指定值的占位符	var { font-style: italic; }
samp	表示计算机系统或程序的输出	samp { font-family: monospace; }
kbd	表示用户输入	kbd { font-family: monospace; }

使用标题引用、引文/定义和缩写元素：

abbr: 缩写

说明	含义
元素	abbr
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无, 但全局属性title具有特殊含义
内容	短语内容
标签用法	<span>内容<abbr title="详细内容">缩写内容</abbr></span>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	无

dfn: 表示定义中的术语，也即在用来解释一个词（或短语）的含义的句子中的词（或短语）

说明	含义
元素	dfn
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无, 但全局属性title具有特殊含义
内容	短语内容或abbr标签
标签用法	<span>内容<dfn title="解释的内容">缩写内容</dfn></span>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	无

q: 表示引用自别处的内容

说明	含义
元素	q
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	cite
内容	短语内容
标签用法	<span>内容<q cite="www.baidu.com">引用内容</q></span>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	q { display: inline; } q: before { content: open-quoto; } q: after { content: close-quoto; }

cite: 表示引用其他作品的标题

说明	含义
元素	cite
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	短语内容
标签用法	<span>内容<cite>引用内容</cite></span>
是否为HTML5新增	否
在HTML5中的变化	cite不能再用来引用人名，只能用于作品标题
习惯样式	cite { font-style: italic; }

使用语言元素 ruby: 注音符号

说明	含义
元素	ruby
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	短语内容，rt和rp元素
标签用法	<span>内容<ruby>每<rp>(</rp<rt>mei</rt><rp>)</rp></ruby></span>
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	ruby { text-indent: 0; }

bdo: 用来撇开默认的文字方向设置，明确地指定其内容中文字的方向。

说明	含义
元素	bdo
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无，但必须具有全局属性dir
内容	短语内容
标签用法	<span>内容<bdo dir="ltr">每一天都是快乐的</bdo></span>
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	无

bdi: 表示一段出于文字方向考虑而与其他内容隔离开来的文字（比如阿拉伯文）。

说明	含义
元素	bdi
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	无
内容	短语内容
标签用法	<span>内容 <bdi>这是需要会改变文字方向的文字 </bdi> </span>
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	无

time: 表示时间或日期。

说明	含义
元素	time
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	datetime, pubdate
内容	短语内容
标签用法	<span>内容 <time datetime="15:00">3 o'clock </time> </span>
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	无

对内容分组 ol 说明 | 含义 | --- | --- | 元素 | ol 元素类型 | 流元素允许具有的父元素 | 任何能包含流元素的元素局部属性 | start, reversed, type 内容 | 0个或多个li 标签用法 | <ol> <li>1 </li> <li>2 </li> <li>3 </li> </ol> 是否为HTML5新增 | 否在HTML5中的变化 | reversed是HTML5中新增的，HTML4中不赞成的start和type属性在html5中恢复，compact属性不再使用习惯样式 | ol {display: block; list-style-type: decimal;margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; padding-start: 40px;}

说明	含义
元素	li
元素类型	无
允许具有的父元素	ul, ol,menu
局部属性	value（仅适用于父元素为ol时）
内容	流内容
标签用法	<li>项目内容</>
是否为HTML5新增	否
在HTML5中的变化	html4中不赞成使用的value属性在html5中恢复
习惯样式	li{display: list-item;}

说明	含义
元素	ul
元素类型	流元素
允许具有的父元素	包含流元素的一切元素
局部属性	无
内容	0个或多个li
标签用法	<ul> <li>1 </li> <li>2 </li> <li>3 </li> </ul>
是否为HTML5新增	否
在HTML5中的变化	type和compact属性已不再使用
习惯样式	ol {display: block; list-style-type: disc;margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0; padding-start: 40px;}

自动生成列表元素：dl, dt, dd

元素	说明	含义
dl	表示说明列表	dl {display: block; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0;}
dt	表示说明列表中的术语	dt {display: block;}
dd	表示说明列表中的定义	dd {display: block; margin-start: 40px;}

div

说明	含义
元素	div
元素类型	流元素
允许具有的父元素	能包含任何流元素的元素
局部属性	无
内容	流内容
标签用法	<div>这是div里的内容<.div>
是否为HTML5新增	否
在HTML5中的变化	无, 不过在使用这个元素之前考虑一下新增的article和section
习惯样式	div {display: block;}

说明	含义
元素	p
元素类型	流元素
允许具有的父元素	能够包含流元素的元素
局部属性	无
内容	短语内容
标签用法	<p>这是一个段落</p>
是否为HTML5新增	否
在HTML5中的变化	align属性在HTML5中已不再使用
习惯样式	p {display: block; margin-before: 1em; margin-after: 1em; margin-start: 0; margin-end: 0;}

说明	含义
元素	hr
元素类型	流元素
允许具有的父元素	包含流元素的一切元素
局部属性	无
内容	无
标签用法	虚元素<hr/>
是否为HTML5新增	否
在HTML5中的变化	在HTML4中hr只有呈现上的含义，但是在html5中，这种含义被降级为样式。此外，align,width,noshade,size,color属性在html5中已经不再使用
习惯样式	hr {display: block;margin-start: auto; margin-end: auto; margin-before: 0.5em; margin-after: 0.5em; border-style: inset; border-width: 1px;}

blockquote 表示引用自他处的一片内容。

说明	含义
元素	blockquote
元素类型	流元素
允许具有的父元素	包含流元素的一切元素
局部属性	cite
内容	短语内容
标签用法	<blockquote cite="www.baidu.com">百度一下，你就知道</blockquote>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	blockquote {display: block; margin-before: 1em; margin-afer: 1em; margin-start: 40px; margin-end: 40px;}

figure

figure是用来定义插图的元素，通常作为一个整体被文档的主体引用，把它从文档主体中删除也不会影响文档的意思。

说明	含义
元素	figure
元素类型	流
允许具有的父元素	任何可以包含流元素的元素
局部属性	无
内容	流内容，还可以包含一个figcaption元素
标签用法	<figure><figcaption>first one, open your book</figcaption></figure>
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	figure {display: block; margin-before: 1em; margin-after: 1em; margin-start: 40px; margin-end: 40px;}

figcaption

说明	含义
元素	figcaption
元素类型	无
允许具有的父元素	figure
局部属性	无
内容	流内容
标签用法	<figcaption>文本内容</figcaption>
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	figcaption { display: block;}

pre

说明	含义
元素	pre
元素类型	流元素
允许具有的父元素	能包含流元素的元素
局部属性	无
内容	短语内容
标签用法	<pre>当你老了叶芝当你老了，头发白了</pre>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	pre {display: block; font-family: monospace; white-space: pre; margin: 1em 0;}

划分内容 address 说明 | 含义 | --- | --- | 元素 | address 元素类型 | 流元素允许具有的父元素 | 任何包含流元素的元素局部属性 | 无内容 | 流内容标签用法 | <address>文档的联系信息</address> 是否为HTML5新增 | 是在HTML5中的变化 | 否习惯样式 | address {display: block}

details

说明	含义
元素	details
元素类型	流元素
允许具有的父元素	任何包含流元素的元素
局部属性	open
内容	流内容以及一个可有可无的summary元素
标签用法	<details>文档详情</details>
是否为HTML5新增	是
在HTML5中的变化	否
习惯样式	details {display: block}

summary

说明	含义
元素	summary
元素类型	流元素
允许具有的父元素	details元素
局部属性	无
内容	流内容以及一个可有可无的summar短语内容
标签用法	<summary>文档详情的说明标签</summary>
是否为HTML5新增	是
在HTML5中的变化	否
习惯样式	summary {display: block}

article

说明	含义
元素	article
元素类型	流元素
允许具有的父元素	任何包含流元素的元素,但是不能是address的后代元素
局部属性	无
内容	流内容和style元素
标签用法	<article>章节内容</articlle>
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	article {display: block}

aside

说明	含义
元素	aside
元素类型	流元素
允许具有的父元素	任何包含流元素的元素,但是不能是address的后代元素
局部属性	无
内容	流内容和style元素
标签用法	<aside>侧边栏</aside>
是否为HTML5新增	是
在HTML5中的变化	否
习惯样式	aside {display: block}

nav

说明	含义
元素	nav
元素类型	流元素
允许具有的父元素	任何包含流元素的元素,但是不能是address的后代元素
局部属性	无
内容	流内容
标签用法	<nav>导航内容</nav>
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	nav {display: block}

header

说明	含义
元素	header
元素类型	流元素
允许具有的父元素	任何包含流元素的元素,但header元素不能是address、footer和其他header元素的后代元素
局部属性	无
内容	流内容
标签用法	<header>头部内容</header>
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	header {display: block}

footer

说明	含义
元素	footer
元素类型	流元素
允许具有的父元素	任何包含流元素的元素,但footer元素不能是address、headre和其他footer元素的后代
局部属性	无
内容	流内容
标签用法	<footer>头部内容</footer>
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	footer {display: block}

section

说明	含义
元素	section
元素类型	流元素
允许具有的父元素	任何可以包含流元素的元素,但不能是address元素的后代元素
局部属性	无
内容	流内容和style标签
标签用法	<section>这是某节的内容</section>
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	section {display: block;}

h1~h6

说明	含义
元素	h1~h6
元素类型	流元素
允许具有的父元素	hgroup元素或任何可以包含流元素的元素。但不能是address元素的后代元素
局部属性	无
内容	流内容
标签用法	<h1>一级标题</>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	见下表

h1~h6各级标题的习惯性样式

元素	习惯样式
h1	h1 {display: block; font-size: 2em; margin-before: 0.67em; margin-after: 0.67em; margin-start: 0; margin-end: 0; font-weight: bold;}
h2	h2 {display: block; font-size: 1.5em; margin-before: 0.67em; margin-after: 0.67em; margin-start: 0; margin-end: 0; font-weight: bold;}
h3	h3 {display: block; font-size: 1.17em; margin-before: 0.67em; margin-after: 0.67em; margin-start: 0; margin-end: 0; font-weight: bold;}
h4	h4 {display: block; font-size: 1.33em; margin-before: 0.67em; margin-after: 0.67em; margin-start: 0; margin-end: 0; font-weight: bold;}
h5	h5 {display: block; font-size: 0.83em; margin-before: 0.67em; margin-after: 0.67em; margin-start: 0; margin-end: 0; font-weight: bold;}
h6	h6 {display: block; font-size: 0.67em; margin-before: 0.67em; margin-after: 0.67em; margin-start: 0; margin-end: 0; font-weight: bold;}

hgroup

hgroup将几个标题作为一个整体处理。

说明	含义
元素	hgroup
元素类型	流元素
允许具有的父元素	任何包含流元素的元素
局部属性	无
内容	一个或多个元素（h1~h6）
标签用法	<hgroup><h1>一级标题</h1></hgroup>
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	hgroup { display: block;}

制表元素 table 说明 | 含义 | --- | --- | 元素 | table 元素类型 | 流元素允许具有的父元素 | 任何可以包含流元素的元素局部属性 | border 内容 | thead,tbody, tfoot, caption, colgroup, tr,th,td 标签用法 | <table><tr><td>表格</td></tr></table> 是否为HTML5新增 | 否在HTML5中的变化 | summary, align, width, bgcolor, cellpadding, cellspacing, frame和rules属性已不再使用，其功能由css来实现。border属性的值必须设置为1.边框的粗细必须用css设置。习惯样式 | table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray;}

thead

说明	含义
元素	thead
元素类型	无
允许具有的父元素	table
局部属性	无
内容	0个或多个tr
标签用法	<thead><tr><th>表头单元格内容</th></tr><thead>
是否为HTML5新增	无
在HTML5中的变化	align, char, charoff和valign属性已不再使用
习惯样式	thead {display: table-row-group; vertical-align: inherit; border-color: inherit;}

tbody

说明	含义
元素	tbody
元素类型	无
允许具有的父元素	table
局部属性	无
内容	0个或多个tr
标签用法	<tbody><tr><td>单元格内容</td></tr><tbody>
是否为HTML5新增	否
在HTML5中的变化	align, char, charoff和valign属性已不再使用
习惯样式	tbody {display: table-row-group; vertical-align: inherit; border-color: inherit;}

tfoot

说明	含义
元素	tfoot
元素类型	无
允许具有的父元素	table
局部属性	无
内容	0个或多个tr
标签用法	<tfoot><tr><td>表脚单元格内容</td></tr><tfoot>
是否为HTML5新增	否
在HTML5中的变化	tfoot元素现在出现在tbody或tr元素前后都可以。在html4，它只能出现在这些元素之前。align, char, charoff和valign属性已不再使用
习惯样式	tfoot {display: table-row-group; vertical-align: inherit; border-color: inherit;}

说明	含义
元素	tr
元素类型	流元素
允许具有的父元素	table, thead, tbody, tfoot
局部属性	无
内容	一个或多个th, td
标签用法	<tr><td>单元格内容</td></tr>
是否为HTML5新增	否
在HTML5中的变化	align, char, charoff, valign和bgcolor已不再使用，其功能改用css实现
习惯样式	tr {display: table-row; vertical-align: inherit; border-color: inherit; }

说明	含义
元素	th
元素类型	流元素
允许具有的父元素	thead
局部属性	colspan, rowspan,headers,scope
内容	流内容
标签用法	<th>表头单元格内容</th>
是否为HTML5新增	否
在HTML5中的变化	scope属性已不再使用。abbr, align, width, char, charoff, valign, bgcolor, height和nowarp属性已不再使用，其功能由css实现。
习惯样式	th {display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center;}

说明	含义
元素	td
元素类型	流元素
允许具有的父元素	tr
局部属性	colspan, rowspan,headers
内容	流内容
标签用法	<td>单元格内容</td>
是否为HTML5新增	否
在HTML5中的变化	scope属性已不再使用。abbr, align, width, char, charoff, valign, bgcolor, height和nowarp属性已不再使用，其功能由css实现。
习惯样式	td {display: table-cell; vertical-align: inherit;}

col

说明	含义
元素	col
元素类型	无
允许具有的父元素	colgroup
局部属性	span
内容	无
标签用法	<col />
是否为HTML5新增	否
在HTML5中的变化	align,width,char,charoff和valign属性已不再使用
习惯样式	col {display: table-column;}

colgroup

说明	含义
元素	colgroup
元素类型	无
允许具有的父元素	table
局部属性	span
内容	0个或多个col元素（只有在未设置span属性时才可以）
标签用法	<colgroup><col>列</col></colgroup>
是否为HTML5新增	否
在HTML5中的变化	width，char, charoff和valign属性已不再使用
习惯样式	colgroup {display: table-column-group;}

caption

说明	含义
元素	caption
元素类型	无
允许具有的父元素	table
局部属性	无
内容	流内容,但不能是table元素
标签用法	<caption>表格标题</caption>
是否为HTML5新增	否
在HTML5中的变化	align属性已不再使用
习惯样式	caption {display: table-caption; text-align: center;}

创建表单元素 form 说明 | 含义 | --- | --- | 元素 | form 元素类型 | 流元素允许具有的父元素 | 任何能包含流元素的元素,但form元素不能是其他form元素的后代元素局部属性 | action, method, enctype, name, accept-charset, novaliate, target和autocomplete 内容 | 流内容（但主要是label和input元素）标签用法 | <form></form> 是否为HTML5新增 | 否在HTML5中的变化 | novaliate和autocomplete属性是在html5中新增的习惯样式 | form { display: block; margin-top: 0em; }

配置表单：

配置action属性 action属性说明了表单提交时浏览器应该把从用户收集到的数据发送到什么地方。可以是相对路径，也可以是绝对路径。

<form action="/form"></form>

配置http方法属性 method属性定义了表单内容发送到服务器的HTTP方法。允许的值有get和post。默认值是get。

<form action="/form" method="post"></form>

配置数据编码 enctype属性确定了浏览器对发送服务器的数据采用的编码方式，主要有以下几种情况值 | 说明 | --- | --- | application/x-www-form-urlencoded | 默认值。它不能用来将文件上传到服务器。 multipart/form-data | 该编码方式用于将文件上传到服务器 text/plain | 该编码方式因浏览器差异会有些不一样
控制表单的自动完成功能 autocomplete属性会帮助用户记录下他的输入，下次再遇到类似的表单可以自动使用这些数据帮用户填写。这个属性有两个值：on和off，默认是on。input元素也有这个属性。form上的这个属性是设置input的默认行为方式，如果在input上重新设置会覆盖掉form上的属性。

<form action="/form" method="post" autocomplete="on"></form>

指定表单反馈信息的目标显示位置默认情况下浏览器会用提交表单后服务器反馈的信息替换表单所在的原页面。target属性可以改变这个。他的属性值和a标签的一样，一共有_blank, _parent, _selef, _top.
设置表单名称 name属性可以设置表单的名称

<form action="/form" method="post" autocomplete="on" name="fruitvote"></form>

在表单中添加说明标签

方便用户在输入的时候能明确知道自己应该输入什么值。可以通过label来设置 label

说明	含义
元素	label
元素类型	短语元素
允许具有的父元素	任何可以包含短语内容的元素
局部属性	for, form
内容	短语内容
标签用法	<label>姓名：</label>
是否为HTML5新增	否
在HTML5中的变化	form属性是html5新增的
习惯样式	label { cursor: default;}

自动聚焦到某个input元素 在input元素上设置autofocus属性就可以了, 如果同时有好几个元素都设置了这个属性，浏览器将会自动定位到最后一个元素上。

<input autofucus />

禁用单个input元素 使用disabled属性就可以

<input disabled />

input

说明	含义
元素	input
元素类型	无
允许具有的父元素	任何可以包含input的流元素，一般是form元素
局部属性	type, autofocus, disabled, size, value, placeholder, maxlength等
内容	无
标签用法	虚元素
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	input {display: inline-block;}

input的具体属性

input在使用过程中有许多种类型，这个只列举了一个汇总，不展开说明，想要了解具体内容可以查看W3C官方文档。

button

说明	含义
元素	button
元素类型	流元素
允许具有的父元素	任何包含流元素的元素
局部属性	type
内容	流内容
标签用法	<button>点击我</button>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	button {display: block;}

button的type属性一共有三个值： reset：重置表单 submit: 提交表单 button: 一般按钮，可以自定义

select

说明	含义
元素	select
元素类型	短语内容
允许具有的父元素	任何可以包含短语内容的元素
局部属性	name, disabled, form, size, multiple, autofocus, required
内容	option和optgroup元素
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	form, autofucus, required属性是HTML5新增的
习惯样式	无

option

说明	含义
元素	option
元素类型	无
允许具有的父元素	datalist,select, optgroup
局部属性	disabled, selected, label, value
内容	字符数据
标签用法	虚元素形式，或开始标签和结束标签一起使用
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	无

optgroup

说明	含义
元素	optgroup
元素类型	无
允许具有的父元素	select元素
局部属性	label， disabled
内容	option
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	无

output: 表示计算的结果

说明	含义
元素	output
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	name, form, for
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	output {display: inline;}

textarea

说明	含义
元素	textarea
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素，但通常是form元素
局部属性	name, disabled, form, readonly, maxlength, autofocus, required, placeholder, dirname, rows, wrap, cols
内容	文本
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	form, autofocus, required, placeholder和wrap属性是html5新增的
习惯样式	无

legend：为fieldlist元素添加说明标签

说明	含义
元素	legend
元素类型	无
允许具有的父元素	fieldlist
局部属性	无
内容	短语内容
标签用法	<legend>标签</legend>
是否为HTML5新增	否
在HTML5中的变化	无
习惯样式	legend {display: block; padding-start: 2px; padding-end: 2px; border: none;}

datalist

说明	含义
元素	datalist
元素类型	短语
允许具有的父元素	任何可以包含短语的元素
局部属性	无
内容	option元素和短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	无

fieldlist: 对表单元素编组

说明	含义
元素	fieldlist
元素类型	流元素
允许具有的父元素	任何能包含流元素的元素，通常是form元素的后代元素
局部属性	name, form, disabled
内容	流内容, 在开头位置可以包含一个legend元素
标签用法	<fieldlist></fieldlist>
是否为HTML5新增	否
在HTML5中的变化	form属性是html5中新增的
习惯样式	fieldlist {display: block; margin-start: 2px; margin-end: 2px; padding-before: 0.35em; padding-after: 0.625em; padding-start: 0.75em; padding-end: 0.75em; border: 2px groove;}

特别说明： fieldlist的disabled属性可以将所有的input的disabled属性设置成true.

keygen: 生成公钥、私有密钥对

说明	含义
元素	keygen
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	challenge, keytype, autofocus, name, disabled和form
内容	无
标签用法	虚元素
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	无

嵌入内容 img 说明 | 含义 | --- | --- | 元素 | img 元素类型 | 短语元素允许具有的父元素 | 任何可以包含短语元素的元素局部属性 | src, alt, height, width, usemap, ismap 内容 | 无标签用法 | 虚元素形式是否为HTML5新增 | 否在HTML5中的变化 | border, longdesc,name, align, hspace和vspace属性在HTML5已被放弃习惯样式 | 无

iframe

说明	含义
元素	iframe
元素类型	短语元素
允许具有的父元素	任何可以包含短语元素的元素
局部属性	src, srcdoc, name, width, height, sandbox, seamless
内容	字符数据
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	sandbox和seamless属性是html5新增的，longdesc, align, allowtransparency, frameborder, marginheight, marginwidth和scrolling属性已被废弃
习惯样式	iframe {border: 2px inset}

map：创建客户端分区响应图

说明	含义
元素	map
元素类型	短语元素或流元素
允许具有的父元素	任何可以包含短语元素或流元素的元素
局部属性	name
内容	一个或多个area
标签用法	开始标签和结束标签
是否为HTML5新增	否
在HTML5中的变化	如果使用了id属性，他的值必须和name属性形同
习惯样式	无

area

说明	含义
元素	area
元素类型	短语元素
允许具有的父元素	map
局部属性	alt, href, target, rel, media, hreflang,type,shape,coords
内容	无
标签用法	虚元素
是否为HTML5新增	否
在HTML5中的变化	rel, media和hreflang属性是html5中新增的, nohref属性被废弃
习惯样式	area { display: none;}

progress: 用来表现某项人物逐渐完成的过程

说明	含义
元素	progress
元素类型	短语
允许具有的父元素	任何可以包含短语内容的元素
局部属性	value, max, form
内容	短语内容
标签用法	开始标签和结束标签
是否为HTML5新增	是
在HTML5中的变化	无
习惯样式	无

以上就是对html5中常见标签的一些特性进行了简单的说明，下面是某些标签的具体演示：

源码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>html标签</title>
</head>
<body>
  <a href="www.baidu.com" target="_blank">百度一下</a><br />
  <mark>需要标记的内容</mark><br />
  <ins>文档中添加的文字</ins><br />
  <del>文档中删除（更正）的文字</del><br />
  <b>标记文字</b><br />
  <em>斜体强调的文字</em><br />
  <i>这是斜体内容</i><br />
  <s>这是删除内容</s><br />
  <strong>这是需要强调的文本内容</strong><br />
  <u>这是需要添加下划线的文本内容</u><br />
  <small>这是小号字体内容</small><br />
  <span>给内容添加下标<sub>下标值</sub></span><br />
  <span>给内容添加上标<sup>上标值</sup></span><br />
  <span>内容<abbr title="详细内容">缩写内容</abbr></span><br />
  <span>内容<dfn title="解释的内容">缩写内容</dfn></span><br />
  <span>内容<q cite="www.baidu.com">引用内容</q></span><br />
  <span>内容<cite>引用内容</cite></span><br />
  <span>内容<ruby>每<rp>(</rp><rt>mei</rt><rp>)</rp></ruby></span><br />
  <span>内容<bdo dir="ltr">每一天都是快乐的</bdo></span><br />
  <span>内容<bdi>这是需要会改变文字方向的文字</bdi></span><br />
  <span>内容 <time datetime="15:00">3 o'clock </time> </span><br />
  <pre>
    当你老了
          叶芝
    当你老了，头发白了
  </pre><br />
  <blockquote cite="www.baidu.com">百度一下，你就知道</blockquote><br />
  <ol start="2" type="a"><li>1</li><li>2</li><li>3</li></ol>
  <ul><li>1</li><li>2</li><li>3</li></ul>
  <dl>
    <dt>水果</dt>
    <dd>草莓</dd>
    <dd>葡萄</dd>
    <dt>奶制品</dt>
    <dd>酸奶</dd>
    <dd>鲜牛奶</dd>
  </dl>
  <figure>
    <figcaption>第一课：小蝌蚪找妈妈</figcaption>
    小蝌蚪游啊游，终于找到了他的妈妈，原来是一只青蛙呀！
  </figure>
  <hgroup>
    <h1>Fruits I Like</h1>
    <h2>How I Learned to Love Citrus</h2>
  </hgroup>
  <section>
    <hgroup>
      <h1>Fruits I Like</h1>
      <h2>How I Learned to Love Citrus</h2>
    </hgroup>
  </section>
  <header>
    <address>This is a comment.</address>
    <nav>
      <ul><li>1</li><li>2</li><li>3</li></ul>
    </nav>
    <hgroup>
      <h1>Things I Like</h1>
      <h2>by lucy</h2>
    </hgroup>
  </header>
  <aside>
    <ul><li>1</li><li>2</li><li>3</li></ul>
  </aside>
  <article>
    <hgroup>
      <h1>Things I Like</h1>
      <h2>by lucy</h2>
    </hgroup>
    <section>
      <p>I like apples, bannas, oranges.</p>
    </section>
    <details>
      <summary>These are my favorite.</summary>
    </details>
  </article>
  <footer>Thanks for reading.</footer>
  <table border="1">
    <caption>Result of the 2011 Fruit Survey</caption>
    <colgroup id="colgroup1">
      <col id="col1" span="2"/>
      <col id="col3" />
    </colgroup>
    <colgroup id="colgroup2">
      <thead>
        <tr>
          <th>Rank</th>
          <th>Name</th>
          <th>Color</th>
          <th colspan="2">Size & Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Favorite:</th>
          <td>Apples</td>
          <td>Green</td>
          <td>Medium</td>
          <td>500</td>
        </tr>
        <tr>
          <th>Favorite:</th>
          <td>Apples</td>
          <td>Green</td>
          <td>Medium</td>
          <td>500</td>
        </tr>
        <tr>
          <th>Favorite: </th>
          <td>Oranges</td>
          <td colspan="2" rowspan="2">Oranges are great</td>
          <td>203</td>
        </tr>
        <tr>
          <th rowspan="2">Joint 4th:</th>
          <td>Cherries</td>
          <td rowspan="2">75</td>
        </tr>
        <tr>
          <td>Pineapple</td>
          <td>Brown</td>
          <td>Very Large</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">2011 Data</td>
        </tr>
      </tfoot>
    </colgroup>
  </table>
</body>
</html>

效果：

文本效果：
列表效果：
结构元素效果
表格效果：

1651549133(1).png

一文理解html标签

html中的标签

我们在使用标签的时候需要遵循一些原则：

关于标签，我们可以根据其具体的功能，将标签分为以下几类

1. 文档和元数据元素