目录
1. HTML
2. XHTML
3. HTML5
4. 参考手册
1. HTML
简介
HTML (Hyper Text Markup Language) 超文本标记语言
并不是一种编程语言，而是一种标记语言(拥有一套标记标签,可编辑用来显示网页)
优点：
开发成本低（跨平台开发---节省了硬件、人力、时间成本）
缺点：
1.不够原生态（交互不流畅）
2.加载速度慢
3.兼容性问题
相关编程语言
HTML ：负责 显示界面
CSS ：负责 修饰界面（控件的样式、大小位置、动画）
JS（JavaScript） ：负责 交互
开发工具
WebStorm、Dreamweaver、Editplus、记事本...
历史版本
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013
- 基本语法
HTML文档（.html文件）即网页，包含 HTML 标签和纯文本。
HTML 标签
由尖括号包围的关键词，比如 <html>
通常成对出现（也有单个如<br/>），比如 <b> 和 </b>。标签对中的第一个标签是开始标签，第二个标签是结束标签（开始和结束标签也被称为开放标签和闭合标签）。
标签之间的关系： 兄弟标签 | 父子标签
HTML 元素
从开始标签到结束标签的所有代码(包括标签)。
元素的内容：开始标签与结束标签之间的内容。
元素的属性（用来修饰）：开始标签中的键值对，如<div id="secondContentId" name="secondContentName">。
简单示例（helloWorld.html）
<!DOCTYPE html> <!-- 文档声明标签 -->
<html> <!-- html开始标签 -->
<head> <!-- 页面头部 开始标签-->
<meta charset="UTF-8"> <!-- 设置属性：编码格式 -->
<title>helloWorld</title> <!-- 页面标题 -->
</head> <!-- 页面头部 结束标签 -->
<body> <!-- 页面内容 开始标签-->
</body> <!-- 页面内容 结束标签-->
</html> <!-- html结尾标签 -->
说明：
1、文档声明标签写法固定。
表明页面使用哪个 HTML 版本进行编写，必须位于HTML文档的第一行（在 <html> 标签之前）。
2、
页面的所有内容都是在写<html></html>页面标签中。
页面的标题等头部信息写在<head></head>标签中。
页面的显示内容写在<body></body>标签中。
3、
不区分单双引号（当内容中包含双引号则必须使用单引号）
不区分大小写
1.1 head元素
可包含<title>、<base>、<link>、<meta>、<script> 、<style>
title元素
必须包含（用来定义浏览器中本页面的标题）
<title>主页</title>
base元素
为页面上的所有链接规定默认地址或默认目标
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
meta元素
用来描述文档 相关信息
类型/编码
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
作者
<meta name="author"
content="cx">
最后修改
<meta name="revised"
content="cx,8/1/17">
编辑工具
<meta name="generator"
content="Dreamweaver">
描述
<meta name="description"
content="HTML examples">
关键字（搜索引擎使用）
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
重定向
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
link元素
引入外部样式文件
<link rel="stylesheet" type="text/css" href="mystyle.css" />
script元素
脚本（处理交互）
引入外部脚本文件
<script type="text/javascript" src="js/myScript.js"></script>
本页脚本文件
<script>
document.write("<h1>Hello World!</h1>");
</script>
style元素
本页样式
<style type="text/css">
body {
background-color:yellow;
}
.customClass{
}
#customId{
}
</style>
1.2 body元素
<body bgcolor="yellow" style="background-color:PowderBlue;"></body>
网页背景
background="clouds.gif"
background="http://www.w3school.com.cn/clouds.gif"
bgcolor="black"
bgcolor="rgb(0,0,0)"
bgcolor="yellow"
1.3 其他
注释标签
<!--
注释（不会显示在页面）
（支持：IE Firefox Chrome Safari Opera）
-->
转义字符
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
￠ 分（cent） ¢ ¢
£ 镑（pound） £ £
¥ 元（yen） ¥ ¥
€ 欧元（euro） € €
§ 小节 § §
© 版权（copyright） © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
颜色
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
#F0F8FF
字符编码
ASCII
万维网早期使用字符集（支持 0-9 的数字，大写和小写英文字母表，以及一些特殊字符）
ISO-8859-1
现代浏览器的默认字符集(如果网页使用其他字符集，需 <meta> 指定)
ISO-8859-1 的较低部分（从 1 到 127 之间的代码）是最初的 7 比特 ASCII。
ISO-8859-1 的较高部分（从 160 到 255 之间的代码）全都有实体名称
Unicode
涵盖了世界上的所有字符、标点和符号。
- 基础标签
2.1 文本
标题（级别1~6）
<h1 align="right">最大字体的标题</h1>
元素前后有换行。
不要为了粗体而使用标题，因为索引擎使用标题为您的网页的结构和内容编制索引。
align：left(默认) center right justify
事件：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
文本容器
<span>简单文本</span>
段落文本（元素前后有换行）(可通过<br/>换行)
<p style="font-family:times;color:green;font-size:30px">段落文本(字体 颜色 大小)</p>
预编译段落文本（空格换行有效）（元素前后有换行）
<pre>段落文本<pre/>
粗体文本(注意不是bold，big或b或strong)
<b>粗体文本<b/>
斜体文本
<i>斜体文本<i/>
<em>斜体文本<em/>
小字体文本
<small>小字体文本<small/>
下标文本
<sub>subscript</sub>
上标文本
<sup>superscript</sup>
删除文本
<del>二十</del>
下划线文本
<ins>十二</ins>
换行
<br/>
分割线
<hr/>
空格
列表（可嵌套）
ol 有序列表（子标签li）
ul 无序列表（子标签li）
dl 说明列表（子标签dt：展示 dd：描述--换一行显示）
ul的type：
disc 实心圆、circle 空心圆、square 实心方块
ol的type：
不写默认 数字、A 大写字母、a 小写字母、I 大写罗马数字、i 小写罗马数字
例：
<ol>
<li>apple</li>
<li>banner</li>
</ol>
<ul type="disc">
<li>apple</li>
<li>banner</li>
</ul>
<dl>
<dt>文本</dt>
<dd>文本描述</dd>
<dt>文本</dt>
<dd>文本描述</dd>
</dl>
编程相关
<code>代码</code>
<kbd>Keyboard input</kbd>
<tt>Teletype text</tt>
<samp>Sample text</samp>
<var>变量</var>
2.2 图片
图片
<img src="相对路径/绝对路径/网络路径" alt="图片不显示时显示的文本" width="128" height="128"/>
支持gif，加载图片会耗时
背景图片
<body background="相对路径" align="bottom" border="0">
支持gif，大小不够时会重复显示
align ：middle top bottom left right
点击图片上的某处区域跳转
<img src="路径" usemap="#planetmap" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href="路径" target ="_blank"/>
</map>
2.3 链接
超链接，跳到下一页
<a href="http://www.baidu.com" target="_blank" style="text-decoration:none">百度</a>
_blank:在新的页面打开(默认)
_self:则为当前页
_top：跳出当前框架
发邮件（注意不是mail，是mailto）
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">Send e-mail</a>
锚（直接跳转到相应位置，不用来回翻）
<a name="tips">定义锚</a>
<a href="#tips">跳转到锚的位置</a>
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">跳到该页面的锚所在位置，没有则跳顶部</a>
2.4 布局
容器div（常用）
<div style="width:30px ;height:20px ; background-color:white"></div>
自动换行，不设高度时自适应高
表格table
<table background="/i/eg_bg_07.gif" bgcolor="red" border="1" cellpadding="10" cellspacing="10" frame="box"> 边框 单元格与内容的间距 单元格与单元格的间距
<caption>标题</caption> 标题
<tr>
<th>Heading</th> 表头（粗体，可不要）
<th>Another Heading</th>
</tr>
<tr> 行
<td bgcolor="red" align="left">1行1列</td> 列
<td colspan="2">1行2列</td> 跨2列
</tr>
<tr>
<td rowspan="2">2行1列</td> 跨2行
<td background="/i/eg_bg_07.gif">2行1列</td>
</tr>
</table>
frame
box（上下左右）
above
below
hsides（上下）
vsides（左右）
- css 和 javascript
css
放在head中，或者放在.css文件中然后引用（.className , div.className , #idName）。
也可以直接属性style。
【具体见CSS篇】
例：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.myClass{
line-height:30px;
background-color:black;
color:white;
text-align:center;
margin:20px;
padding:20px;
height:300px;
width:100px;
float:left;
clear:both;
width:100%;
border:1px solid #d4d4d4;
font-size:30px;
font-family:times
}
div.myClass{ 针对class为cities且元素类型为div的元素
background-color:black;
}
#myId{
background-color:black;
color:white;
text-align:center;
padding:5px;
}
</style>
.css文件（style写在另一个文件里）
<link rel="stylesheet" type="text/css" href="/html/csstest1.css">
</head>
<body>
<div class="myClass"></div>
<div id="myId"></div>
</body>
</html>
javascript
可以放在head，body中，或放在.js文件中然后引用。
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
<!--不支持脚本时显示-->
<noscript>Sorry, your browser does not support JavaScript!不支持</noscript>
【具体见Javascript篇】
- 框架
框架:同一窗口中显示多个页面
frameset
<frameset cols="25%,50%,25%" noresize="noresize"> 3列 不可拖动改变大小
<frame src="html相对路径">
<frame src="html相对路径">
<frame src="html相对路径" noresize="noresize">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>
<frameset rows="120,*"> 2行
<frame src="html相对路径">
</frameset>
注意：
<body></body> 标签不能与 <frameset></frameset> 标签同时使用，除非在noframes中。
iframe
用于在网页内显示网页
<iframe src="路径" width="200" height="200" frameborder="0" name="iframeName"></iframe>
// 在iframeName内打开网页
<a href="http://www.w3school.com.cn" target="iframeName">W3School.com.cn</a>
- 表单form
表单
用于将用户输入的数据提交到服务器
<form id="form1" action="http://www.example.com/test.asp" method="post" onsubmit="return login()" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate> 地址，请求方式（post/get），点击submit按钮执行login方法，在新窗口打开，字符集，编码，不自动完成表单（默认：自动），不验证表单
每一个type必须设置name属性让服务器接收（否则服务器接收不到数据）
邮箱
<input type="email" name="email" readonly disabled size="40" maxlength="10" autofocus pattern="[A-Za-z]{3}"/>
文本(注意不是textfield)
<input type="text" name="lastname" value="张三李四" size="30" maxlength="50"/>
密码
<input type="password" name="pwd"/>
多选框（注意不是<checkbox>）
<input type="checkbox" name="che" value="apple" checked="checked"/> apple
<input type="checkbox" name="che" value="apple2" checked="checked"/> apple2
单选框
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
提交按钮
<input type="submit"/>
重置按钮
<input type="reset"/>
隐藏控件
<input type="hidden"/>
下拉列表
<select name="cars">
<option value="volvo">Apples</option>
<option value="volvo" selected>Bananas</option>
<option value="volvo">Cherries</option>
</select>
文本区域
< textarea name="Comment" rows="60"
cols="20">
</textarea>
按钮
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
数字（有上下箭头）
<input type="number" name="quantity" min="1" max="5" step="3">
颜色
<input type="color" name="favcolor" value="#ff0000">
滑动条（注意不是slider）
<input type="range" name="points" min="0" max="10" step="1">
日期（会弹出日历视图）
<input type="date" name="bday" max="1979-12-31" min="1979-12-31">
月份和年份
<input type="month" name="bdaymonth">
周和年
<input type="week" name="week_year">
时间（小时和分钟）
<input type="time" name="usr_time">
日期和时间（时间，日，月，年）
<input type="datetime" name="bdaytime">
时间，日，月，年
<input type="datetime-local" name="bdaytime">
手机号
<input type="tel" name="usrtel">
网址
<input type="url" name="homepage">
</form>
<input type="text" name="lname" form="form1"/>
step 属性（与 max min 一起）适用于：
number、range、date、datetime、datetime-local、month、time、week
min 和 max 属性
min="0" max="10" 设置最小最大值
适用于：
number、range、date、datetime、datetime-local、month、time 以及 week
required 属性
required="required" 该元素内容必填
适用于：
text、search、url、tel、email、password、date pickers、number、checkbox、radio、file
placeholder 属性
placeholder="Search W3School" 提示内容
适用于：
text、search、url、tel、email 以及 password
novalidate 属性
novalidate="true"不再验证 form 或 input 域（不再需要满足那些限制条件如正则等）
适用于
<form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color.
pattern 属性
pattern="[A-z]{3}" 内容需满足正则
适用于：
text、search、url、tel、email、and password
multiple 属性
multiple="multiple" 多选，允许选择多个文件
适用于：
email 和 file
height 和 width 属性仅用于 <input type="image">
datalist 属性
适用于text, search, url, telephone, email, date pickers, number, range 以及 color。
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
autocomplete 属性
适用于
<form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color
autofocus 属性
autofocus="autofocus" 自动获取焦点
适用于：
所有 <input> 标签的类型
form 属性
form="user_form" 属于哪个form
在<form id="user_form"></form>外
适用于：
所有 <input> 标签的类型
表单重写属性
formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性
适用于：
submit 和 image
- 杂
视频
<video width="320" height="240" controls="controls">
<source src="/i/movie.ogg" type="video/ogg">
<source src="/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
事件
Window 事件（适用于body元素）
onafterprint 文档打印之后运行的脚本。
onbeforeprint 文档打印之前运行的脚本。
onbeforeunload 文档卸载之前运行的脚本。
onerror 在错误发生时运行的脚本。
onhaschange 当文档已改变时运行的脚本。
onload 页面结束加载之后触发。
onmessage 在消息被触发时运行的脚本。
onoffline 当文档离线时运行的脚本。
ononline 当文档上线时运行的脚本。
onpagehide 当窗口隐藏时运行的脚本。
onpageshow 当窗口成为可见时运行的脚本。
onpopstate 当窗口历史记录改变时运行的脚本。
onredo 当文档执行撤销（redo）时运行的脚本。
onresize 当浏览器窗口被调整大小时触发。
onstorage 在 Web Storage 区域更新后运行的脚本。
onundo 在文档执行 undo 时运行的脚本。
onunload 一旦页面已下载时触发（或者浏览器窗口已被关闭）。
form表单事件
onblur 失去焦点时调用。
onchange 在元素值被改变时运行的脚本。
oncontextmenu 当上下文菜单被触发时运行的脚本。
onfocus 当元素获得焦点时运行的脚本。
onformchange 在表单改变时运行的脚本。
onforminput 当表单获得用户输入时运行的脚本。
oninput 当元素获得用户输入时运行的脚本。
oninvalid 当元素无效时运行的脚本。
onreset 当表单中的重置按钮被点击时触发。HTML5 中不支持。
onselect 在元素中文本被选中后触发。
onsubmit 在提交表单时触发。
Keyboard 事件
onkeydown 在用户按下按键时触发。
onkeypress 在用户敲击按钮时触发。
onkeyup 当用户释放按键时触发。
鼠标事件
onclick 元素上发生鼠标点击时触发。
ondblclick 元素上发生鼠标双击时触发。
ondrag 元素被拖动时运行的脚本。
ondragend 在拖动操作末端运行的脚本。
ondragenter 当元素元素已被拖动到有效拖放区域时运行的脚本。
ondragleave 当元素离开有效拖放目标时运行的脚本。
ondragover 当元素在有效拖放目标上正在被拖动时运行的脚本。
ondragstart 在拖动操作开端运行的脚本。
ondrop 当被拖元素正在被拖放时运行的脚本。
onmousedown 当元素上按下鼠标按钮时触发。
onmousemove 当鼠标指针移动到元素上时触发。
onmouseout 当鼠标指针移出元素时触发。
onmouseover 当鼠标指针移动到元素上时触发。
onmouseup 当在元素上释放鼠标按钮时触发。
onmousewheel 当鼠标滚轮正在被滚动时运行的脚本。
onscroll 当元素滚动条被滚动时运行的脚本。
多媒体事件
onabort 在退出时运行的脚本。
oncanplay 当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
oncanplaythrough 当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchange 当媒介长度改变时运行的脚本。
onemptied 当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。
onended 当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
onerror 当在文件加载期间发生错误时运行的脚本。
onloadeddata 当媒介数据已加载时运行的脚本。
onloadedmetadata 当元数据（比如分辨率和时长）被加载时运行的脚本。
onloadstart 在文件开始加载且未实际加载任何数据前运行的脚本。
onpause 当媒介被用户或程序暂停时运行的脚本。
onplay 当媒介已就绪可以开始播放时运行的脚本。
onplaying 当媒介已开始播放时运行的脚本。
onprogress 当浏览器正在获取媒介数据时运行的脚本。
onratechange 每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。
onreadystatechange 每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。
onseeked 当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。
onseeking 当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。
onstalled 在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspend 在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdate 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
onvolumechange 每当音量改变时（包括将音量设置为静音）时运行的脚本。
onwaiting 当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本
全局属性
accesskey 规定激活元素的快捷键。
class 规定元素的一个或多个类名（引用样式表中的类）。
contenteditable 规定元素内容是否可编辑。
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。
2. XHTML
例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
</body>
</html>
XHTML 元素是以 XML 格式编写的 HTML 元素
XHTML DOCTYPE 是强制性的
<html> 中的 XML namespace 属性是强制性的
<html>、<head>、<title> 以及 <body> 也是强制性的
XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素
XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性简写也是禁止的（必须键值对）
如何从 HTML 转换到 XHTML
向每张页面的第一行添加 XHTML <!DOCTYPE>
向每张页面的 html 元素添加 xmlns 属性
把所有元素名改为小写
关闭所有空元素
把所有属性名改为小写
为所有属性值加引号
3. HTML5
HTML5（最新的 HTML 标准，前一版本：HTML4.0.1）
所有现代浏览器都支持，跨平台（PC、平板、手机、电视机），无需额外插件。默认字符编码是 UTF-8
新特性
新的语义元素，比如 <header>, <footer>, <article>, and <section>。
新的表单控件，比如数字、日期、时间、日历和滑块。
强大的图像支持（借由 <canvas> 和 <svg>）
强大的多媒体支持（借由 <video> 和 <audio>）
强大的新 API，比如用本地存储取代 cooki
定义了八个新的语义 HTML 元素（都是块级元素）。
把 CSS display 属性设置为 block，以确保老式浏览器中正确的行为
header, section, footer, aside, nav, main, article, figure {
display: block;
}
4种 属性表示语法
Empty <input type="text" value="John Doe" disabled> 键
Unquoted <input type="text" value=John Doe> 无引号
Double-quoted <input type="text" value="John Doe"> 双引号
Single-quoted <input type="text" value='John Doe'> 单引号
已从 HTML5 中删除：
属性：
script中的type属性
元素：
ins
以下 HTML 4.01 元素
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
新的元素
<article> 定义文章。
<section> 定义文章（或节）。
<header> 定义文章或节的页眉。
<footer> 定义文章或节的页脚。
<aside> 定义和主内容相关的内容。
<bdi> 定义与其他文本不同的文本方向。
<details> 定义用户可查看或隐藏的额外细节。
<dialog> 定义对话框或窗口。
<figure> 定义自包含内容（包含：图示、图表、照片、代码清单等等）。
<figcaption> 定义 <figure> 元素的标题。
<main> 定义文档的主内容。
<mark> 定义重要或强调的内容。
<menuitem> 定义用户能够从弹出菜单调用的命令/菜单项目。
<meter> 定义已知范围（尺度）内的标量测量。
<nav> 组织导航链接。
<progress> 定义任务进度。
<rp> 定义在不支持 ruby 注释的浏览器中显示什么。
<rt> 定义关于字符的解释/发音（用于东亚字体）。
<ruby> 定义 ruby 注释（用于东亚字体）。
<summary> 定义 <details> 元素的可见标题。
<time> 定义日期/时间。
<wbr> 定义可能的折行（line-break)
hgroup 组合标题元素
新的表单元素
<datalist> 下拉选项（输入部分对应内容下拉提示,可放在input元素下）。option必须设置value值。
<datalist id="url_list">
<option label="hello01" value="http://www.baidu.com" />
<option label="hello02" value="http://www.baidu.com" />
<option label="hello03" value="http://www.baidu.com" />
</datalist>
<keygen> 是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。用于放在表单内。支持浏览器有限
<output> 定义计算结果。
input新的type类型
color
date 日历（Safari不支持，会弹出日历视图）
datetime
datetime-local
email 邮箱（不符合邮箱规范时提示）
month
number 数字（不符合数字规范时提示）
range 滑动条
search
tel
time
url 网址URL（不符合网址规范时提示）
week
form新的属性
autocomplete
novalidate
input新的属性
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 和 width
list
min 和 max
multiple
pattern (regexp)
placeholder
required
step
添加自定义新元素
<script>document.createElement("myHero")</script> 此行代码仅适用IE
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
<myHero>My First Hero</myHero>
Internet Explorer 8 以及更早的版本，不允许对未知元素添加样式X。解决：
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
图片
<canvas> 定义使用 JavaScript 的图像绘制。
<svg> 定义使用 SVG 的图像绘制。
多媒体
<audio> 定义声音或音乐内容。
<embed> 定义外部应用程序的容器（比如插件）。
<source> 定义 <video> 和 <audio> 的来源。
<track> 定义 <video> 和 <audio> 的轨道。
<video> 定义视频或影片内容。
语义元素
语义元素: 清楚地向浏览器和开发者描述其意义(如：table,form,img,a)
非语义元素：<div> 和 <span>
- 多媒体
多媒体: 可以是多种不同的格式（听到或看到的任何内容：文字、图片、音乐、音效、录音、电影、动画等等）
视频格式
AVI .avi Audio Video Interleave 微软开发。所有 Windows 都支持 AVI 格式。但非 Windows 计算机并不总是能够播放。
WMV .wmv Windows Media 微软开发。如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。
MPEG .mpg
.mpeg Moving Pictures Expert Group 跨平台，大多数浏览器支持。
QuickTime .mov QuickTime 苹果公司开发。QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。
RealVideo .rm
.ram RealVideo 由Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。
Flash .swf
.flv Flash (Shockwave) 由 Macromedia 开发的。需要额外的组件来播放。该组件会预装到 Firefox 或 IE 之类的浏览器上。
Mpeg-4 .mp4 Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。
声音格式
MIDI .mid
.midi MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件仅包含音乐指令，不含有声音（所以 MIDI 文件极其小巧）。
RealAudio .rm
.ram RealAudio 由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。
Wave .wav Wave (waveform)由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。无压缩
WMA .wma WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。
MP3 .mp3
.mpga MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。
插件(辅助应用程序)
辅助应用程序也称为插件，可由浏览器启动，html5之前用于播放音频和视频，使用 <object> 或 <embed> 标签来加载的。
插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入
音视频 属性,方法,事件
方法
播放
play()
暂停
pause()
重新加载
load()
是否能播放
isSupp=myVid.canPlayType('video/mp4;codecs=avc1.42E01E, mp4a.40.2');
添加新的文本轨道
text1=myVid.addTextTrack("caption");
text1.addCue(new TextTrackCue("Test text", 01.000, 04.000,"","","",true));
myVid=document.getElementById("video1");
属性
获得可用音轨的 AudioTrackList 对象
myVid.audioTracks
获得可用视频轨道的 VideoTrackList 对象
myVid.videoTracks
获得可用文本轨道的 TextTrackList 对象
myVid.textTracks
设置是否自动播放（加载完页面后）
myVid.autoplay=true;
设置音量
myVid.volume=0.2;
设置视频源
myVid.src="movie.ogg";
获取当前视频源路径
myVid.currentSrc
？
myVid.startDate
设置当前已播放时间（单位s）
myVid.currentTime=5;
获取时长
myVid.duration
设置是否循环播放
myVid.loop=true;
获取是否播放结束
myVid.ended
获取错误码
myVid.error.code
buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller 返回表示音频/视频当前媒体控制器的 MediaController 对象
controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）
crossOrigin 设置或返回音频/视频的 CORS 设置
defaultMuted 设置或返回音频/视频默认是否静音
defaultPlaybackRate 设置或返回音频/视频的默认播放速度
mediaGroup 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
muted 设置或返回音频/视频是否静音
networkState 返回音频/视频的当前网络状态
paused 设置或返回音频/视频是否暂停
playbackRate 设置或返回音频/视频播放的速度
played 返回表示音频/视频已播放部分的 TimeRanges 对象
preload 设置或返回音频/视频是否应该在页面加载后进行加载
readyState 返回音频/视频当前的就绪状态
seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking 返回用户是否正在音频/视频中进行查找
事件
abort 当音频/视频的加载已放弃时
canplay 当浏览器可以播放音频/视频时
canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange 当音频/视频的时长已更改时
emptied 当目前的播放列表为空时
ended 当目前的播放列表已结束时
error 当在音频/视频加载期间发生错误时
loadeddata 当浏览器已加载音频/视频的当前帧时
loadedmetadata 当浏览器已加载音频/视频的元数据时
loadstart 当浏览器开始查找音频/视频时
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
progress 当浏览器正在下载音频/视频时
ratechange 当音频/视频的播放速度已更改时
seeked 当用户已移动/跳跃到音频/视频中的新位置时
seeking 当用户开始移动/跳跃到音频/视频中的新位置时
stalled 当浏览器尝试获取媒体数据，但数据不可用时
suspend 当浏览器刻意不获取媒体数据时
timeupdate 当目前的播放位置已更改时
volumechange 当音量已更改时
waiting 当视频由于需要缓冲下一帧而停止
视频
当视频被包含在网页中时，它被称为内联视频。
当前大多数视频是通过插件来播放视频，并非所有浏览器都拥有同样的插件。
1.
<embed src="movie.swf" height="200" width="200"/>
问题：
如果浏览器不支持 Flash，视频将无法播放。
iPad 和 iPhone 不能显示 Flash 视频。
如果将视频转换为其他格式，那么它仍然不能在所有浏览器中播放
HTML4 不识别 <embed> 标签（页面无法通过验证）。
2.
<object data="movie.swf" height="200" width="200"/>
问题：
如果浏览器不支持 Flash，视频将无法播放。
iPad 和 iPhone 不能显示 Flash 视频。
如果将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。
3.html5 （依次识别到成功截止或显示不支持）
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
不支持时显示：Your browser does not support the video tag.
</video>
问题：
必须把视频转换为很多不同的格式。
<video> 元素在老式浏览器中无效。
<video> 元素无法通过 HTML 4 和 XHTML 验证。使用 <!DOCTYPE html> (HTML5) 解决验证问题
最终解决（3者结合）
<video width="320" height="240" controls="controls" autoplay="autoplay" loop="loop" preload="auto">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240" />
</object>
</video>
优酷解决方案（上传视频至优酷）
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
width="480" height="400"
type="application/x-shockwave-flash">
</embed>
Video
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause(){
myVideo.width=560;
if (myVideo.paused){
myVideo.play();
}else{
myVideo.pause();
}
</script>
音频
音频作为网页的组成部分时，被称为内联声音。
同视频一样，当前大多数音频是通过插件来播放视频，并非所有浏览器都拥有同样的插件。
1.
<embed height="100" width="100" src="song.mp3" />
问题：
<embed> 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，未安装插件，则无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。
2.
<object height="100" width="100" data="song.mp3"></object>
问题：
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，未安装插件，则无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。
3.html5
<audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>
问题：
<audio> 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
必须把音频文件转换为不同的格式。
<audio> 元素在老式浏览器中不起作用。
最终解决：
<audio controls="controls" height="100" width="100" autoplay="autoplay" loop="loop" preload="auto">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>
必须把音频转换为不同的格式
雅虎媒体播放解决
<a href="/i/song.mp3">播放 mp3</a>
<a href="/i/bird.wav">播放 wav</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
Windows Media Player 来播放 WMV 影片
<object width="100%" height="100%"
type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full" />
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100%"
height="100%" autostart="true" showcontrols="true"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>
使用 Flash 来播放 SWF 视频
<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40"></embed>
</object>
使用 QuickTime 来播放 MP4 视频
<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4" />
<param name="controller" value="true" />
</object>
使用 QuickTime 来播放 Wave 音频
<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="bird.wav" />
<param name="controller" value="true" />
</object>
- 绘制图形
Canvas
SVG
2.1. canvas画布（绘画）
使用javascript绘制 2D 图形，仅作为容器（本身不具备绘制能力）
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
适合图像密集型游戏(其中的许多对象会被频繁重绘)
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">
Your browser does not support the canvas element.
</canvas>
<div id="xycoordinates"></div>
<script type="text/javascript">
- 获取上下文
获取画布控件
var c=document.getElementById("myCanvas");
获取上下文（用于绘制）
var cxt=c.getContext("2d");
- 配置画笔
设置填充色
cxt.fillStyle="#FF0000";
设置边框色
ctx.strokeStyle="#0000ff";
设置线结束端点样式
ctx.lineCap="round";
设置线交汇点样式
ctx.lineJoin="round";
设置线宽
ctx.lineWidth=10;
设置最大斜接长度
ctx.miterLimit=5;
设置阴影色
ctx.shadowColor="black";
设置阴影模糊级别
ctx.shadowBlur=20;
设置阴影偏移（向右20）
ctx.shadowOffsetX=20;
设置阴影偏移（向下20）
ctx.shadowOffsetY=20;
透明度
ctx.globalAlpha=0.2;
重叠区域
后者在上
ctx.globalCompositeOperation="source-over";
后者在下
ctx.globalCompositeOperation="destination-over";
- 绘制
填充
ctx.fill();
描边
ctx.stroke();
剪切矩形（仅剪切区域有效）
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
重新开始一条路径
ctx.beginPath();
设置起始点
ctx.moveTo(0,0);
画线至新点
ctx.lineTo(300,150);
闭合路径（连接起始点和终止点）
ctx.closePath();
点是否在当前路径上
if (ctx.isPointInPath(20,50)){
};
形变当前绘图（x缩放，x倾斜，y倾斜，y缩放，x移动，y移动）
ctx.transform(1,0.5,-0.5,1,30,10);
形变绘图（之前的形变不再显示）
ctx.setTransform(1,0.5,-0.5,1,30,10);
缩放当前绘图（绘制区域放大）
ctx.scale(2,2);
旋转当前绘图
ctx.rotate(20*Math.PI/180);
移动当前绘图
ctx.translate(70,70);
重复绘制元素
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
绘制放射性渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
绘制矩形（画布左上角为坐标原点）
cxt.fillRect(0,0,150,75);
描边矩形
ctx.strokeRect(20,20,150,100);
或
创建矩形
ctx.rect(20,20,150,100);
描边
ctx.stroke();
填充
ctx.fill();
清空矩形区域
ctx.clearRect(20,20,100,50);
画线
设置开始点
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
绘制边框
cxt.stroke();
绘制二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
绘制三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
画圆
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
填充
cxt.fill();
画弧
ctx.beginPath();
ctx.moveTo(20,20); // 创建开始点
ctx.lineTo(100,20); // 创建水平线
ctx.arcTo(150,20,150,70,50); // 创建弧
ctx.lineTo(150,120); // 创建垂直线
ctx.stroke();
渐进色
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);（大于渐变区域则纯色）
图片
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
绘制文本
设置上下对齐方式
ctx.textBaseline="top";
设置左右对齐方式
ctx.textAlign="end";
设置字体
ctx.font="40px Arial";
填充文本
ctx.fillText("Hello World",10,50);
描边文本
ctx.strokeText("w3school.com.cn",10,90);
获取指定文本宽
ctx.measureText(txt)
绘制像素
数据源
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4){
imgData.data[i+0]=255; 红
imgData.data[i+1]=0; 绿
imgData.data[i+2]=0; 蓝
imgData.data[i+3]=255; Alpha
}
绘制
ctx.putImageData(imgData,10,10);
获取指定区域像素
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,10);
获取宽，高，数据
imgData.width
imgData.height
imgData.data
其他方法
save() 保存当前环境的状态
restore() 返回之前保存过的路径状态和属性
createEvent()
getContext()
toDataURL()
function cnvs_getCoordinates(e){
获取坐标
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates(){
document.getElementById("xycoordinates").innerHTML="";
}
</script>
2.2 SVG(Scalable Vector Graphics)
使用 XML 格式定义2D图形(可通过文本编辑器来创建和修改,可被搜索、索引、脚本化或压缩)
可伸缩矢量图形（尺寸改变不失真）
用于显示网络图片
是万维网联盟的标准。
不依赖分辨率
支持事件处理器
适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏
支持：
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari
<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>
- 拖放
拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。
支持多数浏览器
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>
<p>请把 W3School 的图片拖放到矩形中：</p>
拖放控件置此控件后，允许可拖放置此控件
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
设置图片可拖拽，规定拖动数据源
<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />
</body>
</html>
- 地理定位
- 本地存储
在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器
支持多数浏览器
HTML本地存储提供了2个在客户端存储数据的对象：
window.localStorage
- 存储没有截止日期的数据（当浏览器被关闭时数据不会被删除）
window.sessionStorage
- 针对一个 session 来存储数据（当浏览器被关闭时数据会被删除）
<div id="result"></div>
<script>
// 检测浏览器是否支持
if (typeof(Storage) !== "undefined") {
localStorage
// 存储数据
localStorage.setItem("lastname", "Gates");
// 或
localStorage.lastname = "Gates";
// 获取数据
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
// 或
document.getElementById("result").innerHTML = localStorage.lastname;
// 删除数据
localStorage.removeItem("lastname");
sessionStorage
// 存储数据
sessionStorage.clickcount = Number(sessionStorage.clickcount);
// 获取数据
document.getElementById("result").innerHTML = sessionStorage.clickcount;
} else {
document.getElementById("result").innerHTML = "抱歉！您的浏览器不支持 Web Storage ...";
}
</script>
- 缓存 （HTML Cache Manifest）
应用程序缓存为应用带来3优势：
离线浏览
速度 （已缓存可以提高加载速度）
减少服务器负载
支持多数浏览器（除了IE）
<!DOCTYPE html>
启用应用程序缓存
<html manifest="/example/html5/demo_html.appcache">
<body>
<script type="text/javascript" src="/example/html5/demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">获得日期和事件</button></p>
<p><img src="/i/w3school_banner.gif" /></p>
<p>请打开<a href="/example/html5/html5_html_manifest.html" target="_blank">这个页面</a>，然后脱机浏览，重新加载页面。页面中的脚本和图像依然可用。</p>
</body>
</html>
manifest 文件的建议文件扩展名是：".appcache"
必须在 web 服务器上进行配置MIME-type：text/cache-manifest
一旦应用被缓存，它就会保持缓存直到发生下列情况：
用户清空浏览器缓存
manifest 文件被修改（修改注释）
由程序来更新应用缓存
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。manifest 文件有三个部分：
CACHE MANIFEST - 下列出的文件将在首次下载后进行缓存
NETWORK - 下列出的文件永远需要连接服务器且不会被缓存
FALLBACK - 下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
demo_html.appcache
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
*：所有
FALLBACK:
/html/ /offline.html 无法访问时进入/offline.html
- Web Worker
当在 HTML 页面中执行脚本时，页面是不可响应(交互)的，直到脚本已完成
Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能（可以交互）
支持多数浏览器
无法访问以下（处于外部）
window 对象
document 对象
parent 对象
<script>
var w;
function startWorker(){
if(typeof(Worker)!=="undefined"){
if(typeof(w)=="undefined"){
创建Web worker
w=new Worker("/example/html5/demo_workers.js");
}
接收消息时调用
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}
function stopWorker(){
终止Web worker
w.terminate();
}
</script>
demo_workers.js
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
- Server-Sent 事件
网页自动从服务器获得更新（不用主动请求）
支持：谷歌，火狐，Safari
不支持：IE
<div id="result"></div>
<script>
if(typeof(EventSource)!=="undefined"){
var source=new EventSource("/example/html5/demo_sse.php");
source.onmessage=function(event){
document.getElementById("result").innerHTML+=event.data + "<br />";
};
}
else{
document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 server-sent 事件 ...";
}
</script>
其他事件
onopen 当通往服务器的连接被打开
onmessage 当接收到消息
onerror 当发生错误
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() 刷新网页
%>
4. 参考手册
W3C HTML参考手册
转义参考手册
符号参考手册
URL编码参考手册
语言参考手册
HTTP 状态参考手册
标签是否有效参考手册
网友评论