「这是我参与2022首次更文挑战的第23天,活动详情查看:2022首次更文挑战」
大家好,我是洋洋哥。今天给大家介绍一些HTML5新增的结构元素。大家了解一下,看看有没有适合你用的。
简述一下
HTML 5增加了article、section、nav、aside、header、footer等布局元素,以实现更好的语义解释。
结构元素定义的是增强了语义的div块,是HTML页面按逻辑进行分割后的单位,并没有显示效果。
第一个——article元素
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。
一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件,页面中主体部分或其他任何独立的内容都可以用article来描述。
第二个——section元素
section元素用于定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容,会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块,通常由内容及其标题组成。
第三个——aside元素
aside标签用来承载非正文的内容,被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到网页的内容、章节或是页面所要传达的信息。
第四个——header元素
header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区域的标题,也可以包括表格、logo图片等内容。
第五个——footer元素
footer元素一般作为其上层容器元素的脚注。
第六个——nav元素
nav元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。
第七个——time元素
time元素是语义化元素,使页面语义描述更清晰,让网络搜索引擎理解(百度、谷歌)能很好理解页面。
使用time元素,可以插入计算机能够识别的日期和时间,同时又能以一种可读的方式显示给用户。
第八个——hgroup元素
hgroup 元素从语义化上看为标题组,一般作为header 标签的子元素,一个内容区域中包括了主标题和至少一个子标题才使用 hgroup。
第九个——address元素
address 元素从语义化上看为地址,其用法主要再于在文档中呈现的联系信息,通常内容为作者、网站链接、电子邮箱、地址、电话号码等。
第十个——main元素
main元素表示网页中的主要内容。
总结一下
其实这些新特性不是必要的,几乎都可以用其他的方式来代替,但它为什么会出这些,就是想帮助大家更快更好的学习和编写代码,大家可以尝试尝试,看看有没有适合自己的新特性。