HTML5的含义

不念不忘少年蓝@ 2022-07-14 05:15 163阅读 0赞

### 什么是 HTML5 ###

HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。

### HTML的特性 ###

*  A. 语义特性（Class：Semantic）
    
    　　HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
 *  B. 本地存储特性（Class: OFFLINE & STORAGE）
    
    　　基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一） 和API说明文档。
 *  C. 设备兼容特性 (Class: DEVICE ACCESS)
    
    　　从Geolocation 功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联
 *  D. 连接特性（Class: CONNECTIVITY）
    
    　　更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据’推送’到客户端的功能。
 *  E. 网页多媒体特性(Class: MULTIMEDIA)
    
    　　支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。
 *  F. 三维、图形及特效特性（Class: 3D, Graphics & Effects）
    
    　　基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
 *  G. 性能与集成特性（Class: Performance & Integration）
    
    　　没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。
 *  H. CSS3特性(Class: CSS3)
    
    　　在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

### Html 5与Html 4的区别 ###

*  A.简化的语法
    
    　　更简单的doctype声明是HTML5里众多新特征之一。现在你只需要写，这就行了。HTML5的语法兼容HTML4和XHTML1，但不兼容SGML。
 *  B. 一个替代Flash的新”canvas”标记
    
    　　对于Web用户来说，Flash既是一个惊喜，也是一种痛苦。有很多的Web开发人员对HTML5对Flash产生的威胁很不满。但对于那些忍受着要花几年时间加载和运行的臃肿的Flash视频的人来说，用新的 “canvas” 标记生成视频的技术已经到来。
    
    　　目前， “canvas” 标记并不能提供所有的Flash具有的功能，但假以时日，Flash必将从web上淘汰。我们拭目以待，因为很多人还并不认同这种观点。
 *  C. 新的 “header” 和 “footer” 标记
    
    　　HTML5的设计是要更好的描绘网站的解剖结构。这就是为什么这些”header” 和”footer” 等新标记的出现，它们是专门为标志网站的这些部分设计的。在开发网站时，你不在需要用”div”标记来标注网页的这些部分。
 *  D. 新的 “section” 和 “article” 标记
    
    　　跟”header” 和 “footer”标记类似，HTML5中引入的新的”section” 和 “article” 标记可以让开发人员更好的标注页面上的这些区域。
    
    　　据推测，除了让代码更有组织外，它也能改善SEO效果，能让搜索引擎更容易的分析你的页面。
 *  E.新的 “menu” 和 “figure” 标记
    
    　　新的”menu”标记可以被用作普通的菜单，也可以用在工具条和右键菜单上，虽然这些东西在页面上并不常用。类似的，新的 “figure” 标记是一种更专业的管理页面上文字和图像的方式。当然，你可以用样式表来控制文字和图像，但使用HTML5内置的这个标记更适合。
 *  F. 新的 “audio” 和 “video” 标记
    
    　　新的”audio” 和 “video” 标记可能是HTML5中增加的最有用处的两个东西了。正如标记名称，它们是用来嵌入音频和视频文件的。
    
    　　除此之外还有一些新的多媒体的标记和属性，例如”track”，它是用来提供跟踪视频的文字信息的。有了这些标记，HTML5使Web2.0特征变得越来越友好。问题在于，在HTML5还未被广泛的接受之前，Web2.0还是老的Web2.0。
 *  G. 全新的表单设计
    
    　　新的 “form” 和 “forminput” 标记对原有的表单元素进行的全新的修改，它们有很多的新属性(以及一些修改)。如果你经常的开发表单，你应该花时间更详细的研究一下。
 *  H. 不再使用 “b” 和 “font” 标记
    
    　　对我个人来说，这是一个让我不太理解的改动。我并不认为去除 “b” 和 “font”标记会带来多大的好处。我知道，官方的指导说这些标记可以通过CSS来做更好的处理，但这样一来，为了在文章一两个地方出现的这种标记，你就需要在独立的css和文本两个地方来实现这一的功能，岂不笨拙。也许我们以后会习惯这种方法。
 *  i. 不再使用 “frame”, “center”, “big” 标记
    
    　　事实上，我已经记不清曾经何时用过这些标记了，所以，我并不为去除这些标记感到悲哀。相同的原因，有更好的标记能实现它们的功能——这很好，任何作废的标记从标准中剔除都是受欢迎的。

### 改进与沿革 ###

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在移动设备的地位。

### 重要标记 ###

*  1.`<video>`标记
    
    　　定义和用法：
    
    　　`<video>` 标签定义视频，比如电影片段或其他视频流。
 *  2.`<audio>` 标记
    
    　　定义和用法
    
    　　`<audio>` 标签定义声音，比如音乐或其他音频流。
    
    　　实例：
    
    　　一段简单的HTML 5 音频

<audio src="someaudio.wav">
        您的浏览器不支持 audio 标签。
    </audio>

*  3.`<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。`