关于HTML/HTML5（二）

接上  关于HTML/HTML5（一）http://www.jianshu.com/p/33fc7840c079

学习HTML5的最佳网站没有之一http://www.w3school.com.cn/html5/index.asp

HTML5简介：

HTML5 是最新的 HTML 标准， 它是专门为承载丰富的 web 内容而设计的，并且无需额外插件，它拥有新的语义、图形以及多媒体元素， 它提供的新元素和新的 API 简化了 web 应用程序的搭建，它是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

HTML5支持无属性值（disabled），支持属性值无引号，支持属性值用单引号引起来，支持属性值用双引号引起来。

以下 HTML 4.01 元素已从 HTML5 中删除：

<acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><strike><tt>

HTML5支持：

- HTML5 中新的语义元素。（如果使用 HTML4 的话，通过类属性来设置页面元素的样式：header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...）

article 文档内的文章。规定独立的自包含内容，可以独立于网站其他内容进行阅读。应用场景：论坛，博客，新闻，

aside 页面内容之外的内容（比如侧栏）。应该与周围内容相关。

details 用户可查看或隐藏的额外细节。

footer 文档或节的页脚，应该提供有关其包含元素的信息。

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。可以在一个文档中使用多个元素。

header 文档或节的页眉，应该被用作介绍性内容的容器。一个文档中可以有多个元素。

main 文档的主内容。

mark 重要或强调的内容。

nav 文档内的导航链接。旨在定义大型的导航链接块。不过，并非文档中所有链接都应该位于元素中！

section 文档中的节。（节（section）是有主题的内容组，通常具有标题），可以将网站首页划分为简介、内容、联系信息等节。

summary 是 details 元素的可见标题。

time 日期/时间。

figcaption 是figure元素的标题。

figure 自包含内容，比如图示、图表、照片、代码清单等。

HTML5的figcaption元素和figure元素

在书籍和报纸中，与图片搭配的标题很常见。

标题（caption）的作用是为图片添加可见的解释。

通过 HTML5，图片和标题能够被组合在<figure>元素中。

<img>元素定义图像，<figcaption>元素定义标题。

注意：<article>和<section>

在 HTML5 标准中，<article>元素定义完整的相关元素自包含块。<section>元素被定义为相关元素块。

我们能够使用该定义来决定如何嵌套元素吗？不能！

在因特网上，您会发现<section>元素包含<article>元素的 HTML 页面，还有<article>元素包含<sections> 元素的页面。

您还会发现<section>元素包含<section>元素，同时<article>元素包含<article>元素。

注释： Note Newspaper: The sports articles in the sports section, have a technical section in each article.

HTML4到HTML5改变的内容：

参考手册：http://www.w3school.com.cn/tags/html_ref_dtd.asp

1.文档类型 （<!DOCTYPE html>）

2.编码 （<meta charset="UTF-8">，为了确保恰当的解释，以及正确的搜索引擎索引，在文档中对语言和字符编码的定义越早越好，在<title>元素之前）

3.为IE添加支持的脚本/shiv （后面有讲）

4.添加了语义化元素（<header>，<footer>，<section>，<article>，<nav>等等）

除了以上元素，还增加了以下元素：

<bdi> 与其他文本不同的文本方向。

<dialog> 对话框或窗口。

<enuitem> 用户能够从弹出菜单调用的命令/菜单项目。

<meter> 已知范围（尺度）内的标量测量。

<progress> 任务进度。

<rp> 在不支持 ruby 注释的浏览器中显示什么。

<rt> 关于字符的解释/发音（用于东亚字体）。

<ruby> ruby 注释（用于东亚字体）。

<wbr> 可能的折行（line-break）。


- 可以向 HTML 添加新元素，并为其定义样式（<
myHero>）（ JavaScript 语句document.createElement("myHero")，仅适用于 IE。）

Internet Explorer 的问题

上述方案可用于所有新的 HTML5 元素，但是：

注意：Internet Explorer 8 以及更早的版本，不允许对未知元素添加样式。

幸运的是，Sjoerd Visscher 创造了 "HTML5 Enabling JavaScript","the shiv"：

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">

<![endif]-->

以上代码必须位于<head>元素内。

所有浏览器，不论新旧，都会自动把未识别元素当做行内元素来处理。

建议始终使用小写

表单：


HTML5中新增表单元素：<datalist>，<keygen>，<output>


type       IE       Firefox       Opera     Chrome     Safari

datalist     No       No             9.5             No           No

keygen      No      No              10.5          3.0          No

output        No      No              9.5            No           No


<datalist> 输入控件的预定义选项 / 规定输入域的选项列表，列表是通过 datalist 内的 option 元素创建的，option 元素永远都要设置 value 属性。

例子：

<datalist>元素为<input>元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表。<input>元素的list属性必须引用<datalist>元素的id属性。

<form action="action_page.php">

<input list="browsers">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

</form>


例子2：

datalist 元素规定输入域的选项列表。列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

Webpage: <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" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>


<keygen> 键对生成器字段（用于表单）。

<keygen>元素的作用是提供一种验证用户的可靠方法，是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

例子：

<form action="demo_form.asp" method="get">

Username: <input type="text" name="usr_name" />

Encryption:<keygen name="security" />

<input type="submit" />

</form>


<output> 计算结果。（用于不同类型的输出，比如计算或脚本输出）

<output id="result" onforminput="resCalc()"></output>

= = = = = = = = = = = =

HTML5新增输入类型：number，color，date，datetime，datetime-local，email，month，range，search，tel，time，url，week（注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。）


（Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。）

type          IE     Firefox     Opera      Chrome       Safari

email          No         4.0          9.0         10.0           No

url              No          4.0           9.0           10.0         No

number       No        No            9.0            7.0          No

range           No          No          9.0           4.0          4.0

Date pickers   No       No          9.0          10.0          No

search          No         4.0           11.0          10.0       No

color             No         No            11.0         No          No


数字输入：<input type="number" name="" min="" max="" step="10" value="30">

PS：提示：iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）。

颜色输入：<input type="color" name="">

滑块控件：<input type="range" name="" min="" max="" step="" value="">

邮件输入（会自动验证 email 域的值）：<input type="email" name="">

PS：iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。

搜索输入：<input type="search" name="">

电话输入：<input type="tel" name="">

URL输入（会自动验证 url 域的值）：<input type="url" name="">

PS：提示：iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。


Date Pickers：

日期输入：<input type="date" name="" max="2017-12-31" min="2000-01-02">

月份输入：<input type="month" name="">（允许用户选择月份和年份。）

周/星期输入：<input type="week" name="">（允许用户选择周和年。）

时间输入：<input type="time" name="">

日期时间输入：<input type="datetime" name="">（允许用户选择日期和时间（有时区）。）

日期时间输入：<input type="datetime-local" name="">（允许用户选择日期和时间（无时区）。）

HTML新增表单属性：

新的<input>属性：

autocomplete，autofocus，form，form overrides（formaction，formenctype，formmethod，formnovalidate，formtarget），height 和 width，list，min 和 max，step，multiple，pattern (regexp)，placeholder，required

新的<form>属性：

autocomplete，novalidate


type                        IE      Firefox     Opera    Chrome      Safari

autocomplete         8.0        3.5          9.5         3.0            4.0

autofocus               No         No         10.0         3.0           4.0

form                       No          No           9.5          No          No

form overrides        No         No           10.5          No        No

height and width     8.0        3.5            9.5           3.0       4.0

list                           No       No             9.5           No        No

min, max and step   No       No            9.5           3.0        No

multiple                    No      3.5             No           3.0        4.0

novalidate                No      No              No           No         No

pattern                     No      No              9.5           3.0         No

placeholder              No     No                No          3.0         3.0

required                   No      No               9.5          3.0         No


autocomplete 属性规定form或input域是否应该自动完成。autocomplete 属性适用于<form>以及如下<
input>类型：text、search、url、tel、email、password、datepickers、range 以及 color。（值为on/off）

autofocus属性，规定在页面加载时，域自动地获得焦点，适用所有<input>类型。（值为true/false）。

form属性，规定输入域所属的一个或多个表单。适用所有<input>标签的类型。如需引用一个以上的表单，请使用空格分隔表单 id 列表。

例子：输入字段位于 HTML 表单之外（但仍属表单）：

<form action="action_page.php" id="form1">

First name: <input type="text" name="fname"><br>

<input type="submit" value="Submit">

</form>

Last name: <input type="text" name="lname" form="form1">


表单重写属性（form override attributes）允许重写 form 元素的某些属性设定，有：

formaction 重写表单的action属性

formenctype 重写表单的enctype属性

formmethod 重写表单的method属性

formnovalidate 重写表单的novalidate属性

formtarget 重写表单的target属性

表单重写属性适用于以下类型的<input>标签：submit 和 image。


formaction属性规定当提交表单时处理该输入控件的文件的 URL。适用于 type="submit" 以及 type="image"。（如"demo_admin.asp"）

formenctype属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）。适用于type="submit" 以及 type="image"。（如设置为"multipart/form-data"）

formmethod属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。适用于 type="submit" 以及 type="image"。（如post）

formnovalidate属性，如果设置，则规定在提交表单时不对 <input> 元素进行验证。可用于 type="submit"。（值为true/false）

formtarget属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。可与 type="submit" 和 type="image" 使用。（如"_blank"）


height 和 width属性，用于 image 类型的 input 标签的图像高度和宽度。（注释：请始终规定图像的尺寸。）

list属性，引用的<datalist>元素中包含了<input>元素的预定义选项。list 属性适用于以下类型的 <input>标签：text, search, url, telephone, email, date pickers, number, range 以及 color。（值为<datalist>的id）

min 、max和step属性，用于为包含数字或日期的 input 类型规定限定（约束）。规定<input>元素的最小值和最大值以及合法数字间隔。适用于以下类型的 <input> 标签：date pickers、number 以及 range。

multiple属性，规定输入域中可选择多个值。适用于以下输入类型：email 和 file。（值为true/false）

pattern (regexp)属性，规定用于验证 input 域的正则表达式。适用于以下输入类型：text、search、url、tel、email和 password。（提示：请使用全局的 title 属性对模式进行描述以帮助用户。）

placeholder属性，提供一种提示（hint），描述输入域所期待的值。该提示会在用户输入值之前显示在输入字段中，在输入域获得焦点时消失。适用于以下输入类型：text、search、url、tel、email 以及 password。

required属性，必须在提交之前填写输入域（不能为空）。适用于以下输入类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。（值为true/false）

novalidate属性，规定在提交表单时不应该验证 form 或 input 域。适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color。

HTML5图像：canvas && svg（Scalable Vector Graphics）

canvas（画布，使用 JavaScript 的图像绘制。）

svg（可伸缩矢量图形，使用 SVG 的图像绘制。）

参考手册：http://www.w3school.com.cn/tags/html_ref_canvas.asp


canvas画布是一个矩形区域，您可以控制其每一像素，它拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

- 创建canvas元素（规定元素的 id、宽度和高度）：

<canvas id="myCanvas" width="200" height="200">此处编写文字，当浏览器不支持canvas时会显示这些文字。</canvas>


- 通过 JavaScript 来绘制（canvas 元素本身是没有绘图能力的）：

<script type="text/javascript">

var canvas = document.getElementById('myCanvas");  //使用id来寻找canvas元素，

var ctx = canvas.getContext("2d");  //然后创建context对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

ctx.fillStyle = "#F00";  //fillStyle 方法将其染成红色

ctx.fillRect(0,0,150,75); //fillRect 方法规定了形状、位置和尺寸，参数意义：从画布的(0,0)开始画150*75的矩形。这两行代码绘制一个红色的矩形

</script>


其他实例：

- 线条（移去(10,10)；画到(150,50)；画到(10,50)；stroke()才真正的画，前面绘制的是路径）

ctx.moveTo(10,10);

ctx.lineTo(150,50);

ctx.lintTo(10,50);

ctx.stroke();


- 圆形（填充样式；开始路径；在画布(70,18)画一个半径为15的弧度为0到Math.PI*2的圆，true逆时针画，false顺时针画；关闭路径；fill()才真正的画，前面绘制的是路径）

ctx.fillStyle="#FF0000";

ctx.beginPath();

ctx.arc(70,18,15,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();


- 渐变（创建线性的渐变对象，渐变从(0,0)开始，(175,50)结束；添加颜色位置；填充样式；绘制矩形 / 作为矩形的填充样式）

var grd=cxt.createLinearGradient(0,0,175,50);

grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");

cxt.fillStyle=grd;

cxt.fillRect(0,0,175,50);


- 图像（创建img元素，源文件路径，(0,0)画图像）

var img=new Image()

img.src="flower.png"

ctx.drawImage(img,0,0);


更多canvas用法可以看官方文档：http://www.w3school.com.cn/tags/html_ref_canvas.asp

也可以看我写的另外的文章：http://hiuman.iteye.com/blog/2335334

= = = = = = = = = = = = = = = =

svg介绍：

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。


SVG 用于定义用于网络的基于矢量的图形，它使用 XML 格式定义图形，且SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失


优势（与其他图像格式相比（比如JPEG和GIF））：

SVG 图像可通过文本编辑器来创建和修改，它可被搜索、索引、脚本化或压缩，而且是可伸缩的，它可在任何的分辨率下被高质量地打印，也可在图像质量不下降的情况下被放大。


例子：（按顺序画出(100,10)(40,180)(190,60)(10,60),(160,180)，结果是一个五角星，闭合的地方填充红色，绘制的线条蓝色，线宽3，填充规则(evenodd/nonzero) ）

<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:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />

<!-- polygon元素用来创建含有不少于三个边的图形 -->

</svg>


Canvas 与 SVG 的比较：

Canvas

依赖分辨率

不支持事件处理器

弱的文本渲染能力

能够以 .png 或 .jpg 格式保存结果图像

最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率

支持事件处理器

最适合带有大型渲染区域的应用程序（比如谷歌地图）

复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

不适合游戏应用

HTML5新的媒介元素：video && audio &&embed && source && track

audio 声音或音乐内容。

embed 外部应用程序的容器（比如插件）。

video 视频或影片内容。

source 是<video>和<audio>的来源。

track 是<video>和<audio>的轨道。


参考手册：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp


多媒体：（详细请看官方http://www.w3school.com.cn/html/html_media.asp）

视频格式：（MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。）

格式（文件扩展名）

AVI（.avi），WMV（.wmv），MPEG（.mpg/.mpeg），QuickTime（.mov），RealVideo（.rm/.ram），Flash（.swf/.flv），Mpeg-4（.mp4）


声音格式：（WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。如果您需要未经压缩的声音（音乐或演讲），那么您应该使用 WAVE 格式。

MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。如果您的网址从事录制音乐，那么 MP3 是一个选项。）

格式（文件扩展名）

MIDI（.mid/.midi），RealAudio（.rm/.ram），Wave（.wav），WMA（.wma），MP3（.mp3/.mpga）


= = = = = = = = = = = = = = =

PS：当前，video 元素支持三种视频格式：

格式       IE      Firefox    Opera   Chrome    Safari

Ogg        No        3.5+       10.5+       5.0+      No

MPEG 4   9.0+     No         No          5.0+       3.0+

WebM      No        4.0+       10.6+      6.0+      No


在HTML5中显示视频：（control 属性供添加播放、暂停和音量控件。）

<video src="movie.ogg" controls="controls" width="320" height="240">

供不支持 video 元素的浏览器显示的

</video>


此时，仅适用于Firefox、Opera 以及 Chrome 浏览器。

要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。

<video width="320" height="240" controls="controls">

<source src="movie.ogg" type="video/ogg">

<source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>


而IE，Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持。


<video>标签的属性：（除了width，height，src，其他的属性值均为属性名）

autoplay 如果出现该属性，则视频在就绪后马上播放。

controls 如果出现该属性，则向用户显示控件，比如播放按钮。

loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

width 视频播放器的宽

height 视频播放器的高

src 视频URL


HTML5<video> - 方法、属性以及事件（在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。）

方法：play()，pause()，load()，canPlayType

属性：currentSrc，currentTime，videoWidth，videoHeight，duration，ended，error，paused，muted，seeking，volume，height，width

事件：play，pause，progress，error，timeupdate，ended，abort，empty，emptied，waiting，loadedmetadata

= = = = = = = = = = = = = = = =

音频：

PS：当前，audio 元素支持三种音频格式：

类型          IE 9  Firefox 3.5  Opera 10.5   Chrome 3.0  Safari 3.0

Ogg Vorbis  NO        √                  √                     √               NO

MP3             √         NO                NO                  √                √

Wav            NO        √                    √                    NO              √


在HTML5中显示音频：（control 属性供添加播放、暂停和音量控件。）

<audio src="song.ogg" controls="controls">

供不支持 audio元素的浏览器显示的

</audio>


此时，仅适用于Firefox、Opera 以及 Chrome 浏览器。

要确保适用于 Safari 浏览器，音频文件必须是 MP3 或 Wav 类型。

<audio controls="controls">

<source src="song.ogg" type="audio/ogg">

<source src="song.mp3" type="audio/mpeg">

Your browser does not support the audio tag.

</audio>


而IE，Internet Explorer 8 不支持 audio 元素。在 IE 9 中，将提供对 audio 元素的支持。


<audio>标签的属性

autoplay 如果出现该属性，则音频在就绪后马上播放。

controls 如果出现该属性，则向用户显示控件，比如播放按钮。

loop 如果出现该属性，则每当音频结束时重新开始播放。

preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

src 音频URL

地理定位略，回顾HTML/HTML5（一）已描述。

拖放 是 HTML5 标准的组成部分：任何元素都是可拖放的。

拖放（Drag 和 Drop）是很常见的特性。即抓取对象以后拖到另一个位置。


Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释：在 Safari 5.1.2 中不支持拖放。


官方例子：http://www.w3school.com.cn/tiy/t.asp?f=html5_draganddrop

部分代码：

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));

}


<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">


代码分析：

把元素设置为可拖放：（img元素的draggable 属性设置为 true）


拖放的内容 - ondragstart 和 setData()：（规定当元素被拖动时发生的事情。

例子中，ondragstart 属性调用了一个 drag(event) 函数，规定拖动什么数据。

dataTransfer.setData() 方法设置被拖动数据的数据类型和值）

function drag(ev) {

ev.dataTransfer.setData("text", ev.target.id);

}

在例子中，数据类型是 "text"，而值是这个可拖动元素的 id ("drag1")。


拖到何处 - ondragover：（规定被拖动的数据能够被放置到何处。

默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。由 ondragover 事件的 event.preventDefault() 方法完成）


进行放置 - 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() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据

被拖数据是被拖元素的 id ("drag1")

把被拖元素追加到放置元素中


另：来回拖放图片：http://www.w3school.com.cn/tiy/t.asp?f=html5_draganddrop2

本地存储 / web存储（Local Storage）

IE 8.0 Chrome 4.0 FF3.5 Safari 4.0 Opera 11.5


之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。


HTML 本地存储提供了两个在客户端存储数据的对象：

window.localStorage - 没有时间限制的数据存储

window.sessionStorage - 针对一个 session 的数据存储（当关闭浏览器标签页时数据会丢失）


在使用本地存储时，请检测 localStorage 和 sessionStorage 的浏览器支持：

if (typeof(Storage) !== "undefined") {

// 针对 localStorage/sessionStorage 的代码

} else {

// 抱歉！不支持 Web Storage ..

}


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

// 存储  创建 localStorage 名称/值对

localStorage.setItem("lastname", "Gates");

// 取回  取回 "lastname" 的值

document.getElementById("result").innerHTML = localStorage.getItem("lastname");


或者这么写：


// 存储

localStorage.lastname = "Gates";

// 取回

document.getElementById("result").innerHTML = localStorage.lastname;


//删除

localStorage.removeItem("lastname");


注释：名称/值对始终存储为字符串。如果需要请记得把它们转换为其他格式！


例子：

下面的例子对用户点击按钮的次数进行计数。在代码中，值字符串被转换为数值，依次对计数进行递增：

if (localStorage.clickcount) {

localStorage.clickcount = Number(localStorage.clickcount) + 1;

} else {

localStorage.clickcount = 1;

}

document.getElementById("result").innerHTML = "您已经点击这个按钮 " + localStorage.clickcount + " 次。";

= = = = = = = = = = = = =

sessionStorage 对象：（针对一个 session 进行数据存储。如果用户关闭具体的浏览器标签页，数据也会被删除。）


创建并访问一个 sessionStorage：

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);


下例在当前 session 中对用户点击按钮进行计数：

if (sessionStorage.clickcount) {

sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;

} else {

sessionStorage.clickcount = 1;

}

document.getElementById("result").innerHTML = "在本 session 中，您已经点击这个按钮 " + sessionStorage.clickcount + " 次。";

应用程序缓存：（通过创建 cache manifest 文件，可轻松创建 web 应用的离线版本。）可对 web 应用进行缓存，并可在没有因特网连接时进行访问。


Chrome 4.0 IE10.0 FF3.5 Safari 4.0 Opera 11.5


应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源

例子：（展示了带有 cache manifest 的 HTML 文档（供离线浏览）http://www.w3school.com.cn/tiy/t.asp?f=html5_html_manifest）

<!DOCTYPE html>

<html manifest="demo.appcache">

<body>

文档内容....

</body>

</html>


每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

manifest 文件的建议文件扩展名是：".appcache"。

注意：manifest 文件需要设置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

Manifest 文件：（是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。）


Manifest文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）


CACHE MANIFEST：（第一行，CACHE MANIFEST，是必需的）

CACHE MANIFEST

/theme.css

/logo.gif

/main.js

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件被加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然可用。


NETWORK：

下面的 NETWORK 部分规定文件 "login.php" 永远不会被缓存，且离线时是不可用的：

NETWORK:

login.asp

可以使用星号来指示所有其他其他资源/文件都需要因特网连接：

NETWORK:

*


FALLBACK：

下面的FALLBACK部分规定如果无法建立因特网连接，则用 "offline.html" 替代 /html/ 目录中的所有文件：

FALLBACK:

/html/ /offline.html

注释：第一个 URI 是资源，第二个是替补。


更新缓存：

一旦应用被缓存，它就会保持缓存直到发生下列情况：

- 用户清空浏览器缓存

- manifest 文件被修改（参阅下面的提示）

- 由程序来更新应用缓存


例子：（完整的 Cache Manifest 文件）

CACHE MANIFEST

# 2012-02-21 v1.0.0

/theme.css

/logo.gif

/main.js

NETWORK:

login.asp

FALLBACK:

/html/ /offline.html

（提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存只会在其 manifest 文件改变时被更新。如果您编辑了一幅图像，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。）


关于应用程序缓存的注意事项：

请留心缓存的内容。

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。

注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器的限制是每个站点 5MB）。

Web Workers：（是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。）


Chrome4.0 IE10.0 FF3.5 Safari4.0 Opera11.5


官方例子（在后台计数）：http://www.w3school.com.cn/tiy/t.asp?f=html5_webworker


检测 Web Worker 支持：

if (typeof(Worker) !== "undefined") {

// 是的！支持 Web worker！

} else {

// 抱歉！不支持 Web Worker！

}


创建Web Worker 文件（在一个外部 JavaScript 文件中创建）：

创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中：

var i = 0;

function timedCount() {  

i = i + 1;

postMessage(i);

setTimeout("timedCount()",500);

}

timedCount();

以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

注释:web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。


创建 Web Worker 对象：（已经有了 web worker 文件，我们需要从 HTML 页面调用它。）

下面的代码行检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：

if (typeof(w) == "undefined") {

w = new Worker("demo_workers.js");

}

然后我们就可以从 web worker 发生和接收消息了。

向 web worker 添加一个 "onmessage" 事件监听器：

w.onmessage= function(event){    

document.getElementById("result").innerHTML = event.data;

};

当 web worker 传送消息时，会执行事件监听器中的代码。来自 web worker 的数据会存储于 event.data 中。


终止 Web Worker：

当创建 web worker 后，它会继续监听消息（即使在外部脚本完成后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();


复用 Web Worker：

如果您把 worker 变量设置为 undefined，在其被终止后，可以重复使用该代码：w =undefined;


完整的代码：http://www.w3school.com.cn/tiy/t.asp?f=html5_webworker


Web Worker 和 DOM

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

window 对象，document 对象，parent 对象

Server-Sent 事件（允许网页从服务器获得更新。）：


Chrome6.0 IE不支持 FF6.0 Safari5.0 Opera11.5


Server-Sent 事件 - One Way Messaging单向消息传递：

Server-Sent 事件指的是网页自动从服务器获得更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过 Server-Sent 事件，更新能够自动到达。

例如：Facebook/Twitter 更新、股价更新、新的博文、赛事结果，等等。


接收 Server-Sent 事件通知：

EventSource 对象用于接收服务器发送事件通知：

例子：

var source = new EventSource("demo_sse.php");

source.onmessage = function(event) {

document.getElementById("result").innerHTML += event.data + "<br>";

};

例子解释：

创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）

每当接收到一次更新，就会发生 onmessage 事件

当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中


检测 Server-Sent 事件支持：

在 TIY 实例中，我们编写了一段额外的代码来检测服务器发送事件的浏览器支持：

if(typeof(EventSource) !== "undefined") {

// 是的！支持服务器发送事件！

} else {

// 抱歉！不支持服务器发送事件！

}


服务器端代码实例：

为了使上例运行，您需要能够发送数据更新的服务器（比如 PHP 或 ASP）。

服务器端事件流的语法非常简单。请把 "Content-Type" 报头设置为 "text/event-stream"。现在，您可以开始发送事件流了。

PHP 中的代码 (demo_sse.php)：

<?php

header('Content-Type: text/event-stream');

header('Cache-Control: no-cache');

$time = date('r');

echo "data: The server time is: {$time}\n\n";

flush();

?>


ASP 中的代码 (VB) (demo_sse.asp)：

<%

Response.ContentType = "text/event-stream"

Response.Expires = -1

Response.Write("data: The server time is: " & now())

Response.Flush()

%>

代码解释：

把报头 "Content-Type" 设置为 "text/event-stream"

规定不对页面进行缓存

输出要发送的日期（始终以 "data: " 开头）

向网页刷新输出数据


EventSource 对象：

在上例中，我们使用 onmessage 事件来获取消息。不过还可以使用其他事件：

事件描述

onopen  当通往服务器的连接被打开

onmessage  当接收到消息

onerror  当发生错误

HTML标签：

http://www.w3school.com.cn/tags/html_ref_byfunc.asp（功能排序）

HTML全局属性：

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,013评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,205评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,370评论 0赞 342
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,168评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,153评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,954评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,271评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,916评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,382评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,877评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,989评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,624评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,209评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,199评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,418评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,401评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,700评论 2赞 345

推荐阅读更多精彩内容

  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,599评论 18赞 139
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,728评论 1赞 92
  • 关于HTML/HTML5（一）
    学习HTML的最佳网站没有之一http://www.w3school.com.cn/html/ 关于HTML/HT...
    Amyyy_阅读 2,036评论 0赞 16
  • HTML+CSS面试题
    1. 浏览器页面有哪三层构成，分别是什么，作用是什么? 构成：结构层、表示层、行为层分别是：HTML、CSS、Ja...
    程序猿人王小贱阅读 1,866评论 1赞 11
  • HTML+ CSS (1-46)
    问答题1 /72浏览器页面有哪三层构成，分别是什么，作用是什么?参考答案构成：结构层、表示层、行为层分别是：HTM...
    _Yfling阅读 1,214评论 0赞 23