HTML5的结构和语1.docx

HTML5的结构和语义——语义性的块级元素（三）2012-01-10 15:53:06/kf/201201/116557.html我来说两句?javascript:;收藏?/tg.html我要投稿 [字体：javascript:fontZoomA();小?javascript:fontZoomB();大]aside　　figure 　　dialog?　我在文章和书中一直使用前两个元素。第三个元素我不经常用，它主要用于书面文本。?aside?　aside 元素代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容。例如，在developerWorks 文章中，经常会看到用表格形式编写的边栏，见代码3 用HTML 4 编写的developerWorks 边栏。?以下是代码片段：[ ]table align=right border=0 cellpadding=0 cellspacing=0 width=40%tbodytrtd width=10img alt= src=///i/c.gif height=1 width=10/tdtdtable border=1 cellpadding=5 cellspacing=0 width=100%tbodytrtd bgcolor=#eeeeeepa name=xf-valuespan class=smalltitle.xf-value/span/a/ppThe code type=inline.xf-value/code selector used here styles the inputfield value but not its label. This is actually inconsistentwith the current CSS3 draft. The example really should use thecode type=inline::value/code pseudo-class instead like so:/ptable border=0 cellpadding=0 cellspacing=0 width=100%tbodytrtd class=code-outlinepre class=displaycodeinput::value { width: 20em; }#ccnumber::value { width: 18em }#zip::value { width: 12em }#state::value { width: 3em }/pre/td/tr/tbody/tablebr?pHowever, Firefox doesnt yet support this syntax./p/td/tr/table?　在HTML 5 中，可以按照更有意义的方式编写这个边栏，见代码4 用HTML 5 编写的developerWorks 边栏。?以下是代码片段：[ ]asideh3.xf-value/h3pThe code type=inline.xf-value/code selector used here styles the inputfield value but not its label. This is actually inconsistentwith the current CSS3 draft. The example really should use thecode type=inline::value/code pseudo-class instead like so:/p?pre class=displaycodeinput::value { width: 20em; }#ccnumber::value { width: 18em }#zip::value { width: 12em }#state::value { width: 3em }/pre?pHowever, Firefox doesnt yet support this syntax./p/aside?　/os/liulanqi/浏览器可以决定把这个边栏放在哪里（可能需要用一点儿CSS 代码）。?figure?　figure 元素代表一个块级图像，还可以包含说明。例如，在许多developerWorks 文章中，可以看到代码5 用HTML 4 编写的developerWorks 图 这样的标记其结果见图1。?以下是代码片段：[ ]a name=fig2bFigure 2. Install Mozilla XForms dialog/b/abr /img alt=A Web site is requesting permission to install t