什么是H5？

Posted 2021-01-13 tohold

总听到很多人说H5，现在H5很火，到底H5是什么，以下发表个人对H5的理解。

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

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

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

设计目的

　　HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。

　　HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括：

1. · 新的解析规则增强了灵活性
2. · 新属性
3. · 淘汰过时的或冗余的属性
4. · 一个HTML5文档到另一个文档间的拖放功能
5. · 离线编辑
6. · 信息传递的增强
7. · 详细的解析规则
8. · 多用途互联网邮件扩展（MIME）和协议处理程序注册
9. · 在SQL数据库中存储数据的通用标准（Web SQL）

HTML5在2007年被万维网联盟(W3C)新的工作组采用。这个工作组在2008年1月发布了HTML 5的首个公开草案。眼下，HTML5处于“呼吁审查”状态，W3C预期它将在2014年年底达到其最终状态。

特性：

语义特性（Class：Semantic）

　　HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

本地存储特性（Class: OFFLINE & STORAGE）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。

设备兼容特性 (Class: DEVICE ACCESS)

　　从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

 

连接特性（Class: CONNECTIVITY）

　　更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。

三维、图形及特效特性（Class: 3D, Graphics & Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

性能与集成特性（Class: Performance & Integration）

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助您的Web应用和网站在多样化的环境中更快速的工作。

CSS3特性(Class: CSS3)

在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

 

新元素

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如： 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等。

canvas

标签	描述
<canvas>	标签定义图形，比如图表和其他图像。该标签基于 javascript 的绘图 API

多媒体

标签	描述
<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源 <video> 和 <audio>
<embed>	定义嵌入的内容，比如插件。
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

表单

标签	描述
<datalist>	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>	规定用于表单的密钥对生成器字段。
<output>	定义不同类型的输出，比如脚本的输出。

语义和结构

HTML5提供了新的元素来创建更好的页面结构：

标签	描述
<article>	定义页面的侧边栏内容
<aside>	定义页面内容之外的内容。
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义 <figure> 元素的标题
<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<nav>	定义运行中的进度（进程）。
<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。
<time>	定义日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。

已移除元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>

技术要点

编辑

重要标记

<video>标记

定义和用法：

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

<audio> 标记

定义和用法

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

实例：

一段简单的HTML5 音频

<audio src="">

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

</audio>

<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标注的属性里加上runat="server"所构成的控件，至于Html标注和Html控件之间的区别很明显，Html控件是运行于服务器端，Html标注是运行于客户端。

基本Html控件有：HtmlTexAreaHtmlTableHtmlImageHtmlButtonHtmlSelectHtmlFormHtmlInput。

自定义的Html控件是根据自己的需求定义。当自主开发效率低，可以从技术社区、源码网站下载需要的控件。比如，需要插入table, image, links 等标签。不必自己开发，可以使用：ComponentOne Wijmo Editor等。

免费HTML5图表库——.Net图表控件Chart FX，深受大家喜爱，相信大家已经非常熟悉了。而且还从Chart FX的开发商SoftwareFX获得一个激动人心的消息：该公司已推出一套为HTML5，jQuery和JavaScript开发者设计的图表库——jChartFX，而且jChartFX是免费的！

图表库

.Net图表控件Chart FX相信大家已经非常熟悉了。Chart FX的开发商SoftwareFX推出的一套为HTML5、jQuery和JavaScript开发者设计的免费HTML5图表库——jChartFX！

jChartFX亮点：

1. jChartFX充分利用了HTML5，CSS和SVG，让您能够在浏览器提供美观优越的图表和更丰富的最终用户体验。
2. jChartFX拥有很多令人振奋的功能，它在无插件纯JavaScript的浏览器上运行，这意味着在提高了网站安全性和速度的同时，最大程度的减少了网站服务器的负荷。
3. jChartFX还能够自动整合到jQuery UI ThemeRoller，自动读取并解释jQuery的主题和CSS文件，能够快速适应您的页面布局和设计，无需一行代码。
4. jChartFX支持JSON，JSON能够帮助您实现，任何数据源中的数据都可以展现到图表中。
5. jChartFX还支持超过40种的2D、3D图表类型，免费的图表控件中支持如此之多的图表展示类型实属难得。

标签

注：在下面表格中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 的信息	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>	定义打字机文本	4	5
<u>	定义下划线文本（HTML 5 中不支持）	4
<ul>	定义无序列表	4	5
<var>	定义变量	4	5
<video>	定义视频		5
<xmp>	定义预格式文本（HTML 5 中不支持）	4

事件属性

HTML 5 元素可拥有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性，可以把它们插入 HTML 标签来定义事件行为。

HTML 5 中的新事件属性：onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。

4: 指在HTML 4.01 中定义了该元素。

5: 指在HTML 5 中定义了该元素。

HTML 5不再支持的 HTML 4.01 属性：onreset。

事件属性

属性	值	描述	4	5
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标签拥有属性。在每个标签的参考页中可以找到相应的特殊属性。这里列出的属性是通用于每个标签的核心属性和语言属性（有个别例外）。

4: 指在HTML 4.01 中定义了该元素

5: 指在HTML 5 中定义了该元素

HTML 5标签中的新属性有：contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template

HTML 5 中不再支持的属性：accesskey

标签属性

属性	值	描述	4	5
acceskey	a character	设置访问一个元素的键盘快捷键。不支持。	4
class	class_ruleorstyle_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	urlorelementID	引用另一个文档或文档上另一个位置。仅在 template 属性设置时使用。		5
registrationmark	registration mark	为元素设置拍照。可规定于任何 <rule> 元素的后代元素， 除了 <nest> 元素。		5
style	style_definition	行内的样式定义。	4	5
tabindex	number	设置元素的 tab 顺序。	4	5
template	urlorelementID	引用应该应用到该元素的另一个文档或本文档上另一个位置。		5
title	tooltip_text	显示在工具提示中的文本。	4	5

HTML5与SEO

一：使搜索引擎更加容易抓取和索引

对于一些网站，特别是那些严重依赖于FLASH的网站HTML5是一个大福音。如果你有一个都是FLASH的站点，你就一定会看到切换到HTML5的 好处。首先，搜索引擎的蜘蛛将能够抓取你的站点和索引你的内容。所有嵌入到动画中的内容将全部可以被搜索引擎读取。在搜索引擎优化的基本理论中，这一方面将会驱动你的网站获得更多的右击流量。

二：提供更多的功能，提高用户的友好体验

使用HTML5的另一个好处就是它可以增加更多的功能。对于HTML5的功能性问题，我们从全球几个主流站点对它的青睐就可以看出。社交网络大亨Facebook已经推出他们期待已久的基于HTML5的iPad应用平台，潘多拉也推出他们基于HTML5的音乐播放器的新版本。游戏平台 Zynga也在推出了三款新的在移动设备浏览器上运行的基于HTML5的游戏等等。每天都有不断的基于HTML5的网站和HTML5特性的网站被推 出。保持站点处于新技术的前沿，也可以很好的提高用户的友好体验。

三：可用性的提高，提高用户的友好体验

最后我们可以从可用性的角度上看，HTML5可以更好的促进用户于网站间的互动情况。多媒体网站可以获得更多的改进，特别是在移动平台上的应用，使用 HTML5可以提供更多高质量的视频和音频流。到目前为止，事实就是iPhone和iPad将不会支持FLASH，同时ADOBE公司也公开声明将 停止FLASH基于移动平台的开发，可以这么说——移动平台日后视频音频是HTML5的天下！