web前端小白,必学HTML5语义化,原来还有这种技巧?

距HTML5标准规范制定完成并公开发布已经有好些年了,面试时也少不了要问对HTML5语义化得理解。但是在实际运用时,真正使用HTML5标签来开发的似乎不是很多(ps:查看了几个巨头公司网站推论),可能一部分原因是仍有部分用户使用在使用低版本浏览器。

但是就我个人而言,因选取一些标签时会比较纠结,所以仍使用了div。(PS:正是因为这样,才有了这篇文章的,没错,以后要注意语义化了)

什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。

语义化优点:

易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。

有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。

方便其他设备解析,如盲人阅读器根据语义渲染网页

有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。

今天先介绍主体结构标签,如图所示:

web前端小白,必学HTML5语义化,原来还有这种技巧?

1、

定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。

在一个文档中,您可以定义多个

元素,但需要注意的是
元素不能作为
元素的子元素。

web前端小白,必学HTML5语义化,原来还有这种技巧?

2、

在一个文档中,可定义多个

3、

定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能)。

需要注意的是在一个文档中不能出现多个

标签。

web前端小白,必学HTML5语义化,原来还有这种技巧?

4、

元素表示文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的
元素可嵌套在代表博客文章的
元素中。

5、

6、

定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

使用footer插入联系信息时,应在 footer 元素内使用

元素。

注意不能包含

或者

7、

表示文档中的一个区域(或节),比如,内容中的一个专题组。

如果元素内容可以分为几个部分的话,应该使用

而不是

不要把

元素作为一个普通的容器来使用,特别是当
仅仅是为了美化样式或方便脚本使用的时候,应使用

好了,今天的内容就分享到这里,如果你有什么疑问可以在下方评论哦~

今天的内容就分享到这里,也希望本次分享对你有所帮助和有所提升!

如果你想学习更多的前端知识以及最新的源码,你可以关注我,私信,回复学习资料即可获取一份web前端精品学习资料


分享到:


相關文章: