HTML5新增的结构元素

203 阅读3分钟

「这是我参与2022首次更文挑战的第23天,活动详情查看:2022首次更文挑战

大家好,我是洋洋哥。今天给大家介绍一些HTML5新增的结构元素。大家了解一下,看看有没有适合你用的。

简述一下

HTML 5增加了article、section、nav、aside、header、footer等布局元素,以实现更好的语义解释。

结构元素定义的是增强了语义的div块,是HTML页面按逻辑进行分割后的单位,并没有显示效果。

 

第一个——article元素

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。 

一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件,页面中主体部分或其他任何独立的内容都可以用article来描述。

snipaste_20220223_100449.png  

第二个——section元素

section元素用于定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容,会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块,通常由内容及其标题组成。

snipaste_20220223_100754.png  

 

第三个——aside元素 

aside标签用来承载非正文的内容,被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到网页的内容、章节或是页面所要传达的信息。

 

第四个——header元素

header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区域的标题,也可以包括表格、logo图片等内容。

 

第五个——footer元素 

footer元素一般作为其上层容器元素的脚注。

   

第六个——nav元素 

nav元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。

snipaste_20220223_101037.png  

第七个——time元素

time元素是语义化元素,使页面语义描述更清晰,让网络搜索引擎理解(百度、谷歌)能很好理解页面。

使用time元素,可以插入计算机能够识别的日期和时间,同时又能以一种可读的方式显示给用户。

 

第八个——hgroup元素

hgroup 元素从语义化上看为标题组,一般作为header 标签的子元素,一个内容区域中包括了主标题和至少一个子标题才使用 hgroup。

 

第九个——address元素

address 元素从语义化上看为地址,其用法主要再于在文档中呈现的联系信息,通常内容为作者、网站链接、电子邮箱、地址、电话号码等。


第十个——main元素

main元素表示网页中的主要内容。

总结一下

其实这些新特性不是必要的,几乎都可以用其他的方式来代替,但它为什么会出这些,就是想帮助大家更快更好的学习和编写代码,大家可以尝试尝试,看看有没有适合自己的新特性。