从零开始构建HTML 5 Web页面

【译文】HTML 5是时下Web开发领域炒得火热的一个术语，是的，很多人都看好它，也有很多业内知名公司开始正式使用HTML 5重新构建自己的网站，如YouTube开始使用HTML 5视频，Google已经弃用自家的Gears，开始全面拥抱HTML 5实现离线解决方案，各大浏览器厂家也纷纷开始支持HTML 5，连被人诟病的微软也声称要在IE 9中增加对HTML 5的支持。本文打算为大家详细介绍一下如何构建一个完整的HTML 5 Web页面，以加深对HTML 5的理解。

创新互联-专业网站定制、快速模板网站建设、高性价比沧州网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式沧州网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖沧州地区。费用合理售后完善，10多年实体公司更值得信赖。

HTML 5有何不同？

首先我们要明白HTML 5是新的语义结构标记，包括画布，离线存储规范和一些新的内联语义标记，但由于客观原因（主要是浏览器支持的原因），我们不得不限制标记的讨论范围，如画布，离线存储，原生视频或地理定位API等，还不是所有的浏览器都支持。

由于新的HTML 5标记大都是结构性的，它们的行为与块元素有些类似，为了帮助大家加深对HTML 5的理解，我将在下面的内容使用一些新的结构元素。

每个人都应该记住的doctype（文档类型）

要创建HTML 5 Web页面的***件事情是使用新的doctype，你一定记住了HTML 4或XHTML 1.x的doctype，当我们要从旧的文档通过复制粘贴到新的文档中，必须要修改doctype，请记住，下面就是HTML 5的doctype：

 
 
 
      
  
  
  1.  
    2.

还是很容易记住吧，而且也不区分大小写，与现在广泛使用的版本要简单得多了，而且保持了向后兼容。

语义结构

在深入标记前，我们先初略看一下一个Web页面的大致结构吧。

 
 
 
      
  
  
  1.  
    2.   
  
  
  2.      
    3.   
  
  
  3.     ...stuff...  
    4.   
  
  
  4.      
    5.   
  
  
  5.      
    6.   
  
  
  6.          
    7.   
  
  
  7.             
    My Site
     
    8.   
  
  
  8.         
 
  •          
  •             
       
    •                 
    • Home
      •  
    •                 
    • About
      •  
    •                 
    • Contact
      •  
    •             
     
  •         
    •  
  •          
  •             

    My Article

     
  •             

    ...

     
  •         
    •  
  •          
  •             

    ...

     
  •          
  •      
  •  

    • 在上面的例子中，我为所有DIV标记增加了ID，相信大多数Web设计师都很熟悉这种做法了，这么做有两个目的，首先，ID提供了一个钩子，通过它可以对页面的特定部分应用样式，其次，ID作为一种原始的，伪语义结构，智能解析器将查找标签上的ID属性，并尝试猜测其含义，但这是一件很困难的事情，因为每个网站的ID可能都不一样。

    于是就有了增加新标签的想法，HTML 5的创造者们就设计了一些新的元素，下面我们就来看看HTML 5中新增的一些关键的结构性标记。

    ◆

    这个标记计划用来描述一节或一个完整Web页面的介绍性信息，

    标记可以包括所有的通常放在页面头部的标志，如果你在页面中使用了

    猜你还喜欢下面的内容

    微信公众号知识

    同城分类信息

    成都做网站　　 　画册设计制作　　 　全网营销　　 　关键词优化　　 　成都网站设计　　 　移动服务器托管　　 　响应式网站建设方案　　 　发光字制作　　 　微信小程序开发　　 　青羊区雕琢时光　　 　网站改版　　 　域名注册　　 　成都做网站　　 　鼎尚理发店　　 　网络营销推广　　 　成都网站推广　　 　IDC机房托管　　 　免备案虚拟主机空间　　 　航空文化传媒　　 　app软件定制开发