1.声明必须位于 HTML5 文档中的第一行
浏览器支持
Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera
<!DOCTYPE html>
2.HTML5 的改进 ,新元素, 新属性 ,完全支持 CSS3, Video 和 Audio ,2D/3D 制图 ,本地存储 ,本地 SQL 数据 ,Web 应用。
详细标签内容可以去: 菜鸟教程HTML5部分学习.
3.IE9 以下版本浏览器兼容HTML5的方法
使用html5shiv包
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->
载入后,初始化新标签的CSS
/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}
详细兼容问题参考链接: 阿西河.
4.语意元素
一个语义元素能够清楚的描述其意义给浏览器和开发者。无语义 元素实例: <div>
和 <span>
无需考虑内容。语义元素实例: <form>, <table>, <img>
-清楚的定义了它的内容.
5.<Canvas>
元素用于图形的绘制canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
实例
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8"></meta>
</head>
<body>
<canvas id= "mycanvas" height= "100" width= "100"
style="border:1px solid #c3c3c3;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
实例解析:
首先,找到 元素:
var c=document.getElementById(“myCanvas”);
然后,创建 context 对象:
var ctx=c.getContext(“2d”);
getContext(“2d”) 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
6.canvas坐标
canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
7.canvas路径(画线)
在Canvas上画线,我们将使用以下两种方法:
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用 stroke() 方法来绘制线条:
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
更多canvas使用方法参考菜鸟教程
8.HTML5 支持内联 SVG
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
9.HTML5 MathML
HTML5 可以在文档中使用 MathML 元素,对应的标签是 <math></math>
。
MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。
详情请点击此处
10.HTML5 拖放(Drag 和 Drop)
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。(学习完后我自己猜测,像华容道这类游戏就可以采用此种设计…,简直不要太爽)
实例加解释如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
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>
<p>拖动 RUNOOB.COM 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
- 首先,为了使元素img可拖动,把 draggable 属性设置为 true
<img draggable="true">
- 开始拖动
ondragstart
,和拖动的内容setData()
在上面的例子中,ondragstart
属性调用了一个函数,drag(event)
,它规定了被拖动的数据。
dataTransfer.setData()
方法设置被拖数据的数据类型和值
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
Text
是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id (“drag1”)。
- 放到何处
ondragover
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。这要通过调用ondragover
事件的event.preventDefault()
方法
function allowDrop(ev)
{
ev.preventDefault();
}
4.进行放置 ondrop
当放置被拖数据时,会发生 drop
事件。
在上面的例子中,ondrop
属性调用了一个函数,`drop(event)
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}`
调用 preventDefault()
来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
通过 dataTransfer.getData("Text")
方法获得被拖的数据。该方法将返回在 setData()
方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素(目标元素)中
11.HTML5 Geolocation(地理定位)自行研究
12.视频Video control 属性提供了很多控件
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
13.音频Aideo
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
14.HTML5 新的 Input 类型
15.HTML5 表单元素及属性
16.HTML5中新的语义元素
16.HTML5 web 存储,一个比cookie更好的本地存储方式。
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.
数据以 键/值 对存在, web网页的数据只允许该网页访问使用
localStorage 和 sessionStorage
localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
17.HTML5 Web SQL 数据库
18.HTML5 应用程序缓存,使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
如需启用应用程序缓存,请在文档的<html>
标签中包含 manifest
属性:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
</html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
manifest 文件的建议的文件扩展名是:".appcache"。
Remark 请注意,manifest 文件需要配置正确的 MIME-type,即 “text/cache-manifest”。必须在 web 服务器上进行配置。
完整的 Manifest 文件
//第一行,CACHE MANIFEST,是必需的:上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的。
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
//下面的 NETWORK 小节规定文件 "login.php" 永远不会被缓存,且离线时是不可用的
//可以使用星号来指示所有其他资源/文件都需要因特网连接:
NETWORK:
*
NETWORK:
login.php
//下面的 FALLBACK 小节规定如果无法建立因特网连接,则用 "offline.html" 替代 /html5/ 目录中的所有文件
//注意: 第一个 URI 是资源,第二个是替补。
FALLBACK:
/html/ /offline.html
请留心缓存的内容。
一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。
注意: 浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)
19.HTML5 Web Workers,web worker 是运行在后台的 JavaScript,不会影响页面的性能。
由于 web worker 位于外部文件中,它们无法访问下列 JavaScript 对象:
window 对象
document 对象
parent 对象
详细请参考此链接
20.HTML5 服务器发送事件(Server-Sent Events)
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更(不用询问)。
21.HTML5 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。点此看详细内容