html5

html5

什么是 HTML5?

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是如何起步的?

HTML5 是 W3C 与 WHATWG 合作的结果。

编者注:W3C 指 World Wide Web Consortium,万维网联盟。

编者注:WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。

HTML5和HTML4的区别

我们所熟知和了解的HTML 4.0,它是基于SGML(standard Generalized markup language)规则手册的。

在SGML规则手册中,元素的书写并不区分大小写,你可以有选择的闭合标签,标签属性的书写也可以不用引号标记。

HTML5定义的标记语言不是基于上面任何一种规则手册,但是html5 可以被写成要么是html形式,要么是xhtml形式。

如果你用html形式书写标签的话,你就可以不用区分大小写,而且标签可以不用闭合,属性不用引号,当中可以穿插一些xml的标签。比如:<img /><br />等。

HTML5未来的预测

从现在看来html5是 一个温和的改进,它没有强制要求放弃现有的任何一种技术或方案。同时它也没有采用捆绑销售的方式(我们可以只采用html5的 某一项标准,对于其他的仍旧可以用现有的方式来实现)。这些使得html5的推进将是一个长期进化的过程,这期间过时的东西会 被抛弃,而新的方式将会浮出水面。

各浏览器厂商正在加快对于html5的 支持,对于有心于支配下一代互联网浏览器市场的厂商而言,多支持一种标准,是有益无害的。相信再过1-2年html5的 那些新功能将会得到广泛的支持。

从商业的角度看,html5也 会是一个妥协的方案。它虽然会使你丧失一部分机会,但不会因此而成就你的竞争对手。敌视或抵制html5反而会错过更多的机 会。

在移动设备上html5具 有更大的优势,由于移动设备的平台特性,设备商与软件商之间存在着一些竞争关系(如最近炒的火热的ipad不支持flash事 件),这使得html5可以更快的进入市场,出于对移动网络的看好,html5也应该会有一个美好 的未来。

改进特性

HTML5提供了一些新的元素和属性,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如<audio>和<video>标记。

1.取消了一些过时的HTML4标记

其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被CSS取代。

HTML5 吸取了XHTML2 一些建议,包括一些用来改善文档结构的功能,比如,新的HTML 标签 header, footer, dialog, aside, figure 等的使用,将使内容创作者更加语义地创建文档,之前的开发者在实现这些功能时一般都是使用div

2.将内容和展示分离

b 和 i 标签依然保留,但它们的意义已经和之前有所不同,这些标签的意义只是为了将一段文字标识出来,而不是为了为它们设置粗体或斜体式样。u,font,center,strike 这些标签则被完全去掉了。

3.一些全新的表单输入对象

包括日期,URL,Email 地址,其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据,这一使用机器可以识别的标签标注内容的方法,使语义Web 的处理更为简单。总的来说,这些与结构有关的改进使内容创建者可以创建更干净,更容易管理的网页,这样的网页对搜索引擎,对读屏软件等更为友好。

4.全新的,更合理的Tag

多媒体对象将不再全部绑定在 object 或 embed Tag 中,而是视频有视频的Tag,音频有音频的 Tag。

5.本地数据库

这个功能将内嵌一个本地的SQL 数据库,以加速交互式搜索,缓存以及索引功能。同时,那些离线Web 程序也将因此获益匪浅。不需要插件的富动画。

6.Canvas 对象

将给浏览器带来直接在上面绘制矢量图的能力,这意味着用户可以脱离Flash 和Silverlight,直接在浏览器中显示图形或动画。

7.浏览器中的真正程序

将提供 API 实现浏览器内的编辑,拖放,以及各种图形用户界面的能力。内容修饰Tag 将被剔除,而使用CSS。

8.Html5取代Flash在移动设备的地位。

重要标记

<video>标记

定义和用法:

<video> 标签定义视频,比如电影片段或其他视频流。

各系统与浏览器支持的视频格式
操作系统 浏览器 支持度(ogg = 带有Thedora 视频编码和Vorbis 音频编码的Ogg 文件。
mp4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件。)
备注
Windows(2000、XP、wp7、win7、win8等) Internet Explorer 6 不支持 如果安装了Google Chrome Frame,支持HTML5
Internet Explorer
7
不支持 如果安装了Google Chrome Frame,支持HTML5
Internet Explorer
8
不支持 如果安装了Google Chrome Frame,支持HTML5
Internet Explorer
9
支持(mp4,webm*) *如果安装了VP8解码器
支持HTML5
Firefox < 3.5 不支持
Firefox 3.5, 3.6 支持(ogg)
Firefox 4 支持(webm,ogg)
Firefox 5 支持(webm,ogg)
Firefox 6 支持(webm,ogg)
Chrome < 3 不支持
Chrome 3, 4, 5 支持(mp4,ogg)
Chrome 6 支持(mp4,webm,ogg)
Chrome>6 支持(mp4,webm,ogg)
Opera < 10.5 不支持
Opera 10.5 支持(ogg)
Opera 10.6 支持(webm,ogg)
Opera 11 支持(webm,ogg)
Safari 3.1, 4, 5 支持(mp4)
Mac Safari < 3.1 不支持
Safari 3.1, 4, 5 支持(mp4)
Firefox < 3.5 不支持
Firefox 3.5, 3.6 支持(ogg)
Firefox 4 支持(webm,ogg)
Firefox 5 支持(webm,ogg)
Chrome < 3 不支持
Chrome 3, 4, 5 支持(mp4,ogg)
Chrome 6 支持(mp4,webm,ogg)
Opera < 10.5 不支持
Opera 10.5 支持(ogg)
Opera 10.6 支持(webm,ogg)
Opera 11 支持(webm,ogg)
Linux Firefox < 3.5 不支持
Firefox 3.5, 3.6 支持(ogg)
Firefox 4 支持(webm,ogg)
Firefox 5 支持(webm,ogg)
Chrome < 3 不支持
Chrome 3, 4, 5 支持(mp4,ogg)
Chrom 支持(mp4,webm,ogg)
Opera < 10.5 不支持
Opera 10.5 支持(ogg)
Opera 10.6 支持(webm,ogg)
Opera 11 支持(webm,ogg)
Konqueror < 4.4 不支持
Konqueror 4.4+ 支持(ogg)
iOS (iPhone,iOS 3,4)
Safari
支持(mp4) 早期版本(iOS 1,2)不支持HTML5视频
(iPad, iOS 3.2)
Safari
支持(mp4)
Android Android 2.1, 2.2 支持(mp4)
Android 2.3 支持(mp4)

<audio> 标记

定义和用法

<audio> 标签定义声音,比如音乐或其他音频流。

实例:

一段简单的HTML 5 音频

<audio src=”someaudio.wav”>

您的浏览器不支持 audio 标签。

</audio>

音频格式:

audio 元素支持的音频格式
IE 8 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis
MP4
Wav

<canvas> 标记

定义和用法:

<canvas> 标签定义图形,比如图表和其他图像。

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

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

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

实例:

通过 canvas 元素来显示一个红色的矩形:

<canvas id=”myCanvas”></canvas>

<script type=”text/javascript”>

var canvas=document.getElementById(‘myCanvas’);

var ctx=canvas.getContext(‘2d’);

ctx.fillStyle=’#FF0000′;

ctx.fillRect(0,0,80,100);

</script>

程序接口

除了原先的DOM接口,HTML5增加了更多API,如:

1. 用于即时2D绘图的Canvas标签

2. 定时媒体回放

3. 离线数据库存储

4. 文档编辑

5. 拖拽控制

6. 浏览历史管理

元素变化

新的解析顺序新的元素:section, video, progress, nav, meter, time, aside, canvasinput

元素的新属性:日期和时间,email, url。

新的通用属性:ping, charset, async

全域属性:id, tabindex, repeat。

移除元素:center, font, strike。

异常处理

HTML 5(text/html)浏览器将在错误语法的处理上更加灵活。HTML 5在设计时保证旧的浏览器能够安全的忽略掉新的HTML 5代码。与HTML 4.01相比,HTML 5给出了解析的详细规则,力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。

标签列表

按字母顺序排列的标签列表
标签 描述 4: 指在HTML 4.01 中定义了该元素
5: 指在HTML 5 中定义了该元素
<!–…–> 定义注释 4 5
<!DOCTYPE> 定义文档类型 4 5
<a> 定义超链接 4 5
<abbr> 定义缩写 4 5
<acronym> HTML 5 中不支持 4
<address> 定义地址元素 4 5
<applet> 定义 applet(HTML 5 中不支持) 4
<area> 定义图像映射中的区域 4 5
<article> 定义 article 5
<aside> 定义页面内容之外的内容 5
<audio> 定义声音内容 5
<b> 定义粗体文本 4 5
<base> 定义页面中所有链接的基准URL 4 5
<basefont> HTML 5 中不支持,请使用CSS 代替 4
<bdo> 定义文本显示的方向 4 5
<big> 定义大号文本(HTML 5 中不支持) 4
<blockquote> 定义长的引用 4 5
<body> 定义 body 元素 4 5
<br> 插入换行符 4 5
<button> 定义按钮 4 5
<canvas> 定义图形 5
<caption> 定义表格标题 4 5
<center> 定义居中的文本(HTML 5 中不支持) 4
<cite> 定义引用 4 5
<code> 定义计算机代码文本 4 5
<col> 定义表格列的属性 4 5
<colgroup> 定义表格列的分组 4 5
<command> 定义命令按钮 5
<datalist> 定义下拉列表 5
<dd> 定义定义的描述 4 5
<del> 定义删除文本 4 5
<details> 定义元素的细节 5
<dfn> 定义定义项目 4 5
<dir> 定义目录列表(HTML 5 中不支持) 4
<div> 定义文档中的一个部分 4 5
<dl> 定义定义列表 4 5
<dt> 定义定义的项目 4 5
<em> 定义强调文本 4 5
<embed> 定义外部交互内容或插件 5
<fieldset> 定义 fieldset 4 5
<figcaption> 定义 figure 元素的标题 5
<figure> 定义媒介内容的分组,以及它们的标题 5
<font> HTML 5 中不支持 4
<footer> 定义 section 或 page 的页脚 5
<form> 定义表单 4 5
<frame> 定义子窗口(框架)(HTML 5 中不支持) 4
<frameset> 定义框架的集(HTML 5 中不支持) 4
<h1> to <h6> 定义标题1 到标题6 4 5
<head> 定义关于文档的信息 4 5
<header> 定义 section 或 page 的页眉 5
<hgroup> 定义有关文档中的 section 的信息 5
<hgroup> 定义有关文档中的 section 的信息 4 5
<html> 定义 html 文档 4 5
<i> 定义斜体文本 4 5
<iframe> 定义行内的子窗口(框架) 4 5
<img> 定义图像 4 5
<input> 定义输入域 4 5
<ins> 定义插入文本 4 5
<keygen> 定义生成密钥 5
<isindex> 定义单行的输入域(HTML 5 中不支持) 4
<kbd> 定义键盘文本 4 5
<label> 定义表单控件的标注 4 5
<legend> 定义 fieldset 中的标题 4 5
<li> 定义列表的项目 4 5
<link> 定义资源引用 4 5
<map> 定义图像映射 4 5
<mark> 定义有记号的文本 4 5
<menu> 定义菜单列表 4 5
<meta> 定义元信息 4 5
<meter> 定义预定义范围内的度量 5
<nav> 定义导航链接 5
<noframes> 定义 noframe 部分(HTML 5 中不支持) 4
<noscript> 定义 noscript 部分 4 5
<object> 定义嵌入对象 4 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
<s> 定义加删除线的文本(HTML 5 中不支持) 4
<samp> 定义样本计算机代码 4 5
<script> 定义脚本 4 5
<section> 定义 section 4 5
<select> 定义可选列表 4 5
<small> 定义小号文本 4 5
<source> 定义媒介源 4 5
<span> 定义文档中的 section 4 5
<strike> 定义加删除线的文本(HTML 5 中不支持) 4
<strong> 定义强调文本 4 5
<style> 定义样式定义 4 5
<sub> 定义下标文本 4 5
<summary> 定义 details 元素的标题 5
<sup> 定义上标文本 4 5
按字母顺序排列的标签列表
标签 描述 4: 指在HTML 4.01 中定义了该元素
5: 指在HTML 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
<tt> 定义打字机文本(HTML 5 中不支持) 4
<u> 定义下划线文本(HTML 5 中不支持) 4
<ul> 定义无序列表 4 5
<var> 定义变量 4 5
<video> 定义视频 5
<xmp> 定义预格式文本(HTML 5 中不支持) 4

事件属性

事件属性
属性 描述 4 5
HTML 5 元素可拥有事件属性,这些属性在浏览器中触发行为,比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性,可以把它们插入 HTML 标签来定义事件行为。
HTML 5 中的新事件属性:onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。
onabort script 发生 abort 事件时运行脚本。 5
onbeforeonload script 在元素加载前运行脚本。 5
onblur script 当元素失去焦点时运行脚本。 4 5
onchange script 当元素改变时运行脚本。 4 5
onclick script 在鼠标点击时允许脚本。 4 5
oncontextmenu script 当菜单被触发时运行脚本。 5
ondblclick script 当鼠标双击时运行脚本。 4 5
ondrag script 只要脚本在被拖动就允许脚本。 5
ondragend script 在拖动操作结束时运行脚本。 5
ondragenter script 当元素被拖动到一个合法的放置目标时,执行脚本。 5
ondragleave script 当元素离开合法的放置目标时。 5
ondragover script 只要元素正在合法的放置目标上拖动时,就执行脚本。 5
ondragstart script 在拖动操作开始时执行脚本。 5
ondrop script 当元素正在被拖动时执行脚本。 5
onerror script 当元素加载的过程中出现错误时执行脚本。 5
onfocus script 当元素获得焦点时执行脚本。 4 5
onkeydown script 当按钮按下时执行脚本。 4 5
onkeypress script 当按键被按下时执行脚本。 4 5
onkeyup script 当按钮松开时执行脚本。 4 5
onload script 当文档加载时执行脚本。 4 5
onmessage script 当 message 事件触发时执行脚本。 5
onmousedown script 当鼠标按钮按下时执行脚本。 4 5
onmousemove script 当鼠标指针移动时执行脚本。 4 5
onmouseover script 当鼠标指针移动到一个元素上时执行脚本。 4 5
onmouseout script 当鼠标指针移出元素时执行脚本。 4 5
onmouseup script 当鼠标按钮松开时执行脚本。 4 5
onmousewheel script 当鼠标滚轮滚动时执行脚本。 5
onreset script 当表单重置时执行脚本。不支持。 4
onresize script 当元素调整大小时运行脚本。 5
onscroll script 当元素滚动条被滚动时执行脚本。 5
onselect script 当元素被选中时执行脚本。 4 5
onsubmit script 当表单提交时运行脚本。 4 5
onunload script 当文档卸载时运行脚本。 5
HTML 5不再支持的 HTML 4.01 属性:onreset。

标签属性

标签属性
属性 描述 4 5
HTML 5标签拥有属性。在每个标签的参考页中可以找到相应的特殊属性。这里列出的属性是通用于每个标签的核心属性和语言属性(有个别例外)。
acceskey a character 设置访问一个元素的键盘快捷键。不支持。 4
class class_rule orstyle_rule 元素的类名。 4 5
contenteditable true
false
设置是否允许用户编辑元素。 5
contentextmenu id of a menu element 给元素设置一个上下文菜单。 5
dir ltr
rtl
设置文本方向。 4 5
draggable true
false
auto
设置是否允许用户拖动元素。 5
id id_name 元素的唯一 id。 4 5
irrelevant true
false
设置元素是否相关。不显示非相关的元素。 5
lang language_code 设置语言码。 4 5
ref url or elementID 引用另一个文档或本文档上另一个位置。仅在 template 属性设置时使用。 5
registrationmark registration mark 为元素设置拍照。可规定于任何 <rule> 元素的后代元素,除了 <nest> 元素。 5
style style_definition 行内的样式定义。 4 5
tabindex number 设置元素的 tab 顺序。 4 5
template url or elementID 引用应该应用到该元素的另一个文档或本文档上另一个位置。 5
title tooltip_text 显示在工具提示中的文本。 4 5
HTML 5 标签中的新属性有:contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template
HTML 5 中不再支持的属性:accesskey

Leave a Comment

Your email address will not be published.

*