HTML 5 还增加了一些纯语义性的块级元素:

aside  figure   dialog

我在文章和书中一直使用前两个元素。第三个元素我不经常用,它主要用于书面文本。

aside

aside

元素代表说明、提示、边栏、引用、附加注释等,也就是叙述主线之外的内容。例如,在 developerWorks 文章中,常常会看到用表格形式编写的边栏,见代码3

用 HTML 4 编写的 developerWorks 边栏。

.xf-value

The .xf-value selector used here styles the input

field value but not its label. This is actually inconsistent

with the current CSS3 draft. The example really should use the

::value pseudo-class instead like so:

input::value { width: 20em; }

#ccnumber::value { width: 18em }

#zip::value { width: 12em }

#state::value { width: 3em}

However, Firefox doesn't yet support this syntax.

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

.xf-value

The .xf-value selector used here styles the input

field value but not its label. This is actually inconsistent

with the current CSS3 draft. The example really should use the

::value pseudo-class instead like so:

input::value { width: 20em; }

#ccnumber::value { width: 18em }

#zip::value { width: 12em }

#state::value { width: 3em}

However, Firefox doesn't yet support this syntax.

浏览器可以决定把这个边栏放在哪里(可能需要用一点儿 CSS 代码)。

figure

figure 元素代表一个块级图像,还可以包含说明。例如,在许多 developerWorks 文章中,可以看到代码5 用 HTML 4 编写的 developerWorks 图 这样的标记其结果见图1。Figure 2. Install Mozilla XForms dialog

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

在 HTML 5 中,可以按照更有语义性的方式编写这个图,见代码6 用 HTML 5 编写的 developerWorks 图。

Figure 2. Install Mozilla XForms dialog

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

最重要的是,浏览器(尤其是屏幕阅读器)可以明确地将图和说明联系在一起。

figure 元素不只可以显示图片。还可以使用它给 audio、video、iframe、object 和 embed 元素加说明。

dialog

dialog 元素表示几个人之间的对话。HTML 5 dt 元素可以表示讲话者,HTML 5 dd 元素可以表示讲话内容。所以,在老式浏览器中也可以以合理的方式显示对话。代码7 显示在 Galileo 的 “Dialogue Concerning the Two Chief World Systems” 上的一段著名对话。

代码7. 用 HTML 5 编写的 Galilean 对话

Simplicius According to the straight line AF,

and not according to the curve, such being already excluded

for such a use.

Sagredo But I should take neither of them,

seeing that the straight line AF runs obliquely. I should

draw a line perpendicular to CD, for this would seem to me

to be the shortest, as well as being unique among the

infinite number of longer and unequal ones which may be

drawn from the point A to every other point of the opposite

line CD.

Salviati

Your choice and the reason you

adduce for it seem to me most excellent. So now we have it

that the first dimension is determined by a straight line;

the second (namely, breadth) by another straight line, and

not only straight, but at right angles to that which

determines the length. Thus we have defined the two

dimensions of a surface; that is, length and breadth.

But suppose you had to determine a height—for

example, how high this platform is from the pavement down

below there. Seeing that from any point in the platform we

may draw infinite lines, curved or straight, and all of

different lengths, to the infinite points of the pavement

below, which of all these lines would you make use of?

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

以上就是HTML 5-块级元素的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!

本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源:php中文网

html5块元素怎么理解,HTML5-块级元素相关推荐

  1. jquery 同级元素下的子元素_jq 获取所有父级元素及同级元素及子元素的方法(推荐)...

    1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id&quo ...

  2. css块元素与行内元素特点,CSS区分块级元素和行内元素

    块级元素(块级元素一般当做容器使用,既可以容纳内联元素也可以容纳块级元素) 特点: 1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行. 2.元素的高度.宽度.行高和顶底 ...

  3. 行内元素和块级元素:内联(行级)元素不能设置margin-top

    内联(行级)元素 不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-righ ...

  4. 浅谈块级元素和行级元素的相对定位和绝对定位问题

    以前我所学到的关于定位问题仅仅知道absolute是绝对定位,它可以让元素脱离标准流上浮,并且和float相比它可以让元素重叠在一起,后面的元素覆盖在前面的元素上. relative是相对定位,它使元 ...

  5. CSS块级元素和行内元素

    1. 宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代继承 2. 背景 (1)背景颜色 background-color:颜色值; 元素的背景颜色默认为transp ...

  6. html行级元素和块级元素以及css转换

    之前有说过html的标签是有语义的,当然也就有一些默认的样式,比如标题有h1···h6,他们的字体由大至小一次递减,字体比一般字体要加粗. 这样也就有了行级元素和块级元素,下面来看看什么是行级元素什么 ...

  7. 行内元素,块级元素div在一行显示

    行内元素,块级元素div在一行显示 行内元素无法设置padding-top,padding-bottom,margin-top,margin-bottom,width,height:除非将行内元素改为 ...

  8. html中哪个属性表示块级元素,HTML块级元素与行级元素

    转自:http://gkecenter.blog.163.com/blog/static/181380305201291745234195/ 一.两种类型 HTML中的大部分元素都可分为两种类型:块级 ...

  9. 常见的内联元素(inline)和块级元素(block)

    1.内联元素(inline): a – 锚点  abbr – 缩写  b – 粗体(不推荐)  big – 大字体  br – 换行  cite – 引用  code – 计算机代码(在引用源码的时候 ...

  10. HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)

    文章目录 一.闭合标签和空标签 二.位置特性(块级元素,行内元素,行级块元素) 块级元素(block) 行级元素(inline) 行内块元素(inline-block) 三.元素之间的转化 四.可替换 ...

最新文章

  1. 一些与算法有关的网站
  2. DynamicMethodHelper R2 2012-08-14 DynamicMethod ILGenerator.Emit
  3. 量子力学 一 基础6 厄尔米特算符的相容性
  4. overflow滚动条属性
  5. Android中你可能忽略的知识点(1)-分辨率那些事
  6. 【Cisco NA】单臂路由+DHCP+DHCP中继+GRE Tunnel
  7. python递归算法案例教案_Python电子教案2-1-Python程序实例解析.ppt
  8. php分页类怎么使用,PHP实现的分页类定义与用法示例
  9. 魔乐科技 oracle 视频,MLDN魔乐科技JAVA+Oracle数据库视频课程
  10. 天天生鲜—创建数据库
  11. 免费url长网址缩短压缩工具评测,短链接在线生成器推荐。
  12. xp提示计算机内存不足,虚拟内存不足怎么处理,教你电脑虚拟内存不足怎么处理...
  13. 基于html+css的购物网站前端页面【折扣社】前端网站
  14. ABB 120 六轴机械手臂编程调试(三)
  15. 通用局部搜索算法之WALKSAT
  16. 魏宇轩后台管理(1)_项目介绍
  17. linux设置自动更换壁纸
  18. 如何利用无线路由接收无线信号
  19. 杜克大学计算机专业本科入学条件,杜克大学本科申请条件有哪些?
  20. android环信登录成功但是收不到消息,Android环信即时通信遇到的问题及解决方法...

热门文章

  1. AutoCAD VBA对齐对象
  2. go 切片slice删除元素的方法
  3. docker ctr crictl命令对比图
  4. linux cp -d复制软链接文件
  5. postgresql常用数据类型:数值、日期、字符串类型
  6. Scala数组元素的增加(:+)方法
  7. Java基础--通过反射获取成员方法并使用
  8. IOUtils工具类复制输入输出流示例
  9. webpack-dev-server详细教程(专治学不会)
  10. Java正则表达式代码案例