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动画效果
Aug 14 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
HTML5实现文件断点续传的方法
Jan 04 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
php 获取可变函数参数的函数
2009/08/26 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
php中动态变量用法实例
2015/06/10 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
Python decimal模块使用方法详解
2020/06/08 Python
python利用opencv保存、播放视频
2020/11/02 Python
python之随机数函数的实现示例
2020/12/30 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
入党自我鉴定
2014/03/25 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
办公室岗位职责
2015/02/04 职场文书
公司岗位说明书
2015/10/08 职场文书
入党心得体会
2019/06/20 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
Redis数据同步之redis shake的实现方法
2022/04/21 Redis
Django框架中模型的用法
2022/06/10 Python
Nginx跨域问题解析与解决
2022/08/05 Servers