html5 强化了 Web 网页的表现性能 追加了本地数据库等 Web 应用的功能

 

html5

求助编辑百科名片

HTML 标准自1999年12月发布的 HTML 4.01 后,后继的 HTML 5 和其它标准被束之高阁,为了推动web标准化运动的发展,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group (Web 超文本应用技术工作组 - WHATWG) 的组织,HTML5草案的前身名为 Web Applications 1.0,於2004年被 WHATWG 提出,於2007年被 W3C 接纳,并成立了新的 HTML 工作团队。HTML 5 的第一份正式草案已于2008年1月22日公布。HTML 5有两大特点:首先,强化了 Web 网页的表现性能。其次,追加了本地数据库等 Web 应用的功能。

目录

什么是 HTML5?
HTML5和HTML4的区别
HTML5未来的预测
改进特性
重要标记
  1. <video>标记
  2. <audio> 标记
  3. <canvas> 标记
程序接口
元素变化
异常处理
展开

编辑本段什么是 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) 
MacSafari < 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) 
LinuxFirefox < 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) 
AndroidAndroid 2.1, 2.2支持(mp4) 
Android 2.3支持(mp4) 

<audio> 标记

  定义和用法
  <audio> 标签定义声音,比如音乐或其他音频流。
  实例:
  一段简单的HTML 5 音频
  <audio src="someaudio.wav">
  您的浏览器不支持 audio 标签。
  </audio>
  音频格式:
  
audio 元素支持的音频格式
 IE 8Firefox 3.5Opera 10.5Chrome 3.0Safari 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 中定义了该元素
<!--...-->定义注释45
<!DOCTYPE>定义文档类型45
<a>定义超链接45
<abbr>定义缩写45
<acronym>HTML 5 中不支持4 
<address>定义地址元素45
<applet>定义 applet(HTML 5 中不支持)4 
<area>定义图像映射中的区域45
<article>定义 article 5
<aside>定义页面内容之外的内容 5
<audio>定义声音内容 5
<b>定义粗体文本45
<base>定义页面中所有链接的基准URL45
<basefont>HTML 5 中不支持,请使用CSS 代替4 
<bdo>定义文本显示的方向45
<big>定义大号文本(HTML 5 中不支持)4 
<blockquote>定义长的引用45
<body>定义 body 元素45
<br>插入换行符45
<button>定义按钮45
<canvas>定义图形 5
<caption>定义表格标题45
<center>定义居中的文本(HTML 5 中不支持)4 
<cite>定义引用45
<code>定义计算机代码文本45
<col>定义表格列的属性45
<colgroup>定义表格列的分组45
<command>定义命令按钮 5
<datalist>定义下拉列表 5
<dd>定义定义的描述45
<del>定义删除文本45
<details>定义元素的细节 5
<dfn>定义定义项目45
<dir>定义目录列表(HTML 5 中不支持)4 
<div>定义文档中的一个部分45
<dl>定义定义列表45
<dt>定义定义的项目45
<em>定义强调文本45
<embed>定义外部交互内容或插件 5
<fieldset>定义 fieldset45
<figcaption>定义 figure 元素的标题 5
<figure>定义媒介内容的分组,以及它们的标题 5
<font>HTML 5 中不支持4 
<footer>定义 section 或 page 的页脚 5
<form>定义表单45
<frame>定义子窗口(框架)(HTML 5 中不支持)4 
<frameset>定义框架的集(HTML 5 中不支持)4 
<h1> to <h6>定义标题1 到标题645
<head>定义关于文档的信息45
<header>定义 section 或 page 的页眉 5
<hgroup>定义有关文档中的 section 的信息 5
<hgroup>定义有关文档中的 section 的信息45
<html>定义 html 文档45
<i>定义斜体文本45
<iframe>定义行内的子窗口(框架)45
<img>定义图像45
<input>定义输入域45
<ins>定义插入文本45
<keygen>定义生成密钥 5
<isindex>定义单行的输入域(HTML 5 中不支持)4 
<kbd>定义键盘文本45
<label>定义表单控件的标注45
<legend>定义 fieldset 中的标题45
<li>定义列表的项目45
<link>定义资源引用45
<map>定义图像映射45
<mark>定义有记号的文本45
<menu>定义菜单列表45
<meta>定义元信息45
<meter>定义预定义范围内的度量 5
<nav>定义导航链接 5
<noframes>定义 noframe 部分(HTML 5 中不支持)4 
<noscript>定义 noscript 部分45
<object>定义嵌入对象45
<ol>定义有序列表45
<optgroup>定义选项组45
<option>定义下拉列表中的选项45
<output>定义输出的一些类型 5
<p>定义段落45
<param>为对象定义参数45
<pre>定义预格式化文本45
<progress>定义任何类型的任务的进度 5
<q>定义短的引用45
<rp>定义若浏览器不支持 ruby 元素显示的内容 5
<rt>定义 ruby 注释的解释 5
<ruby>定义 ruby 注释 5
<s>定义加删除线的文本(HTML 5 中不支持)4 
<samp>定义样本计算机代码45
<script>定义脚本45
<section>定义 section45
<select>定义可选列表45
<small>定义小号文本45
<source>定义媒介源45
<span>定义文档中的 section45
<strike>定义加删除线的文本(HTML 5 中不支持)4 
<strong>定义强调文本45
<style>定义样式定义45
<sub>定义下标文本45
<summary>定义 details 元素的标题 5
<sup>定义上标文本45
按字母顺序排列的标签列表
标签描述4: 指在HTML 4.01 中定义了该元素
5: 指在HTML 5 中定义了该元素
<table>定义表格45
<tbody>定义表格的主体45
<td>定义表格单元45
<textarea>定义 textarea45
<tfoot>定义表格的脚注45
<th>定义表头45
<thead>定义表头45
<time>定义日期/时间 5
<title>定义文档的标题45
<tr>定义表格行45
<tt>定义打字机文本(HTML 5 中不支持)4 
<u>定义下划线文本(HTML 5 中不支持)4 
<ul>定义无序列表45
<var>定义变量45
<video>定义视频 5
<xmp>定义预格式文本(HTML 5 中不支持)4 

编辑本段事件属性

  
事件属性
属性描述45
HTML 5 元素可拥有事件属性,这些属性在浏览器中触发行为,比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性,可以把它们插入 HTML 标签来定义事件行为。
HTML 5 中的新事件属性:onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。
  
onabortscript 发生 abort 事件时运行脚本。 5
onbeforeonloadscript 在元素加载前运行脚本。 5
onblurscript 当元素失去焦点时运行脚本。45
onchangescript当元素改变时运行脚本。45
onclickscript在鼠标点击时允许脚本。45
oncontextmenuscript 当菜单被触发时运行脚本。 5
ondblclickscript当鼠标双击时运行脚本。45
ondragscript 只要脚本在被拖动就允许脚本。 5
ondragendscript 在拖动操作结束时运行脚本。 5
ondragenterscript 当元素被拖动到一个合法的放置目标时,执行脚本。 5
ondragleavescript 当元素离开合法的放置目标时。 5
ondragoverscript 只要元素正在合法的放置目标上拖动时,就执行脚本。 5
ondragstartscript 在拖动操作开始时执行脚本。 5
ondropscript 当元素正在被拖动时执行脚本。 5
onerrorscript 当元素加载的过程中出现错误时执行脚本。 5
onfocusscript 当元素获得焦点时执行脚本。45
onkeydownscript当按钮按下时执行脚本。45
onkeypressscript当按键被按下时执行脚本。45
onkeyupscript当按钮松开时执行脚本。45
onloadscript当文档加载时执行脚本。45
onmessagescript 当 message 事件触发时执行脚本。 5
onmousedownscript当鼠标按钮按下时执行脚本。45
onmousemovescript当鼠标指针移动时执行脚本。45
onmouseoverscript当鼠标指针移动到一个元素上时执行脚本。45
onmouseoutscript当鼠标指针移出元素时执行脚本。45
onmouseupscript当鼠标按钮松开时执行脚本。45
onmousewheelscript 当鼠标滚轮滚动时执行脚本。 5
onresetscript 当表单重置时执行脚本。不支持。4 
onresizescript 当元素调整大小时运行脚本。 5
onscrollscript 当元素滚动条被滚动时执行脚本。 5
onselectscript 当元素被选中时执行脚本。45
onsubmitscript当表单提交时运行脚本。45
onunloadscript当文档卸载时运行脚本。 5
HTML 5不再支持的 HTML 4.01 属性:onreset。  

编辑本段标签属性

  
标签属性
属性描述45
HTML 5标签拥有属性。在每个标签的参考页中可以找到相应的特殊属性。这里列出的属性是通用于每个标签的核心属性和语言属性(有个别例外)。  
acceskeya character设置访问一个元素的键盘快捷键。不支持。4 
classclass_rule orstyle_rule元素的类名。45
contenteditabletrue
false
设置是否允许用户编辑元素。 5
contentextmenuid of a menu element给元素设置一个上下文菜单。 5
dirltr
rtl
设置文本方向。45
draggabletrue
false
auto
设置是否允许用户拖动元素。 5
idid_name元素的唯一 id。45
irrelevanttrue
false
设置元素是否相关。不显示非相关的元素。 5
langlanguage_code设置语言码。45
refurl or elementID引用另一个文档或本文档上另一个位置。仅在 template 属性设置时使用。 5
registrationmarkregistration mark为元素设置拍照。可规定于任何 <rule> 元素的后代元素,除了 <nest> 元素。 5
stylestyle_definition行内的样式定义。45
tabindexnumber设置元素的 tab 顺序。45
templateurl or elementID引用应该应用到该元素的另一个文档或本文档上另一个位置。 5
titletooltip_text 显示在工具提示中的文本。45
HTML 5 标签中的新属性有:contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template
HTML 5 中不再支持的属性:accesskey
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值