Home思洋影视事业部网站建设知识库
0 Comments

构造主要内容区域（1）

发布于：2013-09-04  |   作者：广州网站建设  |   已聚集：人围观

第2章 文本

既然已经使用HTML 5标记了主要的页面部分，并且看到了如何构建一个文档的大纲，在本章中，我们将深入看看如何进一步构建主要内容。

为了做到这点，我们将使用HTML 5标记一个典型的博客。我们之所以选择博客，是因为70%以上的Web专业人士都有博客(www. aneventapart.com/alasurvey2008)，并且每个人都曾经浏览过博客。不管是博客、新闻站点或者产品目录站点（展示产品而不是新闻板块），都是很好的现代Web站点的原型，因为它们都包含页眉、页脚、边栏、多个导航区域和一个表单。
广州网站建设,网站建设,广州网页设计,广州网站设计

构造主要内容区域（1）

看一下一个博客的主要内容区域（如图2.1所示）。这里可能有多篇文章，每个文章包含“元数据”以及文章的实际的文本性内容。
这里是一些典型的标记（根据默认的WordPress主题进行了简化）。


    
	
  1. 
		<div class="post"> 
    2. 
	
  2. 
		<h2>Memoirs of a Parisian lion-tamer</h2> 
    3. 
	
  3. 
		<small>January 24th, 2010</small> 
    4. 
	
  4. 
		  <div class="entry"> 
    5. 
	
  5. 
		    <p>Claude Bottom's poignant autobiography is this  
    6. 
	
  6. 
		      summer's must-read.</p> 
    7. 
	
  7. 
		  </div> 
    8. 
	
  8. 
		  <p class="postmetadata">Posted in <a href="/?cat=3"> 
    9. 
	
  9. 
		   Books category</a> | <a href="/?p=34#respond"> 
    10. 
	
  10. 
		   No Comments</a></p> 
    11. 
	
  11. 
		</div> 
    12. 




	这段标记没有重大的错误（尽管我们对于把HTML 4的表现性<small>元素用于日期提出了质疑）。它在“HTML 5”浏览器中也工作得很好，但是，除了博客帖子的标题以外，没有真正的结构—只有毫无意义的<div>和段落。HTML 4给了我们一般性的结构来标记内容。例如，<div>只是一个通用性的“盒子”，告诉浏览器“这里有一些内容，它们都属于同一部分”，但是它没有任何含义，除了“它们都属于同一部分”，没有任何语义价值。我们将尽可能地使用新的HTML 5元素来替代通用性的盒子，但是对于没有一个合适的元素的地方仍然使用<div>，就像在HTML 4中所做的那样。



	让我们先来关注一下单篇文章。正如在第1章中见到的，我们可以使用<article>来替代外围的<div class="post">，但是我们还可以更进一步，HTML 5的<header>和<footer>元素可以在一个页面上使用多次，每次都指向它们所在的节。



	帖子的标题和时间是“介绍性的内容”，并且这是<header>的职责所在，对吧？类似的，关于帖子的元数据，现在位于带有class"= postmetadata"的一个段落中，在HTML 5中，将其标记为<footer>会更好，这通常包含关于节的信息，例如，谁编写了这节、到相关文档的链接、版权数据，以及类似信息。



	修改后的结果如图2.2所示。

	广州网站建设,网站建设,广州网页设计,广州网站设计



	
		

			
				
		

		

		

	





    
	
  1. 
		<article> 
    2. 
	
  2. 
		  <header> 
    3. 
	
  3. 
		     <h2>Memoirs of a Parisian lion-tamer</h2> 
    4. 
	
  4. 
		     <time datetime=2010-01-24>January 24th,  
    5. 
	
  5. 
		      2010</time> 
    6. 
	
  6. 
		  </header> 
    7. 
	
  7. 
		  <p>Claude Bottom's poignant autobiography is this  
    8. 
	
  8. 
		   summer's must-read.</p> 
    9. 
	
  9. 
		  <footer> 
    10. 
	
  10. 
		    Posted in <a href="/?cat=3" >Books category</a>.  
    11. 
	
  11. 
		     <a href="/?p=34#respond">No Comments</a> 
    12. 
	
  12. 
		  </footer> 
    13. 
	
  13. 
		</article> 
    14. 




	让我们更详细地看一看。



	<time>元素



	<time>是一个新元素，用于明确地编码机器的日期和时间，并以人类可读的方式来显示它们。这在Web页面中的用处不难想象：一个浏览器可以为用户提供向日历添加未来活动的功能；内容聚合器可以生成活动的一个可视化时间表；泰国本地化的浏览器可以将日期转换成泰国的佛历日期，该日期在年份上比相应的公历年份值大543年。



	规范指出：“time元素表示一个24小时制时钟的时间，或者前公历中的一个精确的日期，可选的有一个时间和一个时区偏移量”。


			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机