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>

。。。未完待续

转载于:https://www.cnblogs.com/yanqiong/p/9430146.html