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