Html5新特性有哪些
1, Html5新特性有哪些
1, 拖拽释放API
<script>
var i1 = document.getElementById('i1');
i1.addEventListener('dragstart', function () {
console.log('你拖动了....');
});
i1.addEventListener('drag', function () {
console.log('你正在拖动....');
});
i1.addEventListener('dragend', function () {
console.log('你结束了拖动....');
});
</script>
2, Html5新标签的浏览器兼容问题
1, 使用DOM操作来添加这些标签
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>新标签兼容性</title>
<script>
document.createElement('header');
document.createElement('footer');
</script>
</head>
<body>
<header id="header">header</header>
<footer id="footer">footer</footer>
</body>
</html>
2, 封装好的js库 - html5shiv.js
<!-- 引入即可 -->
<script src="js/html5shiv.js"></script>
3, 如何区分Html、Html5
1, 文档类型声明
-
Html声明：//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -
Html5声明：
2, 结构语义
-
Html没有体现架构语义化的标签，通常是<div id="header>表示网站的头部。 -
Html5提供了一些新的标签：article、footer、aside、section、nav
4, a标签默认事件禁掉之后实现跳转方法
通过location.href实现跳转
let domArr = document.getElementsByTagName('a')
[...domArr].forEach(item=>{
item.addEventListener('click',function () {
location.href = this.href
})
})