HTML5新特性
-
（1）取消了过时的标签如：font和center
-
（2）新表单元素的引入（如email，可以不用写js代码即可验证邮箱）
-
（3）新语义便签的引入（header，section，footer..）
-
（4）canvas标签
-
（5）本地数据库（列如：localstorage）
-
（6）新增API
1、解决语义问题，html5新增的标签在我们的低版本的浏览器中有的是识别不出来的，尤其是ie浏览器。以下是解决的方案
- 在script标签中创建列如：（document.createElement(‘nav’));
- 利用插件html5shiv.min.js，注意如果只用一个插件的话，我们谷歌浏览器其实是无需加载这个插件的所以我们只需要兼容ie即可（lte是小于）
<!--[if lte IE 6]>
<script src="node_modules/html5shiv.min.js/html5shiv.min.js"></script>
<![endif]-->
多媒体标签新属性
video和audio
-
添加了状态栏（controls属性）
-
添加了自动播放属性、循环播放（autoplay、loop）
-
解决浏览器兼容问题可以用source
表单新特性：
email、url、color、number、month…..‘
类的增加
以前我们需要增加或者移除一个类，我们需要引用jquery，但是我们h5给我们提供了新特性classList
<style> .wrapper{ 100%; height: 100px; background: palegreen; } </style> <body> <div></div> <input type="button" class="add" value="add"> <input type="button" class="remove" value="remove"> <input type="button" class="toggle" value="toggle"> <input type="button" class="contains" value="contains"> <script> let obj_div = document.querySelector("div"); let add_btn = document.querySelector(".add"); let remove_btn = document.querySelector(".remove"); let toggle_btn = document.querySelector(".toggle"); let contain_btn = document.querySelector(".contains"); add_btn.onclick = function (){ obj_div.classList.add("wrapper"); } </script>
自定义属性DATA-
h5中提供自定义属性统一规定以data-开头
<!-- 注意如果是data-test-data则使用驼峰命名法获取数据 -->
<div data-test="134">ggg</div>
<script>
let list = document.querySelector("div").dataset;
console.log(list);
// 获取属性值
console.log(list.test);
// 设置属性值
list.resource = 50;
// 同样的注意驼峰获取属性
console.log(list.resource)
</script>
获取网络状态
window.ononline = function(){
alert("当前处于联网状态");
}
window.onoffline = function(){
alert("当前处于断网状态");
}
获取地理位置
h5中获取地理位置有实时和一次性
实时
window.navigator.geolocation.watchPosition(success,error);
function success (msg,position) {
console.log(msg);
console.log(position);
}
function error (msg) {
console.log(msg);
}
本地存储
localStorage（永久）和sessionStorage（临时）
<input type="button" value="添加" class="btn1">
<input type="button" value="删除" class="btn2">
<input type="button" value="获取" class="btn3">
<input type="button" value="清空" class="btn4">
<script>
let btn1 = document.querySelector(".btn1");
btn1.onclick = function () {
window.localStorage.setItem("name","zs");
}
let btn2 = document.querySelector(".btn2");
btn2.onclick = function () {
window.localStorage.removeItem("name");
}
let btn3 = document.querySelector(".btn3");
btn3.onclick = function () {
window.localStorage.getItem("name");
}
let btn4 = document.querySelector(".btn4");
btn4.onclick = function () {
window.localStorage.clear();
}
</script>
就这些吧，剩下的大家自行探索！欢迎在下方评论留言！