1，常规布局写法：
<body>
<!-- header -->
<!-- nav -->
<!-- main -->
<!-- aside -->
<!-- arcile -->
<!-- footer -->
</body>1，h5新语义标签：
<header>
<nav>
<!-- a[href=#]{导航栏$}*4 -->
</nav>
</header>
<!-- main -->
<main>
<aside></aside>
<article></article>
</main>
<!-- footer -->
<footer></footer>一，自己的代码：加display：block。
※新语义标签兼容问题解决：
1，由于ie8以及以下版本不兼容。
2，通过js创建元素在谷歌等高版本浏览器也兼容，所以会出现两次。解决办法：用emmet语句做条件判断。
（希望这一段代码只在指定的ie版本中执行）
cc:ie6+tab键快捷生成emmet语法
l：less
t：than
e：equal
lte：小于等于的意思。
解决ie8以及以下的新语义标签兼容问题，可以用js的creatElement(),来创建元素。
//emmet条件判断语句。
<!--[if lt IE 9]>
<script>
window.onload=function(){
var creatHeader=document.creatElement("header");
document.body.appendChild(creatHeader);
}
</script>
<![endif]-->
二，引入html5.js框架
提示：如果页面中存在大量的h5语义标签，可以通过引入第三方js框架处理。
引入：html5shiv-master包下的html5shiv.min.js
优化代码：把引入的js框架放入emmet条件判断语法中。指定版本下才运行
三，新输入类型：
1，新type属性：
桌面端看不出区别，当在移动端打开时，会显示不同的 虚拟键盘，
比如：
**email弹出email键盘。
url弹出url键盘。
search：右下角的输入按钮变成搜素。
number：弹出的是数字键盘。
tel弹出的是九宫格的数字键盘。**
且移动端会比桌面端显示要好。
常用部分：
<input type="color">//颜色
<input type="date">//日期
<input type="datetime">//
<input type="datetime-local">//
<input type="date">//
<input type="email">//
<input type="month">//
<input type="week">//
<input type="day">
<input type="number">//只能输入e和数字，e为科学计数法中的表达方式
<input type="range">//滑动条，快速生成
<input type="search">//
三，新表单元素：
1，datalist：
给datalist添加id=foodlist，通过list=“foodlist”，进行关联。
提高输入效率。
2，keygen元素：
兼容性极差。
3，output元素
只是一个语义性较强的元素，如果需要修改内部的值需要通过js去实现。
<input type="number">+<input type="number">=<output>123</output>
<input type="button" value="计算结果">四，新表单属性01
常用：
1，placeholder（自动提示的占位符。）
比旧版input内value便捷。
提示信息为灰色，input标签默认的提醒信息文本
2，autofocus（自动获取焦点）
3，multiple（支持多文件选择）
用户上传文件，file标签默认：一次只能选择一个
4，autocomplete（自动完成）：
①必须配合name属性使用②表单曾经被提交过，才能够使用。
可以根据用户在本页面提交过的数据
进行保存，自动匹配。
5，form属性（通过form属性将表单外部的元素与表单相关联，不建议使用，维护性比较差。）
<input type="text" placeholder="请输入用户名">
<input type="email" placeholder="请输入邮箱" autofocus >
<input type="file" multiple >
<input type="tel" name="telPhone" autocomplete >
<input type="submit">五，新表单属性02
早期需要通过js来实现用户表单数据提交前进行准确性验证。
新表单验证元素：
1，email标签自带了 表单格式验证，但是不支持空值验证。
添加required 验证空值。
2，对字符串格式的验证使用的是正则。
pattern中可以写正则进行验证。（自定义的验证规则。）
3，oninvalid
<input type="email" name="userEmail" required pattern="\d{3}" oninvalid="this.setCustonValidity('亲爱的用户您输入的格式不正确请重新输入')" >
<element oninvalid="myScript">JavaScript文档中： object.oninvalid=function(){myScript};
JavaScript文档中,添加事件监听：addEventListener()
object.addEventListener(“invalid”, myScript);
注：IE8浏览器及之前版本不支持addEventListener()方法.
六，多媒体标签
1，音频
2，视频
3，早期解决方案：flash插件。移动端不支持flash。
1，音频：
audio：MP3，wav，ogg,
①controls控制器
②autoplay自动播放
③loop是否循环
④src直接指定音频文件
⑤source 属性指定多个音频时会从上往下进行解析，找到可以播放的既可开始播放。
如果遇到无法播放的音频会继续往下解析，知道找到可以播放的为止。
如果都无法解析 我们能够在最后设置一个提示信息。
可以对低版本的用户进行一个友善的提示。
<audio controls autoplay loop>
<source src="music/郝云的活着1.mp3">
<source src="music/郝云的活着2.mp3">
亲爱的用户，你的浏览器版本太低无法享受这个页面的所有功能，建议进行更新。☺<a href="#">戳我下载更新</a>
</audio>2，视频：
①controls控制器
②autoplay自动播放
③loop是否循环
④src视频播放路径
⑤width，height在设置视频video的宽高时，会优先考虑视频本身的大小 改变的是video标签的大小。
⑥poster=“”，视频在无自动播放的时候显示的图片。
⑦source 属性指定多个视频文件
<video src="movie/[报告老板][第二季]第11集_bd.mp4" controls autoplay loop height="100px" width="300px"></video>
七，获取元素：
1，jQ简洁的获取元素的方式，很方便。$(选择器)
2，js中通过ById，ByName，ByTagName，ByClassName来获取元素。
3，html5中直接通过一个方法就可以获取父级元素。
//获取单个方法的参数 支持是使用css的选择器。
/*标签选择器
class选择器
id选择器*/
document.querySelector('li').style.backgroundColor ='orange';
document.querySelector('.fruit').style.backgroundColor ='blue';
//这个方法 返回的类型是 数组 哪怕只有一个元素 返回的也是数组
var fruitDoms=document.querySelectorAll('.fruit');
for (var i = 0; i < fruitDoms.length; i++) {
fruitDoms[i].style.color = 'red';
}八，类名操作：
js中className是获取的多个值，用起来比较不方便。
html中新增的classList操作
1，add，新增
2，remove，移除
3，contains，判断是否有class
4，toggle，切换
//获取要操作的元素 方便后续操作
var dv=document.querySelector('.showBox');
//新增
document.querySelector('input[value = add]').onclick=function(){
//alert("执行了");
dv.classList.add('orange');
}
//移除
document.querySelector('input[value = remove]').onclick=function(){
dv.classList.remove('orange');
}
//判断是否存在class
document.querySelector('input[value = contains]').onclick=function(){
alert(dv.classList.contains('orange'));
}
//切换class
document.querySelector('input[value = toggle]').onclick=function(){
dv.classList.toggle('skyBlue');
}
}九，自定义属性：
为了规范化 自定义属性写法，
所有通过data-方式添加的属性都保存在dom元素的dataset属性中 ，他是一个对象。
