@yacent 2016-07-22T01:42:28.000000Z 字数 2211 阅读 1065

HTML5

html

HTML5 新特性

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

HTML5 语义化
根据内容的结构化，选择合适的标签(代码语义化)，便于开发者阅读以及编写优雅的代码，同时还要有利于浏览器的爬虫的机器的解析。简单点来讲就是说在没有CSS的情况下，页面还时能很好地呈现出内容的结构

video元素
注意一下浏览器所能支持的格式就好，一般使用ogg和mp4一起就可以包括所有浏览器了

可以使用DOM来对video元素进行相关的操作

var myVideo=document.getElementById("video1");
function playPause() { 
    if (myVideo.paused) { 
        myVideo.play();
    } else {
        myVideo.pause(); 
    }
}
function makeBig() { 
    myVideo.width=560; 
} 
function makeSmall() { 
    myVideo.width=320; 
}

audio元素与video元素类似

HTML5 拖放
主要有4个步骤

设置元素可拖放
draggable = "true"
拖动什么
ondragstart + dataTransfer.setData("Text", ev.target.id)
放到何处
ondragover 规定在何处放置被拖动的数据，因为默认地是无法将数据/元素防止到其他元素中
进行放置
ondrop + dataTransfer.getData("Text") + appendChild

example

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
    function allowDrop(ev) {
        ev.preventDefault();
    }
    function drag(ev) {
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    function drop(ev) {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />
</body>
</html>

Canvas元素
canvas本身不具备绘图能力，其为使用Js的绘图API来实现绘图
与SVG和VML相比，canvas基于JS的绘图API，而SVG和VML则是通过XML文档来进行绘图

http://www.w3school.com.cn/tags/html_ref_canvas.asp

var x = document.getElementById("myCanvas");
var cxt = x.getContext("2d"); // 初始化绘图环境
cxt.fillStyle = "#ff0000";
cxt.fillRect(0, 0, 175, 75);

Geolocation 用于定位用户的位置
http://www.w3school.com.cn/html5/html_5_geolocation.asp

HTML5 Web存储

localStorage 不随时间、浏览器的关闭而消失
sessionStorage 随浏览器关闭后重新定义

更多存储的相关知识，请查阅JS当中第23章

web应用缓存

cache mainfest

服务器mainfest文件 demo.appcache，需要包括以下三个部分

cache mainfest 在此标题下列出的文件将在首次下载后进行缓存
network 在此标题下列出的文件需要与服务器的连接，且不会被缓存
fallback 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

SSE 服务器发送事件

H5 表单新类型

email
url
range
number
date time week month……

新的表单属性

autocomplete autocomplete = "on"
autofocus autofocus = "autofocus"
form form = "form_id"
multipe multipe = "multipe"
pattern pattern = "[a-z]{3}"
required required = "required"

HTML5 全局属性

contenteditable
contextmenu
data-*
draggable
hidden
dropzone (move|copy|link)
spellcheck
translate

HTML5 事件属性
http://www.w3school.com.cn/tags/html_ref_eventattributes.asp

HTML5

内容目录