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>
便于搜索,以机器可读的方式,可以被用户代理添加到用户的日程表中,应该类似于美团订酒店会在你的日历中写进日程