1.常用的语义标签
article -- 定义页面独立的内容区域
aside -- 定义侧边栏内容
header -- 定义了文档的头部区域
section -- 定义文档中的区块
nav -- 定义导航栏
footer -- 定义 section 或 document 的页脚
2.兼容性
IE8及IE8以下版本中，新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。
所以解决办法就是：用js创建这些标签元素，并为其设置css样式
演示：用IE8及IE8以下版本运行下面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<header>我是header</header>
<footer>我是footer</footer>
<article>我是article</article>
<aside>我是aside</aside>
<section>我是section</section>
<nav>我是nav</nav>
</body>
</html>渲染结果如下：
新的标签无法识别，需要用js创建这些标签元素，且js代码必须在Dom渲染之前运行！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('article');
document.createElement('aside');
document.createElement('section');
document.createElement('nav');
</script>
</head>
<body>
<header>我是header</header>
<footer>我是footer</footer>
<article>我是article</article>
<aside>我是aside</aside>
<section>我是section</section>
<nav>我是nav</nav>
</body>
</html>这样ie8就可以正常识别新的语义标签了，但是默认渲染为行内元素，需要再为其设置css样式为块级元素
<style>
article,aside,header,section,nav,footer{
display:block;
}
</style>这样IE8也可以正常展示新的语义标签了
3.第三方插件 html5shiv.js
H5那么多的新标签，如果每个都要通过这种方法去生产的话，是不是太麻烦了呢
所以，我们现在介绍第三种方式，直接借用前辈大牛封装好的js库 --- html5shiv.js
使用方法：直接引入标签即可（js代码必须在Dom渲染之前运行！！！）
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
</head>4.自定义标签
在高级浏览器中，默认能识别自定义标签，只是默认将其渲染为行内元素。
可以自己给这些自定义标签设置css属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
yyy{
display: block;
}
</style>
</head>
<body>
<xxx>我是xxx标签的文本</xxx>
<xxx>我是xxx标签的文本</xxx>
<yyy>我是yyy标签的文本</yyy>
<yyy>我是yyy标签的文本</yyy>
</body>
<script>
// 获取第2个xxx标签
var xxx = document.getElementsByTagName("xxx")[1]
// 尝试操作样式
xxx.style.color = "red"
</script>
</html>渲染结果：
