HTML5的结构和语义(3):语义性的块级元素_html5教程技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了HTML5的结构和语义(3):语义性的块级元素_html5教程技巧，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3956字，纯文字阅读大概需要6分钟。
内容图文
HTML5还增加了一些纯语义性的块级元素：aside figure dialog
我在文章和书中一直使用前两个元素。第三个元素我不经常用，它主要用于书面文本。
aside
aside元素代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容。例如，在developerWorks文章中，常常会看到用表格形式编写的边栏，见代码3用HTML4编写的developerWorks边栏。
<imgalt=""src="https://img.gxlcms.com///www.ibm.com/i/c.gif"height="1"width="10">
<tableborder="1"cellpadding="5"cellspacing="0"width="100%">
<spanclass="smalltitle">.xf-value
The<codetype="inline">.xf-valueselectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
<codetype="inline">::valuepseudo-classinsteadlikeso:
<tableborder="0"cellpadding="0"cellspacing="0"width="100%">
<preclass="displaycode">input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}
However,Firefoxdoesn'tyetsupportthissyntax.
在HTML5中，可以按照更有意义的方式编写这个边栏，见代码4用HTML5编写的developerWorks边栏。
.xf-value
The<codetype="inline">.xf-valueselectorusedherestylestheinput
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
<codetype="inline">::valuepseudo-classinsteadlikeso:
<preclass="displaycode">input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}
However,Firefoxdoesn'tyetsupportthissyntax.
浏览器可以决定把这个边栏放在哪里（可能需要用一点儿CSS代码）。
figure
figure元素代表一个块级图像，还可以包含说明。例如，在许多developerWorks文章中，可以看到代码5用HTML4编写的developerWorks图这样的标记其结果见图1。
Figure2.InstallMozillaXFormsdialog
<imgalt="AWebsiteisrequestingpermissiontoinstallthefollowingitem:
MozillaXForms0.7Unsigned"
src="https://img.gxlcms.com/https://img.gxlcms.com/installdialog.jpg"border="0"height="317"hspace="5"vspace="5"width="331"/>
图1.InstallMozillaXFormsdialog
在HTML5中，可以按照更有语义性的方式编写这个图，见代码6用HTML5编写的developerWorks图。
<figureid="fig2">
<imgalt="AWebsiteisrequestingpermissiontoinstallthefollowingitem:
MozillaXForms0.7Unsigned"
src="https://img.gxlcms.com/https://img.gxlcms.com/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对话
对于这个元素的准确语法还有争议。一些人希望在dialog元素中嵌入非对话文本（比如剧本中的舞台说明），还有人不喜欢扩展dt和dd元素的作用。尽管在具体语法方面有争议，但是大多数人都认为以这样的语义性方式表达对话是好事情。
（待续）
内容总结
以上是互联网集市为您收集整理的HTML5的结构和语义(3):语义性的块级元素_html5教程技巧全部内容，希望文章能够帮你解决HTML5的结构和语义(3):语义性的块级元素_html5教程技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。