初识HTML5格式

下面是一个简短的HTML5文档

  • 1-1 一个基本的HTML5的页面格式
 
    
     
         
  1. <!DOCTYPE html> 
    2.  
         
  2. <html lang="zh"><!--指定页面语言，zh——中文，en——英文--> 
    3.  
         
  3. <head> 
    4.  
         
  4.   <meta charset="utf-8"><!--字符编码--> 
    5.  
         
  5.   <title>简短的HTNL文档</title> 
    6.  
         
  6.   <!-- 注意：以下的文件不存在，只是为了说明引用的格式  
    7.  
         
  7.   <link href="styles.css" rel="stylesheet"> 
    8.  
         
  8.   <script src="scripts.js"></script> 
    9.  
         
  9.   --> 
    10.  
         
  10. </head> 
    11.  
         
  11.  
    12.  
         
  12. <body> 
    13.  
         
  13.   <p>打开浏览器,秀一下 HTML5 style吧。</p> 
    14.  
         
  14. </body> 
    15.  
         
  15. </html> 
    16.  
        
 
    
可以看到HTML5页面的格式与传统的HTML的页面格式的区别：新的文档类型申明，页面语言信息属性，引用样式表及JavaScript标签。
 
    
HTML新增的元素
 
    
当然学习HTML5之前，还是先了解一下HTML5新增的元素：
 
    
 
 
    
      
       HTML5新增的元素 
                  
        类别        元素       
       
        用于构建页面的语义元素        <article>、<aside>、<figcaption>、<figure>、<footer>、<header>、<hgroup>、<nav>、<section>、<details>、<summary>       
       
        用于标识文本的语义元素        <mark>、<time>、<wbr>(以前也支持，现在正式列入规范)       
       
        Web表单及交互        <input>(不是新元素，但增加了很多类型)、<datalist>、<keygen>、<meter>、<progress>、<command>、<menu>、<output>       
       
        音频、视频及插件        <audio>、<video>、<source>、<embed>(以前也支持，但现在列入正式规范)       
       
        Canvas        <canvas>       
           
 
    
当然还有非英语支持的 <bdo>、<rp>、<rt>、<ruby>。
 
    
要了解完整的元素列表(以及哪些元素是新元素、哪些元素变了)，请参考：
 
    
通过Modernizr检测功能
 
    
HTML5就像是带刺的玫瑰，可以实现很多新奇的功能，遗憾的是，到目前为止，没有任何一款浏览器可以支持HTML5的全部功能，尤其是拥有绝对数量用户的的IE，更是拖了HTML5的后腿。所以，把HTML5的功能放到自己的页面上之前，有必要检测HTML5的支持情况，以便做出相应的后备策略。
 
    
检测支持通常需要检查某个可编程对象的属性，或者创建一个对象并以特定的方式使用它。在这里是使用Modernier,它是一个小巧的、持续更新的工具，专门用于测试浏览器对很多HTML5及相关功能的支持情况。
 
    
下面是使用Modernier的方法：
 
    
     
         
  1. 打开，找到Download Modernier区域，单击Development按钮，下载Modernier的JavaScript文件。如下： 
     
    2.  
        
 
    
 
    
下载文件名类似于 modernizr.custom.16654.js，实际的名字取决你使用的版本。
 
    
2.把下载的文件放在你的网页所在的文件夹中，或者放在一个子文件夹中，然后修改引用该JavaScript文件的路径(见代码部分)。
 
    
3.在页面的<head>区块中添加对这个JavaScript文件引用。如下代码
 
    
     
         
  • 1-2 引用modernizr.custom.16654.js文件的例子。 
     
          
       
             
    1. <head> 
      2.  
             
    2.   <meta charset="utf-8"> 
      3.  
             
    3.   <!-- saved from url=(0014)about:internet --> 
      4.  
             
    4.  
      5.  
             
    5.   <title>HTML5功能检测</title> 
      6.  
             
    6.   <script src="modernizr.custom.16654.js"></script> 
      7.  
             
    7. </head> 
      8.  
            
     
    •  
        
 
    
这样，当页面中加载后，Modernizr脚本就可以运行了。它能够在短短的数毫秒时间内检测很多新功能，然后创建一个名叫Modernizr的新的JavaScript对象，检测结果就保存在这个对象里。通过检测这个对象的属性，就可以知道浏览器具体支持什么功能。
 
    
4.编写脚本检测你想使用的功能，然后执行相应的操作。
 
    
例如，要检测浏览器是否支持HTML5的拖放功能，并将检测结果显示在页面上，可以使用一下代码：
 
    
     
         
  • 1-3 检测浏览器是否支持拖放功能的代码。 
     
          
       
             
    1. <!DOCTYPE html> 
      2.  
             
    2. <html lang="zh"> 
      3.  
             
    3. <head> 
      4.  
             
    4.   <meta charset="utf-8"> 
      5.  
             
    5.   <!-- saved from url=(0014)about:internet --> 
      6.  
             
    6.   <title>HTML5功能检测</title> 
      7.  
             
    7.   <script src="modernizr.custom.16654.js"></script> 
      8.  
             
    8. </head> 
      9.  
             
    9.  
      10.  
             
    10. <body> 
      11.  
             
    11.   <p>检测结果是... <span id="result"></span></p> 
      12.  
             
    12.  
      13.  
             
    13. <script> 
      14.  
             
    14. // 找到显示结果的result元素 
      15.  
             
    15. var result = document.getElementById("result"); 
      16.  
             
    16.  
      17.  
             
    17. if (Modernizr.draganddrop) { 
      18.  
             
    18.     result.innerHTML = "恭喜! 您的浏览器支持拖功能。"; 
      19.  
             
    19. } 
      20.  
             
    20. else { 
      21.  
             
    21.     result.innerHTML = "Sorry, 您当前的版本不支持拖放功能。"; 
      22.  
             
    22. } 
      23.  
             
    23. </script> 
      24.  
             
    24. </body> 
      25.  
             
    25.  
      26.  
             
    26. </html> 
      27.  
            
     
    •  
        
 
    
程序运行的结果如下：
 
    
 
    
说明：虽然这个例子展示了检测功能的正确方法，但是使用功能的方法并不那么理想。如果浏览器不支持这个功能，与其直接告诉浏览器不支持该功能，远远不如实现一个后备方案(即使结果没有使用HTML5功能那么好)，甚至不如简单地忽略这个问题(如果相应的功能只是实现装饰性的效果，有没有它还不是无所谓)。
 
    
使用“腻子脚本”填补功能缺陷
 
    
上面提到的Modernizr可以帮你找出浏览器支持上的缺陷，但是不会帮你填补这些缺陷。这就是使用“腻子脚本”的用途所在。
 
    
polyfill是源自英国的一种腻子粉，它的用途就是在刷墙漆之前用来填补墙面裂缝和漏洞的(在美国叫spacking paste)，腻子脚本就是一堆五花八门的技术，目的就是填平浏览器对HTML5支持上的缺陷。在HTML5中，理想的腻子脚本可以直接放到页面中使用，不必多做额外的工作，这些脚本能无缝地保持向后兼容，而且一点也不唐突。
 
    
但是，腻子脚本并不是完美无缺的。有些腻子脚本的技术照样得不到普遍的支持。例如，有一个“腻子脚本”可以通过Silverlight插件在老版本的IE中模拟HTML5的<canvas>，而假如访客不愿意安装Silverlight，那就还的考虑一种后备方案。另外还有一些腻子脚本的功能比HTML5规定的功能少一些，或者性能更差一些。
 
    
说明：要想了解HTML5腻子脚本的完整集合，可以参看：