HTML5基础随笔
1视频
Video视频标签,视频格式
1).Ogg格式
<video src=”movie.0gg” controls=”controls”></video>
2)mpeg4格式
<video src=”movie.mp4” controls=”controls”></video>
示例:
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
</video>
2音频
Audio音频标签,音频格式
1).Ogg格式
<audio src=”song.ogg” controls=”controls”></audio>
2)mpeg4格式
<audio src=”song.mp3” controls=”controls”></audio>
示例:
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
</audio>
标签属性:
属性 | 值 | 描述 |
autoplay | 如果出现该属性,则视频在就绪后马上播放。 | |
controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 | |
pixels | 设置视频播放器的高度。 | |
loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 | |
preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 | |
url | 要播放的视频的 URL。 | |
pixels | 设置视频播放器的宽度。 |
3画布<canvas>
<canvas id="myCanvas" width="200" height="100"></canvas>
4 web存储
1)localStorage方法存储的数据没有时间限制,数据能够长期储存。
2)sessionStorage方法针对一个session进行数据存储,当用户关闭浏览器窗口后,数据会被删除。
示例:
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits: " + localStorage.pagecount + " time(s).");
</script>
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口,然后再试一次,计数器会继续计数。</p>
</body>
<!-- awwwb.com -->
</html>
5 HTML5 Input类型
1)email 类型用于应该包含e-mail地址的输入域;
2)url 类型用于应该包含 URL 地址的输入域;
3) number 类型用于应该包含数值的输入域;
4) range 类型用于应该包含一定范围内数字值的输入域;
5) HTML5 拥有多个可供选取日期和时间的新输入类型:
· date - 选取日、月、年
· month - 选取月、年
· week - 选取周和年
· time - 选取时间(小时和分钟)
· datetime - 选取时间、日、月、年(UTC 时间)
· datetime-local - 选取时间、日、月、年(本地时间)
示例:
<input type=”email” name=”user_email” />
6 HTML5表单元素
1)datalist元素
datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:
示例:
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3CSchool" value="http://www.W3CSchool.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
2)keygen元素
Keygen元素的作用是提供一种验证用户的可靠方法,目前,浏览器对此元素的糟糕的支持不足以使其成为一种有用的安全标准。
3)output元素
Output元素用于不同类型的输出,比如计算或脚本输出:
7 HTML5表单属性
1)autocomplete属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
注释:autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color
2)Autofocus属性
Autofocus属性规定在页面加载时,域自动地获得焦点;注:autofocus适用所有的<input>标签的类型。
3)form属性
Form属性规定输入域所属的一个或多个表单。
注:form属性适用于所有<input>标签的类型。Form属性必须引用所属表单的id。
4)表单重写属性
表单重写属性(form override attributes)允许你重写form元素的某些属性设定:
表单重写属性有:
· formaction - 重写表单的 action 属性
· formenctype - 重写表单的 enctype 属性
· formmethod - 重写表单的 method 属性
· formnovalidate - 重写表单的 novalidate 属性
· formtarget - 重写表单的 target 属性
注释:表单重写属性适用于以下类型的 <input> 标签:submit 和 image。
4)list属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注释:list 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, date pickers, number, range 以及 color。
5)min , max 和step属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)。
注释:min、max 和 step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range。
下面的例子显示一个数字域,该域接受介于 0 到 10 之间的值,且步进为 3(即合法的值为 0、3、6 和 9):
Points: <input type="number" name="points" min="0" max="10" step="3" />
6)multiple属性
multiple 属性规定输入域中可选择多个值。
注释:multiple 属性适用于以下类型的 <input> 标签:email 和 file。
7)novalidate属性
Novalidate属性规定在提交表单时不应该验证form或input域。
注释:novalidate属性适合用于<form>以下类型的<input>标签:text,search, URL, telephone,email,password,date,pickers,range以及color。
8)pattern属性
Pattern属性规定用于验证input域的模式(pattern)。
注释:pattern 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
9)placeholder属性
placeholder 属性提供一种提示(hint),描述输入域所期待的值。
注释:placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
10)required属性
Required属性规定必须在提交之前填写输入域(不能为空)。
8 HTML5参考手册
按字母顺序排列的标签列表
· 4: 指示在 HTML 4.01 中定义了该元素
· 5: 指示在 HTML 5 中定义了该元素
标签 | 描述 | 4 | 5 |
定义注释。 | 4 | 5 | |
定义文档类型。 | 4 | 5 | |
定义超链接。 | 4 | 5 | |
定义缩写。 | 4 | 5 | |
HTML 5 中不支持。定义首字母缩写。 | 4 |
| |
定义地址元素。 | 4 | 5 | |
HTML 5 中不支持。定义 applet。 | 4 |
| |
定义图像映射中的区域。 | 4 | 5 | |
定义 article。 |
| 5 | |
定义页面内容之外的内容。 |
| 5 | |
定义声音内容。 |
| 5 | |
定义粗体文本。 | 4 | 5 | |
定义页面中所有链接的基准 URL。 | 4 | 5 | |
HTML 5 中不支持。请使用 CSS 代替。 | 4 |
| |
定义文本显示的方向。 | 4 | 5 | |
HTML 5 中不支持。定义大号文本。 | 4 |
| |
定义长的引用。 | 4 | 5 | |
定义 body 元素。 | 4 | 5 | |
插入换行符。 | 4 | 5 | |
定义按钮。 | 4 | 5 | |
定义图形。 |
| 5 | |
定义表格标题。 | 4 | 5 | |
HTML 5 中不支持。定义居中的文本。 | 4 |
| |
定义引用。 | 4 | 5 | |
定义计算机代码文本。 | 4 | 5 | |
定义表格列的属性。 | 4 | 5 | |
定义表格列的分组。 | 4 | 5 | |
定义命令按钮。 |
| 5 | |
定义下拉列表。 |
| 5 | |
定义定义的描述。 | 4 | 5 | |
定义删除文本。 | 4 | 5 | |
定义元素的细节。 |
| 5 | |
定义定义项目。 | 4 | 5 | |
HTML 5 中不支持。定义目录列表。 | 4 |
| |
定义文档中的一个部分。 | 4 | 5 | |
定义定义列表。 | 4 | 5 | |
定义定义的项目。 | 4 | 5 | |
定义强调文本。 | 4 | 5 | |
定义外部交互内容或插件。 |
| 5 | |
定义 fieldset。 | 4 | 5 | |
定义 figure 元素的标题。 |
| 5 | |
定义媒介内容的分组,以及它们的标题。 |
| 5 | |
HTML 5 中不支持。 | 4 |
| |
定义 section 或 page 的页脚。 |
| 5 | |
定义表单。 | 4 | 5 | |
HTML 5 中不支持。定义子窗口(框架)。 | 4 |
| |
HTML 5 中不支持。定义框架的集。 | 4 |
| |
定义标题 1 到标题 6。 | 4 | 5 | |
定义关于文档的信息。 | 4 | 5 | |
定义 section 或 page 的页眉。 |
| 5 | |
定义有关文档中的 section 的信息。 |
| 5 | |
定义水平线。 | 4 | 5 | |
定义 html 文档。 | 4 | 5 | |
定义斜体文本。 | 4 | 5 | |
定义行内的子窗口(框架)。 | 4 | 5 | |
定义图像。 | 4 | 5 | |
定义输入域。 | 4 | 5 | |
定义插入文本。 | 4 | 5 | |
定义生成密钥。 |
| 5 | |
<isindex> | HTML 5 中不支持。定义单行的输入域。 | 4 |
|
定义键盘文本。 | 4 | 5 | |
定义表单控件的标注。 | 4 | 5 | |
定义 fieldset 中的标题。 | 4 | 5 | |
定义列表的项目。 | 4 | 5 | |
定义资源引用。 | 4 | 5 | |
定义图像映射。 | 4 | 5 | |
定义有记号的文本。 |
| 5 | |
定义菜单列表。 | 4 | 5 | |
定义元信息。 | 4 | 5 | |
定义预定义范围内的度量。 |
| 5 | |
定义导航链接。 |
| 5 | |
HTML 5 中不支持。定义 noframe 部分。 | 4 |
| |
定义 noscript 部分。 | 4 | 5 | |
定义嵌入对象。 | 4 | 5 | |
定义有序列表。 | 4 | 5 | |
定义选项组。 | 4 | 5 | |
定义下拉列表中的选项。 | 4 | 5 | |
定义输出的一些类型。 |
| 5 | |
定义段落。 | 4 | 5 | |
为对象定义参数。 | 4 | 5 | |
定义预格式化文本。 | 4 | 5 | |
定义任何类型的任务的进度。 |
| 5 | |
定义短的引用。 | 4 | 5 | |
定义若浏览器不支持 ruby 元素显示的内容。 |
| 5 | |
定义 ruby 注释的解释。 |
| 5 | |
定义 ruby 注释。 |
| 5 | |
HTML 5 中不支持。定义加删除线的文本。 | 4 |
| |
定义样本计算机代码。 | 4 | 5 | |
定义脚本。 | 4 | 5 | |
定义 section。 |
| 5 | |
定义可选列表。 | 4 | 5 | |
定义小号文本。 | 4 | 5 | |
定义媒介源。 |
| 5 | |
定义文档中的 section。 | 4 | 5 | |
HTML 5 中不支持。定义加删除线的文本。 | 4 |
| |
定义强调文本。 | 4 | 5 | |
定义样式定义。 | 4 | 5 | |
定义下标文本。 | 4 | 5 | |
定义 details 元素的标题。 |
| 5 | |
定义上标文本。 | 4 | 5 | |
定义表格。 | 4 | 5 | |
定义表格的主体。 | 4 | 5 | |
定义表格单元。 | 4 | 5 | |
定义 textarea。 | 4 | 5 | |
定义表格的脚注。 | 4 | 5 | |
定义表头。 | 4 | 5 | |
定义表头。 | 4 | 5 | |
定义日期/时间。 |
| 5 | |
定义文档的标题。 | 4 | 5 | |
定义表格行。 | 4 | 5 | |
HTML 5 中不支持。定义打字机文本。 | 4 |
| |
HTML 5 中不支持。定义下划线文本。 | 4 |
| |
定义无序列表。 | 4 | 5 | |
定义变量。 | 4 | 5 | |
定义视频。 |
| 5 | |
<xmp> | HTML 5 中不支持。定义预格式文本。 | 4 |
|
9 HTML5标签属性
NEW:HTML 5 中新的标准属性。
注释:HTML 4.01 不再支持 accesskey 属性:
属性 | 值 | 描述 |
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 | 规定有关元素的额外信息。 |
10 HTML5事件的属性
1)window事件属性
属性 | 值 | 描述 |
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 | 当用户离开文档时运行脚本 |
2)表单事件
适用于所有 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 | 当提交表单时运行脚本 |
3)键盘事件
适用于所有 HTML 5 元素:
属性 | 值 | 描述 |
onkeydown | script | 当按下按键时运行脚本 |
onkeypress | script | 当按下并松开按键时运行脚本 |
onkeyup | script | 当松开按键时运行脚本 |
4)鼠标事件
属性 | 值 | 描述 |
onclick | script | 当单击鼠标时运行脚本 |
ondblclick | script | 当双击鼠标时运行脚本 |
ondrag | script | 当拖动元素时运行脚本 |
ondragend | script | 当拖动操作结束时运行脚本 |
ondragenter | script | 当元素被拖动至有效的拖放目标时运行脚本 |
ondragleave | script | 当元素离开有效拖放目标时运行脚本 |
ondragover | script | 当元素被拖动至有效拖放目标上方时运行脚本 |
ondragstart | script | 当拖动操作开始时运行脚本 |
ondrop | script | 当被拖动元素正在被拖放时运行脚本 |
onmousedown | script | 当按下鼠标按钮时运行脚本 |
onmousemove | script | 当鼠标指针移动时运行脚本 |
onmouseout | script | 当鼠标指针移出元素时运行脚本 |
onmouseover | script | 当鼠标指针移至元素之上时运行脚本 |
onmouseup | script | 当松开鼠标按钮时运行脚本 |
onmousewheel | script | 当转动鼠标滚轮时运行脚本 |
onscroll | script | 当滚动元素滚动元素的滚动条时运行脚本 |
5)媒介事件
属性 | 值 | 描述 |
onabort | script | 当发生中指事件时运行脚本 |
oncanplay | script | 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本 |
oncanplaythrough | script | 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本 |
ondurationchange | script | 当媒介长度改变时运行脚本 |
onemptied | script | 当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本 |
onended | script | 当媒介已抵达结尾时运行脚本 |
onerror | script | 当在元素加载期间发生错误时运行脚本 |
onloadeddata | script | 当加载媒介数据时运行脚本 |
onloadedmetadata | script | 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本 |
onloadstart | 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 | 当媒介已停止播放但打算继续播放时运行脚本 |
Html5的基础知识到此就结束,实践是重点。
<!--EndFragment-->