html5主要知识点总结
- 一、HTML5的概念
- 二、HTML5 新增部分简介
- 1，新增的结构标签
- 2，新增的智能表单
- 2.1 input表单新增了type属性值：
- 2.2 表单智能验证
- 2.3 表单新属性
- 2.4 智能表单过滤（datalist）
- 3，video和audio标签
- 4，canves的基本用法
- 4.1 canves元素
- 4.2 一个简单的例子
- 5，js获取元素的新方式
- 6，js操作类名的新方法
- 7，js自定义属性
- 8，网络状态
- 9，地理定位
- 9.1 获取地理位置的方式
- 9.2 API详解
- 10，web存储
- 10.1 特性
- 10.2 window.sessionStorage
- 10.3 window.localStorage
- 10.4 方法详解
- 10.5 sessionStorage,localStorage和cookie的区别
- 11，全屏显示
- 12，文件读取
- 12.1 FlieList对象
- 12.2 FileReader对象
- 13，拖拽元素
一、HTML5的概念
HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，同时有令人眼花缭乱的css 3，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，制作webApp，甚至结合Canvas我们可开发网页版游戏。
我们日常讨论的H5其实指的是一个泛称，它是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台。
HTML5绝大部分新增部分都有浏览器兼容性问题，特别注意的是，并不是所有的html5都是IE9就兼容的，有一些属性是需要IE10，等更高级的浏览器才能兼容，而html5更多运用在移动端方面，因为移动端搭载的浏览器比较高级。
二、HTML5 新增部分简介
1，新增的结构标签
（1）header（头部）
（2）nav（导航）
（3）section（主体）
（4）aside（侧边栏）
（5）article （内容）
（6）footer（底部）
作用：与div一样，只是增加了语义性，便于SEO优化。
拓展：SEO优化可以提升网站在搜索引擎中的排名，在前端实际应用中，我们会更多的去运用语义化标签，同时针对一些特殊的字符，我们运用权重高的标签去包裹网站logo。
兼容性解决：
（1）利用document.creatElement()去创建html5的新标签，同时设置成块元素（相对麻烦）
<!--[if lt IE 9]>
<script type="text/javascript">
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
</script>
<![endif]-->（2）借助于第三方的JS框架 =>html5shiv.min.js （推荐）配合IE的hack实现最佳兼容
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->2，新增的智能表单
2.1 input表单新增了type属性值：
- type=“email” 限制用户输入必须为Email类型
- type=“url” 限制用户输入必须为URL类型
- type=“date” 自动生成一个日期控件
- type=“time” 同上
- type=“month” 同上
- type=“week” 同上
- type=“number” 限制用户输入必须为数字类型
- type=“range” 产生一个滑动条的表单
- type=“search” 产生一个搜索意义的表单
- type=“color” 生成一个颜色选择表单
智能表单在移动端用的比较多，它会调取手机自身的控件。
2.2 表单智能验证
- required => 验证表单是否为空，必须配合form表单来使用
- pattern => 自定义验证表单规则，匹配正则
- invalid => 验证失败的时候触发的事件
- dom.setCustomValidity() => 自定义弹出的内容 参数：string 自定义的内容
2.3 表单新属性
- placeholder => 占位文本，体验更加
- autofocus => 自动获取焦点 dom.focus（）
- autocomplete => 提交一次后下次自动补全 注意：必须提交一次之后，同时必须要有name属性
- multiple => 配合file控件实现多选
- form => 配合form表单的id值实现关联，在任意位置都可以被提交，但是不建议这么写
2.4 智能表单过滤（datalist）
类似于搜索提示，输入一个内容会提示相关联的匹配的提示。它是利用表单的list =“datalist的id值”与datalist这个标签取得联系实现的。
3，video和audio标签
HTML5中新添了video标签来实现视频的播放而不是借助于flash技术
属性：
- autoplay =>视频默认加载完成后播放
- controls =>播放的控件
- loop =>控制播放循环
- poster =>在视频没有播放时的预览图片
API： - play() => 播放
- pause() => 暂停
- load() => 加载
支持的视频格式：
video标签支持3种视频格式：Ogg、MPEG4、WebM，并且各个主流浏览器的支持格式也不一样，如果需要处理兼容性，我们需要借助于source标签来解决（目前仅mp4格式得到完全兼容）。
audio的用法和video一样。
4，canves的基本用法
是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。
4.1 canves元素
<canvas id="aaa" width="300" height="150"></canvas>canvas看起来和img标签一样，只是 canvas 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。
如果不给设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置的宽高。
4.2 一个简单的例子
<html>
<head>
<title>Canvas tutorial</title>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<canvas id="tutorial" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
//绘制矩形
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
draw();
</script>
</html>5，js获取元素的新方式
（1）document.querySelector(‘selector’) 通过类似CSS选择器获取元素，符合匹配条件的第1个元素。可以传入复合选择器（如：.box li, .box > li input[type=’button’]）等
（2）document.querySelectorAll(‘selector’) 通过CSS选择器获取元素，以类数组形式存在。可以传入复合选择器（如：.box li, .box > li input[type=’button’]）等
6，js操作类名的新方法
- Node.classList.add(‘class’) 添加class
- Node.classList.remove(‘class’) 移除class
- Node.classList.toggle(‘class’) 切换class，有则移除，无则添加
- Node.classList.contains(‘class’) 检测是否存在class
7，js自定义属性
在H5中，我们使用data-=""的格式来自定义属性，可以通过dataset[属性名]来获取到我们的自定义属性的属性值，如果属性名是类似于-的形式，则我们需要使用驼峰命名的形式来获取属性值。
在jQuery中我们使用data()方法来获取标签的data属性的属性值。
8，网络状态
window.navigator.onLine:检测用户的网络状态，链接网络时返回true，网络断开时返回false。
window.addEventListener(“online”,function(){}):网络链接从断开到连接时触发。
window.addEventListener(“offline”,function(){}):网络链接从连接到断开时触发。
9，地理定位
在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)
9.1 获取地理位置的方式
- IP地址
- GPS（Global Positioning System，全球定位系统）
- Wi-Fi
- 手机信号
- 用户自定义数据
- 浏览器会自动以最优方式去获取用户地理信息。
9.2 API详解
navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options)//获取当前位置的地理信息。
navigator.geolocation.watchPosition(successCallback,errorCallback,options)//重复获取当前位置的地理信息。
(1)当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。
获取纬度：position.coords.latitude
获取经度：position.coords.longitude
(2)当获取地理信息失败后，会调用errorCallback，并返回错误信息error
(3)可选参数 options 对象可以调整位置信息数据收集方式:timeout 超时设置，单位为ms
10，web存储
10.1 特性
- 设置、读取方便
- 容量较大，sessionStorage约5M、localStorage约20M
- 只能存储字符串，可以将对象JSON.stringify() 编码后存储
10.2 window.sessionStorage
- 生命周期为浏览器窗口
- 不能在多窗口下数据共享，但通过跳转可以
10.3 window.localStorage
- 永久生效，除非手动删除
- 可以多窗口共享
10.4 方法详解
- setItem(key,value)//设置存储内容
- getItem(key) //获取存储内容
- removeItem(key) //删除key值的存储内容
- claer() //清除所有存储内容
- key(n) //以索引值来获取存储内容
10.5 sessionStorage,localStorage和cookie的区别
区别：
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
差异性：
相同点：都是存储数据，存储在web端，并且都是同源
不同点：
- cookie 只有4K 小 并且每一次请求都会带上cookie 体验不好，浪费带宽
- session和local直接存储在本地，请求不会携带，并且容量比cookie要大的多
- session 是临时会话，当窗口被关闭的时候就清除掉 ，而 local永久存在，cookie有过期时间
- cookie 和local都可以支持多窗口共享，而session不支持多窗口共享 但是都支持a链接跳转的新窗口
11，全屏显示
requestFullScreen()//开启全屏显示
cancelFullScreen()//退出全屏显示
12，文件读取
通过FileReader对象能够实现对本地存储文件的读取，可以使用 File 对象来指定所要读取的文件或数据。其中File对象可以是来自用户在一个 <input>元素上选择文件后返回的FileList 对象，也可以来自由拖放操作生成的DataTransfer。
12.1 FlieList对象
由于HTML5中我们可以通过为表单元素添加multiple属性，因此我们通过<input>上传文件后得到的是一个FileList对象（伪数组形式）。
12.2 FileReader对象
HTML5新增内建对象，可以读取本地文件内容。
通过 new FileReader()实例化一个对象。
使用.readAsDataURL()方法来读取文件，文件读取结果放在result属性中。
13，拖拽元素
通过设置元素的draggables属性为true来实现，img和a元素默认可以拖拽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
border-radius: 5px;
box-shadow: 0 0 2px 2px #000;
}
.box img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<input type="file">
<button>点击我进行读取文件</button>
<div class="box"></div>
<script type="text/javascript">
// 获取元素
var file = document.querySelector('input[type=file]');
var btn = document.querySelector('button');
var box = document.querySelector('.box');
// 给按钮注册点击事件
btn.addEventListener('click', function (argument) {
// 获取file对象里面的值
var data = file.files[0];
var type = data.type;
// 创建一个读取文件的对象
var fr = new FileReader();
// 读取data数据 这是一个异步操作
fr.readAsDataURL(data);
// 当读取完成以事件的形式通知
fr.addEventListener('load',function (argument) {
// 文件读取完毕之后，存放在fr对象下面的result属性里面
var result = fr.result;
// 判断type类型里面包不包含image/
if(type.indexOf('image/') -1){
// 创建一个img标签
var img = document.createElement('img');
img.src = result;
// 清空box里面的标签
box.innerHTML = '';
box.appendChild(img);
}else if(type.indexOf('video/') -1){
var video = document.createElement('video');
video.src = result;
// 设置video默认播放
video.setAttribute('autoplay','autoplay');
// 清空box里面的标签
box.innerHTML = '';
box.appendChild(video);
}else{
alert('请上传正确的格式');
}
})
})
</script>
</body>
</html>事件监听：
1、拖拽元素
ondrag 应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素，当拖拽结束时调用
2、目标元素
ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover 应用于目标元素，当停留在目标元素上时调用
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素，当鼠标离开目标元素时调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
.info{
width: 300px;
height: 300px;
border: 1px solid #000;
border-radius: 5px;
box-shadow: 0 0 2px 2px;
margin: 10px auto;
}
</style>
</head>
<body>
<!-- 给元素添加draggable=true就可以实现元素的拖拽 -->
<div draggable='true' class="box"></div>
<div class="info"></div>
<script type="text/javascript">
var box = document.querySelector('.box');
var info = document.querySelector('.info');
var body = document.body;
// 拖拽开始
box.addEventListener('dragstart', function (argument) {
this.style.backgroundColor = 'green';
})
// 拖拽结束
box.addEventListener('dragend', function (argument) {
this.style.backgroundColor = 'red';
})
//拖拽中 ,会在拖拽的时候持续触发
/*box.addEventListener('drag',function (argument) {
console.log('丫的，快撒手');
})*/
// 当拖拽元素进入到当前目标元素的时候触发
info.addEventListener('dragenter',function(){
//console.log('哟，您老来了！！');
info.style.boxShadow = '0 0 2px 5px red';
})
// 当拖拽元素离开目标元素的时候触发
info.addEventListener('dragleave',function(){
//console.log('下次再来！！');
info.style.boxShadow = '0 0 2px 2px';
})
// 当拖拽元素在目标上面的时候连续触发
info.addEventListener('dragover', function (event) {
//console.log('一直在外面，没好意思进去');
// 阻止默认行为
event.preventDefault();
})
// 当拖拽元素进入到当前目标元素的时候松开鼠标触发（把东西扔进来触发）
// 这是事件要想触发 一定在要dragover的时候阻止掉默认事件
info.addEventListener('drop',function(event){
//console.log('快请进，快请进');
// 阻止事件冒泡
event.stopPropagation();
this.appendChild(box);
})
// 当拖拽元素在目标上面的时候连续触发
body.addEventListener('dragover', function (event) {
//console.log('一直在外面，没好意思进去');
// 阻止默认行为
event.preventDefault();
})
body.addEventListener('drop',function(){
console.log(1)
this.appendChild(box);
})
</script>
</body>
</html>
