HTML5有望成为真正的工业标准

- 日理万妓 2022-07-14 08:44 68阅读 0赞

随着Goole和Microsoft IE9对HTML5有望成为真正的工业标准，下面简单介绍一下HTML5的新标签和多媒体标签的应用。

[http://www.edmt.cn/Item/59.aspx][http_www.edmt.cn_Item_59.aspx]

HTML 5 令人期待的 5 项功能

**一点历史背景**

HTML 5 的讨论开始于2003年，当时，W3C 对由 Web Hypertext Application Technology Working Group (WHATWG) 开发的 HTML 5 草案表示出兴趣，WHATWG 创始于2004年，由苹果，Mozilla 基金会，以及 Opera 公司的代表组成。此后，W3C HTML Working Group 于2007年成立并着手开发 HTML 5。目前，开发工作仍在进行中，并将于2012年向 W3C 提交初步意见，不过现在已经有不少浏览器部分支持HTML 5。本文介绍 HTML 5 的5大令人激动的新功能。

** **

**1.** **一些帮助我们描述内容的新标签**

Web 内容的多样性让 HTML4 力不从心，在描述一个网页时，HTML4 如下表现：

[http://hi.csdn.net/space-19128-do-album-picid-492441-goto-down.html][http_hi.csdn.net_space-19128-do-album-picid-492441-goto-down.html]

HTML 5 将如下表现：

[http://hi.csdn.net/space-19128-do-album-picid-492440-goto-up.html][http_hi.csdn.net_space-19128-do-album-picid-492440-goto-up.html]

这样，浏览器就知道一个网页的各个部分各代表什么，比如 <nav> 部分是导航，而 <article> 部分是主要内容。除了更漂亮的代码与语义标签，这种改变还带来更多好处，比如，搜索引擎可以更准确地知道一个网页的哪部分内容更重要。关于 HTML 5 新标签，[IBM有详细的论述][IBM]。

**2.** **改进的** **Web** **表单处理**

HTML 5 推出[Web Forms 2.0][]，为开发提供许多新选项和新功能，以更简单更有效地处理表单的输入与发布。Web Form 2.0 最令人兴奋的功能是输入验证。目前，我们需要通过 JavaScript 或服务器端的逻辑，实现同样的功能。

比如有下面这样一个表单:

[http://hi.csdn.net/space-19128-do-album-picid-492441-goto-up.html][http_hi.csdn.net_space-19128-do-album-picid-492441-goto-up.html]

在HTML4 我们需要这样写代码，然后使用 JavaScript 或服务器端的脚本进行验证：

[http://hi.csdn.net/space-19128-do-album-picid-492442-goto-up.html][http_hi.csdn.net_space-19128-do-album-picid-492442-goto-up.html]

而 HTML5 中的  [required][]与 [email][]属性可以直接实现验证，如下：

[http://hi.csdn.net/space-19128-do-album-picid-492443-goto-up.html][http_hi.csdn.net_space-19128-do-album-picid-492443-goto-up.html]

**3.** **为** **Web** **开发提供** **API**

HTML 5 将提供多个[API][]，如音频和视频标签可以让开发者不借助第三方工具直接播放 Web 视频和音频：

[http://hi.csdn.net/space-19128-do-album-picid-492444-goto-up.html][http_hi.csdn.net_space-19128-do-album-picid-492444-goto-up.html]

[Opera 在者方面有不少研究][Opera]并有[视频播放 demo][demo]推出

**4. <canvas>****标签将允许直接在上面用脚本绘图**

人更容易从图片获得信息，如，下面的信息通过表格和圆饼图两种方式显示，效果明显不一样：

[http://hi.csdn.net/space-19128-do-album-picid-492445-goto-up.html][http_hi.csdn.net_space-19128-do-album-picid-492445-goto-up.html]

然而以往要实现这种效果，只能使用静态图片，无法对图片进行调整。使用[<canvas>][canvas]标签，你可以实时修改参数对图形进行修改，比如，根据用户的投票，实时生成圆饼图。

**5.** **用户可以编辑网页的部分内容并实现同网页的交互**

HTML 5 将支持用户的[交互][Link 1]，contenteditable属性允许你设定网页的哪一部分可以编辑，在基于 Wiki 的站点，这非常实用。

[http://blog.samuelchen.net/2010/02/html-5-inside-multi-media.html][http_blog.samuelchen.net_2010_02_html-5-inside-multi-media.html]

HTML 5 Inside – Multi Media 多媒体

> 本文基于 [**HTM5 标准草案 2009年8月25日版**][HTM5 _ 2009_8_25]  
> 转载请保留出处：[**http://SamuelChen.net**][http_SamuelChen.net]

在以前的猫（modem）年代，人们挣扎在以几或者几十 bit 与 byte 来计量的传输速率上。在那个时候，几乎所有的内容都是基于文字的，电子邮件、新闻组、BBS甚至网页。不像现在，我们可以在网页中放入众多的图片、视频甚至游戏，那时候人们常常使用字符阵来组成图像，表达略微丰富一点的内容（在BBS最常见）。即使是这样，都让人欣喜不已。

随着带宽的不断提高，那么何时我们可以在页面中加入图片了呢？我找到了这篇文章 - “[**Why do we have an IMG element?**][Why do we have an IMG element]”。这篇文章记述了 img 标签的来由， img 元素是在1993年的时候才被提议加入HTML的。

今天，在HTML5中，加入了两个新的元素 video 和 audio ，用于视频和音频的呈现，更加的丰富了媒体内容的表达。

那么我也问一下，为什么我们要有 video 和 audio 元素？

首先，带宽的提高，使得视频、音频的在线观看已经很方便。

其次，目前web页面中用以播放视频和音频的主要手段是嵌入第三方插件，坏处显而易见，无论是安全性或者是性能，都不如浏览器原生支持的好。

因此，我们需要在HTML5中引入新的元素来原生支持更多的媒体内容。

#### video 元素 ####

video 元素是用来在页面中呈现一段视频或者电影的元素。如果浏览器不支持该元素，那么就不应将该元素呈现给用户。

video 元素在内容模型中，同时属于Flow content, Phrase content 和 Embeded content。很好理解，因为它引入其他的资源，所以是Embeded；而Embeded 包含于Phrase，Phrase又包含于Flow。或者这么理解，由于它参与布局（有至少一个text或者embeded子节点），所以是Flow content；它有内容（有至少一个text或者embeded子节点），所以是Phrase content。

如果video包含了**control**属性，那么它是一个Interactive content。同样很好理解，因为有了控制面板，所以可以交互。

下面以一个例子来说明.

Avatar - Film Clip

代码如下：

1: <video id="avatar" width =320 height=240
    
       2:   src="http://www.youtube.com/get_video?video_id=CXF-VZVdR2Y&t=vjVQa1PpcFOgfEMPW684qS5mePzQgVa3Oo4l0YQnvSc%3D&fmt=18"  
    
       3:   controls  autobuffer autoplay loop
    
       4:   poster="http://farm3.static.flickr.com/2779/4202108032_3a261b7370.jpg"
    
       5: />
    
       6:

与大多数元素一样，video 也可以使用id来定义唯一标识，width和height来定义宽高，以及其他的全局属性（Global attributes），就不再赘述。

代码中第2、3行的几个属性是媒体元素（media element）的通用属性，也就是说，audio也有这几个属性。

与img元素一样，video也是用**src** 属性来用以标识媒体源，其值是一个URL字符串。指定该属性后，浏览器在渲染时就会用原生播放器载入该视频。要注意的是，img不属于媒体内容，因此它的src与这个src本质上是有区别的。

另外的四个标签都是布尔型，分别用来获取或设置播放器的行为，其作用如下：

*    
    
 *  **controls** 设置是否显示播放界面，使得用户可以进行播放、暂停、随机浏览或者全屏等操作。标准中提到的这些功能用的是“应该（should）”，那么这些功能就不是必须的，具体的功能和外观依赖于浏览器的实现。
 *    
      
    
 *  **autoplay** 设置是否自动播放。当含有此属性时，播放器会在载入呈现之后立即尝试播放指定的媒体资源。
 *    
      
    
 *  **autobuffer** 设置是否自动缓存。当含有此属性时，意味着页面制作者提示浏览器（或客户程序）该媒体内容极有可能被用户播放，播放器需要在载入呈现之后开始下载媒体资源并缓存，但并不立即播放。如果video元素同时含有该属性与autoplay属性，该属性必须被忽略，但这不认为是一个错误。
 *    
      
    
 *  **loop** 设置是否循环播放。如果该属性被指定，则意味着提示播放器需要在该媒体播放至结尾后重新从头开始播放。
 *

第4行的 **poster** 属性是video的特有属性，用来标识该媒体资源的海报（静态画面，一般来说是显示视频中第一个非空白帧）。如果指定了该属性，那么当媒体内容无效时，会显示指定的图片。该属性值是一个指向图片的URL。经过测试，在没有被缓存或者播放的情况下（内容没有载入时），都会显示该图片。

另外，video 元素还有两个特有的属性 **videowidth** 和 **videoheight** 。这两个属性是只读的，分别用来获取视频固有解析度的宽和高，如果未知则返回0。

#### audio 元素 ####

audio 元素用来在页面中呈现一段音频或音乐。由于同样属于媒体元素，audio具有和video类似的内容模型和属性。与 video 不同的是，audio 是没有 width, height, poster 以及 videowidth 和 videoheight 的。很容易理解，audio 是没有视觉内容的，所以这些和显示有关的属性都没有。

看一个例子：

富士山下 - 陈奕迅

1: <audio id="mp3" 
    
       2:   src="http://event1.wanmei.com/cb/response/upload/audio/witouch/1190691011788.mp3"  
    
       3:   controls  autobuffer loop autoplay
    
       4: />
    
       5:

#### source 元素 ####

source 元素是个比较特殊的元素，它是用来指定媒体元素的源信息的，换句话来说就是用以替代 audio 或者 video （或者如果有其他 media element ）中的 src 属性的，它比 src 属性提供了更为丰富的源信息。

source 元素可以为媒体元素指定多个资源，但它本身并不会有任何表现形式。该元素一般作为一个媒体元素的子元素，但也可以独立存在，在标准中并没有提到这一点。当它独立存在时，可以利用DOM和脚本来使用它。

source 元素不属于任何内容模型，它具有 **src**, **type** 和 **media** 这些特有属性。

*    
    
 *  src 属性和 video, audio 的一样，是资源的有效URL，要注意的是，在 source 元素中，src是必须要有的。
 *    
      
    
 *  type 属性是用来指定资源类型的，其值应为有效的MIME类型字符串，例如 ”video/mp4” 等，从而帮助播放器判断要播放的媒体内容的类型。该属性有一个参数 **codecs** ，用来指定特定媒体编码解码器，例如 “mp4.v.20.8, mp4a.20.2” 。
 *    
      
    
 *  media 属性不是 source 元素特有的属性，也可以用于 link 等元素，它被用来指定一条 MQ （media query）。MQ是用来限定媒体使用的设备以及显示相关等范围的表达式，具体内容请参看 [**Mozilla Dev Center**][Mozilla Dev Center] 。
 *

参考示例（该示例来源于Mozilla 网站）

1: <video controls>  
    
       2:   <source src="foo.ogg" type="video/ogg">   
    
       3:   <source src="foo.mov" type="video/quicktime">   
    
       4:   I'm sorry; your browser doesn't support HTML 5 video.  
    
       5: </video>

#### Media 元素（DOM） ####

Media Elements 实际上是 DOM 中这些媒体元素的基类型，audio 和 video 都可以看做是其子类型（但具体的情况要看浏览器的实现）。 src, autobuffer, autoplay, loop 以及 controls 这些个属性都是其共有的。

Media Elements 定义了一个接口，包括各种状态、常量、属性和方法，同时还定义了各种类型的事件，使得大家可以在脚本中很容易的操作。标准定义很长，请参看 [**W3C HTML5 - Media Element**][W3C HTML5 - Media Element] ，如果以后有相关的深入研究再写，现在用一个视频播放器的小例子来介绍其主要用法。

![download.png][] HTML5 Media Elements sample - Simple Video Player

#### 安全和隐私 ####

由于 video 和 audio 的资源可以来自其他网站，因此主要的安全与隐私上的考虑和影响是跨站攻击。这是浏览器实现要考虑的问题，就不再赘述。

html5

[http://en.wikipedia.org/wiki/HTML5][http_en.wikipedia.org_wiki_HTML5]

[http://dev.w3.org/html5/spec/Overview.html][http_dev.w3.org_html5_spec_Overview.html]

[http://www.w3.org/TR/html5/][http_www.w3.org_TR_html5]

[http_www.edmt.cn_Item_59.aspx]: http://www.edmt.cn/Item/59.aspx
[http_hi.csdn.net_space-19128-do-album-picid-492441-goto-down.html]: http://hi.csdn.net/space-19128-do-album-picid-492441-goto-down.html
[http_hi.csdn.net_space-19128-do-album-picid-492440-goto-up.html]: http://hi.csdn.net/space-19128-do-album-picid-492440-goto-up.html
[IBM]: http://www.ibm.com/developerworks/library/x-html5/
[Web Forms 2.0]: http://www.whatwg.org/specs/web-forms/current-work/
[http_hi.csdn.net_space-19128-do-album-picid-492441-goto-up.html]: http://hi.csdn.net/space-19128-do-album-picid-492441-goto-up.html
[http_hi.csdn.net_space-19128-do-album-picid-492442-goto-up.html]: http://hi.csdn.net/space-19128-do-album-picid-492442-goto-up.html
[required]: http://www.whatwg.org/specs/web-forms/current-work/#required0
[email]: http://www.whatwg.org/specs/web-forms/current-work/#email
[http_hi.csdn.net_space-19128-do-album-picid-492443-goto-up.html]: http://hi.csdn.net/space-19128-do-album-picid-492443-goto-up.html
[API]: http://en.wikipedia.org/wiki/API
[http_hi.csdn.net_space-19128-do-album-picid-492444-goto-up.html]: http://hi.csdn.net/space-19128-do-album-picid-492444-goto-up.html
[Opera]: http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/
[demo]: http://people.opera.com/howcome/2007/video/simple.html
[http_hi.csdn.net_space-19128-do-album-picid-492445-goto-up.html]: http://hi.csdn.net/space-19128-do-album-picid-492445-goto-up.html
[canvas]: http://www.whatwg.org/specs/web-apps/current-work/#canvas
[Link 1]: http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html
[http_blog.samuelchen.net_2010_02_html-5-inside-multi-media.html]: http://blog.samuelchen.net/2010/02/html-5-inside-multi-media.html
[HTM5 _ 2009_8_25]: http://www.w3.org/TR/2009/WD-html5-20090825/
[http_SamuelChen.net]: http://samuelchen.net/
[Why do we have an IMG element]: http://diveintomark.org/archives/2009/11/02/why-do-we-have-an-img-element
[Mozilla Dev Center]: https://developer.mozilla.org/En/CSS/Media_queries
[W3C HTML5 - Media Element]: http://www.w3.org/TR/html5/video.html#media-elements
[download.png]: /images/20220714/5be1f44b4636446888501b957c0b8c3c.png
[http_en.wikipedia.org_wiki_HTML5]: http://en.wikipedia.org/wiki/HTML5
[http_dev.w3.org_html5_spec_Overview.html]: http://dev.w3.org/html5/spec/Overview.html
[http_www.w3.org_TR_html5]: http://www.w3.org/TR/html5/