HTML5
1：<video width="320" height="240"controls="controls">
<source src="movie.ogg"type="video/ogg">
<source src="movie.mp4"type="video/mp4">
Your browser does notsupport the video tag.
</video>
2：W3C 指 World Wide Web Consortium，万维网联盟。
WHATWG 指 Web Hypertext ApplicationTechnology Working Group。
WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。
3：为 HTML5 建立的一些规则：
· 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
· 减少对外部插件的需求（比如 Flash）
· 更优秀的错误处理
· 更多取代脚本的标记
· HTML5 应该独立于设备
· 开发进程应对公众透明
4：新特性
HTML5 中的一些有趣的新特性：
· 用于绘画的 canvas 元素
· 用于媒介回放的 video 和 audio 元素
· 对本地离线存储的更好的支持
· 新的特殊内容元素，比如 article、footer、header、nav、section
· 新的表单控件，比如 calendar、date、time、email、url、search
5：<videosrc="movie.ogg" controls="controls">
</video>
支持oog,mpeg4,webM格式
control 属性供添加播放、暂停和音量控件。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
<videowidth="320" height="240" controls="controls">
<source src="movie.ogg"type="video/ogg">
<source src="movie.mp4"type="video/mp4">
Your browser does notsupport the video tag.
</video>
<!DOCTYPE html>
<html>
<body>
<divstyle="text-align:center;">
<button οnclick="playPause()">播放/暂停</button>
<button οnclick="makeBig()">大</button>
<button οnclick="makeNormal()">中</button>
<button οnclick="makeSmall()">小</button>
<br />
<video id="video1" width="420"style="margin-top:15px;">
<sourcesrc="/example/html5/mov_bbb.mp4" type="video/mp4" />
<sourcesrc="/example/html5/mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div>
<scripttype="text/javascript">
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>
| 方法 | 属性 | 事件 |
| play() | currentSrc | play |
| pause() | currentTime | pause |
| load() | videoWidth | progress |
| canPlayType | videoHeight | error |
|
| duration | timeupdate |
|
| ended | ended |
|
| error | abort |
|
| paused | empty |
|
| muted | emptied |
|
| seeking | waiting |
|
| volume | loadedmetadata |
|
| Height ***可立即使用 |
|
|
| Width *** |
|
6：<audio src="song.ogg"controls="controls">
Your browser does notsupport the audio tag.
</audio>
audio 元素能够播放声音文件或者音频流
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：
<audiocontrols="controls">
<source src="song.ogg"type="audio/ogg">
<source src="song.mp3"type="audio/mpeg">
Your browser does notsupport the audio tag.
</audio>
7：canvas 元素用于在网页上绘制图形。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
8： HTML5新的 Input 类型
· url
· number
· range
· Date pickers (date,month, week, time, datetime, datetime-local)
· search
· Color
Input 类型 - Date Pickers（日期选择器）
HTML5 拥有多个可供选取日期和时间的新输入类型：
Date: <input type="date"name="user_date" />
· date - 选取日、月、年
· month - 选取月、年
· week - 选取周和年
· time - 选取时间（小时和分钟）
· datetime - 选取时间、日、月、年（UTC 时间）
· datetime-local - 选取时间、日、月、年（本地时间）
Input 类型 - search
search 类型用于搜索域，比如站点搜索或 Google 搜索。
search 域显示为常规的文本域。
HTML5 的新的表单元素：
HTML5 拥有若干涉及表单的元素和属性。
本章介绍以下新的表单元素：
· datalist
· keygen
· output
datalist元素
datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：
实例
Webpage: <inputtype="url" list="url_list" name="link"/>
<datalistid="url_list">
<optionlabel="W3School" value="http://www.W3School.com.cn" />
<optionlabel="Google" value="http://www.google.com" />
<optionlabel="Microsoft" value="http://www.microsoft.com" />
</datalist>
提示：option 元素永远都要设置 value 属性。
keygen 元素
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
实例
<formaction="demo_form.asp" method="get">
Username: <inputtype="text" name="usr_name" />
Encryption: <keygenname="security" />
<inputtype="submit" />
</form>
HTML5的新的表单属性
新的 form 属性：
· Autocomplete 规定 form 或 input 域应该拥有自动完成功能。
· novalidate
新的 input 属性：
· Autocomplete 规定 form 或 input 域应该拥有自动完成功能。
· Autofocus 页面加载时，域自动地获得焦点。适用于所有 <input> 标签的类型。
· Form 适用于所有 <input> 标签的类型。form 属性必须引用所属表单的 id：
· form overrides(formaction, formenctype, formmethod, formnovalidate, formtarget) 适用于：submit 和 image。
· height 和 width height 和 width 属性只适用于 image 类型的 <input>标签。
<inputtype="image" src="img_submit.gif" width="99"height="99" />
·
· list
· min, max 和 step
· multiple
· pattern (regexp)
· placeholder
· required
<formaction="demo_form.asp" method="get" id="user_form">
First name:<inputtype="text" name="fname" />
<inputtype="submit" />
</form>
Last name: <input type="text"name="lname" form="user_form" />
在form元素之外，也是form表单的一部分
如需引用一个以上的表单，请使用空格分隔的列表。
list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注释：list 属性适用于以下类型的 <input> 标签：text, search, url,telephone, email, date pickers, number, range 以及 color。
实例
Webpage: <inputtype="url" list="url_list" name="link"/>
<datalist id="url_list">
<optionlabel="W3Schools" value="http://www.w3school.com.cn" />
<optionlabel="Google" value="http://www.google.com" />
<optionlabel="Microsoft" value="http://www.microsoft.com" />
</datalist>
multiple 属性
multiple 属性规定输入域中可选择多个值。
注释：multiple 属性适用于以下类型的 <input> 标签：email 和 file。
实例
Select images: <inputtype="file" name="img" multiple="multiple"/>
novalidate 属性
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注释：novalidate 属性适用于 <form> 以及以下类型的 <input> 标签：text, search, url,telephone, email, password, date pickers, range 以及 color.
pattern 属性
pattern 属性规定用于验证 input 域的模式（pattern）。
模式（pattern） 是正则表达式。
注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url,telephone, email 以及password。
下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：
实例
Country code: <inputtype="text" name="country_code"
pattern="[A-z]{3}" title="提示信息" />
placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url,telephone, email 以及password。
提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：
实例
<inputtype="search" name="user_search" placeholder="Search W3School"/>
required 属性
required 属性规定必须在提交之前填写输入域（不能为空）。
注释：required 属性适用于以下类型的 <input> 标签：text, search, url,telephone, email, password, date pickers, number, checkbox, radio 以及 file。
实例
Name: <inputtype="text" name="usr_name" required="required" />
<!--这是一段注释。注释不会在浏览器中显示。-->
定义和用法
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5 不基于 SGML，所以不需要引用 DTD。
提示：请始终向HTML 文档添加<!DOCTYPE> 声明，这样浏览器才能获知文档类型。
HTML 4.01 与 HTML5 之间的差异
在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：
<!DOCTYPE html>
常用的 DOCTYPE 声明
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
标记一个缩写：鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本。
The <abbr title="People's Republic ofChina">PRC</abbr> was founded in 1949.
HTML5 中不支持 <applet> 标签。请使用 object元素 标签代替。
带有可点击区域的图像映射：
<img src="planets.jpg"border="0" usemap="#planetmap"alt="Planets" />
<map name="planetmap" id="planetmap">
<areashape="circle" coords="180,139,14" href="venus.html" alt="Venus" />
<area shape="circle"coords="129,161,10" href ="mercur.html"alt="Mercury" />
<area shape="rect"coords="0,0,110,260" href ="sun.html" alt="Sun"/>
</map>
<b> 标签规定粗体文本。
<base> 标签为页面上的所有链接规定默认地址或默认目标。
| · _blank · _parent · _self · _top framename |
定义和用法
bdi 指的是 bidi 隔离。
<bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。
在发布用户评论或其他您无法完全控制的内容时，该标签很有用。
定义和用法
<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
tbody 元素应该与 thead 和 tfoot 元素结合起来使用。
thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
<fieldset>
<legend>health information</legend>
height: <input type="text"/>
weight: <input type="text"/>
</fieldset>
8976
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
