HTML5
HTML5
TomHTML5
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5新特性由HTML、CSS、DOM 以及 JavaScript构成。
声明html文档为HTML5
<!DOCTYPE html>
新增语义化标签
<article>定义页面独立的内容区域<aside>定义页面的侧边栏内容<details>用于描述文档或文档某个部分的细节<dialog>定义对话框，比如提示框<header>定义了文档的头部区域<footer>定义 section 或 document 的页脚。- …
以下的 HTML 4.01 元素在HTML5中已经被删除,不推荐使用:
<acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><strike>
html5 表单元素
<input>元素type新增值color：HTML5 用于指定颜色的控件。date：HTML5 用于输入日期的控件（年，月，日，不包括时间）。datetime-local：HTML5 用于输入日期时间控件，不包含时区。email：HTML5 用于编辑 e-mail 的字段。 合适的时候可以使用 :valid 和 :invalid CSS 伪类。month：HTML5 用于输入年月的控件，不带时区。number: HTML5 用于输入浮点数的控件。tel：HTML5 用于输入电话号码的控件；换行会被自动从输入的值中移除A，但不会执行其他语法。可以使用属性，比如 pattern 和 maxlength 来约束控件输入的值。恰当的时候，可以应用 :valid 和 :invalid CSS 伪类。search：HTML5用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。time：HTML5 用于输入不含时区的时间控件。url：HTML5 用于编辑URL的字段。 The user may enter a blank or invalid address. 换行会被自动从输入值中移队。可以使用如：pattern 和 maxlength 样的属性来约束输入的值。 恰当的时候使可以应用 :valid 和 :invalid CSS 伪类。week：HTML5 用于输入一个由星期-年组成的日期，日期不包括时
<input>元素新增属性autofocus自动获得焦点max数字或日期时间最大值，且不得小于其最小值（min属性）值。min数字或日期时间最小值，且不得大于其最大值（max属性）值。pattern检查控件值的正则表达式.。pattern必须匹配整个值，而不仅仅是某些子集。此属性可以用在 text, search, tel, url 或 email。1
2
3
4<form>
<input type="text" pattern="\d+">
<button>提交</button>
</form>required这个属性指定用户在提交表单之前必须为该元素填充值. 当type属性是hidden,image或者按钮类型(submit,reset,button)时不可使用.placeholder提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。仅适用于当type 属性为text, search, tel, url or email时;readonly这个布尔属性用于指明用户无法修改控件的值。如果控件的 type 属性为hidden, range, color, checkbox, radio, file 或 type时，此属性会被忽略。
HTML5新增 javascript 选择器
document.getElementsByName()返回带有指定名称的对象的集合document.querySelector()返回匹配指定的CSS选择器的第一个元素document.querySelectorAll()返回文档中匹配的CSS选择器的所有元素节点集合
HTML5 class 属性增强
element.classList返回元素的类名，（只读）。通过使用 classList 中的属性和方法可以便捷高效的修改元素的类名length返回类列表中类的数量(只读)add(class1, class2, ...)在元素中添加一个或多个类名，类名如果存在则不添加contains(class)返回布尔值，判断指定的类名是否存在。item(index)返回元素中索引值对应的类名。索引值从 0 开始。remove(class1, class2, ...)移除元素中一个或多个类名。toggle(class, true|false)在元素中切换类名。true添加，false移除
HTML5自定义数据属性
data-* 全局属性 （自定义数据属性的属性），它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换。
- 可以使用遵循 xml名称生产规则 的任何名称来被替换，并具有以下限制：
- 该名称不能以xml开头无论这些字母是大写还是小写；
- 该名称不能包含任何分号 (U+003A)
- 该名称不能包含A至Z的大写字母
1 | <article |
1 | var article = document.querySelector('#electriccars'); |
元素拖拽
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。如果要让元素可以拖拽，在元素中添加 draggable="true" 属性。
1 | <div class="box"> |
拖拽事件
拖拽事件
ondragstart开始拖拽。ondragend结束拖拽。ondrag拖拽进行中连续触发。
目标事件
ondragenter拖拽元素进入目标元素。ondragleave拖拽元素离开目标元素。ondragover拖拽元素悬停在目标元素之上连续触发。ondrop拖拽元素在目标元素上释放。ondrop事件想要触发，必须在ondragover事件中阻止默认事件,event.preventDefault();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36<div class="box">
目标元素
</div>
<div class="box1" draggable="true">
拖拽元素
</div>
<script>
let box = document.querySelector('.box')
let box1 = document.querySelector('.box1')
/*******************拖拽元素事件********************/
// 开始拖拽
box1.ondragstart = function (ev) {
}
// 结束拖拽
box1.ondragend = function (ev) {
}
// 会连续触发
box1.ondrag = function (ev) {
}
/*******************目标元素事件********************/
// 拖拽元素进入
box.ondragenter = function (ev) {
}
// 拖拽元素离开
box.ondragleave = function () {
}
// 拖拽元素悬停时连续触发
box.ondragover = function(event){
// 阻止默认事件，否则 ondrop 不会被触发
event.preventDefault();
}
// 拖拽元素释放，必须在 ondragover 中阻止默认事件，否则不能触发
box.ondrop = function(ev){
}
</script>
firefox浏览器(旧版本)如果要进行拖拽操作必须设置
event中dataTransfer对象的setData(‘key’,“value”)方法。
firefox火狐浏览中图片是默认可以拖拽的。
拖拽元素间数据传递
dataTransfer 数据传递对象。
setData(type,data)设置传递数据,data 为字符串类型。getData(type)获取传递数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21var drag = document.getElementById('drag');
var target = document.getElementById('target');
drag.ondragstart = function(ev){
var ev = ev || window.ev;
//传递数据给目标元素
ev.dataTransfer.setData('k1','一个测试数据');
this.style.background = 'red';
}
target.ondragover = function(ev){
var ev = ev || window.event;
//阻止默认事件，否则 ondrop 事件不能触发。
ev.preventDefault();
}
// 拖拽元素释放
target.ondrop = function(ev){
var ev = ev || window.event;
//获取拖拽元素数据
alert(ev.dataTransfer.getData('k1'));
}
拖拽时鼠标样式
dataTransfer.effectAllowed设置鼠标样式。可选择的样式：copy: 复制到新的位置.move:移动到新的位置 .link:建立一个源位置到新位置的链接.copyLink: 允许复制或者链接.copyMove: 允许复制或者移动.linkMove: 允许链接或者移动.all: 允许所有的操作.none: 禁止所有操作.uninitialized: 缺省值（默认值）, 相当于all.
1
2
3
4// 开始拖拽
box1.ondragstart = function (ev) {
ev.dataTransfer.effectAllowed = 'copy'
}需要在
ondragstart事件中指定，否则可能不识别。dataTransfer.setDragImage(img,x,y)拖拽时跟随鼠标的镜像样式。1
2
3box1.ondragstart = function (ev) {
ev.dataTransfer.setDragImage( document.querySelector('.cat') ,0,0)
}- 需要在
ondragstart事件中设置，第一个为图片的元素对象。
- 需要在
拖拽外部文件
拖拽元素在在目标元素上释放时可以获取到文件对象
event.dataTransfer.files拖拽的文件列表。event.dataTransfer.files.lenght拖拽的文件列表长度。event.dataTransfer.files[0].type拖拽的文件类型。
FileReader 文件流对象读取拖拽的文件数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<div class="box">
目标元素
</div>
<img class="preview" alt="">
<script>
let box = document.querySelector('.box')
box.ondragover = function (ev) {
//阻止默认事件，否则 ondrop 事件不能触发。
ev.preventDefault();
}
box.ondrop = function (ev) {
// 阻止浏览器默认事件，否则浏览器会打开该文件
ev.preventDefault();
// 读取传入的文件，数组类型
var fs = ev.dataTransfer.files;
//文件流对象
var fd = new FileReader();
// 读取拖拽的文件中读取数据。
fd.readAsDataURL(fs[0]);
// 读取成功后触发该事件。
fd.onload = function () {
// 读取到的数据赋值给图片对象。
let img = document.querySelector('.preview')
img.src = this.result;
}
}
</script>
web存储
使用HTML5可以在本地存储用户的浏览数据。在HTML5之前,本地存储使用的是 cookie。Web 存储更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能，数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
主流的浏览器都支持web存储，Internet Explorer 7 及更早IE版本不支持web 存储。
localStorage用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。sessionStorage用于临时保存窗口或标签页的数据，在关闭窗口或标签页之后将会删除这些数据。
web存储中5个通用的API方法
localStorage.setItem(key,value)保存数据localStorage.getItem(key)读取数据localStorage.removeItem(key)删除单个数据localStorage.clear()删除所有数据localStorage.key(index)得到某个索引的key
音频、视频播放
video元素播放视频、audio元素播放音频
- audio语法
1
< audio src="音频路径"> </ audio >
| 属性 | 值 | 说明 |
|---|---|---|
controls |
controls |
如果出现该属性，则向用户显示控件，比如播放按钮 |
autoplay |
autoplay |
如果出现该属性，则音频在就绪后马上播放 [自动播放]，谷歌浏览器不支持，用户需自己点击 |
loop |
loop |
如果出现该属性，则当音频结束时重新开始播放 [循环播放] |
preload |
auto/meta/none |
如果出现该属性，则音频在页面加载时进行加载，并预备播放 [预加载] |
- video语法| 属性 | 值 | 说明 |
1
< video src="音频路径"> </ video >
| :——————-: | :—————————————: | :—————————————————————————————————————————: |
|controls|controls| 如果出现该属性，则向用户显示控件，比如播放按钮 |
|autoplay|autoplay| 如果出现该属性，则音频在就绪后马上播放 [自动播放]，谷歌浏览器不支持，用户需自己点击 |
|loop|loop| 如果出现该属性，则当音频结束时重新开始播放 [循环播放] |
|preload|auto/meta/none| 如果出现该属性，则音频在页面加载时进行加载，并预备播放 [预加载] |
|width/height|length(px)| 设置视频播放器的宽度/高度 |
|muted|muted| 静音播放 |
浏览器支持问题
实际开发过程中，为了不同浏览器，都能够正常播放音频，使用source元素，source可链接不同的视频文件
2
3
4
5
6
<source src="vedio/vedio.mp4"/>
<source src="vedio/vedio.ogg"/>
<source src="vedio/video.webm"/>
您的浏览器不支持video播放的视频
</video>
<video>
在HTML5之前网页中播放视频是通过插件（比如 Flash）来显示的。HTML5 规定了一种通过 video 元素来包含视频的标准方法。
Internet Explorer 8 或者更早的IE版本不支持
<video>元素。
1 | <video controls> |
浏览器对不同格式的视频文件兼容并不相同，配合
<source>标签可以设置多个视频源。
音频、视频对媒体类型的支持。
<video>支持：mp4、webm …,<audio> 支持:mp3、ogg…。
<video>标签 常用属性
controls显示展示浏览器自带的按钮控件。autoplay视频会马上自动开始播放.- chrome浏览器禁用了自动播放功能(设置 muted 可以自动播放)，firefox 可以自动播放。
loop指定后，会在视频结尾的地方，自动返回视频开始的地方。muted设置后，音频会初始化为静音src要嵌到页面的视频的URL。可选；你也可以使用video块内的元素来指定需要嵌到页面的视频。 poster一个海报帧的URL，用于在用户播放或者跳帧之前展示。
<video> 标签DOM操作，通过DOM可以使用播放、暂停、获取视频信息等操作。同样的，这些方法在<audio> 中也是适用的。
canPlayType()检测浏览器是否能播放指定的音频/视频类型。play()开始播放音频/视频。pause()暂停当前播放的音频/视频。duration返回当前音频/视频的长度（以秒计）。readyState返回音频/视频当前的就绪状态。src设置或返回音频/视频元素的当前来源。
图形绘制 Canvas
<canvas>是一个可以使用脚本(JavaScript)来绘制图形的 HTML 元素。
1 | <canvas id="tutorial" width="150" height="150"></canvas>` |
<canvas> 标签只有两个属性—— width和height。这些都是可选的，并且同样利用 DOM properties 来设置。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。
不建议使用css控制
<canvas>的宽高，使用csss设置宽高可以造成绘制出来的图像是扭曲的。
<canvas> 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。<canvas>元素中getContext() 的方法，可以获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。
1 | var canvas = document.getElementById('tutorial'); |
<canvas>可以看作是画布用来承载要绘制的内容，而通过getContext('2d')获取到的上下文则是画笔用来绘制图形。
<canvas>坐标系
画笔设置
paint.fillStyle = ‘red’;画笔绘制实心图案时颜色。paint.strokeStyle = ‘blue’;画笔绘制空心图案时颜色。paint.lineWidth = 10;画笔宽度。paint.lineJoin = ‘round’;多边形端点样式：round圆角bevel斜角miter默认
paint.lineCap = ‘round’;直线端点样式:butt默认round圆角square高度多出宽度的 1/2 值
绘制矩形
paint.fillRect(x,y,width,height);实心方块paint.strokeRect(x, y, width, height)空心方块
绘制图片
paint.drawImage(imgObj,x,y,imgWidth,imgHeight);
1
2
3
4
5var mImg = new Image();
mImg.src = './img/gg.png';
mImg.onload = function(){
paint.drawImage(this,0,0);
}图片装载是需要一个过程的，当图片装载完成后才可以绘制图片否则将绘制不成功。
绘制文本
paint.font = ‘30px impact’;文字大小,类型。paint.textAlign = ‘left’;文字左右对齐paint.textBaseline = ‘bottom’;文字上下对齐方式，top middle bottom。paint.shadowOffsetX = 10;文字阴影 X 偏移。paint.shadowOffsetY = 10;文字阴影 Y 偏移。paint.shadowColor=‘red’;文字阴影颜色。paint.shadowBlur = 2;文字阴影模糊。paint.strokeText(‘text’,x,y);绘制空心文本。paint.fillText(‘text’,x,y);绘制实心文本。
绘制路径
paint.beginPath();开始路径：paint.moveTo(x,y);路径第一个点：paint.lineTo(200,200);移动到下一个点：paint.closePath();闭合路径：paint.stroke();以线的方式绘制：paint.fill();以填充的方式绘制：paint.rect(100,100,100,100);绘制矩形：paint.clearRect(0,0,canvas.width,canvas.height);清除画布：paint.arc(100,100,15,0,90*Math.PI/180,false);绘制圆形- 参数1: X坐标。
- 参数2: Y坐标。
- 参数3：半径。
- 参数4: 起始弧度。（角度 * Math.PI / 180）
- 参数5：结束弧度。
- 参数6：方向,true逆时针，false顺时针。
paint.save();保存画布(canvas)的所有状态paint.restore();恢复 canvas 状态的
清除画布中内容
paint.clearRect(x, y, width, height)
定位
HTML5 Geolocation（地理定位）用于定位用户的位置。
1 | if (navigator.geolocation) { |
由于定位需要使用谷歌服务器的原因，国内用户获取定位时通常是获取不到的，建议使用第三方工具获取
高德地图获取当前定位
1 |
|
