HTML5的结构和语义——语义性的内联元素(四)

HTML4用5个不同的内联元素表示略有差异的计算机代码:var、code、kbd、tt 和 samp。但是,它无法表示时间、数字等基本数值。HTML 5 提供了几个新的内联元素来满足非技术作者的需求。 
   m
m 元素表示文本被 “加上标志”,但是不一定要强调。可以把它想像成书中突出显示的一节。Google 的缓存页面就是典型的用例。如果链接到一个缓存的副本,搜索词就被加上标志。例如,如果搜索 “Egret”,那么缓存的 Google 页面可能像下面这样:

   1: The Great <m>Egret</m> (also known as the
   2: American <m>Egret</m>)  is a large white wading bird found worldwide.
   3: The Great <m>Egret</m> flies with slow wing beats. The
   4: scientific name of the Great <m>Egret</m> is <i>Casmerodius
   5: albus</i>. 

   对于这个元素的名称当前还有争议。在规范发布之前,它可能从 m 改为 mark。 
time

time 元素表示一个时间值,比如 5:35 P.M., EST, April 23, 2007。例如:

   1: <p>I am writing this example at
   2: <time>5:35 P.M. on April 23rd</time>.
   3: </p> 

   time 元素可以帮助浏览器和其他程序识别出 HTML 页面中的时间。它不要求对元素内容应用任何特定的格式。但是,每个 time 元素都应该有一个 datetime 属性,其中包含更适合机器识别的时间值,比如:

   1: <p>I am writing this example at
   2: <time datetime="2007-04-23T17:35:00-05:00">5:35 P.M. on April 23rd</time>.
   3: </p> 

   适合机器读取的时间值可能对搜索引擎、日历程序等有帮助。 
meter

meter 元素表示指定范围内的数字值。例如,可以用它表示薪水、投票给 Le Pen 的法国选民的百分比或考试分数。在这里,我使用 meter 标出 Software Development 2007 上一位 Google 程序员提供的数据:

   1: <p>An entry level programmer in Silicon Valley 
   2: can expect to start around <meter>$90,000</meter> per year.
   3: </p> 

  meter 元素帮助浏览器和其他客户机识别 HTML 页面中的数量。它不要求对元素内容应用任何特定的格式。但是,每个 meter 元素可以有最多 6 个属性,它们按照更适合机器识别的形式表示这个数量: 
value 
min 
low 
high 
max 
optimum 
这些属性都应该包含一个十进制数字。例如,期末考试的分数可以写成下面这样:

   1: <p>Your score was 
   2: <meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.
   3: </p> 

   这表示这个学生的分数是百分制中的 88.7。可能的最低分数是 0,但是实际的最低分数是 65。可能的最高分数是 100,但是实际的最高分数是  96。用户代理可以用某种数值控件显示这一信息,也可以在工具提示中显示额外的数据,但是最常见的情况可能是像其他内联元素一样对它应用样式。 
progress

progress 元素表示一个正在进行的过程的状态,就像图形用户界面(GUI)应用程序中的进度条。例如,可以用它表示一个文件已经下载的百分比或者播放电影时的当前位置。下面这个进度控件表示下载已经完成了 33%:

   1: <p>Downloaded: 
   2:   <progress value="1534602" max="4603807">33%</progress>
   3: </p> 

   value 属性表示操作的当前状态。max 属性表示操作的总量。这个元素指出要下载的数据总量是 4,603,807 字节,已经下载了 1,534,602 字节。 
忽略 max 属性,就可以显示无限的进度。 
在操作进行时,应该使用 JavaScript 语言动态地更新进度条。在静态情况下,这个元素没什么意义。

转载自:52CSS

Read More

HTML5的结构和语义——语义性的块级元素(三)

     HTML 5 还增加了一些纯语义性的块级元素: 
aside figure  dialog
我在文章和书中一直使用前两个元素。第三个元素我不经常用,它主要用于书面文本。 
aside
aside 元素代表说明、提示、边栏、引用、附加注释等,也就是叙述主线之外的内容。例如,在 developerWorks 文章中,常常会看到用表格形式编写的边栏,见代码3 用 HTML 4 编写的 developerWorks 边栏。

   1: <table align="right" border="0" cellpadding="0" cellspacing="0" width="40%">
   2: <tbody><tr><td width="10">
   3: <img alt="" src="//www.ibm.com/i/c.gif" height="1" width="10"></td>
   4: <td>
   5: <table border="1" cellpadding="5" cellspacing="0" width="100%">
   6: <tbody><tr><td bgcolor="#eeeeee">
   7: <p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p>
   8: <p>
   9: The <code type="inline">.xf-value</code> selector used here styles the input
  10: field value but not its label. This is actually inconsistent
  11: with the current CSS3 draft. The example really should use the
  12: <code type="inline">::value</code> pseudo-class instead like so:
  13: </p>
  14: <table border="0" cellpadding="0" cellspacing="0" width="100%">
  15: <tbody><tr><td class="code-outline">
  16: <pre class="displaycode">input::value { width: 20em; }
  17: #ccnumber::value { width: 18em }
  18: #zip::value { width: 12em }
  19: #state::value { width: 3em  }</pre>
  20: </td></tr></tbody></table><br>
  21:  
  22: <p>
  23: However, Firefox doesn't yet support this syntax. 
  24: </p>
  25: </td></tr></table>

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

   1: <aside>
   2: <h3>.xf-value</h3>
   3: <p>
   4: The <code type="inline">.xf-value</code> selector used here styles the input
   5: field value but not its label. This is actually inconsistent
   6: with the current CSS3 draft. The example really should use the
   7: <code type="inline">::value</code> pseudo-class instead like so:
   8: </p>
   9:   
  10: <pre class="displaycode">input::value { width: 20em; }
  11: #ccnumber::value { width: 18em }
  12: #zip::value { width: 12em }
  13: #state::value { width: 3em  }</pre>
  14:  
  15: <p>
  16: However, Firefox doesn't yet support this syntax. 
  17: </p>
  18: </aside>

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

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

   1: <a name="fig2"><b>Figure 2. Install Mozilla XForms dialog</b></a><br />
   2: <img alt="A Web site is requesting permission to install the following item: 
   3:    Mozilla XForms 0.7 Unsigned" 
   4:   src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
   5: <br />

图 1. Install Mozilla XForms dialog 

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

   1: <figure id="fig2">
   2:   <legend>Figure 2. Install Mozilla XForms dialog</legend>
   3:   <img alt="A Web site is requesting permission to install the following item: 
   4:     Mozilla XForms 0.7 Unsigned" 
   5:     src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
   6: </figure>

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

   1: <dialog>
   2:     <dt>Simplicius </dt> 
   3:     <dd>According to the straight line AF,
   4:     and not according to the curve, such being already excluded
   5:     for such a use.</dd>
   6:  
   7:     <dt>Sagredo </dt> 
   8:     <dd>But I should take neither of them,
   9:     seeing that the straight line AF runs obliquely. I should
  10:     draw a line perpendicular to CD, for this would seem to me
  11:     to be the shortest, as well as being unique among the
  12:     infinite number of longer and unequal ones which may be
  13:     drawn from the point A to every other point of the opposite
  14:     line CD. </dd>
  15:  
  16:     <dt>Salviati </dt> 
  17:     <dd><p> Your choice and the reason you
  18:     adduce for it seem to me most excellent. So now we have it
  19:     that the first dimension is determined by a straight line;
  20:     the second (namely, breadth) by another straight line, and
  21:     not only straight, but at right angles to that which
  22:     determines the length. Thus we have defined the two
  23:     dimensions of a surface; that is, length and breadth. </p>
  24:  
  25:     <p> But suppose you had to determine a height—for
  26:     example, how high this platform is from the pavement down
  27:     below there. Seeing that from any point in the platform we
  28:     may draw infinite lines, curved or straight, and all of
  29:     different lengths, to the infinite points of the pavement
  30:     below, which of all these lines would you make use of? </p>
  31:     </dd>
  32: </dialog>

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

Read More

HTML5的结构和语义——结构

转载 52CSS

    由于缺少结构,即使是形式良好的 HTML 页面也比较难以处理。必须分析标题的级别,才能看出各个部分的划分方式。边栏、页脚、页眉、导航条、主内容区和各篇文章都由通用的 div 元素来表示。HTML 5 添加了一些新元素,专门用来标识这些常见的结构: 
· section:这可以是书中的一章或一节,实际上可以是在 HTML 4 中有自己的标题的任何东西 
· header:页面上显示的页眉;与 head 元素不一样 
· footer:页脚;可以显示电子邮件中的签名 
· nav:指向其他页面的一组链接 
· article:blog、杂志、文章汇编等中的一篇文章 
我们来考虑一个典型的 blog 主页,它的顶部有页眉,底部有页脚,还有几篇文章、一个导航区和一个边栏,见代码

  1 典型的 blog 页面

   1: <html>
   2:   <head>
   3:     <title>Mokka mit Schlag </title>
   4:  </head>
   5: <body>
   6: <div id="page">
   7:   <div id="header">
   8:     <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
   9:   </div>
  10:   <div id="container">
  11:     <div id="center" class="column">               
  12:       <div class="post" id="post-1000572">
  13:         <h2><a href=
  14:       "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
  15:       Spring Comes (and Goes) in Sussex County</a></h2>
  16:         
  17:         <div class="entry">
  18:           <p>Yesterday I joined the Brooklyn Bird Club for our
  19:           annual trip to Western New Jersey, specifically Hyper
  20:           Humus, a relatively recently discovered hot spot. It
  21:           started out as a nice winter morning when we arrived
  22:           at the site at 7:30 A.M., progressed to Spring around
  23:           10:00 A.M., and reached early summer by 10:15. </p>
  24:         </div>
  25:       </div>
  26:  
  27:  
  28:       <div class="post" id="post-1000571">
  29:         <h2><a href=
  30:           "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
  31:            But does it count for your life list?</a></h2>
  32:         
  33:         <div class="entry">
  34:           <p>Seems you can now go <a
  35:           href="http://www.wired.com/science/discoveries/news/
  36:           2007/04/cone_sf">bird watching via the Internet</a>. I
  37:           haven't been able to test it out yet (20 user
  38:           limit apparently) but this is certainly cool.
  39:           Personally, I can't imagine it replacing
  40:           actually being out in the field by any small amount.
  41:           On the other hand, I've always found it quite
  42:           sad to meet senior birders who are no longer able to
  43:           hold binoculars steady or get to the park. I can
  44:           imagine this might be of some interest to them. At
  45:           least one elderly birder did a big year on TV, after
  46:           he could no longer get out so much. This certainly
  47:           tops that.</p>
  48:         </div>
  49:       </div>
  50:  
  51:       </div>
  52:     
  53:     <div class="navigation">
  54:       <div class="alignleft">
  55:          <a href="/blog/page/2/">« Previous Entries</a>
  56:        </div>
  57:       <div class="alignright"></div>
  58:     </div>
  59:   </div>
  60:  
  61:   <div id="right" class="column">
  62:     <ul id="sidebar">
  63:       <li><h2>Info</h2>
  64:       <ul>
  65:         <li><a href="/blog/comment-policy/">Comment Policy</a></li>
  66:         <li><a href="/blog/todo-list/">Todo List</a></li>
  67:       </ul></li>
  68:       <li><h2>Archives</h2>
  69:         <ul>
  70:           <li><a href='/blog/2007/04/'>April 2007</a></li>
  71:           <li><a href='/blog/2007/03/'>March 2007</a></li>
  72:           <li><a href='/blog/2007/02/'>February 2007</a></li>
  73:           <li><a href='/blog/2007/01/'>January 2007</a></li>
  74:         </ul>
  75:       </li>
  76:     </ul>
  77:   </div>
  78:   <div id="footer">
  79:     <p>Copyright 2007 Elliotte Rusty Harold</p>
  80:   </div>
  81: </div>
  82:   
  83: </body>
  84: </html>

    即使有正确的缩进,这些嵌套的 div 仍然让人觉得非常混乱。在 HTML 5 中,可以将这些元素替换为语义性的元素,见代码2 用 HTML5编写的典型blog页面

   1: <html>
   2:  <head>
   3:     <title>Mokka mit Schlag </title>
   4:  </head>
   5: <body>
   6:   <header>
   7:     <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
   8:   </header>
   9:   <section>               
  10:       <article>
  11:         <h2><a href=
  12:         "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
  13:          Spring Comes (and Goes) in Sussex County</a></h2>
  14:         
  15:         <p>Yesterday I joined the Brooklyn Bird Club for our
  16:         annual trip to Western New Jersey, specifically Hyper
  17:         Humus, a relatively recently discovered hot spot. It
  18:         started out as a nice winter morning when we arrived at
  19:         the site at 7:30 A.M., progressed to Spring around 10:00
Read More

LanQQ – 飞鸽传输增加版

          LanQQ 修改自十分著名的飞鸽传输,在原传输功能基础上,增加了添加好友,聊天室等功能。俨然一个局域网版本的 QQ 聊天加文件传输工具。

lanqq

LanQQ 兼容原版本飞鸽传输,可以与原本同时工作,同时强调了聊天功能,总之,又是一个办公室杀手。

飞鸽传输 本身的局域网高速文件传输是十分受欢迎的。最近进入的实验室电脑中,均必备。

下载(335KB): easy-share | divshare | mediafire | 纳米

Read More

第 20 页,共 41 页« 最新...10...1819202122...3040...最旧 »