HTML5中有哪些常用的语义化标签

　　介绍

这篇文章给大家介绍HTML5中有哪些常用的语义化标签,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

<强> nav定义导航链接的部分

在页脚显示一个站点的导航链接,如首页,服务信息页面,版权信息页面等

& lt; nav> 　　,,,& lt; ul> 　　,,,,,,& lt; li> & lt; a  https://www.yisu.com/zixun/href=" # "> 　　<李> CSS 　　<李> Html5 　　 　　

<强>文章定义文章

装载显示一个独立的文章内容,论坛帖子,新闻,博客文章,用户评论等,artilce可以嵌套,则内层篇的论文对外层的文章标签有隶属的关系。

& lt; article> 　　,,,& lt; h2>标题& lt;/h2> 　　,,,& lt; p>,内容& lt;/p> 　　,,,& lt; article>用户评论& lt;/article> 　　,,,& lt; article>回复评论& lt;/article> 　　& lt;/article>

<强>部分定义文档中的节

章节,页眉、页脚或文档中的其他部分,

& lt; section> 　　,,& lt; h2>标题1 & lt;/h2> 　　,,& lt; p>内容1 & lt;/p> 　　& lt;/section> 　　& lt; section> 　　,,& lt; h2>标题2 & lt;/h2> 　　,,& lt; p>内容2 & lt;/p> 　　& lt;/section>

<强>一边定义文章的侧栏

广告,成组的内容,友情链接,侧边栏等

& lt; aside> 　　,,,,& lt; h2>,侧栏标题1 & lt;/h2> 　　,,,,& lt; p>这是侧栏内容1 & lt;/p> 　　& lt;/aside> 　　& lt; aside> 　　,,,,& lt; h2>,侧栏标题2 & lt;/h2> 　　,,,,& lt; p>这是侧栏内容3 & lt;/p> 　　& lt;/aside>

<强>头定义文档的页眉

通常是一些引导和导航信息

& lt; header>, 　　,,,,& lt; p> logo

, 　　,,,,& lt; nav> 　　,,,,,,,,,& lt; ul> 　　,,,,,,,,,,,,,,& lt; li> Home 　　,,,,,,,,,,,,,,& lt; li> Html5 　　,,,,,,,,,& lt;/ul> 　　,,,,& lt;/nav>, 　　& lt;/header>

<强>页脚定义文档或节的页脚

在典型情况下,该元素会包含创作者的姓,名文档的创作日期以及/或者联系信息

& lt; footer>, 　　& lt;才能p>及副本;,2019,All  Rights 保留只& lt;/p> 　　& lt;/footer>

参考文献

1 html5 | http://caibaojian.com/html5
2 w3school | 3 MDN | https://developer.mozilla.org/zh-CN/docs/Web/HTML/https://www.w3school.com.cn/

<强>下面是其它网友的补充

百度人生任务一要求构建一个页面结构,看似简单,但需充分考虑到语义化。这篇文章简单谈谈html5语义化中的页面结构语义化的一些经验和理解。

<强> 1,为什么需要语义化

易修改,易维护。
无障碍阅读支持。
搜索引擎友好,利于SEO。
面向未来的HTML,浏览器在未来可能提供更丰富的支持。

<强> 2,结构语义化

语义元素均有一个共同特点和终止,和终止,他们均不做任何事情。换句话说,语义元素仅仅是页面结构的规范化,并不会对内容有本质的影响。

下图展示了一个典型的页面结构。

html5中有哪些常用的语义化标签

<强>头部

& lt; header>元素有两种用法,第一是标注内容的标题,第二是标注网页的页眉,如上图你看到的那样。除非必要(内容标题附带其它信息的情况下:发布时间,作者等),一般不在内容中使用& lt; header>。因,而网页中可以包含多个& lt; header>元素。按照html5的规定,& lt; header>都应包含某个级别的标题,所以应隐式或显式地包含标题,通常将不希望显示的标题设置为显示:没有,一方面遵守规范,另一方面则提供了无障碍阅读而不至于影响到页面设计。

<>强导航栏

导航栏使用& lt; nav>看起来是理所当然的,进一步,它也用于一组文章的链接。一个页面可以包含多个& lt; nav>元素,但通常仅仅在页面的主要导航部分使用它。
《html5:失踪手册》中指出了在侧栏使用& lt; nav>标签的两个案例:

& lt; !——,案例一,——比; 　　& lt; nav> 　　& lt;才能!——,此处是链接,——比; 　　& lt;才能aside> & lt;/aside> 　　& lt;才能aside> & lt;/aside> 　　& lt;/nav> 　　 　　& lt; !——,案例二,——比; 　　& lt; aside> 　　& lt;才能nav> 　　,,,& lt; !——,此处是链接,——比; 　　& lt;才能/nav> 　　& lt;才能section> & lt;/section> 　　& lt;才能div> & lt;/div> 　　& lt;/aside>

HTML5中有哪些常用的语义化标签