1. 提供了定义页面不同部分的新语义元素:
<article>
<aside>
<details>
(元素用于描述有关文档或文档片段的详细信息) <figcaption>
(元素标记图像标题) <figure>
(元素标记文档中的一个图像) <footer>
<header>
<main>
<mark>
(带有标记、需要突出显示的文本) <nav>
<section>
<summary>
(标签包含 details 元素的标题) <time>
(标签定义日期或时间,或者两者) www.w3school.com.cn/html/html5_...
2. 图形
(1)canvas[www.w3school.com.cn/tags/html_r...]
创建canvas元素
arduino
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制(canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成)
ini
<script type="text/javascript">
var c=document.getElementById("myCanvas"); //JavaScript 使用 id 来寻找 canvas 元素:
var cxt=c.getContext("2d"); //创建 context 对象
cxt.fillStyle="#FF0000"; //fillStyle 方法将其染成红色
cxt.fillRect(0,0,150,75); //fillRect 方法规定了形状、位置和尺寸(在画布上绘制 150x75 的矩形,从左上角开始 (0,0))。
</script>
canvas可以画线条、画圆、画渐变背景、把一张图放在画布上等。
(2)svg(可伸缩矢量图形)
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
ini
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
(3)Canvas vs. SVG
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。 Canvas 是逐像素进行渲染的。 在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
Canvas vs. SVG比较
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序(比如谷歌地图)
- 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
- 不适合游戏应用
3. 新的媒介元素[www.w3school.com.cn/tags/html_r...]
标签 | 描述 |
---|---|
<audio> |
定义声音或音乐内容。 |
<embed> |
定义外部应用程序的容器(比如插件)。 |
<source> |
定义 和 的来源。 |
<track> |
定义 和 的轨道。 |
<video> |
定义视频或影片内容。 |
4.新的表单元素
标签 | 描述 |
---|---|
<datalist> |
定义输入控件的预定义选项。 |
<keygen> |
定义键对生成器字段(用于表单)。 |
<output> |
定义计算结果。 |
5.新的属性语法
HTML5 允许四种不同的属性语法。
该例演示 标签中使用的不同语法:
标签 | 描述 |
---|---|
Empty | <input type="text" value="Bill Gates" disabled> |
Unquoted | <input type="text" value=Bill> |
Double-quoted | <input type="text" value="Bill Gates"> |
Single-quoted | <input type="text" value='Bill Gates'> |
6.新的输入类型
| 新的输入类型
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
| 新的输入属性
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height 和 width
- list
- min 和 max
- multiple
- pattern (regexp)
- placeholder
- required
- step
HTML API
地理定位(Geolocation(地理定位)用于定位用户的位置。)
getCurrentPosition()
xml
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
[www.w3school.com.cn/html/html5_...]
拖放
xml
<!DOCTYPE HTML>
<html>
<head>
<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>
<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>
[www.w3school.com.cn/html/html5_...]
web存储
1.通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储。
2.在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求。本地存储则更安全,并且可在不影响网站性能的前提下将大量数据存储于本地。
3.与 cookie 不同,存储限制要大得多(至少5MB),并且信息不会被传输到服务器。
4.本地存储经由起源地(origin)(经由域和协议)。所有页面,从起源地,能够存储和访问相同的数据。
HTML 本地存储提供了两个在客户端存储数据的对象:
- window.localStorage - 存储没有截止日期的数据
- window.sessionStorage - 针对一个 session 来存储数据(当关闭浏览器标签页时数据会丢失)
在使用本地存储时,请检测 localStorage 和 sessionStorage 的浏览器支持:
csharp
if (typeof(Storage) !== "undefined") {
// 针对 localStorage/sessionStorage 的代码
} else {
// 抱歉!不支持 Web Storage ..
}
localStorage 对象
localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除,在下一天、周或年中,都是可用的。
javascript
// 存储
localStorage.setItem("lastname", "Gates");
// 取回
localStorage.getItem("lastname");
// 删除
localStorage.removeItem("lastname");
// 清空localStorage中的所有数据
localStorage.clear();
** 注意:名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式!
sessionStorage 对象
sessionStorage 对象等同 localStorage 对象,不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页,数据也会被删除。
arduino
// 存储
sessionStorage.setItem("lastname", "Gates");
// 取回
sessionStorage.getItem("lastname");
// 删除
sessionStorage.removeItem("lastname");
// 清空sessionStorage中的所有数据
sessionStorage.clear();
[www.w3school.com.cn/html/html5_...]
应用缓存
HTML5 引入了应用程序缓存(Application Cache),这意味着可对 web 应用进行缓存,并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势:
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
xml
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
文档内容 ......
</body>
</html>
带有 cache manifest 的 HTML 文档(供离线浏览) 如需启用应用程序缓存,请在文档的 标签中包含 manifest 属性:
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
manifest 文件的建议文件扩展名是:".appcache"。
注意:manifest 文件需要设置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。
bash
CACHE MANIFEST //必需
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js //上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件被加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然可用。
NETWORK: //NETWORK 部分规定文件 "login.php" 永远不会被缓存,且离线时是不可用的:(使用星号来指示所有其他其他资源/文件都需要因特网连接)
login.asp
FALLBACK:
/html/ /offline.html //FALLBACK 部分规定如果无法建立因特网连接,则用 "offline.html" 替代 /html/ 目录中的所有文件:(第一个 URI 是资源,第二个是替补)
一旦应用被缓存,它就会保持缓存直到发生下列情况:
- 用户清空浏览器缓存
- manifest 文件被修改(参阅下面的提示)
- 由程序来更新应用缓存
关于应用程序缓存的注意事项:
1.请留心缓存的内容。
2.一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。
3.注释:浏览器对缓存数据的容量限制可能不太一样(某些浏览器的限制是每个站点 5MB)。
[www.w3school.com.cn/html/html5_...]
Web Workers
当在 HTML 页面中执行脚本时,页面是不可响应的,直到脚本已完成。
Web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 运行在后台。
xml
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {//在创建 web worker 之前,请检测用户浏览器是否支持它:
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js"); //检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码:
}
w.onmessage = function(event) { //向 web worker 添加一个 "onmessage" 事件监听器:
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate(); //当创建 web worker 后,它会继续监听消息(即使在外部脚本完成后)直到其被终止为止。如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:
w = undefined; //如果您把 worker 变量设置为 undefined,在其被终止后,可以重复使用该代码:
}
</script>
</body>
</html>
Web Worker 和 DOM
由于 web worker 位于外部文件中,它们无法访问下例 JavaScript 对象:
- window 对象
- document 对象
- parent 对象
[www.w3school.com.cn/html/html5_...]
SSE
Server-Sent 事件允许网页从服务器获得更新。
Server-Sent 事件 - One Way Messaging
Server-Sent 事件指的是网页自动从服务器获得更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过 Server-Sent 事件,更新能够自动到达。
例如:Facebook/Twitter 更新、股价更新、新的博文、赛事结果,等等。
接收 Server-Sent 事件通知
EventSource 对象用于接收服务器发送事件通知:
bash
var source = new EventSource("demo_sse.php");//- 创建一个新的 EventSource 对象,然后规定发送更新的页面的 URL(本例中是 "demo_sse.php")
source.onmessage = function(event) {//- 每当接收到一次更新,就会发生 onmessage 事件
document.getElementById("result").innerHTML += event.data + "<br>";//- 当 onmessage 事件发生时,把已接收的数据推入 id 为 "result" 的元素中
};