HTML5的结构和语义——语义性的块级元素(三)

     HTML 5 还增加了一些纯语义性的块级元素: 
aside figure  dialog
我在文章和书中一直使用前两个元素。第三个元素我不经常用,它主要用于书面文本。 
aside
aside 元素代表说明、提示、边栏、引用、附加注释等,也就是叙述主线之外的内容。例如,在 developerWorks 文章中,常常会看到用表格形式编写的边栏,见代码3 用 HTML 4 编写的 developerWorks 边栏。

   1: <table align="right" border="0" cellpadding="0" cellspacing="0" width="40%">
   2: <tbody><tr><td width="10">
   3: <img alt="" src="//www.ibm.com/i/c.gif" height="1" width="10"></td>
   4: <td>
   5: <table border="1" cellpadding="5" cellspacing="0" width="100%">
   6: <tbody><tr><td bgcolor="#eeeeee">
   7: <p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p>
   8: <p>
   9: The <code type="inline">.xf-value</code> selector used here styles the input
  10: field value but not its label. This is actually inconsistent
  11: with the current CSS3 draft. The example really should use the
  12: <code type="inline">::value</code> pseudo-class instead like so:
  13: </p>
  14: <table border="0" cellpadding="0" cellspacing="0" width="100%">
  15: <tbody><tr><td class="code-outline">
  16: <pre class="displaycode">input::value { width: 20em; }
  17: #ccnumber::value { width: 18em }
  18: #zip::value { width: 12em }
  19: #state::value { width: 3em  }</pre>
  20: </td></tr></tbody></table><br>
  21:  
  22: <p>
  23: However, Firefox doesn't yet support this syntax. 
  24: </p>
  25: </td></tr></table>

  在 HTML 5 中,可以按照更有意义的方式编写这个边栏,见代码4 用 HTML 5 编写的 developerWorks 边栏。

   1: <aside>
   2: <h3>.xf-value</h3>
   3: <p>
   4: The <code type="inline">.xf-value</code> selector used here styles the input
   5: field value but not its label. This is actually inconsistent
   6: with the current CSS3 draft. The example really should use the
   7: <code type="inline">::value</code> pseudo-class instead like so:
   8: </p>
   9:   
  10: <pre class="displaycode">input::value { width: 20em; }
  11: #ccnumber::value { width: 18em }
  12: #zip::value { width: 12em }
  13: #state::value { width: 3em  }</pre>
  14:  
  15: <p>
  16: However, Firefox doesn't yet support this syntax. 
  17: </p>
  18: </aside>

  浏览器可以决定把这个边栏放在哪里(可能需要用一点儿 CSS 代码)。 
figure

figure 元素代表一个块级图像,还可以包含说明。例如,在许多 developerWorks 文章中,可以看到代码5 用 HTML 4 编写的 developerWorks 图 这样的标记其结果见图1。

   1: <a name="fig2"><b>Figure 2. Install Mozilla XForms dialog</b></a><br />
   2: <img alt="A Web site is requesting permission to install the following item: 
   3:    Mozilla XForms 0.7 Unsigned" 
   4:   src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
   5: <br />

图 1. Install Mozilla XForms dialog 

   在 HTML 5 中,可以按照更有语义性的方式编写这个图,见代码6 用 HTML 5 编写的 developerWorks 图。

   1: <figure id="fig2">
   2:   <legend>Figure 2. Install Mozilla XForms dialog</legend>
   3:   <img alt="A Web site is requesting permission to install the following item: 
   4:     Mozilla XForms 0.7 Unsigned" 
   5:     src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
   6: </figure>

    最重要的是,浏览器(尤其是屏幕阅读器)可以明确地将图和说明联系在一起。 
figure 元素不只可以显示图片。还可以使用它给 audio、video、iframe、object 和 embed 元素加说明。 
dialog

dialog 元素表示几个人之间的对话。HTML 5 dt 元素可以表示讲话者,HTML 5 dd 元素可以表示讲话内容。所以,在老式浏览器中也可以以合理的方式显示对话。代码7 显示在 Galileo 的  “Dialogue Concerning the Two Chief World Systems” 上的一段著名对话。 
代码7. 用 HTML 5 编写的 Galilean 对话

   1: <dialog>
   2:     <dt>Simplicius </dt> 
   3:     <dd>According to the straight line AF,
   4:     and not according to the curve, such being already excluded
   5:     for such a use.</dd>
   6:  
   7:     <dt>Sagredo </dt> 
   8:     <dd>But I should take neither of them,
   9:     seeing that the straight line AF runs obliquely. I should
  10:     draw a line perpendicular to CD, for this would seem to me
  11:     to be the shortest, as well as being unique among the
  12:     infinite number of longer and unequal ones which may be
  13:     drawn from the point A to every other point of the opposite
  14:     line CD. </dd>
  15:  
  16:     <dt>Salviati </dt> 
  17:     <dd><p> Your choice and the reason you
  18:     adduce for it seem to me most excellent. So now we have it
  19:     that the first dimension is determined by a straight line;
  20:     the second (namely, breadth) by another straight line, and
  21:     not only straight, but at right angles to that which
  22:     determines the length. Thus we have defined the two
  23:     dimensions of a surface; that is, length and breadth. </p>
  24:  
  25:     <p> But suppose you had to determine a height—for
  26:     example, how high this platform is from the pavement down
  27:     below there. Seeing that from any point in the platform we
  28:     may draw infinite lines, curved or straight, and all of
  29:     different lengths, to the infinite points of the pavement
  30:     below, which of all these lines would you make use of? </p>
  31:     </dd>
  32: </dialog>

   对于这个元素的准确语法还有争议。一些人希望在 dialog 元素中嵌入非对话文本(比如剧本中的舞台说明),还有人不喜欢扩展 dt 和 dd 元素的作用。尽管在具体语法方面有争议,但是大多数人都认为以这样的语义性方式表达对话是好事情。

发表评论

电子邮件地址不会被公开。 必填项已用*标注