积极拥抱HTML5

1、HTML5新特性的使用。

    (1)使用HTML5中简化的定义方式:

               定义文档类型声明:

       <!DOCTYPE html>

               定义页面编码:

       <meta charset="utf-8">

               样式和脚本文件的引用:

       <!-- 可以省略type属性的设置 -->
       <link rel="stylesheet" href="style.css" />
       <script src="javascript.js"></script>

      (2)使用HTML5中的新标签和新属性:

               新标签主要分为三个部分:语义化标签、功能性标签以及新的输入控件类型。

                       新引入的语义化标签包括:section、article、aside、hgroup、header、footer、nav、figure及figcaption。

                       新引入的功能性标签包括:svg、canvas、audio、video等。

                       新的输入控件类型包括:tel、url、search、date、email、number、range、color等。

              新属性:

                     a、 <script>标签的async属性:

                             <script>标签中有两个和脚本加载时机有关的属性,即async和defer。这两个属性只有在<script>标签中设置了src属性时才能起作用。属性defer表明                                           <script>元素中包含的JavaScript代码并不会修改DOM结构,因此代码可以延迟执行。属性async表明脚本以异步的方式加载和执行。

        <!-- HTML4.01规范中定义了defer属性 -->
        <script src="file.js" defer="defer"></script>
        <!-- HTML5规范中定义的async属性 -->
        <script src="file.js" async="async"></script>

                     b、 <base>标签的target属性:指定页面<a>标签的默认窗口,省去了在<a>标签中定义target属性的麻烦。

       <head>
           <!-- 单击页面上的超链接时会在新窗口打开 -->
           <base taget="_blank">
       </head>

                      c、 <input>和<textarea>中的placeholder、required及autofocus属性。

                      d、标签上的自定义属性data-*。

 

       <ol>
          <li id="byond_sea" data-length="2mlls">Beyond The Sea</li>
          ...
       </ol>

 

                        对应的读取和设置数据的方式如下:

        var beyondSea=docment.getElementById('byond_sea');
        //获取数据
        beyondSea.dataset['length'];
        //设置数据
        beyondSea.dataset['length']='3mlls';

 

2、不要使用HTML5中已废弃的标签和属性。

       移除标签的原因:

           (1)标签仅仅是为了设置外观,没有任何语义。涉及的标签包括:<basefont>、<big>、<font>、<strike>和<tt>。

           (2)标签破坏了可用性。包括:<frame>、<frameset>、<noframes>。

           (3)标签很少被使用,能引起混淆或者是有更好的代替标签。包括:<acronym>、<applet>、<isindex>和<dir>。

        常见的不规范属性:

            (1)<table>、<div>、<input>、<hx>系列等标签中的align属性。

            (2)<tr>、<td>、<th>等标签中的valign属性。

            (3)<table>、<body>标签中的bgcolor属性。

            (4)<iframe>标签中的scrolling属性。

            (5)<img>等标签中的width和height属性。

3、如何处理浏览器的兼容问题。

        (1)让浏览器识别HTML5规范中的新标签。

                IE的低版本(8及其以下)都没有支持HTML5新标签。但是支持通过document.createElement方法产生新标签。再为它们设置样式。

var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
i= e.length;
while (i--){    document.createElement(e[i])}
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}

                最好的方式是直接使用成熟的框架,使用较多的是html5shim框架。使用方法:在页面的head部分添加框架的引用即可。

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

         (2)HTML5中新特性的向后兼容。

                  用框架 检测浏览器是否支持某特性。检测准确率和使用率较高的是Modernizr框架。

                  Modernizr框架的原理是自动检测浏览器是否支持新特性,并在<html>标签中添加对应的类。如果浏览器支持某个特性,则会添加一个以特性名称命名的类。反之,则添加一个以“no-”为前缀加上特性名称命名的类 。使用方法如下:

                首先 在head部分引入框架:

<script src="js/modernizr.min.js"></script>

                其次在<html>标签中添加一个名为no-js的类:

<html class="no-js">

                页面加载后,<html>标签类似如下:

<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">

               在CSS中,可以通过使用这些类添加向后兼容的代码。如下是一个使用多背景图的例子:

#nice { background: url(background-one.png) top left repeat-x;}
.multiplebgs #nice { background: url(background-one.png) top left repeat-x,url(background-two.png) bottom left repeat-x;}

        (3)音频和视频的兼容

                大约80%的浏览器支持<audio>标签

                浏览器支持的音频格式列表:

浏览器

版本

支持格式

Internet Explorer

9.0+

MP3, AAC

Chrome

6.0+

Ogg Vorbis, MP3, WAV(9.0+)

Firefox

3.6+

Ogg Vorbis, WAV

Safari

5.0+

MP3, AAC, WAV

Opera

10.0+

Ogg Vorbis, WAV

               从支持的格式来看,要让所有的浏览器可以播放<audio>元素上的音频,最佳的方式是提供MP3和Ogg_Vorbis两种格式,兼容代码如下:

<audio controls>   
      <source src="elvis.mp3" type='audio/mpeg; codecs="mp3"'>  
      <source src="elvis.oga" type='audio/ogg; codecs="vorbis"'>   
      <!-- 向后兼容代码:如,显示提示信息、提供下载链接使用flash播放器等 -->   
       浏览器不支持<code>audio</code>标签
</audio>

                 浏览器支持的视频格式的列表:

浏览器

版本

支持格式

Internet Explorer

9.0+

MP4

Chrome

6.0+

MP4,WebM,Ogg

Firefox

3.6+

WebM,Ogg

Safari

5.0+

MP4

Opera

10.0+

WebM,Ogg

                 从浏览器支持的格式来看,最佳的方式是提供WebM和MP4两种格式的视频,兼容代码如下:

<video controls>        
       <source src=video.webm type=video/webm>        
       <source src=video.mp4 type=video/mp4>          
       <!--向后兼容代码:添加一个网络视频的地址-->          
       <iframe width="480" height="360" src="http://www.youtube.com/embed/xzMUyqmaqcw?rel=0" frameborder="0" allowfullscreen></iframe>  
</video>

 

posted @ 2017-10-14 11:00  新功夫涂鸦  阅读(187)  评论(0编辑  收藏  举报