我转过几个弯绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留喝过几壶酒
不过年少白头道义放胸口
倘若明天之后遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候我叹这天道默悠悠
能否与我一醉方休
又过了几个弯算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休

语义化标签

木灵鱼儿

125 天前重学前端

421 1 0

无序列表 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