无序列表 ul
并不是所有的并列关系的数据都要使用到ul无序列表，ul他大多数出现在行文中间，也就是在ul的上部，我们一般会有文字说明，如列举一些选项啥的。
所以，对于语义标签，我的态度是:‘“用对" 比“不用” 好，“不用" 比“用错”好。当然了,我觉得有理想的前端工程师还是应该去追求“用对”它们。
所以，有时候用其他元素替换ul，反倒可以减少冗余的标签。
（感觉我就是那种，为了所谓的语义而去大量使用的这种，这种习惯以后要改了）
em强调倾斜和strong强调加粗
em可能常常和strong标签概念混淆，而strong的大量使用，其实原因就是他不倾斜，文本加粗，在日常使用中，这种情况更多一些，即便可以用em，我们也不想多书写一条重置样式的css而去使用em
而em的代表了这个文字是重音，所以从理解上可以这么去读：em会对文本含义有改变作用，类似于读一段话时，里面的重音部分，重点部分。
我吃了一个<em>苹果</em>
我吃了<em>一个</em>苹果两句话，不同的重音意思也不一样。
第一句突出我吃的是苹果
第二句突出我只吃了一个
所以文字的重音其实和strong是完全不一样的。
那么strong又是什么意思？
strong表达的是文本的重要性、严重性和紧急性等
比如：一条重要的通知，一个特别的价格，一段不能忽视的文本，这个作用着重于强调重要性，对文本的理解并不会产生语义上的变化。他更多的是一个作用。
这里说的比较绕，仔细理解下就会明白。
标题和hgroup
h1-h6是不同层级的标题，不同层级的标题按照顺序排列，我们可以生成目录树的结构
<h1>一级目录</h1>
<p>一级目录介绍</p>
<h2>二级目录</h2>
<p>二级目录介绍</p>
<h2>二级目录</h2>
<p>二级目录介绍</p>他会生成如下格式的目录：
一级目录
- 二级目录
- 二级目录
这种是最基本的标题，而当我们的标题出现副标题的时候，其实很多人会使用span啊，这种行内元素，但其实html5已经考虑到这种情况，给了一个hgroup元素。
<hgroup>
<h1>标题</h1>
<h2>副标题</h2>
<p>其他内容</p>
</hgroup>他会生成如下格式目录：
标题 - 副标题
- 其他内容
可以看到，在hgroup中，h1-h6被视为标题的组成部分，而不是独立标题。
为什么会生成这种目录结构
html标准中专门规定了生成目录结构的算法，所以说，即便我们不打算深入，也应该尽量在大的层面上保证这些元素的语义化使用。
section元素
section不仅仅是一个有语义的div标签，虽然大部分时候，我们对他的理解是混淆的，但是它会改变h1-h6的语义。
在section元素中，标题元素h1-h6会下降一级。
也因此，我们只需要section和h1-h6就足以形成文档的树形结构。
<section>
<h1>section的语义</h1>
<p>xxxx</p>
<section>
<h1>语义1</h1>
<p>xxxx</p>
</section>
<section>
<h1>语义2</h1>
<p>xxxx</p>
</section>
</section>生成：
section的语义
- 语义1
- 语义2
section表示的是一个内容的区块，区域，比如内容章节区块，页眉，页脚。
section容易和article混淆，在原则上，能用section就能用article，但是如果情景上article更合适，那么就应该使用article。
那么什么情形使用article更合适？
一篇博客文章的文章部分，包含标题，内容等
论坛的帖子文章
单条评论部分
等等...
article
我们需要明确article内容的独立性，该内容本身独立于上下文，即便是周围所有的内容被移掉，也不会影响该内容的阅读。
在article中，可以存在header和footer，这两个标签语义就是头部和底部。
这种也适合拿来做博客的mini文章卡片展示。
针对 section和artcle，dive，我们可以按照以下原则：
- 内容是否独立完整，是，用article；
- 如果该内容上下文相关，考虑使用section；
- 仅仅是个块内容，使用div。
header和footer
header： 如其名，常出现在头部，表示导航或者介绍性内容
footer： 通常出现在底部，包含一些作者信息，相关链接，版权信息
header和footer-般都是放在article或者body的直接子元素，但是标准中并没有明确规定，footer也 可以和aside, nav, section相关联 ( header不存在关联问题)。
aside
可以理解为侧边栏，实际上aside可以是侧边栏，但不仅仅是侧边栏。
aside中的导航，虽然和header一样都可以有nav，但是，aside的导航一般是一些相关性的导航，最典型的就是博客的侧边栏了，什么相关文章啊，tag标签云啊，这些。
address
footer中一般包含address标签，这是个非常容易被误用的标签，address用于表示文章的联系方式或作者的联系方式，它明确的只关联article和body元素。
HTML 的<address>元素可以让作者为它最近的<article>或者<body>祖先元素提供联系信息。在后一种情况下，它应用于整个文档。
- 当表示一个和联系信息无关的任意的地址时，使用<p>元素而不是<address>元素。
- 这个元素不能包含除了联系信息之外的任何信息，比如出版日期（这应该包含在<time>元素中）。
- 通常，<address>元素可以放在当前section的<footer>元素中，如果存在的话。
time
time标签用于表示时间，方便机器抓取理解
例子：
<time itemprop="date" datetime="2016-08-12">下一周</time> addr
addr用于表示缩写
<abbr title= "World Wide Web ">WWW</ abbr>hr
hr表示的是故事走向的转变或者话题的转变，类似于这篇文章已经完事了，或者讲的内容不同了，就用hr进行分隔。
像那种主标题和副标题之间有横线的，那种就用border实现，因为他只是个样式，内容是没有发生转变。
blockquote、q、cite
cite 用于作品名称的引述，如果某药物名啊，某文章标题啊，这种。
blockquote 用于表示一大段引述的内容，比如你从别人的文章里copy的文字，就应该是使用该标签表示
q 在本质上与 blockquote标签是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用 <blockquote> 标签。
q元素会给文本加上引号
figure、figcaption
用于表示与主文章相关的图像，照片流等，比如文章的说明插图，医学文章的示例图等等这种
figcaption表示的是内容的标题，比如图片的名字，当然也可以没有标题。
<figure>
<img src="https://.... .440px-NeXTcube_ first_ webserver . JPG"/>
<figcaption>The NeXT Computer used by Tim Berners-Lee at CERN. </ figcaption>
</figure>dfn
dfn用于包裹一个被定义的词汇，比如：
<dnf>Internet </dnf>是一个由相互连接的计算机网络组成的全球系统。Internet 是一个被定义的词汇，他表示是一个由相互连接的计算机网络组成的全球系统
<dfn>万维网</dfn>是文档和其他资源的全球集合，它们相互链接万维网也是一个被定义的词汇
也可以简单理解为，如果这个名词我们需要后面进行解释，那么这个名词就需要被dfn包裹。
nav、ul、ol
nav表示的是一个导航，导航里面可以有ul或者ol，而ul和ol的区别就在于内容是否有顺序关系，有顺序使用ol，无顺序ul
无论使用ol还是ul，不要因为默认的视觉的效果，也就是默认样式，而去改变本身的语义而去使用。
比如： 一个本来是有序列表的关系，但是要显示无序列表的样式，我们不能使用ul，而是ol，然后用css去调整默认样式。
pre、samp、code
pre表示格式化文本，不需要浏览器进行格式化，如换行，空格
而pre常常作为格式化文本的容器，里面包裹samp或者code元素
samp： 表示系统的输出，比如 shell 、浏览器控制台等的输出，除了放在pre中使用，本身也可以作为行内高亮使用，虽然默认样式和普通文本没啥区别
code则表示计算机代码，也可以行内表示
其他的一些标签
| 标签 | 说明 |
|---|---|
| small | 之前表示字体缩小的废弃标签，HTML5救回来表示补充评论。 |
| s | 之前表示划线的废弃标签，HTML5救回来表示错误的内容，经常用于电商领 |
| 域表示打折前的价格。 | |
| i | 之前表示斜体的废弃标签，HTML5救回来表示读的时候变调。 |
| b | 之前表示黑体的废弃标签，HTML5救回来表示关键字。 |
| u | 之前表示下划线的废弃标签，HTML .5救回来表示避免歧义的注记。 |
| data | 跟time标签类似，给机器阅读的内容，意义广泛，可以自由定义。 |
| var | 变量，多用于计算机和数学领域。 |
| kbd | 用户输入，表示键盘按键居多。 |
| sub | 下标，多用于化学/物理/数学领域。 |
| sup | 下标，多用于化学/物理/数学领域。 |
| bdi,bdo | 用于多语言混合时指定语言或者书写方向(左到右或者右到左)。 |
| mark | 表示高亮，这里并非指显示为高亮，而是从读者角度希望的高亮(注意与strong的区分） |
| wbr | 表示可以换行的位置，主要是英文等文字不允许单词中间换行，这个标签一般在把多个单词粘成很长的单词时候用。 |
| menu | ul的变体，用于功能菜单时使用。 |
| dl,dd,dt | 一般出现较为严肃的文章，对一些术语进行定义，dt和dd其实并不总是成对出，两者是多对多的关系. |
| main | 整个页面只出现一个，表示页面的主要内容，可以理解为特殊的div |
尽量只用自己熟悉的语义标签，并且只在有把握的场景引入语义标签。这
样，我们才能保证语义标签不被滥用，造成更多的问题。
zizdog
Google Chrome Android说点儿啥～学习了