. 从零开始构建HTML 5 Web页面 - 长沙天助网
欢迎进入【长沙天助网】一站式网站建设服务平台!
公司官网 服务标准 网站建设
建站上【长沙天助网】建站服务平台企业花一样的钱,做不一样的网站!

全国销售热线:
130-8055-9997

全国客服热线:
0731-83299082

从零开始构建HTML 5 Web页面

2017-09-25 11:48:01   来自:tuiweb.cn

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. <!DOCTYPE html> 

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

语义结构

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

  1. << span="">html> 
  2.     << span="">head> 
  3.     ...stuff...  
  4.     head> 
  5.     << span="">body> 
  6.         << span="">div id="header"> 
  7.             << span="">h1>My Siteh1> 
  8.         div> 
  9.         << span="">div id="nav"> 
  10.             << span="">ul> 
  11.                 << span="">li>Homeli> 
  12.                 << span="">li>Aboutli> 
  13.                 << span="">li>Contactli> 
  14.             ul> 
  15.         div> 
  16.         << span="">div id=content> 
  17.             << span="">h1>My Articleh1> 
  18.             << span="">p>...p> 
  19.         div> 
  20.         << span="">div id="footer"> 
  21.             << span="">p>...p> 
  22.         div> 
  23.     body> 
  24. html> 

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

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

◆ 

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

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

◆ 

这个元素的含义就不说了,你的导航元素就放在这里,如主站点导航,但在某些情况下也可能有页面导航元素,HTML 5的创建人WHATWG最近修改了

简单说来,如果你在页面中使用了

◆ 

这个可能是最模糊不清的标记了,按照HTML 5规范的解释,一个section是一个有主题的内容组,前面通常有一个header标记,后面通常跟一个footer标记,如果需要,section也可以嵌套使用。

在我们上面的例子中,标记为“content”的DIV是section的一个很好候选者,在这个section中,根据内容的不同,我们可能有更多的section。

◆ 

根据WHATWG的注释,article元素是将section进行打包形成一个文档或网站独立的部分,例如一篇杂志或报纸文章,或一篇博客文章。

记住,在一个页面中可以有多个article元素,例如一个博客首页可能会有10多个article元素,article也可以进入section元素,因此你在嵌套使用时需要小心,可能一不小心就会出错。

◆ 

另一个模糊不清的标记是aside,这个元素表现的是与文档主要文本流无关的内容,也就是相当于一个括号备注,脚注,引用,注释,或者说是类似于侧边栏的东西,根据WHATWG的注释,

◆ 

Footer的含义也非常清楚,它可以用在section中,也可以用于一个页面的底部。

全部放在一起

现在我们全部使用新标记重写前面的示例页面。

  1. <!DOCTYPE html> 
  2. << span="">html> 
  3.     << span="">head> 
  4.     ...stuff...  
  5.     head> 
  6.     << span="">body> 
  7.         << span="">header> 
  8.             << span="">h1>My Siteh1> 
  9.         header> 
  10.         << span="">nav> 
  11.             << span="">ul> 
  12.                 << span="">li>Homeli> 
  13.                 << span="">li>Aboutli> 
  14.                 << span="">li>Contactli> 
  15.             ul> 
  16.         nav> 
  17.         << span="">section> 
  18.             << span="">h1>My Articleh1> 
  19.             << span="">article> 
  20.                 << span="">p>...p> 
  21.             article> 
  22.         section> 
  23.         << span="">footer> 
  24.             << span="">p>...p> 
  25.         footer> 
  26.     body> 
  27. html> 

是不是更干净,更易于理解呢?我们可以把

My Article

打包到header标记中。另外请注意,我们可以在article元素下再增加一个footer元素,用来容纳如翻页导航,相关文章或其它内容。

新标记的样式

在大多数浏览器中,你只需要如往常一样对元素使用样式,但是请一定要对每个元素加上display:block;规则,随着时间的推移,浏览器对HTML 5新元素的支持越来越标准后,就可以不使用了。

下面我们队header应用一些样式:

  1. header {  
  2.     display: block;  
  3.     font-size: 36px;  
  4.     font-weight: bold;  

记住,你现在仍然可以在这些元素上添加class和ID属性,因此,如果你想对导航小节单独使用一个样式,你可以向下面这样增加一个class或ID属性:

  1. << span="">nav class="main-menu"> 

然后再应用一个样式:

  1. nav.main-menu {  
  2.     font-size: 18px;  

与旧浏览器的兼容

这些样式都不能在IE 6下使用,如果你坚持要保持与旧浏览器兼容,也是有补救办法的,IE 6可以解析这些标记,但不能应用样式,解决办法就是使用JavaScript,使用createElement方法就可以让IE支持HTML 5标记的样式了,你可以在HTML 5文件的头部包括这段代码,也可以保存到一个独立文件中,然后进行引用。

  1. << span="">script> 
  2.   document.createElement('header');  
  3.   document.createElement('nav');  
  4.   document.createElement('section');  
  5.   document.createElement('article');  
  6.   document.createElement('aside');  
  7.   document.createElement('footer');  
  8. script> 

你可能要问,为什么没有给这段脚本指定MIME类型呢?在HTML 5中无需指定了,在HTML 5中,所有的脚本都假设是type="text/javascript",因此不必再多此一举了。


上一篇:进行CSS注释的三种方法 下一篇:网站建设对企业影响有多大?