欢迎访问 生活随笔!

凯发ag旗舰厅登录网址下载

当前位置: 凯发ag旗舰厅登录网址下载 > 前端技术 > html >内容正文

html

html5块元素怎么理解,html5-凯发ag旗舰厅登录网址下载

发布时间:2024/10/12 html 41 豆豆
凯发ag旗舰厅登录网址下载 收集整理的这篇文章主要介绍了 html5块元素怎么理解,html5-块级元素 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

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)!

本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈凯发ag旗舰厅登录网址下载的版权投诉

本文系统来源:php中文网

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的html5块元素怎么理解,html5-块级元素的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错,欢迎将凯发ag旗舰厅登录网址下载推荐给好友。

网站地图