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

2020-03-24 18:45:49

字体：大中小

来源：转载

供稿：网友

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-html' target='_blank'>value span > p
The codetype= inline .xf-value /code selectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrent CSS3draft.Theexamplereallyshouldusethe
codetype= inline ::value /code pseudo-classinsteadlikeso:
/p
tableborder= 0 cellpadding= 0 cellspacing= 0 width= 100%
tbody tr td > pre >#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

pre >#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中，可以按照更有语义性的方式编写这个图，见代码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教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html文件中flash视频格式(flv、swf)文件的嵌入方法

下一篇：HTML和XML的区别分析