HTML5 是 HTML 的一次大更新,可以实现更多丰富的内容。
现在主流的浏览器都支持 HTML5,IE从9代开始支持,但并不完善。

开始

首先,HTML5 的文件头更简洁,因为它是最后一个 HTML 的大版本:

<!doctype html>

语义标签

HTML5 对于文档常用的结构进行语义化的规范。

它们实际上限定和规范了标签内的内容,一定程度上认为不是进步的。
不过它没有限定使用次数,所以在任何符合语义的地方都可以使用。

<header></header>
<footer></footer>

<main></main>
<article></article>

<aside></aside>
<nav></nav>

关于IE的兼容性问题解决

IE9 行级元素在设置高度时是失效的,IE8 不支持 HTML5,可以手动创建这些标签:

document.createElement("header");

但它默认的自定义标签是行内元素,需要用 dispaly:block 转换一下。

又因为这种方式过于繁琐,所以直接引入写好的 js 来解决兼容性问题就好了:

<script src="../js/html5shiv.min.js"></script>

表单新增的 type 属性

<input type="email" />	//会对输入进行 email 的校验(必须有@和服务器名称)
<input type="tel" />	//可以在移动端打开数字键盘(这并不语义。。)
<input type="url" />	//会对输入进行网址校验(必须包含 http://)

<input type="number" value="60" max="100" min="0"/>	//只能输入数字,支持小数和负数
<input type="search" />	//自带清空按钮,更好的输入体验

<input type="range" value="60" max="100" min="0"/>	//提供一个滑块进行数字输入
<input type="color" />	//颜色选择器

<input type="time" />	//时间选择器
<input type="date" />	//日期选择器
<input type="datetime" />	//时间日期选择器(仅 safari 支持)
<input type="datetime-local" />	//时间日期选择器
<input type="month" />
...

表单新增的其他属性

<!-- placeholder 文本占位 -->
<!-- autofocus 自动聚焦 -->
<!-- autocomplete 自动完成,on:打开,off:关闭,且必须成功提交过、元素同时有 name 属性 -->
<!-- required 必须填写 -->
<!-- pattern 正则验证 -->
<input type="text" name="xxx" placeholder="xxx" autofocus autocomplete="on" required pattern=""/>

<!-- multiple 实现文件多选、逗号分割的多邮箱输入 -->
<input type="file" name="xxx" multiple/>
<input type="email" name="xxx" multiple/>

<!-- 不包含在 form 里的表单元素,可以指定表单的 id 提交 -->
<input type="text" name="xxx" form="myForm"/>

表单新增元素

使用 datalist 创建可输入的下拉菜单(Firefox 不支持):

<!-- 建立输入框和 datalist 的关联 -->
<input type="text" list="xxx"/>

<!-- datalist 创建选择列表 -->
<datalist id="xxx">
	<option value="显示值" label="说明"></option>
</datalist>

其他:

//生成公钥和私钥
<keygen></keygen>

//显示输出信息
<output></output>

新的表单事件

//oninput 监听当前元素内容的改变,只要被改变就会触发
document.getElementById("userName").oninput = function(){
	console.log(this.value);
}

//oninvalid 当验证不通过时触发
document.getElementById("userPhone").oninvalid = function(){
	//设置默认的提示信息
	this.setCustomValidity('请输入合法的11位手机号');
}

进度条

<!-- 普通进度条 -->
<progress max="100" value="50"></progress>

<!-- 带预警的进度条(度量器) -->
<meter high="" low="" max="" min="" value=""></meter>

表单的其他

//fieldset 对表单进行分组
<form>
	<fieldset>
		<legend>学生档案</legend>
	</fieldset>
</form>

多媒体标签

在过去多媒体内容一般通过 embed、flash 等技术实现,但现在可以直接使用标签展示出来:

<audio src="" controls autoplay loop></audio>
<video src="" width="" height="" poster=""></video>

<!-- poster:视频的默认封面 -->

不同浏览器支持的视频格式不一样,所以可以用 source 指定多个文件源:

<video contrils>
	<source src="" type="video/flv"/>
	<source src="" type="video/mp4s"/>
	您的浏览器不支持当前视频的播放
</video>

获取 dom 元素

querySelector 获取单个元素,如果满足的不止一个,就只返回第一个:

var javaLi = document.querySelector("li");
var javaLi = document.querySelector(".li");
var javaLi = document.querySelector("#li");

querySelectorAll 获取满足条件的所有元素(数组的形式):

var javaLi = document.querySelectorAll("li");

操作元素样式

通过操作 class 的方法:

xxx.classList.add("red");	//添加,一次一个
xxx.classList.remove("red");	//移除,一次一个
xxx.classList.toggle("red");	//切换,有则添加,没有则移除
xxx.classList.contains("red");	//判断是否包含指定 class,返回 true/false

xxx.classList.item(2);	//获取第二个 class

自定义属性

data- 开头,使用小写和非纯数字是好习惯:

<p data-school-name="xxx">xxx</p>

//获取自定义属性值,在 js 中转写为驼峰
var value = p.dataset["schoolName"];

一些接口

网络状态改变事件:

window.addEventListener("online",function(){});	//连接执行...
window.addEventListener("offline",function(){});	//断开执行...

全屏事件:

requestFullScreen();	//开启全屏
cancelFullScreen();	//退出全屏
fullScreenElement();	//判断是否全屏

//兼容性问题
if (div.requestFullScreen){
	requestFullScreen();
}
else if...

div.webkitRequestFullScreen();
div.mozRequestFullScreen();
div.msRequestFullScreen();
div.oRequestFullScreen();

//退出全屏只能对 document 操作
document.cancelFullScreen();

读取文件内容

readAsText();	//作为文本读取
readAsBinaryString();	//作为二进制文件读取
readAsDataURL();	//将资源 base64 编码,可以直接储存在 url 和展示出来
abort();	//中断读取

文件读取时的状态监听:

onabort 读取文件断片时触发
onerror 读取文件错误时触发
onload 读取成功触发
onloadend 读取完成时触发
onloadstart 开始时触发
onprogress 读取文件过程中持续触发

读取上传的文件为数组,并将第一个数组元素(文件)readAsDataURL:

<input type="file" name="myFile" id="myFile" onchange="getFileContent"/>

function getFileContent(){
	var reader = new FileReader;
	var file = document.querySelector("#myFile").files;
	reader.readAsDataURL(file[0]);
	
	reader.onload = function(){
		document.querySelector("img").src = reader.result;
	}
}

拖曳接口使用

//对元素配置
draggable="true"

//对移出窗口的监听
ondrag
ondragstart
ondragleave
ondragend

//对移入窗口的监听
ondragenter
ondragover
ondrop
ondragleave

浏览器会默认阻止 ondrop 事件,所以需要在 ondragover 的时候阻止其默认行为:

div2.ondragover = function(e){
	e.preventDefault();
}

添加被拖曳的元素到当前目标元素:

div2.ondrop = function(){
	div2.appendChild(p);
}

更通用的方案,对 document 对象操作:

var obj = null;

document.ondragstart = function(e){
	obj = e.target;
}

document.ondrop = function(e){
	e.target.appendChild(obj);
}

通过 dataTransfer 实现数据储存与读取:

//ondragstart
setData(format,data);
e.dataTransfer.setData("text/html", e.target.id);

//ondrop(只能在这里读取)
var id = e.dataTransfer.getData("text/html");

地理定位接口

function getLocation(){
	if (navigator.geolocation){
		navigator.geolocation.getCurrentPosition(showPosition, showError, {
			enableHighAccuracy: true/false, //是否使用高精度
			timeout:3000, //设置超时时间
			maximumAge:300 //设置重新获取地理信息的时间间隔
		});
	}
}

//成功
position.coords.latitude 纬度
position.coords.longitude 经度
position.coords.accuracy 精度
position.coords.altitude 海拔高度

//失败
error.code=

error.PERMISSION_DENIED
error.POSITIOB_UNAVAILABLE
error.TIMEOUT
error.UNKNOWN_ERROR
  • 可以通过百度地图等提供的 API 来进行位置的选取等操作

web 存储

在 HTML5 之前,网页的数据一般通过 cookice 来存储,但现在有更先进的方案。

setItem(key,value); //创建数据存储的键值对
getItem(key); //获取数据,不存在时返回 null
removeItem(key); //移除,key 值错误不会报错也不会删除数据
clear();

window.sessionStorage.setItem("userName",name);
window.localStorage.setItem("userName",name);

sessionStorage:

  • 5M左右容量
  • 存储在当前页面的内存中
  • 生命周期为关闭当前页面

localStorage:

  • 20M左右容量
  • 存储在硬盘上,同浏览器可共享数据
  • 生命周期为永久

应用程序缓存

首先在页首添加一下 manifest,建议扩展名 appcache:

<html manifest="demo.appcache"></html>

然后配置这个清单文件:

CACHE MANIFEST #这行必须作为第一句存在

#需要缓存的文件列表,* 代表所有文件
CACHE:
../images/xxx.png
../images/xxx.png

#每次都要重新获取的文件列表
NETWORK:
../images/xxx.png

#若文件无法使用的替代方案,/ 代表所有文件
FALLBACK:
../images/xxx.png ../images/xxx2.png
  • manifest 文件需要配置正确的 MIME-type,即 text/cache-manifest

自定义播放器

常用方法:

load(); //加载
play(); //播放
pause(); //暂停

常用属性:

currentTime 当前播放进度(值被修改时触发)
duration 视频的总时间(单位秒)
paused 视频的播放状态

常用事件:

oncanplay 可以播放时触发
ontimeupdate 报告当前播放进度
onended 播放完触发(重置)

实现播放暂停:

if (video.paused){
	video.play();
}
else {
	video.pause();
}
$(this).toggleClass("fa-play fa-pause");

实现跳播:

$(.bar).click(function(e){
	var offset = e.offsetX;
	var percent = offset/$(this).width();
	var current = precent*video.duration;
	video.currentTime = current;
});

播放完毕重置播放器状态:

video.currentTime = 0;

另外的:

  • 实现全屏…
  • 实现进度条…
  • 视频加载完毕,可以播放时展示出控制栏上的时长信息

HTML5 Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像,可以用来代替之前的 SVG 方案。

<canvas id="myCanvas" width="200" height="100"></canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

关于它的具体使用,可以参考额外的教程