什么是H5？

时间：2018-09-25 13:21:34 阅读：200 评论：0 收藏：0 [点我收藏+]

标签：新技术区域 head 区别的区别类型客户端 form 除了

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

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

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

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

设计目的

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

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

· 新的解析规则增强了灵活性
· 新属性
· 淘汰过时的或冗余的属性
· 一个HTML5文档到另一个文档间的拖放功能
· 离线编辑
· 信息传递的增强
· 详细的解析规则
· 多用途互联网邮件扩展（MIME）和协议处理程序注册
· 在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 标签。

</audio>

<canvas> 标记

定义和用法：

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

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

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

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

实例：

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

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控件有：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是免费的！

图表库

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

jChartFX亮点：

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

按字母顺序排列的标签列表
标签	描述
<!--...-->	定义注释	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的天下！

什么是H5？

标签：新技术区域 head 区别的区别类型客户端 form 除了

原文地址：https://www.cnblogs.com/Tohold/p/9698973.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行