189 8069 5689

HTML5中语义性的块级元素有哪些

这篇文章给大家分享的是有关HTML5中语义性的块级元素有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联公司专注于企业成都全网营销推广、网站重做改版、彭山网站定制设计、自适应品牌网站建设、H5场景定制、成都做商城网站、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为彭山等各大城市提供网站开发制作服务。

HTML5还增加了一些纯语义性的块级元素：
aside　　figure　　dialog
我在文章和书中一直使用前两个元素。第三个元素我不经常用，它主要用于书面文本。
aside
aside元素代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容。例如，在developerWorks文章中，常常会看到用表格形式编写的边栏，见代码3用HTML4编写的developerWorks边栏。






.xf-value



The.xf-valueselectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
::valuepseudo-classinsteadlikeso:




input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}



However,Firefoxdoesn'tyetsupportthissyntax.



在HTML5中，可以按照更有意义的方式编写这个边栏，见代码4用HTML5编写的developerWorks边栏。


浏览器可以决定把这个边栏放在哪里（可能需要用一点儿CSS代码）。
figure
figure元素代表一个块级图像，还可以包含说明。例如，在许多developerWorks文章中，可以看到代码5用HTML4编写的developerWorks图这样的标记其结果见图1。
Figure2.InstallMozillaXFormsdialog

MozillaXForms0.7Unsigned"
src="installdialog.jpg"border="0"height="317"hspace="5"vspace="5"width="331"/>



图1.InstallMozillaXFormsdialog
HTML5中语义性的块级元素有哪些
在HTML5中，可以按照更有语义性的方式编写这个图，见代码6用HTML5编写的developerWorks图。

Figure2.InstallMozillaXFormsdialog
MozillaXForms0.7Unsigned"
src="installdialog.jpg"border="0"height="317"hspace="5"vspace="5"width="331"/>


最重要的是，浏览器（尤其是屏幕阅读器）可以明确地将图和说明联系在一起。
figure元素不只可以显示图片。还可以使用它给audio、video、iframe、object和embed元素加说明。
dialog
dialog元素表示几个人之间的对话。HTML5dt元素可以表示讲话者，HTML5dd元素可以表示讲话内容。所以，在老式浏览器中也可以以合理的方式显示对话。代码7显示在Galileo的“DialogueConcerningtheTwoChiefWorldSystems”上的一段著名对话。
代码7.用HTML5编写的Galilean对话

Simplicius

AccordingtothestraightlineAF,
andnotaccordingtothecurve,suchbeingalreadyexcluded
forsuchause.

Sagredo

ButIshouldtakeneitherofthem,
seeingthatthestraightlineAFrunsobliquely.Ishould
drawalineperpendiculartoCD,forthiswouldseemtome
tobetheshortest,aswellasbeinguniqueamongthe
infinitenumberoflongerandunequaloneswhichmaybe
drawnfromthepointAtoeveryotherpointoftheopposite
lineCD.

Salviati

Yourchoiceandthereasonyou
adduceforitseemtomemostexcellent.Sonowwehaveit
thatthefirstdimensionisdeterminedbyastraightline;
thesecond(namely,breadth)byanotherstraightline,and
notonlystraight,butatrightanglestothatwhich
determinesthelength.Thuswehavedefinedthetwo
dimensionsofasurface;thatis,lengthandbreadth.


Butsupposeyouhadtodetermineaheight—for
example,howhighthisplatformisfromthepavementdown
belowthere.Seeingthatfromanypointintheplatformwe
maydrawinfinitelines,curvedorstraight,andallof
differentlengths,totheinfinitepointsofthepavement
below,whichofalltheselineswouldyoumakeuseof?




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

感谢各位的阅读！关于“HTML5中语义性的块级元素有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！


分享文章：HTML5中语义性的块级元素有哪些
当前地址：http://jkwzsj.com/article/piojje.html

其他资讯