HTML5的结构和语义(3):语义性的块级元素_html5教程技巧
程序员文章站
2022-03-21 14:26:24
...
HTML5还增加了一些纯语义性的块级元素:
aside figure dialog
我在文章和书中一直使用前两个元素。第三个元素我不经常用,它主要用于书面文本。
aside
aside元素代表说明、提示、边栏、引用、附加注释等,也就是叙述主线之外的内容。例如,在developerWorks文章中,常常会看到用表格形式编写的边栏,见代码3用HTML4编写的developerWorks边栏。
input::value{width:20em;}
#ccnumber::value{width:18em}
#zip::value{width:12em}
#state::value{width:3em}
在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中,可以按照更有语义性的方式编写这个图,见代码6用HTML5编写的developerWorks图。
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对话
对于这个元素的准确语法还有争议。一些人希望在dialog元素中嵌入非对话文本(比如剧本中的舞台说明),还有人不喜欢扩展dt和dd元素的作用。尽管在具体语法方面有争议,但是大多数人都认为以这样的语义性方式表达对话是好事情。
(待续)
aside figure dialog
我在文章和书中一直使用前两个元素。第三个元素我不经常用,它主要用于书面文本。
aside
aside元素代表说明、提示、边栏、引用、附加注释等,也就是叙述主线之外的内容。例如,在developerWorks文章中,常常会看到用表格形式编写的边栏,见代码3用HTML4编写的developerWorks边栏。
The
fieldvaluebutnotitslabel.Thisisactuallyinconsistent
withthecurrentCSS3draft.Theexamplereallyshouldusethe
#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。
src="installdialog.jpg"border="0"height="317"hspace="5"vspace="5"width="331"/>
图1.InstallMozillaXFormsdialog
在HTML5中,可以按照更有语义性的方式编写这个图,见代码6用HTML5编写的developerWorks图。
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对话
对于这个元素的准确语法还有争议。一些人希望在dialog元素中嵌入非对话文本(比如剧本中的舞台说明),还有人不喜欢扩展dt和dd元素的作用。尽管在具体语法方面有争议,但是大多数人都认为以这样的语义性方式表达对话是好事情。
(待续)
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
- html5离线存储有哪些
- 深入解析asp.net中mvc4自定义404页面(...
- h5新增标签audio与video的使用
- 你值得了解的HTTP缓存机制(代码详解)
- HTML5的结构和语义(3):语义性的块级元素_h...
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
上一篇: PHP输出英文时间日期的安全方法(RFC 1123格式)
下一篇: PHP中一个好玩的性别判断扩展
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论