HTML5

原创

于忠波 2013-05-16 17:50:03 博主文章分类：java笔记 ©著作权

©著作权归作者所有：来自51CTO博客作者于忠波的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</head>

<body>

<!--

video 元素支持两种视频格式：

Ogg = 带有 Thedora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

例：

你的浏览器不支持改video元素！

</video>

属性值描述

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

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

height pixels 设置视频播放器的高度。

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

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

src url 要播放的视频的 URL。

width pixels 设置视频播放器的宽度。

<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的,并且可以有多个source属性。

-->

<!--

audio 元素能够播放声音文件或者音频流。

audio 元素支持三种音频格式：Ogg Vorbis MP3 Wav

例：

Your browser does not support the audio tag.

</audio>

-->

<!--

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

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

JavaScript 使用 id 来寻找 canvas 元素

然后，创建 context 对象

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

例：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="red";

cxt.fillRect(0,0,150,75);

</script>

例：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.moveTo(10,10);

cxt.lineTo(150,50);

cxt.lineTo(10,50);

cxt.stroke();

</script>

Your browser does not support the canvas element.

</canvas>

-->

<!--

HTML5 提供了两种在客户端存储数据的新方法：

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

sessionStorage - 针对一个 session 的数据存储

例：

对用户访问页面的次数进行计数：

<br/>

if (localStorage.pagecount)

{

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

}

else

{

localStorage.pagecount=1;

}

document.write("Visits "+ localStorage.pagecount + " time(s) this localStorage。");

</script>

<br/>

if (sessionStorage.pagecount)

{

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

}

else

{

sessionStorage.pagecount=1;

}

document.write("Visits "+sessionStorage.pagecount+" time(s) this sessionStorage。");

</script>

-->

<!--

HTML5 拥有多个新的表单输入类型

新的输入类型：email url number range Date pickers (date, month, week, time, datetime,datetime-local) search color

Input 类型 - email:email 类型用于应该包含 e-mail 地址的输入域。

Input 类型 - url:url 类型用于应该包含 URL 地址的输入域。

Input 类型 - number:number 类型用于应该包含数值的输入域。

Input 类型 - range:range 类型用于应该包含一定范围内数字值的输入域,range 类型显示为滑动条。

Input 类型 - search:search 类型用于搜索域，比如站点搜索或 Google 搜索,search 域显示为常规的文本域。

Input 类型 - Date Pickers（数据检出器）:HTML5 拥有多个可供选取日期和时间的新输入类型,

Input 类型 - p_w_picpath:显示图片，height 和 width 属性规定用于 p_w_picpath 类型的 input 标签的图像高度和宽度。

Input 类型 - file:选择硬盘上的文件，multiple 属性规定输入域中可选择多个值。

Date Pickers的属性

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间（小时和分钟）

datetime - 选取时间、日、月、年（UTC 时间）

datetime-local - 选取时间、日、月、年（本地时间）

number和range的属性

属性值描述

max number 规定允许的最大值

min number 规定允许的最小值

step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）

value number 规定默认值

例：

</form>

-->

<!--

HTML5 的新的表单元素：

新的表单元素：datalist keygen output

>datalist 元素：规定输入域的选项列表。

option 元素永远都要设置 value 属性。

>keygen 元素：是提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器,当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥:存储于客户端，公钥:则被发送到服务器。公钥可用于之后验证用户的客户端证书.

>output 元素:用于不同类型的输出，比如计算或脚本输出：

例：

</datalist>

例：

</form>

例：

function resCalc()

{

numA=document.getElementById("num_a").value;

numB=document.getElementById("num_b").value;

document.getElementById("result").value=Number(numA)+Number(numB);

}

</script>

<p>使用 output 元素的简易计算器：</p>

<input id="num_a" /> +<input id="num_b" /> =

</form>

-->

<!--

HTML5 的新的表单属性

新的 form 属性：autocomplete novalidate

新的 input 属性：autocomplet e autofocus form form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height和width list min, max 和 step multiple pattern(regexp) placeholder required

>autocomplete 属性：规定 form 或 input 域应该拥有自动完成功能。

autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text,search,url,telephone,email,password,datepickers,range,color

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

--autocomplete="on/off"

>autofocus 属性：规定在页面加载时，域自动地获得焦点。

注释：autofocus 属性适用于所有 <input> 标签的类型。

--autofocus=autofocus;

>form 属性:规定输入域所属的一个或多个表单。

注释：form 属性适用于所有 <input> 标签的类型,form 属性必须引用所属表单的 id。

--form="表单名";

>表单重写属性:允许您重写 form 元素的某些属性设定。

表单重写属性有：

formaction - 重写表单的 action 属性

formenctype - 重写表单的 enctype 属性

formmethod - 重写表单的 method 属性

formnovalidate - 重写表单的 novalidate 属性

formtarget - 重写表单的 target 属性

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

-- formaction="demo_admin.asp";

>list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

注释：list 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, date pickers, number, range, color。

--<datalist></datalist>

>multiple 属性规定输入域中可选择多个值。

注释：multiple 属性适用于以下类型的 <input> 标签：email 和 file。

--multiple="multiple"

>novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

--novalidate="true"

>pattern 属性规定用于验证 input 域的模式（pattern）。

--pattern="[A-z]{3}"

>placeholder 属性提供一种提示（hint），描述输入域所期待的值。

--placeholder="qq1160817999"

>required 属性规定必须在提交之前填写输入域（不能为空）。

--required="required"

例：

</form>

例：

</form>

例：

</form>

例：

E-mail: <input type="email" name="user_email" />

</form>

例：

例：

-->

<!--

HTML5标签：

标签描述 4 5 注释

定义注释。 4 5

<!DOCTYPE> 定义文档类型。 4 5 HTML 5 中只有一个：<!DOCTYPE HTML>。

<a> 定义超链接。 4 5 在 HTML 5 中，<a> 是超链接，但是假如没有 href 属性，它仅仅是超链接的一个占位符

<address> 定义地址元素。 4 5 <address>作者：<a href="">Bill Gates</a></address>

<area> 定义图像映射中的区域。 4 5

<article> 定义 article。 5 <article> 标签的内容独立于文档的其余部</article>

<aside> 定义页面内容之外的内容。 5 <aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>

<audio> 定义声音内容。 5 <audio src="someaudio.wav"></audio>

<b> 定义粗体文本。 4 5 <b>red</b>

<base> 定义页面中所有链接的基准 URL。 4 5 <base href="http://www.w3school.com.cn/i/" />

<bdo> 定义文本显示的方向。 4 5 <bdo dir="rtl/ltr">Here is some text</bdo>

<blockquote> 定义长的引用。 4 5 <blockquote>帝国主义都是纸老虎 ... </blockquote>

<body> 定义 body 元素。 4 5

<br> 插入换行符。 4 5

<button> 定义按钮。 4 5 <button>Click Me!</button>

<canvas> 定义图形。 5 <canvas id="myCanvas"></canvas>--

<caption> 定义表格标题。 4 5

<cite> 定义引用。 4 5

<code> 定义计算机代码文本。 4 5

<col> 定义表格列的属性。 4 5

<colgroup> 定义表格列的分组。 4 5

<command> 定义命令按钮。 5

<datalist> 定义下拉列表。 5

<dd> 定义定义的描述。 4 5

<del> 定义删除文本。 4 5

<details> 定义元素的细节。 5 <details open="true">info</details>

<dfn> 定义定义项目。 4 5

<div> 定义文档中的一个部分。 4 5

<dl> 定义定义列表。 4 5

<dt> 定义定义的项目。 4 5

<em> 定义强调文本。 4 5

<fieldset> 定义 fieldset。 4 5 <fieldset> .... </fieldset>

<figcaption> 定义 figure 元素的标题。 5

<figure> 定义媒介内容的分组，以及它们的标题。 5 <figure>...</figure>

<footer> 定义 section 或 page 的页脚。 5

<form> 定义表单。 4 5

<h1> to <h6> 定义标题 1 到标题 6。 4 5

<head> 定义关于文档的信息。 4 5

<header> 定义 section 或 page 的页眉。 5

<hgroup> 定义有关文档中的 section 的信息。 5 <hgroup>..</hgroup>

<hr> 定义水平线。 4 5

<html> 定义 html 文档。 4 5

<i> 定义斜体文本。 4 5

<img> 定义图像。 4 5

<input> 定义输入域。 4 5

<ins> 定义下划线文本。 4 5

<keygen> 定义生成密钥。 5

<kbd> 定义键盘文本。 4 5

<label> 定义表单控件的标注。 4 5

<legend> 定义 fieldset 中的标题。 4 5

<li> 定义列表的项目。 4 5

<map> 定义图像映射。 4 5

<mark> 定义有记号的文本。 5

<menu> 定义菜单列表。 4 5

<meter> 定义预定义范围内的度量。 5

<nav> 定义导航链接。 5

<ol> 定义有序列表。 4 5

<optgroup> 定义选项组。 4 5

<option> 定义下拉列表中的选项。 4 5

<output> 定义输出的一些类型。 5

<p> 定义段落。 4 5

<param> 为对象定义参数。 4 5

<pre> 定义预格式化文本。 4 5

<progress> 定义任何类型的任务的进度。 5

<q> 定义短的引用。 4 5

<rp> 定义若浏览器不支持 ruby 元素显示的内容。 5

<rt> 定义 ruby 注释的解释。 5

<ruby> 定义 ruby 注释。 5

<samp> 定义样本计算机代码。 4 5

<section> 定义 section。 5

<select> 定义可选列表。 4 5

<small> 定义小号文本。 4 5

<source> 定义媒介源。 5

<span> 定义文档中的 section。 4 5

<strong> 定义强调文本。 4 5

<sub> 定义下标文本。 4 5

<summary> 定义 details 元素的标题。 5

<sup> 定义上标文本。 4 5

<table> 定义表格。 4 5

<tbody> 定义表格的主体。 4 5

<td> 定义表格单元。 4 5

<textarea> 定义 textarea。 4 5

<tfoot> 定义表格的脚注。 4 5

<th> 定义表头。 4 5

<thead> 定义表头。 4 5

<time> 定义日期/时间。 5

<title> 定义文档的标题。 4 5

<tr> 定义表格行。 4 5

<ul> 定义无序列表。 4 5

<var> 定义变量。 4 5

<video> 定义视频。 5

<noframes> HTML 5 中不支持。定义 noframe 部分。 4

<s> HTML 5 中不支持。定义加删除线的文本。 4

<tt> HTML 5 中不支持。定义打字机文本。 4

<u> HTML 5 中不支持。定义下划线文本。 4

<xmp> HTML 5 中不支持。定义预格式文本。

<font> HTML 5 中不支持。 4

<isindex> HTML 5 中不支持。定义单行的输入域。 4

<frame> HTML 5 中不支持。定义子窗口（框架）。 4

<frameset> HTML 5 中不支持。定义框架的集。 4

<dir> HTML 5 中不支持。定义目录列表。4

<center> HTML 5 中不支持。定义居中的文本。4

<acronym> HTML 5 中不支持。定义首字母缩写。 4

<basefont> HTML 5 中不支持。请使用 CSS 代替。 4

<big> HTML 5 中不支持。定义大号文本。 4

<strike> HTML 5 中不支持。定义加删除线的文本。 4

-->

<!--

HTML 5 属性:

属性值描述

accesskey character 规定访问元素的键盘快捷键

class classname 规定元素的类名（用于规定样式表中的类）。

contenteditable true/false 规定是否允许用户编辑内容。

contextmenu menu_id 规定元素的上下文菜单。

data-yourvalue value 规定HTML文档的创作者可以定义他们自己的属性,必须以 "data-" 开头。

dir ltr/rtl 规定元素中内容的文本方向。

draggable true/false/auto 规定是否允许用户拖动元素。

hidden hidden 规定该元素是无关的。被隐藏的元素不会显示。

id id 规定元素的唯一 ID。

item empty/url 用于组合元素。

itemprop url/group/value 用于组合项目。

lang language_code 规定元素中内容的语言代码。语言代码参考手册。

spellcheck true/false 规定是否必须对元素进行拼写或语法检查。

style style_definition 规定元素的行内样式。

subject id 规定元素对应的项目。

tabindex number 规定元素的 tab 键控制次序。

title text 规定有关元素的额外信息。

-->

<!--

Window 事件属性

window 对象触发的事件。

适用于 <body> 标签：

属性值描述

onafterprint script 在打印文档之后运行脚本

onbeforeprint script 在文档打印之前运行脚本

onbeforeonload script 在文档加载之前运行脚本

onblur script 当窗口失去焦点时运行脚本

onerror script 当错误发生时运行脚本

onfocus script 当窗口获得焦点时运行脚本

onhaschange script 当文档改变时运行脚本

onload script 当文档加载时运行脚本

onmessage script 当触发消息时运行脚本

onoffline script 当文档离线时运行脚本

ononline script 当文档上线时运行脚本

onpagehide script 当窗口隐藏时运行脚本

onpageshow script 当窗口可见时运行脚本

onpopstate script 当窗口历史记录改变时运行脚本

onredo script 当文档执行再执行操作（redo）时运行脚本

onresize script 当调整窗口大小时运行脚本

onstorage script 当文档加载加载时运行脚本

onundo script 当文档执行撤销操作时运行脚本

onunload script 当用户离开文档时运行脚本

表单事件

由 HTML 表单内部的动作触发的事件。

适用于所有 HTML 5 元素，不过最常用于表单元素中：

属性值描述

onblur script 当元素失去焦点时运行脚本

onchange script 当元素改变时运行脚本

oncontextmenu script 当触发上下文菜单时运行脚本

onfocus script 当元素获得焦点时运行脚本

onformchange script 当表单改变时运行脚本

onforminput script 当表单获得用户输入时运行脚本

oninput script 当元素获得用户输入时运行脚本

oninvalid script 当元素无效时运行脚本

onreset script 当表单重置时运行脚本。HTML 5 不支持。

onselect script 当选取元素时运行脚本

onsubmit script 当提交表单时运行脚本

键盘事件

由键盘触发的事件。

适用于所有 HTML 5 元素：

属性值描述

onkeydown script 当按下按键时运行脚本

onkeypress script 当按下并松开按键时运行脚本

onkeyup script 当松开按键时运行脚本

鼠标事件

由鼠标货相似的用户动作触发的事件。

适用于所有 HTML 5 元素：

属性值描述

onclick script 当单击鼠标时运行脚本

ondblclick script 当双击鼠标时运行脚本

ondrag script 当拖动元素时运行脚本

ondragend script 当拖动操作结束时运行脚本

ondragenter script 当元素被拖动至有效的拖放目标时运行脚本

ondragleave script 当元素离开有效拖放目标时运行脚本

ondragover script 当元素被拖动至有效拖放目标上方时运行脚本

ondragstart script 当拖动操作开始时运行脚本

ondrop script 当被拖动元素正在被拖放时运行脚本

script 当按下鼠标按钮时运行脚本

script 当鼠标指针移动时运行脚本

script 当鼠标指针移出元素时运行脚本

script 当鼠标指针移至元素之上时运行脚本

script 当松开鼠标按钮时运行脚本

script 当转动鼠标滚轮时运行脚本

onscroll script 当滚动元素滚动元素的滚动条时运行脚本

媒介事件

由视频、图像以及音频等媒介触发的事件。

适用于所有 HTML 5 元素，不过在媒介元素（诸如 audio、embed、img、object 以及 video）中最常用：

属性值描述

onabort script 当发生中指事件时运行脚本

oncanplay script 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本

oncanplaythrough script 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本

ondurationchange script 当媒介长度改变时运行脚本

onemptied script 当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本

onended script 当媒介已抵达结尾时运行脚本

onerror script 当在元素加载期间发生错误时运行脚本

script 当加载媒介数据时运行脚本

script 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本

script 当浏览器开始加载媒介数据时运行脚本

onpause script 当媒介数据暂停时运行脚本

onplay script 当媒介数据将要开始播放时运行脚本

onplaying script 当媒介数据已开始播放时运行脚本

onprogress script 当浏览器正在取媒介数据时运行脚本

onratechange script 当媒介数据的播放速率改变时运行脚本

onreadystatechange script 当就绪状态（ready-state）改变时运行脚本

onseeked script 当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本

onseeking script 当媒介元素的定位属性为真且定位已开始时运行脚本

onstalled script 当取回媒介数据过程中（延迟）存在错误时运行脚本

onsuspend script 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本

ontimeupdate script 当媒介改变其播放位置时运行脚本

onvolumechange script 当媒介改变音量亦或当音量被设置为静音时运行脚本

onwaiting script 当媒介已停止播放但打算继续播放时运行脚本

-->

</body>

</html>

上一篇：CSS3

下一篇：网络编程

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯