HTML5基础教程

摘要

标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后,后继的HTML5和其它标准被束之高阁,为了推动Web标准化运动的发展,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group (Web超文本应用技术工作组 -WHATWG) 的组织。WHATWG 致力于 Web 表单和应用程序,而W3C(World Wide Web Consortium,万维网联盟) 专注于XHTML2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

HTML5基础教程
HTML5是下一代的HTML。
什么是HTML5?
HTML5将成为HTML、XHTML以及HTMLDOM的新标准。
HTML的上一个版本诞生于1999年。自从那以后,Web世界已经经历了巨变。HTML5仍处于完善之中。然而,大部分现代浏览器已经具备了某些HTML5支持。
HTML5是如何起步的?
HTML5是W3C与WHATWG合作的结果。
编者注:W3C指WorldWideWebConsortium,万维网联盟。
编者注:WHATWG指WebHypertextApplicationTechnologyWorkingGroup。
WHATWG致力于web表单和应用程序,而W3C专注于XHTML2.0。在2006年,双方决定进行合作,来创建一个新版本的HTML。为HTML5建立的一些规则:
•新特性应该基于HTML、CSS、DOM以及JavaScript。•减少对外部插件的需求(比如Flash)•更优秀的错误处理•更多取代脚本的标记•HTML5应该独立于设备•
开发进程应对公众透明
新特性

HTML5中的一些有趣的新特性:
•用于绘画的canvas元素
•用于媒介回放的video和audio元素•对本地离线存储的更好的支持
•新的特殊内容元素,比如article、footer、header、nav、section•
新的表单控件,比如calendar、date、time、email、url、search
浏览器支持
最新版本的Safari、Chrome、Firefox以及Opera支持某些HTML5特性。InternetExplorer9将支持某些HTML5特性。
HTML5视频
许多时髦的网站都提供视频。HTML5提供了展示视频的标准。
Web上的视频
直到现在,仍然不存在一项旨在网页上显示视频的标准。
今天,大多数视频是通过插件(比如Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5规定了一种通过video元素来包含视频的标准方法。
视频格式
当前,video元素支持两种视频格式:
InternetExplorerFirefox3.5Opera10.5Chrome3.0
Safari3.0OggXXXMPEG4X
X
Ogg=带有Thedora视频编码和Vorbis音频编码的Ogg文件
MPEG4=带有H.264视频编码和AAC音频编码的MPEG4文件
如何工作
如需在HTML5中显示视频,您所有需要的是:<videosrc="movie.ogg"controls="controls"></video>
control属性供添加播放、暂停和音量控件。
var script = document.createElement('script'); script.src = 'http://static.pay.baidu.com/resource/baichuan/ns.js'; document.body.appendChild(script);

包含宽度和高度属性也是不错的主意。
<video>与</video>之间插入的内容是供不支持video元素的浏览器显示的:
实例
<videosrc="movie.ogg"width="320"height="240"controls="controls">Yourbrowserdoesnotsupportthevideotag.</video>
上面的例子使用一个Ogg文件,适用于Firefox、Opera以及Chrome浏览器。要确保适用于Safari浏览器,视频文件必须是MPEG4类型。
video元素允许多个source元素。source元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
实例
<videowidth="320"height="240"controls="controls"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.mp4"type="video/mp4">Yourbrowserdoesnotsupportthevideotag.</video>
InternetExplorer
InternetExplorer8不支持video元素。在IE9中,将提供对使用MPEG4的video元素的支持。
<video>标签的属性
属性值
描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用"autoplay",则忽略该属性。srcurl要播放的视频的URL。width
pixels
设置视频播放器的宽度。
HTML5音频
HTML5提供了播放音频的标准。

描述
accesskeycharacter规定访问元素的键盘快捷键
classclassname
规定元素的类名(用于规定样式表中的类)。
contenteditable
•true•
false
规定是否允许用户编辑内容。
contextmenu
menu_id
规定元素的上下文菜单。data-yourvaluevalue
创作者定义的属性。
HTML文档的创作者可以定义他们自己的属性。必须以"data-"开头。
dir
•ltr•rtl
规定元素中内容的文本方向。
draggable
•true•false•auto
规定是否允许用户拖动元素。
hiddenhidden规定该元素是无关的。被隐藏的元素不会显示。idid
规定元素的唯一ID。
item
•empty•
url
用于组合元素。
itemprop
•url•groupvalue
用于组合项目。
lang
language_code
规定元素中内容的语言代码。语言代码参考手册。
spellcheck
•true•false
规定是否必须对元素进行拼写或语法检查。
stylestyle_definition规定元素的行内样式。subjectid
规定元素对应的项目。
tabindexnumber规定元素的tab键控制次序。titletext规定有关元素的额外信息。

HTML5事件属性标准事件属性
HTML4增加了通过事件触发浏览器中行为的能力,比如当用户点击某个元素时启动一段JavaScript。
下面的表格列出了可插入HTML5元素中以定义事件行为的标准事件属性。
Window事件属性
window对象触发的事件。适用于<body>标签:
属性值描述onafterprintscript在打印文档之后运行脚本onbeforeprintscript在文档打印之前运行脚本onbeforeonloadscript在文档加载之前运行脚本onblurscript当窗口失去焦点时运行脚本onerrorscript当错误发生时运行脚本onfocusscript当窗口获得焦点时运行脚本onhaschangescript当文档改变时运行脚本onloadscript当文档加载时运行脚本onmessagescript当触发消息时运行脚本onofflinescript当文档离线时运行脚本ononlinescript当文档上线时运行脚本onpagehidescript当窗口隐藏时运行脚本onpageshowscript当窗口可见时运行脚本
onpopstatescript当窗口历史记录改变时运行脚本
onredoscript当文档执行再执行操作(redo)时运行脚本onresizescript当调整窗口大小时运行脚本onstoragescript当文档加载加载时运行脚本
onundoscript当文档执行撤销操作时运行脚本onunload
script当用户离开文档时运行脚本
表单事件
由HTML表单内部的动作触发的事件。
适用于所有HTML5元素,不过最常用于表单元素中:
属性值描述onblurscript当元素失去焦点时运行脚本onchangescript当元素改变时运行脚本
oncontextmenuscript当触发上下文菜单时运行脚本

onfocus
script当元素获得焦点时运行脚本onformchangescript当表单改变时运行脚本
onforminputscript当表单获得用户输入时运行脚本oninputscript当元素获得用户输入时运行脚本oninvalidscript当元素无效时运行脚本
onresetscript当表单重置时运行脚本。HTML5不支持。onselectscript当选取元素时运行脚本onsubmitscript当提交表单时运行脚本
键盘事件
由键盘触发的事件。
适用于所有HTML5元素:属性值描述onkeydownscript当按下按键时运行脚本
onkeypressscript当按下并松开按键时运行脚本onkeyupscript当松开按键时运行脚本
鼠标事件
由鼠标货相似的用户动作触发的事件。适用于所有HTML5元素:
属性值描述onclickscript当单击鼠标时运行脚本ondblclickscript当双击鼠标时运行脚本ondragscript当拖动元素时运行脚本ondragendscript当拖动操作结束时运行脚本ondragenterscript当元素被拖动至有效的拖放目标时运行脚本ondragleavescript当元素离开有效拖放目标时运行脚本ondragoverscript当元素被拖动至有效拖放目标上方时运行脚本ondragstartscript当拖动操作开始时运行脚本ondropscript当被拖动元素正在被拖放时运行脚本onmousedownscript当按下鼠标按钮时运行脚本onmousemovescript当鼠标指针移动时运行脚本onmouseoutscript当鼠标指针移出元素时运行脚本onmouseoverscript当鼠标指针移至元素之上时运行脚本onmouseupscript当松开鼠标按钮时运行脚本onmousewheelscript当转动鼠标滚轮时运行脚本onscrollscript当滚动元素滚动元素的滚动条时运行脚本
媒介事件
由视频、图像以及音频等媒介触发的事件。适用于所有HTML5元素,不过在媒介元素(诸如audio、embed、img、object以及video)

中最常用:
属性值描述
onabortscript当发生中指事件时运行脚本
oncanplayscript当媒介能够开始播放但可能因缓冲而需要停止时运行脚本oncanplaythrough
script当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本ondurationchangescript当媒介长度改变时运行脚本
onemptiedscript当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本onendedscript当媒介已抵达结尾时运行脚本
onerrorscript当在元素加载期间发生错误时运行脚本onloadeddatascript当加载媒介数据时运行脚本
onloadedmetadata
script当媒介元素的持续时间以及其他媒介数据已加载时运行脚本onloadstartscript当浏览器开始加载媒介数据时运行脚本onpausescript当媒介数据暂停时运行脚本
onplayscript当媒介数据将要开始播放时运行脚本onplayingscript当媒介数据已开始播放时运行脚本onprogressscript当浏览器正在取媒介数据时运行脚本onratechangescript当媒介数据的播放速率改变时运行脚本onreadystatechangescript当就绪状态(ready-state)改变时运行脚本
onseekedscript当媒介元素的定位属性[1]不再为真且定位已结束时运行脚本onseekingscript当媒介元素的定位属性为真且定位已开始时运行脚本onstalledscript当取回媒介数据过程中(延迟)存在错误时运行脚本
onsuspendscript当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
ontimeupdate
script
当媒介改变其播放位置时运行脚本

onvolumechangescript当媒介改变音量亦或当音量被设置为静音时运行脚本onwaiting
script
当媒介已停止播放但打算继续播放时运行脚本
[1]:定位属性的英文译文是:seekingattribute。

 

 

李东辉

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: