HTML5程序接口 元素 标签属性 事件属性 标签 控件 图表库
HTML5程序接口 元素 标签属性 事件属性 标签 控件 图表库HTML5是www万维网的核心语言、标准通用标记语言下的超文本标记语言（HTML）的第五次重大修改（W3C推荐标准）。
2014年10月29日万维网联盟宣布，经过近8年的艰苦努力，HTML5标准规范终于制定完成。HTML5有望成为梦想的“开放Web平台”(Open Web Platform)的基石，如能实现可进一步推动更深入的跨平台Web应用。
接下来，W3C将致力于开发用于实时通信、电子支付、应用开发、等方面的标准规范，还会创建一系列隐私、安全防护措施。
W3C首席执行官Jeff Jaffe表示：“从今天起，企业用户可清楚地知道，他们能够在未来依赖HTML5。”HTML5是开放Web标准的基石，它是一个完整的编程环境，适用于跨平台应用程序、视频和动画、图形、风格、排版和其它数字内容发布工具、广泛的网络功能、等等。
W3C曾在2012年透露，计划2016年底前发布HTML 5.1。
标准通用标记语言下的HTML标准自1999年12月24日发布HTML 4.01后，HTML5及其标准就被束之高阁。为推动Web标准化运动的发展，一些公司联合起来成立了一个叫做Web Hypertext Application Technology Working Group （Web超文本应用技术工作组，简称WHATWG）的组织。WHATWG致力于Web表单和应用程序，而W3C（World Wide Web Consortium 万维网联盟） 则专注于XHTML 2.0。2006年双方决定合作创建一个新版HTML。
2004年WHATWG提出名为Web Applications 1.0的HTML5草案前身，2007年被W3C接纳，并成立新HTML工作团队。
2008年01月22日公布HTML5的第一份正式草案于。此时，HTML5仍处于完善之中，然而，大部分现代浏览器都开始支持HTML5。
2012年12月17日万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已正式定稿。根据W3C的发言稿称：“HTML5是开放Web网络平台的奠基石。”
2013年05月06日HTML 5.1正式草案公布。该规范定义了HTML第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序作者，努力提高新元素的互操作性。本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML标签，相关API、Canvas、等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。
2014年10月29日万维网联盟泪流满面地宣布，经过近8年的艰辛努力，HTML5标准规范终于最终制定完成，并公开发布。
在此之前的几年时间里，已有很多开发者陆续使用了HTML5的部分技术。譬如：Firefox、Google Chrome、Opera、Safari 4+、Internet Explorer 9+ 都已支持HTML5，但直到今天，我们才看到“正式版”。
HTML5将取代1999年制定的HTML 4.01、XHTML 1.0标准，以期能在互联网应用迅速发展的现代，使网络标准达到并符合当代网络需求，为桌面、移动平台带来无缝衔接的丰富内容。
W3C CEO Jeff Jaffe博士表示：“HTML5将推动Web进入新时代。不久前，Web还只是上网看一些基础文档，而如今，Web是一个极丰富的平台。我们已进入一个稳定阶段，每个人都可按照标准行事，并可用于所有浏览器。如我们不能携起手来，就不会有统一的Web。”
支持HTML5的浏览器，包括：Firefox（火狐浏览器）、IE9及其更高版本、Chrome（谷歌浏览器）、Safari、Opera、等；国内的遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器、等国产浏览器都支持HTML5。
HTML5在诞生之初，就树立了一个原则，那就是所有技术必须是开放的，不准有专利限制，在这期间Opera捐献了CSS技术，而Google则提供了视频格式WebM。可以说大部分HTML协议在众多网络技术公司中达成了共识，但在视频格式方面，世界各大互联网公司正在为具体标准进行争论，这可能影响HTML5标准的分流。纷争的两大阵营分别是Opera、火狐、Google 等，另一大阵营则由苹果公司领衔。MPEG阵营认为WebM格式是具有专利保护的，这违背了HTML5所有技术必须开放的原则。MPEG阵营则更多地是因为自身就在使用这种视频格式。
据统计：2013年全球有10亿手机浏览器支持HTML5，同时HTML Web开发者数量达到了200万。毫无疑问，HTML5将成为未来5-10年内，移动互联网领域的主宰者。据IDC的调查报告统计，截至2012年5月有79%的移动开发商已在其应有程序中整合HTML5技术。从性能角度来说，HTML5首先是缩减了HTML文档，使这件事情变得更简单。从用户可读性上看，原先一大堆东西对初学者来说，第一次看到这些东西是看不懂的，而HTML5的声明方式对用户来说显然更友好。
采用HTML5有以下一些优点：
01、提高可用性和改进用户的友好体验；
02、有几个新标签，有助于开发人员定义重要内容；
03、可给站点带来更多多媒体元素(视频和音频)；
04、可很好的替代FLASH和Silverlight；
05、当涉及网站抓取和索引时，SEO很友好；
06、可大量应用于移动应用程序和游戏；
07、可移植性好。
许多游戏开发商都被Facebook或者Zynga推着发展，而未来的Facebook应用生态系统是基于HTML5的；尽管在HTML 5平台开发游戏有些困难，但游戏开发商却都愿意那样做。通过PhoneGap及appmobi的XDK将Web应用游戏打包整合到原生应用中也是一种方式，Facebook差不多就这么干的——基于Web应用及浏览器，却将之打包整合进原生应用。HTML5更适合轻量级小游戏。且HTML5在代码保密性方面并不弱于原生应用。为移动设备端开发HTML5应用，有2种方法：01、全部使用HTML5语法纯HTML5手机应用运行缓慢并错漏百出，但优化后，效果会好转。尽管很多人不愿去做这样的优化，但依然可以尝试。
HTML5手机应用的最大优势就是可在网页上直接调试和修改。原先应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试、运行，这是首先得解决的一个问题。由此，许多手机杂志客户端都是基于HTML5标准，开发人员可轻松调试、修改。
02、仅使用JavaScript引擎
JavaScript引擎的构建方法让制作手机网页游戏成为可能。由于界面层很复杂，已预订了一个UI工具包。
HTML5(text/html)浏览器在错误语法的处理上会更灵活。HTML5在设计时，保证旧浏览器能安全忽略掉新HTML5代码。与HTML 4.01相比，HTML5给出了解析的详细规则，力图让不同浏览器即使在发生语法错误时，也能返回相同结果。程序接口
除原先的DOM接口外，HTML5还增加了一些API，譬如：
01、用于即时2D绘图的Canvas标签
02、定时媒体回放
03、离线数据库存储
04、文档编辑
05、拖拽控制
06、浏览历史管理
元素
1999年后HTML 4.01已改变了很多，今天，在HTML 4.01中的有几个元素已废弃，这些元素在HTML5中已被删除或重新定义。
为更好地处理今天的互联网应用，HTML5添加了很多新元素、新功能。譬如：图形绘制、多媒体内容、更好的页面结构、更好的处理形式、几个API拖放元素、定位、包括网页应用程序缓存、存储、网络工作者、等。
canvas
#标签描述范例备注
01<canvas>
标签可定义图形，譬如：图表及其他图像。该标签基于JavaScript的绘图API。
显示一个红色矩形：
<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>
HTML5的canvas元素使用JavaScript可在网页上绘制图像。画布是一个矩形区域，您可控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符及添加图像方法。
多媒体
#标签描述范例备注
01<audio>
定义音频内容
02<video>
定义视频（video 或者 movie）
03<source>
定义多媒体资源 <video> 和 <audio>
04<embed>
定义嵌入的内容，比如插件。
05<track>
为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
表单
#标签描述范例备注
01<datalist>
定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
02<keygen>
规定用于表单的密钥对生成器字段。
03<output>
定义不同类型的输出，比如脚本的输出。
语义、结构
#标签
描述
范例备注
01<article>
定义页面的侧边栏内容
02<aside>
定义页面内容之外的内容。
03<bdi>
允许您设置一段文本，使其脱离其父元素的文本方向设置。
04<command>
定义命令按钮，比如单选按钮、复选框或按钮
05<details>
用于描述文档或文档某个部分的细节
06<dialog>
定义对话框，比如提示框
07<summary>
标签包含 details 元素的标题
08<figure>
规定独立的流内容（图像、图表、照片、代码等等）。
09<figcaption>
定义 <figure> 元素的标题
10<footer>
定义 section 或 document 的页脚。
11<header>
定义了文档的头部区域
12<mark>
定义带有记号的文本。
13<meter>
定义度量衡。仅用于已知最大和最小值的度量。
14<nav>
定义运行中的进度（进程）。
15<progress>
定义任何类型的任务的进度。
16<ruby>
定义 ruby 注释（中文注音或字符）。
17<rt>
定义字符（中文注音或字符）的解释或发音。
18<rp>
在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
19<section>
定义文档中的节（section、区段）。
20<time>
定义日期或时间。
21<wbr>
规定在文本中的何处适合添加换行符。
已移除元素
#标签描述范例备注
01
<acronym>标记首字母缩写<acronym title="World Wide Web">WWW</acronym>HTML5不支持<acronym>标签。请用<abbr>标签代替。
02<applet>一个嵌入的 Java applet
<applet code="Bubbles.class" width="350" height="350">Java applet that draws animated bubbles.</applet>HTML5不支持<applet>标签。请用object元素标签代替。
03<basefont>规定页面上的默认字体颜色和字号<head><basefont color="red" size="5" /></head>
<body><h1>This is a header</h1></body>
04
<big><big> 标签呈现大号字体效果
05
<center>对其包围文本进行水平居中处理
HTML5不支持该标签。请用CSS代替。
06
<dir>定义目录列表<dir>
<li>HTML</li><li>XHTML</li><li>CSS</li>
</dir>
HTML 4.01中dir元素不赞成被使用。
07
<font>规定文本的字体、字体尺寸、字体颜色<font size="3" color="red">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>
HTML 4.01 中font元素不赞成被使用。
08
<frame>定义frameset中的一个特定窗口（框架）
09
<frameset>定义一个框架集
10
<noframes>可为那些不支持框架的浏览器显示文本
noframes元素位于frameset元素内部。
11
<strike>定义加删除线文本定义
12
<tt>呈现类似打字机或等宽文本效果
属性
全局属性
#标签描述范例备注
01id规定HTML元素的唯一ID。
02tabindex规定元素的tab键控制次序。
03repeat在水平和垂直方向重复。
通用属性
#标签描述范例备注
01pingping是网络诊断工具，用户在浏览页面时可知道这个链接是否真实有效，如这个链接已失效，就用相应方法标识这个URL。
02charset定义文档的字符编码。
03async规定一旦脚本可用，则会异步执行。
元素的新属性
#标签描述范例备注
01日期和时间定义日期、时间文本字段。
02email定义用于 e-mail 地址的文本字段。
03 url定义用于 URL 的文本字段。
标签属性
HTML5标签拥有属性。在每个标签的参考页中可找到相应的特殊属性。这里列出的属性是通用于每个标签的核心属性和语言属性（有个别例外）。
HTML5标签中的新属性，包括：contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template。
HTML5不再支持属性：accesskey。标签属性
#属性
值
描述
01acceskey
a character
设置访问一个元素的键盘快捷键。不支持。
4
02
classclass_ruleorstyle_rule
元素的类名。
4
5
03
contenteditable
true
false
设置是否允许用户编辑元素。
5
04
contentextmenu
id of a menu element
给元素设置一个上下文菜单。
5
05
dir
ltr
rtl
设置文本方向。
4
5
06
draggable
true
false
auto
设置是否允许用户拖动元素。
5
07
id
id_name
元素的唯一 id。
4
5
08
irrelevant
true
false
设置元素是否相关。不显示非相关的元素。
5
09
lang
language_code
设置语言码。
4
5
10
ref
urlorelementID
引用另一个文档或文档上另一个位置。仅在 template 属性设置时使用。
5
11
registrationmark
registration mark
为元素设置拍照。可规定于任何 <rule> 元素的后代元素，
除了 <nest> 元素。
5
12
style
style_definition
行内的样式定义。
4
5
13
tabindex
number
设置元素的 tab 顺序。
4
5
14
template
urlorelementID
引用应该应用到该元素的另一个文档或本文档上另一个位置。
5
15
title
tooltip_text
显示在工具提示中的文本。
4
5
注：上表中的4: 指在HTML 4.01中有定义该元素，上表中的5: 指在HTML5中有定义该元素
事件属性
HTML5元素拥有事件属性，这些属性可在浏览器中触发行为，譬如：当用户单击一HTML5元素时，会启动一段JavaScript。下面列出的事件属性，可把它们插入HTML标签来定义事件行为。HTML5新事件属性，包括：onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。
HTML5不再支持HTML 4.01属性：onreset。事件属性
#属性值描述
01onabort
script
发生 abort 事件时运行脚本。
5
02onbeforeonload
script在元素加载前运行脚本。
5
03onblur
script
当元素失去焦点时运行脚本。
4
5
04onchange
script
当元素改变时运行脚本。
4
5
05onclick
script
在鼠标点击时运行脚本。
4
5
06oncontextmenu
script
当菜单被触发时运行脚本。
5
07ondblclick
script
当鼠标双击时运行脚本。
4
5
08ondrag
script
只要脚本在被拖动就运行脚本。
5
09ondragend
script
在拖动操作结束时运行脚本。
5
10ondragenter
script
当元素被拖动到一个合法的放置目标时，执行脚本。
5
11ondragleave
script
当元素离开合法的放置目标时。
5
12ondragover
script
只要元素正在合法的放置目标上拖动时，就执行脚本。
5
13ondragstart
script
在拖动操作开始时执行脚本。
5
14ondrop
script
当元素正在被拖动时执行脚本。
5
15onerror
script
当元素加载的过程中出现错误时执行脚本。
5
16onfocus
script
当元素获得焦点时执行脚本。
4
5
17onkeydown
script
当按钮按下时执行脚本。
4
5
18onkeypress
script
当按键被按下时执行脚本。
4
5
19onkeyup
script
当按钮松开时执行脚本。
4
5
20onload
script
当文档加载时执行脚本。
4
5
21onmessage
script
当 message 事件触发时执行脚本。
5
22onmousedown
script
当鼠标按钮按下时执行脚本。
4
5
23onmousemove
script
当鼠标指针移动时执行脚本。
4
5
24onmouseover
script
当鼠标指针移动到一个元素上时执行脚本。
4
5
25onmouseout
script
当鼠标指针移出元素时执行脚本。
4
5
26onmouseup
script
当鼠标按钮松开时执行脚本。
4
5
27onmousewheel
script
当鼠标滚轮滚动时执行脚本。
5
28onreset
script
当表单重置时执行脚本。不支持。
4
29onresizescript
当元素调整大小时运行脚本。
5
30
onscroll
script
当元素滚动条被滚动时执行脚本。
5
31onselect
script
当元素被选中时执行脚本。
4
5
32onsubmit
script
当表单提交时运行脚本。
4
5
33onunload
script
当文档卸载时运行脚本。
5
注：上表中的4: 指在HTML 4.01中有定义该元素，上表中的5: 指在HTML5中有定义该元素
标签
标签列表（按字母顺序排列）
#标签描述
001<!--...-->定义注释
4
5
002<!DOCTYPE>
定义文档类型
4
5
003<a>
定义超链接
4
5
004<abbr>
定义缩写
4
5
005<acronym>
HTML 5 中不支持
4
006<address>定义地址元素
4
5
007<applet>
定义 applet（HTML 5 中不支持）
4
008<area>定义图像映射中的区域
4
5
009<article>
定义 article
5
010<aside>
定义页面内容之外的内容
5
011<audio>
定义声音内容
5
012<b>
定义粗体文本
4
5
013<base>
定义页面中所有链接的基准URL
4
5
014<basefont>
HTML 5 中不支持，请使用CSS 代替
4
015<bdo>定义文本显示的方向
4
5
016<big>
定义大号文本（HTML 5 中不支持）
4
017<blockquote>定义长的引用
4
5
018<body>
定义 body 元素
4
5
019<br>
插入换行符
4
5
020<button>
定义按钮
4
5
021<canvas>
定义图形
5
022<caption>
定义表格标题
4
5
023<center>
定义居中的文本（HTML 5 中不支持）
4
024<cite>定义引用
4
5
025<code>
定义计算机代码文本
4
5
026<col>
定义表格列的属性
4
5
027<colgroup>
定义表格列的分组
4
5
028<command>
定义命令按钮
5
029<datalist>
定义下拉列表
5
030<dd>
定义定义的描述
4
5
031<del>
定义删除文本
4
5
032<details>
定义元素的细节
5
033<dfn>
定义定义项目
4
5
034<dir>
定义目录列表（HTML 5 中不支持）
4
035<div>定义文档中的一个部分
4
5
036<dl>
定义定义列表
4
5
037<dt>
定义定义的项目
4
5
038<em>
定义强调文本
4
5
039<embed>
定义外部交互内容或插件
5
040<fieldset>
定义 fieldset
4
5
041<figcaption>
定义 figure 元素的标题
5
042<figure>
定义媒介内容的分组，以及它们的标题
5
043<font>
HTML 5 中不支持
4
044<footer>定义 section 或 page 的页脚
5
045<form>
定义表单
4
5
046<frame>
定义子窗口（框架）（HTML 5 中不支持）
4
047<frameset>定义框架的集（HTML 5 中不支持）
4
048<h1> to <h6>定义标题1 到标题6
4
5
049<head>
定义关于文档的信息
4
5
050<header>
定义 section 或 page 的页眉
5
051<hgroup>
定义有关文档中的 section 的信息
4
5
052<html>
定义 html 文档
4
5
053<i>
定义斜体文本
4
5
054<iframe>
定义行内的子窗口（框架）
4
5
055<img>
定义图像
4
5
056<input>
定义输入域
4
5
057<ins>
定义插入文本
4
5
058<keygen>
定义生成密钥
5
059<isindex>
定义单行的输入域（HTML 5 中不支持）
4
060<kbd>定义键盘文本
4
5
061<label>
定义表单控件的标注
4
5
062<legend>
定义 fieldset 中的标题
4
5
063<li>
定义列表的项目
4
5
064<link>
定义资源引用
4
5
065<map>
定义图像映射
4
5
066<mark>
定义有记号的文本
4
5
067<menu>
定义菜单列表
4
5
068<meta>
定义元信息
4
5
069<meter>
定义预定义范围内的度量
5
070<nav>
定义导航链接
5
071<noframes>
定义 noframe 部分（HTML 5 中不支持）
4
072<noscript>定义 noscript 部分
4
5
073<object>
定义嵌入对象
4
5
074<ol>
定义有序列表
4
5
075<optgroup>
定义选项组
4
5
076<option>
定义下拉列表中的选项
4
5
077<output>
定义输出的一些类型
5
078<p>
定义段落
4
5
079<param>
为对象定义参数
4
5
080<pre>
定义预格式化文本
4
5
081<progress>
定义任何类型的任务的进度
5
082<q>
定义短的引用
4
5
083<rp>
定义若浏览器不支持 ruby 元素显示的内容
5
084<rt>
定义 ruby 注释的解释
5
085<ruby>
定义 ruby 注释
5
086<s>
定义加删除线的文本（HTML 5 中不支持）
4
087<samp>定义样本计算机代码
4
5
088<script>
定义脚本
4
5
089<section>
定义 section
4
5
090<select>
定义可选列表
4
5
091<small>
定义小号文本
4
5
092<source>
定义媒介源
4
5
093
<span>
定义文档中的 section
4
5
094<strike>
定义加删除线的文本（HTML 5 中不支持）
4
095<strong>定义强调文本
4
5
096<style>
定义样式定义
4
5
097<sub>
定义下标文本
4
5
098<summary>
定义 details 元素的标题
5
099<sup>
定义上标文本
4
5
100<table>
定义表格
4
5
101<tbody>
定义表格的主体
4
5
102<td>
定义表格单元
4
5
103<textarea>
定义 textarea
4
5
104<tfoot>
定义表格的脚注
4
5
105<th>
定义表头
4
5
106<thead>
定义表头
4
5
107<time>
定义日期/时间
5
108<title>
定义文档的标题
4
5
109<tr>
定义表格行
4
5
110<tt>
定义打字机文本（HTML 5 中不支持）
4
111<u>定义下划线文本（HTML 5 中不支持）
4
112<ul>定义无序列表
4
5
113<var>
定义变量
4
5
114<video>
定义视频
5
115<xmp>
定义预格式文本（HTML 5 中不支持）
4
注：上表中的4: 指在HTML 4.01中有定义该元素，上表中的5: 指在HTML5中有定义该元素
控件Html标注属性加上runat="server"构成控件；Html标注和HTML控件间的区别很明显，Html控件运行于服务器端，Html标注运行于客户端。基本Html控件有：HtmlTexArea\HtmlTable\HtmlImage\HtmlButton\HtmlSelect\HtmlForm\HtmlInput。
自定义的Html控件是根据自己的需求定义的。当自主开发效率低时，可从技术社区、源码网站下载需要控件。譬如：需插入table、image、links 等标签。不必自己开发，可使用：ComponentOne Wijmo Editor 等。
图表库
免费HTML5图表库——.Net图表控件Chart FX，深受大家喜爱。从Chart FX开发商SoftwareFX获得一个激动人心的消息：该公司已推出一套为HTML5、jQuery、JavaScript开发者设计的图表库——jChartFX，且jChartFX是免费的！
jChartFX的主要特点：01、jChartFX充分利用HTML5、CSS、SVG，可为浏览器提供美观优越的图表和更丰富的最终用户体验。
02、jChartFX拥有很多令人振奋的功能，可在无插件纯JavaScript浏览器上运行，这意味着在提高网站安全性和速度的同时，最大程度的减少网站服务器的负荷。
03、jChartFX还可自动整合到jQuery UI Theme Roller，自动读取并解释jQuery的主题和CSS文件，能快速适应您的页面布局和设计，无需一行代码。
04、jChartFX支持JSON，JSON能帮您实现任何数据源中的数据都可展现到图表中。
05、jChartFX还支持超过40种2D、3D图表类型，免费图表控件还支持如此之多的图表展示类型实属难得。
版权声明：
本文为独家原创稿件，版权归 德云社区，未经许可不得转载；否则，将追究其法律责任。
页:
[1]