您现在的位置是：网站首页> 编程资料编程资料
HTML5的结构和语义(3):语义性的块级元素HTML中img标签只显示图片中心位置的方法(三种方法)Html5新增标签有哪些Html Mate 标签 使用详解 中文WORD版HTML5各种头部meta标签的功能(推荐)处理HTML5新标签的浏览器兼容版问题HTML中的base标签 中文WORD版清除行内元素之间HTML空白的几种解决方案html内联元素和块级元素的基本概念及使用示例HTML5在a标签内放置块级元素示例代码html 内联元素和html 块级元素概述及区别
2023-10-15
351人已围观
简介 HTML5还增加了一些纯语义性的块级元素： aside figure dialog 我在文章和书中一直使用前两个元素。第三个元素我不经常用，它主要用于书面文本。 aside aside元素代表说明、提示、边栏、引用、附加注释等，也就是叙述主线之外的内容。例如，在developer
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元素的作用。尽管在具体语法方面有争议，但是大多数人都认为以这样的语义性方式表达对话是好事情。
（待续）
相关内容
- HTML5的结构和语义(2):结构html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- HTML5的结构和语义(4):语义性的内联元素html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- HTML5的结构和语义(5):内嵌媒体html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- HTML5中语义化 b 和 i 标签HTML5语义化元素你真的用对了吗HTML5新特性之语义化标签HTML5 语义化结构化规范化HTML标签语义化（含H5） 详解HTML5常用的语义化标签浅谈HTML的语义化和一些简单优化浅谈语义化的HTML结构到底有什么好处使用语义化标签去写你的HTML 兼容IE6,7,8HTML标签语义化的介绍XHTML标签语义化介绍
- HTML5的结构和语义(5):交互html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- IE9下html5初试小刀 html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- HTML5边玩边学（3）像素和颜色
- HTML5边玩边学（2）基础绘图实现方法
- 疯狂性知识 第十关-恋女色之人 图文答案_手机游戏_游戏攻略_
- 疯狂性知识 第十一关-什么饮品杀精 图文答案_手机游戏_游戏攻略_
点击排行
本栏推荐
