热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML5中的新元素--结构和语义(2)

原文链接:http:www.ibm.comdeveloperworksweblibraryx-html5index.html2007-08-24|翻译:HTML5中
  原文链接:http://www.ibm.com/developerworks/web/library/x-html5/index.html

2007-08-24 | 翻译:HTML5中的新元素--结构和语义(2)

HTML5中的新元素--结构和语义(第二部分)
级别:入门
艾罗帝*拉斯蒂*哈罗德
理工大学副教授
2007年8月7日

结构
   

即便是组织良好的HTML页面在处理时也不够方便,原因是缺乏结构。你得分析标题的级别,才能确定某个段落的结尾在哪。侧栏,底部,头部,导航菜单,正文段落,以及个人简介[Individual stories]都通过“万能”的div来标记。而HTML5中增加了新元素,以便能够具体地将这些常用结构一一标记出来。

section: 表达的是书中的章节或部分,或是章节中的段落,更基本地说,它是在HTML4 中的任何带有自己的标题的东西。

header:  页面上显示出来的页眉,而不是head 元素。

footer:  页面的页脚印小号字体的地方,或是电子邮件的签名部分。

nav:     转到其他页面的链接集合
article:  博客、杂志、目录和类似东西中的独立条目。

举例:设想一个典型的博客首页,页眉在最顶部,页脚在最底部,还有一些条目,导航栏和侧栏,如表1:

表1:当前的一个典型的博客网页              

 
   
 


 
 

   
               
     

       

      "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
      Spring Comes (and Goes) in Sussex County


        
       

         

Yesterday I joined the Brooklyn Bird Club for our
          annual trip to Western New Jersey, specifically Hyper
          Humus, a relatively recently discovered hot spot. It
          started out as a nice winter morning when we arrived
          at the site at 7:30 A.M., progressed to Spring around
          10:00 A.M., and reached early summer by 10:15.


       

     

 
 
     

       

          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
           But does it count for your life list?


        
       

         

Seems you can now go           href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet
. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.


       

     

 
     

    
   
 

 
 
 

  

 
  
  

    即便在适当的地方都留出空格,大量嵌套的div还是相当令人困惑。在HTML 5中,你可以用语义更明确的元素来替代他们,如表2所示:

 

表2:HTML 5中的典型网页              

 
   
 

 
   

Mokka mit Schlag


 
 
               
     

       

        "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
         Spring Comes (and Goes) in Sussex County


        
       

Yesterday I joined the Brooklyn Bird Club for our
        annual trip to Western New Jersey, specifically Hyper
        Humus, a relatively recently discovered hot spot. It
        started out as a nice winter morning when we arrived at
        the site at 7:30 A.M., progressed to Spring around 10:00
        A.M., and reached early summer by 10:15.


     

 
 
     

       

          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
          But does it count for your life list?


        
         

Seems you can now go           href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet
. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.


     
    
   
 

 
 
 

   

Copyright 2007 Elliotte Rusty Harold


 

  

 
  
  
     所有的div都不需要了。文档中不同的部分都用标准的名称(带语义的标签)去表示,而不是使用具有特殊含义的class属性去标记那些div。这点对于音频装置、手机以及其他非标准的浏览器尤其重要。


块级语义元素

    除了结构元素之外, HTML 5 还增加了一些纯粹块级语义元素:

aside
figure
dialog

   我在写文章(比如这篇)或是写书时经常用到前两个元素,第三个元素我用得不太多,但它在很多书面文本中很常用。

aside

   aside用来表示注解(note)、小贴示(tip)、侧栏(sidebar)、醒目引文( pullquote)、括号里的话(parenthetical remark)和一些类似的在所记叙的主体之外的东西。比如developerWorks的文章中,你可以经常看到用table编写的侧栏,见表3
 


表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

 表4.用HTML 5写成的developerWorks侧栏

 
 
  浏览器会明白该将侧栏放在哪,这可能还需要一些CSS的帮助。

 

figure

figure这个元素表示的是一个块级别的有标题的图象。比如,在developerWorks的很多文章中,你会看到象表5中的标记,其结果见图1中。

 表5:在HTML 4中developerWorks的图表             
Figure 2. Install Mozilla XForms dialog

A Web site is requesting permission to install the following item:  <br>   Mozilla XForms 0.7 Unsigned  src="installdialog.jpg" border="0" hspace="5" vspace="5" />

 
 

图1,安装Mozilla XForms 对话

在HTML 5中,你可以用更有语义的方式来写它。如表6所示:

 

表6.用HTML 5写成的developerWorks 图表              


  Figure 2. Install Mozilla XForms dialog
  A Web site is requesting permission to install the following item:  <br>    Mozilla XForms 0.7 Unsigned    src="installdialog.jpg" border="0" hspace="5" vspace="5" />
 
 
  更重要的是,浏览器——特别是(screen readers)——可以清楚明确地找到标题对应的图片。       figure 这个元素不只局限于图片。它还可以用在有字幕的视频(caption audio)、音频(video)、iframe, 对象(object)和嵌入元素(embed elements)中。
  

dialog

dialog这个元素用来标识出几个人的谈话。

HTML 5中过多地使用dt元素来标记谈话者,同时也过多地使用dd元素用语标记谈话内容。这使得网页内容在较原始的浏览器上也能显示得还算说得过去。表7是 伽利略的著名对话的片断,题目是"关于两个主要世界体系的对话" 。

表7 HTML 5中伽利略的对话


 
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元素内部嵌入附加的非对话文本(比如舞台指示)such as stage directions),而另一些人则对dt 和 dd的过多的使用感到不满意。但几乎所有人都认为dialogue富有一些语意是件好事,尽管他们在确切的语意上还没达成一致。

 内联(inline)的语义元素

HTML 4有5个不同的行内元素,他们所代表计算机编码变量(variations of computer code)只有细微差别。他们是var, code, kbd, tt, 和samp。然而,在HTML 4中没有代表时间、数字、讽刺语这些基础特性的元素。 HTML 5 的目标是改变这种技术专家与普通作者之间的不平衡,于是它引入了一些新的行内元素。
    

mark

m这个元素代表以某种方式标记的文本,但这种标记并不一定是为了强调。你可以把它想象成一本书中被突出出来的文章 。一个典型的应用是Google的高速缓冲存储器存储的网页。当链接到这样的网页上时,你搜索的词语被标记出来。例如,你搜索"Egret",Google的高速缓冲存储器存储的网页上可能是这样标记的:


The Great Egret (also known as the
American Egret)  is a large white wading bird found worldwide.
The Great Egret flies with slow wing beats. The
scientific name of the Great Egret is Casmerodius
albus

  
  
这个元素的名字目前还有争论。它可能会在软件说明书 发布之前由 m改为 mark。

time

time元素代表一个具体的历史时刻。如 5:35 P.M., EST, April 23, 2007。举例:

I am writing this example at
.

 
  
  
    time元素帮助浏览器等识别HTML页面中的时间。对于这个元素的格式并没有特殊要求。但是,所有的 time 元素都要有一个日期时间属性,用一种机器可识别的形式表达时间,像这样:


I am writing this example at
.

 
  
  

    meter元素代表的是有界数值(a numeric value in a specified range)。比如,它可用来表示工资、法国大选中Le Pen的投票支持率或是测验的分数。在此,我用meter来标记一些数据,他们有关程序员的,发表在2007软件发展中。

An entry level programmer in Silicon Valley 
can expect to start around $90,000 per year.

 

 
 


    meter元素用来帮浏览器和其他客户端识别在HTML页面中出现的所有数值。这个元素的内容并不需要使用特定的格式。但是,所有的meter元素可以有多达六个属性,它们为这个数量提供信息,所用的形式更加便于机器识别。它们是:
value
min
low
high
max
optimum

它们都需要有一个十进制的数来指明对应数量的变化区间。比如,一次期末考试的分数可以写成这样:


Your score was 
B+.

 
  
  
这表示,在百分制下这位学生的分数是88.7。理论上的最低分数是0分,但实际的最低分是65,最高分是96,当然,理论上的最高分是100。浏览器可以通过某种meter control来显示这些信息,或通过tooltip提供额外数据。但大多数浏览器会像显示其他行内元素那样显示它。

progress

progress代表的是进度状况,像(GUI)应用中的进度条。比如,它可以告诉你文件下载的进度,或电影播放的进度。下面这个进度控制表明,下载完成了33%:

Downloaded: 
  33%

 
  
  
它的属性值(value attribute)显示了当前的运行情况。最大值表示这个程序需要完成的总量。在此,元素表达的意思是4,603,807字节中的1,534,602 字体已经下载完成。

你也可以做一个无结束(indefinite)的进度条,这只需要忽略最大值。

嵌入多媒体

音频在网络上很盛行,但它们大多是专属的。YouTube 使用Flash, Microsoft 使用 Windows Media, Apple 使用 QuickTime。嵌入的这种音频内容在一种浏览器下可读,在另一个浏览器下则不行。最终,WhatWG提议开发video 这个新元素,使它可以嵌入专属的音频格式。比如,我可以像这样在我的QuickTime电影中嵌入a Sora in Prospect Park:


 


表14  HTML 5 中的编辑菜单


   
   
   
   
   
   
 
  
  
菜单可以作为其他菜单的附属,来制作多级菜单。


总结:

    HTML 5 是未来网络的一部分。它的新元素使我们能够以更清楚、简单的方式把网页编辑得更明显易懂。Div和span仍然有用,但它们的用处已经远不如从前。很多网页可能不再需要使用它们了。

    虽然刚开始可能有些浏览器并不支持这些新元素,就像HTML刚出现时的img, table, object,和很多其他元素一样。同时,HTML对于不可识别元素的强制忽略( must-ignore )意味着使用老旧的浏览器的用户也可以阅读HTML 5 的页面。今天这一切可以实现。使用先进浏览器的用户可以享受新增功能,那些使用旧浏览器的人也没有被抛弃。

    对于等待新功能,八年是个不短的时间,尤其是在飞速发展的网络世界。重新带来了早些年里Netscape, Microsoft这些公司带给人们的激动,它们当时每隔几周就引入新的元素。同时,HTML 5小心地定义这些元素,使得我们大家能共同使用它。未来是光明的。


作者简介:
艾罗帝*拉斯蒂*哈罗德(Elliotte Rusty Harold) 出生在新奥尔良,现在他定期回那里喝一碗正宗的秋葵汤。他与妻子贝思、两只猫查木(得名于夸克)和玛乔丽(继承他的丈母娘的名字)定居在布鲁克林的Prospect Heights市。作为理工大学计算机科学副教授,他教Java 和面向对象的程序设计(object-oriented programming)。他的网站Cafe au Lait 是网上最受欢迎的个人java网站之一。他的派生网站(spin-off site), Cafe con Leche, 也是一个最受欢迎的XML 网站。今年底,他的另一本书Refactoring HTML将由Addison Wesley 出版。他目前在开发XOM API,编写XML 和the Jaxen XPath engine。


推荐阅读
  • Spring源码解密之默认标签的解析方式分析
    本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断,区分默认命名空间和自定义命名空间,并采用不同的解析方式。其中,bean标签的解析最为复杂和重要。 ... [详细]
  • 向QTextEdit拖放文件的方法及实现步骤
    本文介绍了在使用QTextEdit时如何实现拖放文件的功能,包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数,并结合QMimeData和QUrl等类,可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]
  • Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例,以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法,以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • Python正则表达式学习记录及常用方法
    本文记录了学习Python正则表达式的过程,介绍了re模块的常用方法re.search,并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具,通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]
  • 本文详细介绍了Spring的JdbcTemplate的使用方法,包括执行存储过程、存储函数的call()方法,执行任何SQL语句的execute()方法,单个更新和批量更新的update()和batchUpdate()方法,以及单查和列表查询的query()和queryForXXX()方法。提供了经过测试的API供使用。 ... [详细]
  • 标题: ... [详细]
  • CEPH LIO iSCSI Gateway及其使用参考文档
    本文介绍了CEPH LIO iSCSI Gateway以及使用该网关的参考文档,包括Ceph Block Device、CEPH ISCSI GATEWAY、USING AN ISCSI GATEWAY等。同时提供了多个参考链接,详细介绍了CEPH LIO iSCSI Gateway的配置和使用方法。 ... [详细]
  • 基于Socket的多个客户端之间的聊天功能实现方法
    本文介绍了基于Socket的多个客户端之间实现聊天功能的方法,包括服务器端的实现和客户端的实现。服务器端通过每个用户的输出流向特定用户发送消息,而客户端通过输入流接收消息。同时,还介绍了相关的实体类和Socket的基本概念。 ... [详细]
  • Postgresql备份和恢复的方法及命令行操作步骤
    本文介绍了使用Postgresql进行备份和恢复的方法及命令行操作步骤。通过使用pg_dump命令进行备份,pg_restore命令进行恢复,并设置-h localhost选项,可以完成数据的备份和恢复操作。此外,本文还提供了参考链接以获取更多详细信息。 ... [详细]
  • 本文介绍了设计师伊振华受邀参与沈阳市智慧城市运行管理中心项目的整体设计,并以数字赋能和创新驱动高质量发展的理念,建设了集成、智慧、高效的一体化城市综合管理平台,促进了城市的数字化转型。该中心被称为当代城市的智能心脏,为沈阳市的智慧城市建设做出了重要贡献。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 推荐系统遇上深度学习(十七)详解推荐系统中的常用评测指标
    原创:石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人,希望在平日的工作学习中,挖掘数据的价值, ... [详细]
  • springboot项目引入jquery浏览器报404错误的解决办法
    本文介绍了在springboot项目中引入jquery时,可能会出现浏览器报404错误的问题,并提供了解决办法。问题可能是由于将jquery.js文件复制粘贴到错误的目录导致的,解决办法是将文件复制粘贴到正确的目录下。如果问题仍然存在,可能是其他原因导致的。 ... [详细]
  • 模板引擎StringTemplate的使用方法和特点
    本文介绍了模板引擎StringTemplate的使用方法和特点,包括强制Model和View的分离、Lazy-Evaluation、Recursive enable等。同时,还介绍了StringTemplate语法中的属性和普通字符的使用方法,并提供了向模板填充属性的示例代码。 ... [详细]
author-avatar
jhb852
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有