HTML5的支持和优点
HTML5的支持
现在的大多数主流浏览器都支持h5(以下将html5简称h5)，如chrome，firefox，safari等等。有一个比较特殊的浏览器IE，IE9及其以上支持h5，但IE8以下不支持h5。
HTML的优点
相对于h4来说，h5增加了一些新的标记和属性，抛弃了一些不合理和常用的属性，具体请参考https://www.w3school.com.cn/tags/index.asp
在代码方面来看，h5的代码更为简洁一些。
举个例子：
h4：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<style>
.header{
width:100%;
height:100px;
background-color:#f00;
}
.nav{
width:100%;
height:100px;
background-color:#880;
}
.content > .left{
width:70%;
height:500px;
background-color:#088;
float:left;
}
.content > .right{
width:30%;
height:500px;
background-color:#080;
float:right;
}
.foot{
clear: both; <!-- 注意-->
width:100%;
height:100px;
background-color: #f0f;
}
</style>
<body>
<div class="header">头部</div>
<div class="nav">导航</div>
<div class="content">
<div class="left">主体内容左</div>
<div class="right">主体内容右</div>
</div>
<div class="foot">底部</div>
</body>
</html>h5:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<style>
header{
width:100%;
height:100px;
background-color: #f00;
}
nav{
width:100%;
height:100px;
background-color: #880;
}
main > article{
width:70%;
height:500px;
background-color: #088;
float: left;
}
main > aside{
width:30%;
height:500px;
background-color: #080;
float: right;
}
footer{
clear:both;
width:100%;
height:80px;
background-color: #f0f;
}
</style>
<body>
<header>头部</header>
<nav>导航</nav>
<main>
<article>主体左</article>
<aside>主体右</aside>
</main>
<footer>尾部</footer>
</body>
</html>h5用一些新的标签来代替了div,整体看起来更简洁一些。在写代码其中需要注意的一点就是float会对下面的产生一些影响（其后的元素被遮盖了），为了消除这种影响可以使用clear属性进行消除，也可以直接将下面的元素下移（麻烦）。
IE8以下支持h5的做法
IE8及其以下版本对于h5的标签不认识，无法解析标签，所以我们可以让通过两种方式使其认识：
1.使用html5shiv.js
使用百度静态资源的html5shiv.js包：
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>载入后，初始化新标签的css：
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}2.手动创建标签
<script>
document.createElement("标签名称")
</script>需要注意的地方就是手动创建的标签全是行级（内联）元素，需要转化成块级元素，所以在每个元素的css样式中需要添加display:block。
