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

构造主要内容区域（2）

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

构造主要内容区域（2）

<time>元素的机器可读部分通常放在元素的datetime属性中。元素内部的内容是要显示给最终用户的内容。



    
	
  1. 
		<time datetime=2009-11-13>13 November 2009</time> 
    2. 
	
  2. 
		<time datetime=2009-11-13>13<sup>th</sup> November last  
    3. 
	
  3. 
		 year</time> 
    4. 
	
  4. 
		<time datetime=2010-11-13>Bruce's 21st birthday</time> 
    5. 
	
  5. 
		<time datetime=2010-11-13T020:00Z>8PM on my birthday</time> 
    6. 
	
  6. 
		<time datetime=20:00>8 PM</time> 
    7. 




	如果你愿意向最终用户显示机器可读的时间格式，则不需要使用一个单独的datetime属性。然后，用户代理就能够直接获取元素的内容并解释它：




    
	
  1. 
		<time>20:00</time> 
    2. 




	<time>的唯一麻烦是，对于前公历的日期，它必须包含一个正值，这意味着无法编码表示公元前的一个日期，也不能编码表示“1904年7月”这样不精确的日期。这很大程度上限制了它用于可能不知道精确日期的那些Web站点，例如，博物馆、历史/百科全书页面，或者家谱站点。

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



	pubdate属性



	pubdate是一个布尔属性，用来表示这个特定的<time>是一篇<article>或整个<body>内容的发布日期。你可能会奇怪，为什么需要pubdate属性。为什么不假设一篇<article>的<header>中的任何一个<time>元素就是其发布日期呢？



	考虑这个例子：




    
	
  1. 
		<article> 
    2. 
	
  2. 
		  <header> 
    3. 
	
  3. 
		    <h1>Come to my party on <time datetime=2010-12-01>1  
    4. 
	
  4. 
		     December</time></h1> 
    5. 
	
  5. 
		     <p>Published on <time datetime=2010-06-20 pubdate>20  
    6. 
	
  6. 
		      June 2010</time></p> 
    7. 
	
  7. 
		  </header> 
    8. 
	
  8. 
		  <p>I'm throwing a party at Dr Einstein's Cabaret  
    9. 
	
  9. 
		   Roller-disco Bierkeller Pizza-parlour-a-gogo. Do come  
    10. 
	
  10. 
		   and dance to Rusty Trombone's Swingin' Brass Band.  
    11. 
	
  11. 
		   (Formal dress and lewd hat required.)</p> 
    12. 
	
  12. 
		</article> 
    13. 




	你会看到<header>中有两个日期：实际聚会的日期和文章发布的日期。需要使用pubdate属性来避免任何的不确定性。没错，你收到邀请了，但这次别喝醉了。



	页眉和页脚的更多乐趣



	我们的文章处理者的最大的惊讶是，每篇文章都可以有自己的<header>和<footer>。这意味着，除了页面上的“主”页眉和页脚，每篇文章都可以有自己的页眉和页脚。可以分别使用CSS来样式化它们：body>header和body>footer以“主”页眉和页脚为目标（假设它们是<body>的直接子孙），而article>header和article>footer以内部结构为目标。



	要使用老版本IE，我们可以利用其特殊性，定义通用的页眉和页脚样式，然后针对文章页眉和文章页脚重新定义并覆盖它们：

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




    
	
  1. 
		header {display:block; color:red; text-align:right;}  
    2. 
	
  2. 
		 /*page header */  
    3. 
	
  3. 
		article header {color:blue; text-align:center;}  
    4. 
	
  4. 
		 /*article header */ 
    5. 




	注意，到目前为止，还没有引入id和class作为CSS的钩子。



	在同一元素上使用多个<footer>



	规范指出：“页脚不一定必须出现在一节的末尾，尽管通常是这样”，并且它允许一个元素有两个或多个页脚。规范中的示例的一个简化版本是：




    
	
  1. 
		<body> 
    2. 
	
  2. 
		 <footer><a href="/">Back to index...</a></footer> 
    3. 
	
  3. 
		 <h1>Lorem ipsum</h1> 
    4. 
	
  4. 
		 <p>Lorem ipsum</p> 
    5. 
	
  5. 
		 <footer><a href="/">Back to index...</a></footer> 
    6. 
	
  6. 
		</body> 
    7. 




	这么做的原因是，认为元素是非表现性的。如果“back to index”是文章下面的页脚，并且我们选择在文章上面也有一个页脚，我们应该对相同的内容使用相同的元素，而不管它出现在何处。



	使用<blockquote> <footer>



	很酷的一点是，<blockquote>也可以有一个页脚，它是引用资源的一种非常有用的方式，可以明确地关联到引用，而且很好地呈现给用户（以前，<blockquote>上的cite属性不能在任何地方显示）：




    
	
  1. 
		<blockquote> 
    2. 
	
  2. 
		  Thou look'st like antichrist, in that lewd hat.  
    3. 
	
  3. 
		  <footer>Ananias <cite>Scene 4.3, <a href="http://  
    4. 
	
  4. 
		   www.gutenberg.org/files/4081/4081-h/4081-h.htm">The  
    5. 
	
  5. 
		   Alchemist</a></cite> (Ben Jonson)</footer> 
    6. 
	
  6. 
		</blockquote> 
    7. 



			

			

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

		
		
			  
	  
 
	

	 
	

	





	
	



飞机