语义性的块元素 除了结构性元素之外,HTML5还增加了一些纯语义性的块级元素: dialog 我在文章和书中一直使用前两个元素。第三个元素我不经常用,它主要用于书面文本 aside de元素代表说明、提示、边栏、引用、附加注释等,也就是叙述主线之外的内容。例如,在 develo perWorks文章中,常常会看到用表格形式编写的边栏,见清单3 清单3.用HTML4编写的 developerWorks边栏 <table align="right" border="0" cellpadding="0" cellspacing="0"width="40%" td width= 10"> <img alt="src="//ww. ibm. com/i/c. gif height="l"width="10"></td> td <table border="1" cellpadding="5" cellspacing="0"width="100%"> r><td bgo lor="#eeeeee"> <p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p> The <code type="inline">.xf-value</code> selector used here styles the input field value but not its label. This is actually inconsistent with the current css3 draft. the example really should use the <code type="inline">:: value</code> pseudo-class instead like so: <table border=0"cellpadding="0"cellspacing=""width="100%"> <tbody><tr><td class= "code-outline"> pre class="displ aycode">input: value[ width: 20em; y Tue width: 18em y #zip:: value i width: 12em y #state: value[ width: 3em </pre> </td></tr></tbody></table><br> However, Firefox doesnt yet support this syntax </p /td></tr></table> 在HTML5中,可以按照更有意义的方式编写这个边栏,见清单4 清单4.用HTML5编写的 developerWorks边栏
语义性的块元素 除了结构性元素之外，HTML 5 还增加了一些纯语义性的块级元素： • aside • figure • dialog 我在文章和书中一直使用前两个元素。第三个元素我不经常用，它主要用于书面文本。 aside aside 元素代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容。例如，在 developerWorks 文章中，常常会看到用表格形式编写的边栏，见清单 3。 清单 3. 用 HTML 4 编写的 developerWorks 边栏 <table align="right" border="0" cellpadding="0" cellspacing="0" width="40%"> <tbody><tr><td width="10"> <img alt="" src="//www.ibm.com/i/c.gif" height="1" width="10"></td> <td> <table border="1" cellpadding="5" cellspacing="0" width="100%"> <tbody><tr><td bgcolor="#eeeeee"> <p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p> <p> The <code type="inline">.xf-value</code> selector used here styles the input field value but not its label. This is actually inconsistent with the current CSS3 draft. The example really should use the <code type="inline">::value</code> pseudo-class instead like so: </p> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody><tr><td class="code-outline"> <pre class="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, Firefox doesn't yet support this syntax. </p> </td></tr></table> 在 HTML 5 中，可以按照更有意义的方式编写这个边栏，见清单 4。 清单 4. 用 HTML 5 编写的 developerWorks 边栏
<aside> The <code type="inline">. xf-value</code> selector used here styles the field value but not its label. This is actually inconsistent with the current css3 draft. The example really should use the code type="inline">:: va lue</code> pseudo-class instead like so <pre class="displaycode">input: value i width: 20em; J #ccnumber: value[ width: 18em J #state: value i width: 3em </pre> However, Firefox doesn t yet support this syntax 浏览器可以决定把这个边栏放在哪里(可能需要用一点儿CSS代码) figure figure元素代表一个块级图像,还可以包含说明。例如,在许多 developerWorks文章中,可以看到 清单5这样的标记:其结果见图1。 清单5.用HTML4编写的 developerWorks图 <a name="fig2><b>Figure 2. Install Mozilla XForms dialog</b></a><br <img alt="A web site is requesting permission to install the fo l lowing item ms 0. 7 Unsign src="installdialog jpg"border="0" height=""317 hspace=5 vspace="5"width="331 br
<aside> <h3>.xf-value</h3> <p> The <code type="inline">.xf-value</code> selector used here styles the input field value but not its label. This is actually inconsistent with the current CSS3 draft. The example really should use the <code type="inline">::value</code> pseudo-class instead like so: </p> <pre class="displaycode">input::value { width: 20em; } #ccnumber::value { width: 18em } #zip::value { width: 12em } #state::value { width: 3em }</pre> <p> However, Firefox doesn't yet support this syntax. </p> </aside> 浏览器可以决定把这个边栏放在哪里（可能需要用一点儿 CSS 代码）。 figure figure 元素代表一个块级图像，还可以包含说明。例如，在许多 developerWorks 文章中，可以看到 清单 5 这样的标记；其结果见图 1。 清单 5. 用 HTML 4 编写的 developerWorks 图 <a name="fig2"><b>Figure 2. Install Mozilla XForms dialog</b></a><br /> <img alt="A Web site is requesting permission to install the following item: Mozilla XForms 0.7 Unsigned" src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" /> <br />