HTML5 之语义标签

HTML5语义标签

在HTML中一般使用Div标签布局，可是Div标签自己没有任何意义，并不能从标签自己断定当前区块在网页中的地位，因此在HTML5中新增了一些具备语义化的标签。

<header></header>
表明网页头部或者文章头部
在一个页面内没有限制header出现次数，能够在不一样的内容区块上分别加header标签
在header标签中能够至少包含一个标题标签 也能够包含logo或导航元素复制代码

<footer></footer>
表明网页底部或者文章底部复制代码

<nav></nav>
表明网页导航，并非全部的导航都要被放进nav标签中，只须要将主要的放入便可。
应用场景：传统导航条、侧边栏导航、翻页操做。 复制代码

<article></article>
表明页面中独立完整的内容区域。它能够是博客中的文章、帖子、用户的回复，它能够有本身独立的标题、页脚。复制代码

<aside></aside>
表示当前页面附属信息部分，能够包含侧边栏、广告、以及其余相似的有区别于主要内容的部分。复制代码

<main></main>
表示网页的主体内容，内容对于文档来讲应当是惟一的，它不该包含在网页中重复出现的内容，好比侧栏、导航栏、版权信息、站点标志或搜索表单。main标签在IE高版本中不识别，IE高版本又不识别IE条件注释，因此须要单独处理复制代码

<figure>
    <figcaption></figcaption>
</figure>
用于定义图片+标题或者图片+标题+描述。复制代码

兼容处理

1. 手动处理

   1. 经过JavaScript建立该元素

   2. 将建立的元素转换为块级

2. 使用第三方库 <script src="html5shiv.min.js"></script>

只有IE低版本不支持HTML5新增的标签，非IE低版本没有必要执行上述代码，因此须要使用IE特有的条件注释。

<!--[if lt IE 9]>
 　　<script src="js/html5shiv.min.js"></script>
<![endif]-->复制代码

IE条件注释

<!-- 只要IE浏览器可以识别IE条件注释 其余浏览器都会将此看成普通注释 -->
<!--[if IE]> 全部的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lte IE 6]> IE6以及IE6如下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7如下版本可识别 <![endif]-->
<!--[if gt IE 7]> IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->复制代码

生成IE条件注释的快捷键 cc:ie + tab