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

更多新结构

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

更多新结构

你并不是什么都没看到。实际上，并不是那样，你已经看到了很多真材实料。因此，既然已经到了这一地步，让我们来看看HTML 5提供的其他新元素，其中的一些是从HTML 4修改而来的。我们将会看到在任何元素上都允许的全局属性，并且初次见到我们在本书中不会介绍的一些的HTML 5功能。

<aside>

在第1章中，我们看到<aside>用来标记边栏。它表示由与aside元素周围的内容无关的内容所组成的一个页面的一节，也可以认为该内容与aside周围的内容是分开独立的。这样的节往往在印刷排版中用边栏表示。该元素可以用于摘录引用或边栏这样的排版效果，用于广告、用于一组导航元素，以及用于认为应该与页面的主内容区分开来的其他内容。

例如，在一个<article>中使用<aside>，是表示该文章的不相关信息或摘录引用的好办法，但是这不是添加全页导航的好地方。

<aside>有一个隐式的ARIA角色“note”，但是可以使用role="complementary"或（如果它包围着一个搜索表单）role= "search"。

<details>

我非常喜欢<details>元素，即便它还没有实现。Remy有一段模仿它的脚本，位于http://gist.github.com/370590。

它很酷，因为它引入了对一种常见行为的本地支持，使我们无须定制JavaScript（或者使用我们在很多站点上看到的好笑的事情，引入整个jQuery库）。<details>提供了一个展开/收缩区域。它采取如下的形式：



    
	
  1. 
		<details> 
    2. 
	
  2. 
		 <summary>Photograph details</summary> 
    3. 
	
  3. 
		 <p>Photograph taken on <time datetime=2009-12-25>Xmas  
    4. 
	
  4. 
		  Day 09</time> with a Canon IXUSi.</p> 
    5. 
	
  5. 
		 <p><small>Copyright Bruce Lawson,  
    6. 
	
  6. 
		  <address>bruce@brucelawson.co.uk</address></small>.</p> 
    7. 
	
  7. 
		</details> 
    8. 




	子孙元素<summary>的内容是可以聚焦的，并且充当一个控件，当鼠标或键盘激活它，将扩展或收缩该元素的剩余内容。如果没有找到<summary>元素，浏览器将提供自己默认的控件文本，例如“details”或一个本地化版本。浏览器将可能添加某种图标来表示该文本是“可扩展的”，例如一个向下的箭头。



	<details>可以可选地接受open属性，来确保页面载入的时候该元素是可打开的：

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



	<details open>



	注意，该元素并没有严格地限制于纯文本标记，即它可以是一个登录表单、一段说明性的视频、以图形为源数据的一个表格，或者提供给使用辅助性技术的用户（有学习障碍，或者像我一样不识数）的一个表格式的结构说明。



	<figure>



	在给一张图片添加一个标题以说明该图像，或者给出摄影师的名字的时候，我总是感到有点语义自卑，因为这么做的唯一方式就是把文本放入到外围的内容之中，没有办法明确地将其与图像相关联。这仅仅是因为此前没有任何标记结构。可能我有点怪异，但是这就是为什么我很高兴地看到，<figure>元素包围一幅图像（或者一段视频、一段代码，或一个支持性引用）而其标题则放入到<figcaption>元素中：




    
	
  1. 
		<figure> 
    2. 
	
  2. 
		<img src=welcome.jpg  
    3. 
	
  3. 
		  alt=""> <!-- no alt, as it's covered by the figcaption --> 
    4. 
	
  4. 
		<figcaption> 
    5. 
	
  5. 
		Bruce and Remy welcome questions  
    6. 
	
  6. 
		<small>Photo &copy; Bruce's mum</small> 
    7. 
	
  7. 
		</figcaption> 
    8. 
	
  8. 
		</figure> 
    9. 




	样式化这一标记会产生某种漂亮的效果（如图2.19所示）。注意，<figcaption>只能包含“短语内容”，用HTML 4的术语来说，它无法包含“块级”元素。



	
		

			
				
		

		

		

	




	<mark>



	<mark>元素允许我们对标记所做的事情，相当于使用一支荧光笔在打印的纸张上标出一些文字。它与强调不同，对于强调，我们使用<em>。但是如果有一些已有的文本，并且想要让文本中没有强调的内容处于显眼的位置，可以使用<mark>并将其样式化为斜体，或者使用黄色的荧光笔背景色。在打印的时候，我们往往看到“我的斜体”或“添加强调”之类的词语。



	规范还提到：“当在文档的主要文字中使用的时候，它表示文档中需要强调的部分，因为这部分很可能与用户的当前活动有关”。



	作为说明，在我自己的站点上，我使用了Stuart Langridge的Searchhi脚本（www.kryogenix.org/code/browser/searchhi/）的修改版，它检查对一个页面的引用是否是一个搜索引擎，以及搜索的关键词是否在查询字符串中。如果是这样的话，这段脚本会遍历DOM并且把搜索关键词的每个实例用一个<mark>元素包围起来，然后，将其样式化为漂亮的粉色。有可能会错误地把这些搜索关键词放到<strong>或<em>中，因为它们并没有强调，这可能会改变页面的内容的含义，这与用户当前的行为（到我们的站点的页面来查找关于某个搜索关键词的信息）相关。

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



	<ruby>、<rp>、<rt>



	ruby是针对某些亚洲语言编写的内容的一项有用的添加。Daniel Davis写了一篇非常有用的文章，“The HTML5 <ruby> element in words of one syllable or less”（http://my.opera.com/tagawa/blog/the-html5-ruby-element-in-words-of-one-syllable-or-less），说明了该元素在日语环境中如何工作（这里的引用获得了许可）：



	任何日语文本（横栏广告、文章、法律文档等）都是用日本汉字、平假名、片假名书写系统的一个组合。这有时候是因为阅读该文本的人无法阅读日本汉字，特别是由于日本汉字字符可以有多个发音。人名和地名是日本汉字有多个不规则发音的例子。



	日可以读作“niche”、“hi”或“ka”；



	本可以读作“hon”或“moto”；



	日本可以读作“nihon” 或“nippon”。



	为了帮助读者，有时候使用平假名字母在日本汉字的上面写下读音。这在日语中叫做注音假名，在英语中叫做ruby（名称来自于英语印刷传统中类似的注音方式所使用的小5.5pt的字体）。它往往用在报纸和图书中，但在Web站点上用得较少，因为很难在较大的文本上面的单个一行中挤上缩小的文本。<ruby>元素的目标就是解决这一问题。



	根据当前的HTML 5规范，<ruby>元素是一个内联元素，并且它放在要澄清的单词或字符的周围，如下所示：



	<ruby></ruby>



	这本身不做任何事情，因此要么为每个字符添加一个读音，或者像在这个例子中一样，根据我们个人偏好，将该单词当做一个整体。为此我们使用<rt>标签，表示ruby文本。



	你可以让它保持这样，并且支持的浏览器将会把注音假名显示在日语汉字文本的上面，但是不支持的浏览器将会忽略掉该标记，并且并列地显示文本及其读音。为了解决这一问题，我们有另一个标签<rp>，表示ruby parentheses，它会在支持的浏览器中自动地隐藏字符（即圆括号）。这意味着，我们可以在圆括号中编写发音，不支持的浏览器也将显示圆括号，而支持的浏览器将继续显示主文本上面不带圆括号的发音（如图2.20所示）。



	
		

			
				
		

	




	 



	在编写本书的时候，W3C HTML 5日语相关组对<ruby>进行了很多讨论，因此规范倾向于根据这些反馈来进行修改。


			

			

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

		
		
			  
	  
 
	

	 
	

	





	
	



飞机