HTML5新特征
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{
width: 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>
就这些吧,剩下的大家自行探索!欢迎在下方评论留言!
转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以加QQ(2602138376)
文章标题:HTML5新特征
文章字数:790
本文作者:Zevs
发布时间:2019-08-14, 17:15:48
最后更新:2019-08-15, 05:55:51
原始链接:http://zhsh666.xyz/2019/08/14/HTML5新特征/版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。
√本站访问人数:人次 | ◎本站总访问量:
次