注册本站  论坛  繁體中文

电脑技巧
手机 | MP3 | MP4 | 显卡 | 主板 | 显示器 | 光存储 | 笔记本 | 网络设备 | 移动存储 | 数码相机
键鼠 | CPU | 音箱 | GPS | 电视 | 服务器 | 投影机 | 机箱电源 | 品牌电脑 | 办公打印 |
| 网站首页 | Cisco | Windows | Linux | Java | Dotnet | Oracle | 网页设计 | 平面设计 | 安全 | 软件应用 | 电脑维修 | 办公维修 |
您现在的位置: 电脑技巧 >> 网页设计 >> HTML >> 网页设计正文

HTML5的结构和语义(3):语义性的块级元素

文章来源:Elliotte Harold 作者:佚名 更新时间:2008-3-20 12:53:36 【 】 【加入收藏
  HTML 5 还增加了一些纯语义性的块级元素: 

  aside  figure   dialog 

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

aside

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


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


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

figure

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


图 1. Install Mozilla XForms dialog 

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


  最重要的是,浏览器(尤其是屏幕阅读器)可以明确地将图和说明联系在一起。 
  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 对话


    dimensions of a surface; that is, length and breadth. </p>

    <p> 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? </p>
    </dd>
</dialog>
  对于这个元素的准确语法还有争议。一些人希望在 dialog 元素中嵌入非对话文本(比如剧本中的舞台说明),还有人不喜欢扩展 dt 和 dd 元素的作用。尽管在具体语法方面有争议,但是大多数人都认为以这样的语义性方式表达对话是好事情。 
  
  (待续)
  • 上一篇网页设计:

  • 下一篇网页设计:
  • 最 新 热 门
     Flash AS教程:decorator Pattern
     Flash AS教程:复制粘贴类
     Flash教程:彻底学习RadioButton组件
     Flash AS3教程:动态文本滚动条
     Flash教程:制作随机画圆弧动画
     全Flash动画网站的实现详细教程
     Flash 播放器的安全性设置
     Fireworks8教程:用素材制作炫酷的闪字效果
     Fireworks打造javascript图片提示效果
     Firewoks实例:铅笔图标
    最 新 推 荐
     HTML5 语义化结构化规范化
     改进网站设计提供的有意的建议
     HTML5中语义化 b 和 i 标签
     HTML5的结构和语义(5):交互
     网页教案,针对初学者的教案
     HTML5的结构和语义(5):内嵌媒体
     通过优化网页页面降低对内存及CPU的占用
     HTML5的结构和语义(4):语义性的内联元素
     HTML5的结构和语义(3):语义性的块级元素
     HTML5的结构和语义(2):结构
    相 关 文 章

    line-height使文本居中的3像素bug问题
    HTML5 语义化结构化规范化
    HTML5中语义化 b 和 i 标签
    HTML5的结构和语义(5):交互
    HTML5的结构和语义(5):内嵌媒体
    HTML5的结构和语义(4):语义性的内联元素
    HTML5的结构和语义(2):结构
    HTML5的结构和语义(1):前言
    XHTML 2.0新功能抢先预览
    使用createElement动态创建HTML对象

    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告

     

    Copyright 2006-2008 pcjx.com All Rights Reserved
    电脑技巧 版权所有 粤ICP备06059145号 地图
    本网站所有内容未经许可不得转载或做其他使用