Html5 中的新语义标签

时间：2021-10-29 21:44:30

1.1

语义标签对于我们并不陌生，如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备来理解HTML页面内容。

传统的做法，我们通过添加类名，Html页面具有语义化，但是不具有通用性。

Html5则是通过新增语义标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以使其具有通用性。

1.2常用的心语义标签

<nav> 表示导航

<header> 表示页眉

<footer> 表示页脚

<section> 表示区块

<article> 表示文章 如文章、评论、帖子、博客

<aside> 表示侧边栏 如文章的侧栏

<figure> 表示媒介内容分组

<mark> 表示标记

<progress> 表示进度

<time> 表示日期

......

本质上新语义标签与<div>、<span>没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成<div class="nav"> 相当于 <nav>。它只不过是一个标签！

但应尽量避免全局使用header、footer、aside等语义标签。

1.3兼容问题

由于HTML5新标签的并没有得到所有浏览器都支持，特别是IE9以下的低版本。在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载第三方的一个JS库来解决兼容问题。

 <!--[if lte IE 8]>

     <script src="./js/html5shiv.min.js"></script>

 <![endif]-->

相关文章