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


Posted in HTML / CSS onOctober 17, 2008

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。
<aname="fig2"><b>Figure2.InstallMozillaXFormsdialog</b></a><br/>
<imgalt="AWebsiteisrequestingpermissiontoinstallthefollowingitem:
MozillaXForms0.7Unsigned"
src="installdialog.jpg"border="0"height="317"hspace="5"vspace="5"width="331"/>
<br/>

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

在HTML5中,可以按照更有语义性的方式编写这个图,见代码6用HTML5编写的developerWorks图。
<figureid="fig2">
<legend>Figure2.InstallMozillaXFormsdialog</legend>
<imgalt="AWebsiteisrequestingpermissiontoinstallthefollowingitem:
MozillaXForms0.7Unsigned"
src="installdialog.jpg"border="0"height="317"hspace="5"vspace="5"width="331"/>
</figure>

最重要的是,浏览器(尤其是屏幕阅读器)可以明确地将图和说明联系在一起。

figure元素不只可以显示图片。还可以使用它给audio、video、iframe、object和embed元素加说明。
dialog

dialog元素表示几个人之间的对话。HTML5dt元素可以表示讲话者,HTML5dd元素可以表示讲话内容。所以,在老式浏览器中也可以以合理的方式显示对话。代码7显示在Galileo的“DialogueConcerningtheTwoChiefWorldSystems”上的一段著名对话。

代码7.用HTML5编写的Galilean对话
<dialog>
<dt>Simplicius</dt>
<dd>AccordingtothestraightlineAF,
andnotaccordingtothecurve,suchbeingalreadyexcluded
forsuchause.</dd>
<dt>Sagredo</dt>
<dd>ButIshouldtakeneitherofthem,
seeingthatthestraightlineAFrunsobliquely.Ishould
drawalineperpendiculartoCD,forthiswouldseemtome
tobetheshortest,aswellasbeinguniqueamongthe
infinitenumberoflongerandunequaloneswhichmaybe
drawnfromthepointAtoeveryotherpointoftheopposite
lineCD.</dd>
<dt>Salviati</dt>
<dd><p>Yourchoiceandthereasonyou
adduceforitseemtomemostexcellent.Sonowwehaveit
thatthefirstdimensionisdeterminedbyastraightline;
thesecond(namely,breadth)byanotherstraightline,and
notonlystraight,butatrightanglestothatwhich
determinesthelength.Thuswehavedefinedthetwo
dimensionsofasurface;thatis,lengthandbreadth.</p>
<p>Butsupposeyouhadtodetermineaheight—for
example,howhighthisplatformisfromthepavementdown
belowthere.Seeingthatfromanypointintheplatformwe
maydrawinfinitelines,curvedorstraight,andallof
differentlengths,totheinfinitepointsofthepavement
below,whichofalltheselineswouldyoumakeuseof?</p>
</dd>
</dialog>

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

(待续)

HTML / CSS 相关文章推荐
纯CSS3实现质感细腻丝滑按钮
Mar 09 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 #HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 #HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 #HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 #HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 #HTML / CSS
HTML5 语义化结构化规范化
Oct 17 #HTML / CSS
HTML5 与 XHTML2
Oct 17 #HTML / CSS
You might like
PHP学习 运算符与运算符优先级
2008/06/15 PHP
php发送post请求的三种方法
2014/02/11 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
python根据京东商品url获取产品价格
2015/08/09 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
python 弧度与角度互转实例
2020/04/15 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
实习心得体会
2014/01/02 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
新店开张活动方案
2014/08/24 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
在Django中使用MQTT的方法
2021/05/10 Python
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
小程序实现文字循环滚动动画
2021/06/14 Javascript
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android