1.语义化标签总结
基础布局标签
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<article></article>
<footer></footer>
注意：IE8以后不兼容H5标签，如果需要兼容IE8一下的浏览器，则需要如下操作：
如果在sublime,或者WebStrom使用 可是使用快捷点: cc:ie6+tab
生成内容：
<!--[if lt IE 9]>
<script type="text/javascript" src='js/html5shiv.min.js'></script>
<![endif]-->
或者
<!--[if lte IE 6]>
<script type="text/javascript">
alert("我执行了");
window.onload = function(){
var createHeader = document.createElement("header");
document.body.appendChild(createHeader);
}
</script>
<![endif]-->
H5解决方案：可以引入上面的html5shiv.min.js，百度搜索进行下载即可。
2.H5表单
input标签新增属性
<form action="#">
<fieldset>
<legend>新输入类型</legend>
<label>type=color
<input type="color">
</label>
<label>type=date
<input type="date">
</label>
<label>type=datetime
<input type="datetime">
</label>
<label>type=datetime-local
<input type="datetime-local">
</label>
<label>type=date
<input type="date">
</label>
<label>type=email
<input type="email">
</label>
<label>type=month
<input type="month">
</label>
<label>type=week
<input type="week">
</label>
<label>type=day
<input type="week">
</label>
<label>type=number
<input type="number">
</label>
<label>type=range
<input type="range">
</label>
<label>type=search
<input type="search">
</label>
<label>type=url
<input type="url">
</label>
</fieldset>
</form>
注意:有些效果显示在浏览器显示不明显（没有变化），在移动端会有变化。（移动端的支持 比桌面端要好）
新表单元素
<datalist></datalist>//定义下拉列表
<keygen></keygen> //（生成秘钥）
<output></output> //定义输出的一些类型。
使用方法：
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
剩余的两个理解就好。
3.新表单属性
操作对象:
<input type="text" name="">
在表单可添加属性，如下：
- placeholder：占位符提示
- autofocus：获取焦点
- autocomplete: 规定是否使用输入字段的自动完成功能。
- multiple：支持多文件选择
- form：此属性不推荐使用
演示代码:
<form action="#" id='form'>
<fieldset>
<legend>新表单属性</legend>
<!-- input标签 默认的 提醒信息 -->
<input type="text" name="" placeholder="请输入用户名">
<input type="email" name="" placeholder="请输入电子邮箱" autofocus>
<input type="file" multiple>
<!-- 必须 为 该标签 添加name属性 还需要改表单 曾经提交过-->
<input type="tel" name="telPhone" autocomplete placeholder="请输入电话号码">
<input type="submit" >
</fieldset>
</form>
<input type="text" name="userHabbit" placeholder="请输入你的爱好" form='form'>
表单验证:
添加属性：
- required:必须填写，不能为空
- pattern：可是使用正则来验证
<form action="#">
<fieldset>
<legend>表单验证</legend>
<!-- email这个标签 自带了 表单的格式验证 不能验证 空的值 -->
<input type="email" name="userEmail" required>
<!-- 对 字符串 格式的验证 使用的是 正则
pattern 中可以写正则 进行验证
-->
<input type="tel" placeholder="请输入电话号码" name='userTel' required pattern="\d{3}"
oninvalid=" this.setCustomValidity('亲爱的用户你输入的格式不正确,请重新输入')">
<input type="submit">
</fieldset>
</form>
4.音频（audio ）
音频属性： controls autoplay loop
- controls:控制器
- autoplay：是否自动播放
- loop:是否循环播放
- muted：是否静音
演示源码：
<audio controls autoplay loop>
<source src="music/music.ogg" >
<source src="music/郝云 - 活着.mp3" >
亲爱的用户,你的浏览器版本太低,无法享受这个页面的所有功能,建议进行更新 ^_^ <a href="#">戳我下载</a>
</audio>
5.视频(video):
视屏播放器：
- autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
- controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
- height pixels 设置视频播放器的高度。
- loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
- muted muted 规定视频的音频输出应该被静音。
- poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
- preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。
- 如果使用 "autoplay"，则忽略该属性。
- src url 要播放的视频的 URL。
- width pixels 设置视频播放器的宽度。
演示代码：
<!--<video src="movie/[报告老板][第二季]第11集_bd.mp4" controls loop height="100px" width="300px"
poster="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"></video>-->
<!--浏览器会从上往下 找到可以播放的 进行播放-->
<video controls>
<source src="movie/movie04.ogg">
<source src="movie/[报告老板][第二季]第11集_bd.mp4">
亲爱的用户,你的浏览器版本太久了,建议升级 <a href="#"> 点我下载 最新的浏览器(⊙o⊙)</a>
</video>
6.获取元素新方法
document.querySelector('li')
document.querySelectorAll('')
注意：这个选着器的使用方式和jQuery选着器使用方式是一样的。
7.类名操作（classList）
这是一个对象，对象有如下方法：
add() (添加一个类名)
remove() （删除一个类）
contains() （是否包含类）
toggle() （切换类）
示例代码：
// 获取 要操纵的div 方便后续的操作
var div = document.querySelector('.showBox');
// querySelector
// 新增class
document.querySelector('input[value=add]').onclick = function(){
// alert('ADD');
div.classList.add('orange');
}
// 移除class
document.querySelector('input[value=remove]').onclick = function () {
div.classList.remove('orange');
}
// 判断是否存在class
document.querySelector('input[value=contains]').onclick = function () {
alert(div.classList.contains('orange'));
}
// 切换class
document.querySelector('input[value=toggle]').onclick = function () {
div.classList.toggle('skyBlue');
}
8.自定义属性（dataset）
代码演示：
<body>
<!-- html5为了规范自定义属性的写法,新增了一个 data-的属性 -->
<div data-age='18' data-skill='eatFood' data-habbit = 'tableTannis'
data-food-vegetable='西兰花' data-foodMeat='牛肉'></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
// 所有 通过 data-的方式 添加的属性 都会保存在dom元素的 dataset属性中 他是一个对象
// 设置属性时 能够使用大写字母 但是会自动帮我们转化为 小写的字母
// 作用是 为了规范 自定义属性的写法
console.log(document.querySelector('div').dataset);
console.log(document.querySelector('div').dataset.age);
console.log(document.querySelector('div').dataset.foodVegetable);
console.log(document.querySelector('div').dataset.foodmeat);
}
</script>