布局元素

语义化是Html5的一个特色,他不仅能规范代码,清晰结构,更好地开发和维护,而且还有利于SEO。当然你在实际开发中可以不用,但衡量一个人专不专业就在于一些小细节。

现如今是2021年,距离发布HTML5的2014年已有7年之久!当初对于HTML5标准规范,很多人张口就来说,浏览器不兼容、不支持,国情还是用IE的多等等。反正就是拒绝拥抱新技术和新标准。

div加css网页布局的优点(如何更专业的网页布局)(1)

不管这些快被优化下岗的老鸟愿不愿意,时代还是要进步的。智能手机的快速发展,win10、MAC等硬软件市场占有率提高,毕业生扎堆涌入IT行业等等,直接、间接推动HTML5的普及率。现如今还有哪个浏览器不支持html5,甚至不支持html5都不是这个时代的浏览器。

div加css网页布局的优点(如何更专业的网页布局)(2)

所以如果你是外行刚进入it前端行业,尤其是单单看了一些老到掉牙的教学视频,当面试官问你关于一些html5的问题,千万不要在张口就说html5是新技术。。。 毕竟这已是个标准规范,不是加分项,而是必填项,还不能错的那种。

言归正传,本篇介绍HTML5里的一大特色:语义化。相信面试时肯定也被问到语义化理解。

语义学是研究语言中单词和短语的含义。语义化呢?就是用合理、正确的标签来展示内容。更具体一点,就是使用新增的语义标签。在HTML5以前,我们有使用过标题标签(h1~h6)、表格标签(table)、表单标签(form)等。这些标签都带有很明显的意义,无法乱用。

然而最基础、最重要的html布局元素却是被人忽视,绝大部分都是使用非语义元素(div和span)来布局,对其内容意义一无所知。代码一多,实在让人看得头疼。

div加css网页布局的优点(如何更专业的网页布局)(3)

问你眼花没有,通篇div标签

倘若是以下的布局,相信不是专业的程序员,有点基础的小学生都能看得懂!

div加css网页布局的优点(如何更专业的网页布局)(4)

Html5布局标签

<header>

<header>元素描述了文档的头部区域,相当于一篇文章的头部。

主要是用在网页的头部,或者某个部分的头部。

在一个文档中,您可以定义多个<header>元素。

div加css网页布局的优点(如何更专业的网页布局)(5)

header

<main>

<main>元素描述了文档的主体区域,相当于一篇文章的中间主体。

主要是用在网页的主体部分。

该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,建议只出现一次。

div加css网页布局的优点(如何更专业的网页布局)(6)

main

<footer>

<footer>元素描述了文档的尾部区域,相当于一篇文章的尾部。

主要是用在网页的末尾部分,或者某个部分的尾部。常见于版权信息、友情链接等等。

在一个文档中,您可以定义多个<header>元素。

div加css网页布局的优点(如何更专业的网页布局)(7)

footer

<nav>

<nav>元素描述了多个超链接的区域。

主要是作用于菜单栏、导航栏等多个超链接集合。

div加css网页布局的优点(如何更专业的网页布局)(8)

nav

<article>

<article>元素描述了相对比较独立、完整的的内容区块

主要是作用于定义独立模块,例如一个网站有娱乐、新闻、动漫三个区块,就用<article>定义3个模块。

div加css网页布局的优点(如何更专业的网页布局)(9)

article

<section>

<section>元素描述了一个区域或者章节

主要是作用于<article>的子模块,<article>定义大模块,<section>则是填充里面的子模块;亦可以单独做一个小模块。

div加css网页布局的优点(如何更专业的网页布局)(10)

section

<aside>

<aside>元素描述了和页面内容几乎无关的部分,可以被单独的拆分出来而不会影响整体。

主要是作用于侧边栏或嵌入内容(广告之类)。

div加css网页布局的优点(如何更专业的网页布局)(11)

aside

总结

div加css网页布局的优点(如何更专业的网页布局)(12)

总结

,