html5新特性学习笔记
1.语义化标签兼容问题（语义化标签只支持ie8以上，不包括ie8）
解决方法一：该标签的css中加上display:block;
通过DOM的方式创建这个标签 document.createElement("header");
解决方法二：引入外部的htmlshiv.js文件（插件）<script src="html5shiv.js"></script>
注意:在谷歌中支持语义化标签，不需要请求该文件//cc:ie8 tab键即可
<!--如果浏览器是小于ie8就执行里面的代码，改命令只针对IE浏览器有效-->
<!--[if lte IE 8]>
<script src="html5shiv.js"></script>
<![endif]-->
2.多媒体
1）音频播放
<!--controls可以在页面中显示该音频控件-->
<!--autoplay自动播放，但是谷歌不会自动播放，加入muted谷歌可以自动播放视频-->
<!--loop循环播放-->
<audio src="xxx.mps" controls autoplay loop muted></audio>
2）视频播放
<!--controls可以在页面中显示该视频控件-->
<!--autoplay自动播放，但是谷歌不会自动播放，加入muted谷歌可以自动播放视频但是会是静音状态-->
<video src="xxx.mp4" controls autoplay loop muted></video>
<!--注意：格式兼容-->
<!--如果A浏览器支持第一个，那就直接播放第一个，
如果B浏览器支持第二个，遇到第一个标签的时候不会执行，遇到第二个人可以支持的才会播放-->
例：<video autoplay controls loop>
<source src="xxx.mp4">
<source src="xxx.ogg">
对不起，您的浏览器不支持，请升级！
</video>
3.智能表单元素的相关属性：
1）autocomplete:关闭智能提示
2）novalidate：关闭验证功能
例：<form action='' method='get' autocomplete='off' novalidate>
邮箱：<input type="email" name="em" /><br/>
<input type="submit" value="提交" id="sm" />
</form>
3)autofocus:自动获取焦点
placeholder:可以设置文本框提示信息
required:该属性出现，当前表单的元素必须验证
form:有一个表单元素的标签，不在form中，但是要提交，则在表单标签中加上form属性，值设置为form标签中的id值，该标签就能提交了
datalist：数据列表,该标签需要有自己的id的值，再配合list属性来使用，才可以有数据列表的效果
例：<form action="" method="get" id="fm">
<input type="text" value="" name="txt" autofocus placeholder="请输入名字" required/>
<input type="submit" value="提交" id="sm" />
</form>
<input type="text" value="" name="name" form="fm" />
<input type="text" value="" name="txtList" list="url_list"/>
<datalist id="url_list">
<option value="https://www.baidu.com">百度</option>
<option value="https://www.googler.com">谷歌</option>
<option value="https://www.baidu.com">百度</option>
<option value="https://www.baidu.com">百度</option>
</datalist>
4.获取元素的不同方式（h5中的一些api的使用）
例1：
<div>
<p>这是div中的一个p</p>
<ul>
<li><p>这是li中的p</p></li>
<li>这是li</li>
</ul>
</div>
<script>
//选择器：css中选择器怎么用这里就怎么用
//document.querySelector("选择器")
//1）获取p,只能获取一个（默认第一个）
document.querySelector("div p").style.backgroundColor="yellow";
//2）获取所有p标签,document.querySelectorAll("选择器");
var pObjs = document.querySelectorAll("div p");
for(var i=0;i<pObjs.length;i++) {
pObjs[i].style.backgroundColor="green";
}
</script>
例2：
<style>
.test{
width: 300px;
height: 200px;
backgroundColor: red;
}
</style>
<div>
<input type="button" value="添加类样式" id="btn1" />
<input type="button" value="移除类样式" id="btn1" />
<input type="button" value="切换类样式" id="btn1" />
<input type="button" value="是否包含类样式" id="btn1" />
<div id="dv" class="test"></div>
</div>
<script>
my$ = function(str){
return document.querySelector(str);
}
my$("#btn1").onclick = function () {
//添加类样式方法
my$("#dv").classList.add("test");
}
my$("#btn2").onclick = function () {
//移除类样式方法
my$("#dv").classList.remove("test");
}
my$("#btn3").onclick = function () {
//切换类样式方法
my$("#dv").classList.toggle("test");
}
my$("#btn4").onclick = function () {
//判断方法
//返回的是：是否应用了这个类样式
var result = my$("#dv").classList.contains("test");
console.log(result);
}
</script>
5.自定义属性操作
<div id="dv" data-name="帅哥" data-age="20" data-user-sex="男"></div>
<script>
//设置自定义属性：data-名字 ---->都小写
//获取自定义属性
var dt = document.querySelector("#dv").dataset;
console.log(dt.name);//对象.属性
console.log(dt[age]);//对象.属性
console.log(dt.userSex);//对象.属性
//如何通过代码为标签添加自定义属性
dt.height="180";
dt.userWeight="55";
</script>
。。。未完待续
