Web前端：（2）HTML5
HTML5的新内容
HTML的变化
l 标签：语义化标签 应用程序标签
l 属性：链接关系描述、结构数据标记、ARIA、自定义属性
l 智能表单：新的表单类型 虚拟键盘适配
l 网页多媒体：音频、视频、字幕
l Canvas:2D、3D
l SVG
JavaScriptAPI
l 核心平台提升：新选择器、Element.classList、访问历史API、全屏API
l 网页存储：Application Cache、localStorage、sessionStorage、WebSQL、IndexedDB
l 设备信息访问：网络状态、硬件访问、设备方向、地理围栏
l 拖放操作：网页内拖放、桌面拖入
CSS3
New Selector
Web Fonts
Text Styles
Opacity
HSL Color
Rounded Corners
Gradients
Shadows
Background Enhancements
Border Image
Flexible Box Model
Transforms
Transitions
Animations
etc.
1.HTML5结构化和语义化标签
便于开发者阅读和编写更优雅的代码
让浏览器或网络爬虫更好和解析和分析内容
2.应用程序标签
DataList、Progress、Meter、Menu、Details
<input type="text" list="input_list">
<datalist id= "input_list">
<option value="zhangsan"></option>
<option value="lisi"></option>
<option value="老马"></option>
</datalist>
<progress value="0.30"></progress>
<progress value="50" max="100"></progress>
3.Html5新特性
布局
语意标签
<header>
<nav>
<article>
<section>
<aside>
<footer>
新标记、属性
智能标签
number:数字input标签，只需要指定type 表单提交会自动验证
Url：网址
email：邮箱
date，datetime，datetime-local：日期，时间
range：区间范围
search：搜索 结合placeholder提供提示
tel：电话
color：颜色
progress ：进度条
datalist：配合input，智能推荐，自动搜索
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
</datalist>
<br />
<input type="text" list="name_list" name="name" />
<datalist id="name_list">
<option label="zs" value="张三" />
<option label="ls" value="李四" />
<option label="ww" value="王五" />
</datalist>
<br />
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=
<output name="x" for="a b"></output>
</form>
output：配合表单，表单输出
标签属性
placeholder 属性:指定input框提示信息。
require 非空验证
pattern 格式校验 正则 如：5位数字 pattern ="\d{5}"
min、max 和 step 属性
form属性，让表单标签不再局限在Form内，不再困扰form嵌套 （在表单标签内指定form属性指向一个表单的id即可）
autofocus属性：true，false 自动获取焦点 google支持比较好
媒体播放
Video：支持格式有Ogg 、MPEG4 、webM
播放视频：
<video width="320" height="240" controls="controls" autoplay="autoplay" src="./test.ogg">
<source src="demo.mp4" type="video/mp4">
</video>
播放音频：
<audio src="song.ogg" controls="controls"></audio>
调用摄像头：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script>
window.onload = function () {
document.getElementById("btn").onclick = function () {
context.drawImage(video, 0, 0, 640, 480);
}
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function (error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if (navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function (stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if (navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function (stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}
</script>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<input id="btn" type="button" value="笑一个" />
<canvas id="canvas" width="640" height="480"></canvas>
</body>
</html>
离线存储数据库
跨文档通信
通讯／网络
编辑
拖放
浏览历史管理
无障碍(Accessibility)
新应用程序接口（API）
即时二维绘图