1、<wbr></wbr>安全换行,分割过长单词为几部分,当窗口宽度缩小时,过长单词会一部分一部分的换行
2、<sup>、<sub>分别为添加上标和下标
eg. html<sub>5</sub> //下标 ; html<sup>5</sup> //上标
3、<ruby><rp></rp><rt></rt></ruby>可以使一些文字位于另一些文字的上方,例如可以实现在汉字上加汉语拼音
4、<ol><li></li></ol>有序链表,可以设置列表项从多大值开始,方法有以下两种:
·1、设置<ol>中的start属性,例如<ol start='4'></ol>,那么列表项的数字将会从4开始。
·2、设置<li>中的value属性,例如<li value='7'></li>,那么该列表项的数字将会为7,且后面的项的数字将会从7开始向后排序。
5、<!--HTML5-->
这两个元素一般用于图片的布局。
<figure>
<figcaption>这是图片</figcaption>
<img src=""/>
</figure>
6、在一个HTML5的页面中,有一些布局元素,
<body>
<header>公司名称、logo等 //头部
<nav>导航区</nav>
</header>
<section>这是文档的主题部分</section>
<article> //博客
<header></header>
<section></section>
<footer>
<address>地址信息</address>
</footer>
</article>
<aside></aside> //注释,主体的左边,例如浏览记录,列表目录一类,参照CSDN
<footer>版权声明、公司链接 //尾部
<address>地址信息</address>
</footer>
</body>
2、<sup>、<sub>分别为添加上标和下标
eg. html<sub>5</sub> //下标 ; html<sup>5</sup> //上标
3、<ruby><rp></rp><rt></rt></ruby>可以使一些文字位于另一些文字的上方,例如可以实现在汉字上加汉语拼音
4、<ol><li></li></ol>有序链表,可以设置列表项从多大值开始,方法有以下两种:
·1、设置<ol>中的start属性,例如<ol start='4'></ol>,那么列表项的数字将会从4开始。
·2、设置<li>中的value属性,例如<li value='7'></li>,那么该列表项的数字将会为7,且后面的项的数字将会从7开始向后排序。
5、<!--HTML5-->
这两个元素一般用于图片的布局。
<figure>
<figcaption>这是图片</figcaption>
<img src=""/>
</figure>
6、在一个HTML5的页面中,有一些布局元素,
<body>
<header>公司名称、logo等 //头部
<nav>导航区</nav>
</header>
<section>这是文档的主题部分</section>
<article> //博客
<header></header>
<section></section>
<footer>
<address>地址信息</address>
</footer>
</article>
按照HTML5大纲的要求,<body>、<section>和<nav>都是需要标题的,即在这三个标签中,需要有<h1>——<h6>标签
可以通过HTML5自带的大纲服务器查看页面大纲符不符合要求,地址:https://gsnedders.html5.org/outliner
一个section通常由内容和
标题组成,通常不推荐那些没有标题的内容用section,在
HTML 5 Outliner这个网站可以检测没有标题的section,section的作用是对页面上的内容进行分块,如各个有标题的版块、功能区或对文章进行分段,不要与有自己完整、独立内容的article混淆。
拿报纸举个例子:
一份或一张报纸有很多个版块,有头版、国际时事版块、体育版块、娱乐版块、文学版块等等,像这种有版块标题的、内容属于一类的版块就可以用section包起来。
然后在各个版块下面,又有很多文章、报道,每篇文章都有自己的文章标题、文章内容。这个时候用article就最好。如果一篇报道太长,分好多段,每段都有自己的小标题,这时候又可以用section把段落包起来。
虽然这些标签有这个有那个的限制,官方规范建议也是模模糊糊的,但是不要忘记了html5语义化标签的意义,其中一个就是更方便开发人员阅读代码文档,理清代码结构。个人觉得,如果能方便自己和他人阅读理解的标签,那就大胆用吧。
最后,觉得造成大家标签选择困难症的原因其实也跟html5语义化结构标签太少有关,如果添加更多,更加细分、网页常用、功能专用的标签,像评论部分增加comment标签,友情链接增加link标签,分页增加paging标签,作者信息增加author标签等等,就不会纠结遇到相似功能的标签到底用那个好了,div就不用思考这个,一棍子打下去全中,呵呵。
拿报纸举个例子:
一份或一张报纸有很多个版块,有头版、国际时事版块、体育版块、娱乐版块、文学版块等等,像这种有版块标题的、内容属于一类的版块就可以用section包起来。
然后在各个版块下面,又有很多文章、报道,每篇文章都有自己的文章标题、文章内容。这个时候用article就最好。如果一篇报道太长,分好多段,每段都有自己的小标题,这时候又可以用section把段落包起来。
虽然这些标签有这个有那个的限制,官方规范建议也是模模糊糊的,但是不要忘记了html5语义化标签的意义,其中一个就是更方便开发人员阅读代码文档,理清代码结构。个人觉得,如果能方便自己和他人阅读理解的标签,那就大胆用吧。
最后,觉得造成大家标签选择困难症的原因其实也跟html5语义化结构标签太少有关,如果添加更多,更加细分、网页常用、功能专用的标签,像评论部分增加comment标签,友情链接增加link标签,分页增加paging标签,作者信息增加author标签等等,就不会纠结遇到相似功能的标签到底用那个好了,div就不用思考这个,一棍子打下去全中,呵呵。
<aside></aside> //注释,主体的左边,例如浏览记录,列表目录一类,参照CSDN
<footer>版权声明、公司链接 //尾部
<address>地址信息</address>
</footer>
</body>
布局图片如下