H5语义化标签

H5标签有很多个，但有些并不兼容所以用不到。而且H5语义化标签官方的都是说法并没有看到真正的例子，很难理解，今天就去扣一扣这些。
梳理一下兼容可用的H5标签，不兼容的标签会忽略。

article标签

<article>
可用于详情，例如承载博客的内容（csdn就是这样做的，可以打开控制台看）
多用于点击跳转后的内容详情，也可用于评论
</article>

aside标签

<aside>
用于侧边栏。
可用于正文旁的广告栏，或者商城中的人气推荐啥的
</aside>

figure标签

<figure>
<img src="img/1.jpg"/>
<flgcaption>（这是figure标签的标题标签，编辑器应该不会提示）
官方说法： 标签规定独立的流内容（图像、图表、照片、代码等等）
元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。
意思是等于一个插图。
</flgcaption>
</figure>

例三星使用的figure例子（跳转此网页）：

这上面手机只是一个容器，手机显示的图是插图（figure）如果更换内容只用更换插图或者删除插图。

header标签

<header>
网页（文档）的顶部区域
</header>

footer标签

<footer>
网页（文档）的底部区域（页脚）
</footer>

mark标签

<p>asdasdasdasdsa<mark style="background-color: red;">cvxvxc</mark></p>
mark标签效果就象是在书上用荧光笔做记号，默认颜色荧光黄？？？
可以调整背景颜色

nav标签

<nav>
导航链接
</nav>

progress标签

进度条:
<progress value="22" max="100"></progress>

ruby标签与rt、rp

rt是正常显示时显示的文本
rp是不支持ruby元素时显示的内容

<ruby>
	你<rt>ni</rt><rp>不支持的时候我会显示</rp>
	说<rt>shuo</rt>
	啥<rt>sha</rt>
</ruby>

图：

section标签

<section>
<p>Hello Word</p>
</section>
某个区域，都可以不特定，比如新闻推荐部分

time标签

<time datetime="2020-1-15">明天</time>
便于搜索，以机器可读的方式，可以被用户代理添加到用户的日程表中，应该类似于美团订酒店会在你的日历中写进日程