HTML5的结构和语义(3):语义性的块级元素

2020-04-20 17:13:52易采站长站整理

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

<tablealign="right"border="0"cellpadding="0"cellspacing="0"width="40%">
<tbody><tr><tdwidth="10">
<imgalt=""src="//www.ibm.com/i/c.gif"height="1"width="10"></td>
<td>
<tableborder="1"cellpadding="5"cellspacing="0"width="100%">
<tbody><tr><tdbgcolor="#eeeeee">
<p><aname="xf-value"><spanclass="smalltitle">.xf-value</span></a></p>
<p>
The<codetype="inline">.xf-value</code>selectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
<codetype="inline">::value</code>pseudo-classinsteadlikeso:
</p>
<tableborder="0"cellpadding="0"cellspacing="0"width="100%">
<tbody><tr><tdclass="code-outline">
<preclass="displaycode">input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}</pre>
</td></tr></tbody></table><br>
<p>
However,Firefoxdoesn’tyetsupportthissyntax.
</p>
</td></tr></table>

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

<aside>
<h3>.xf-value</h3>
<p>
The<codetype="inline">.xf-value</code>selectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
<codetype="inline">::value</code>pseudo-classinsteadlikeso:
</p>

<preclass="displaycode">input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}</pre>
<p>
However,Firefoxdoesn’tyetsupportthissyntax.
</p>
</aside>

  浏览器可以决定把这个边栏放在哪里(可能需要用一点儿CSS代码)。
figure
  figure元素代表一个块级图像,还可以包含说明。例如,在许多developerWorks文章中,可以看到代码5用HTML4编写的developerWorks图这样的标记其结果见图1。