HTML5

站长

2024年04月21日 23:24 · 阅读数 7

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元素

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

通过 JavaScript 来绘制（canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成）

<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 可在图像质量不下降的情况下被放大

<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
email
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()

<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_…]

拖放

<!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 的浏览器支持：

if (typeof(Storage) !== "undefined") {
    // 针对 localStorage/sessionStorage 的代码
} else {
    // 抱歉！不支持 Web Storage ..
}

localStorage 对象

localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除，在下一天、周或年中，都是可用的。

// 存储
localStorage.setItem("lastname", "Gates");
// 取回
localStorage.getItem("lastname");
// 删除
localStorage.removeItem("lastname");
// 清空localStorage中的所有数据
localStorage.clear();
** 注意：名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式！

sessionStorage 对象

sessionStorage 对象等同 localStorage 对象，不同之处在于只对一个 session 存储数据。如果用户关闭具体的浏览器标签页，数据也会被删除。

// 存储
sessionStorage.setItem("lastname", "Gates");
// 取回
sessionStorage.getItem("lastname");
// 删除
sessionStorage.removeItem("lastname");
// 清空sessionStorage中的所有数据
sessionStorage.clear();

[www.w3school.com.cn/html/html5_…]

应用缓存

HTML5 引入了应用程序缓存（Application Cache），这意味着可对 web 应用进行缓存，并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源

<!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 服务器上进行配置。

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 运行在后台。

<!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 对象用于接收服务器发送事件通知：

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" 的元素中
};

[www.w3school.com.cn/html/html5_…]