pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

HTML 5 中的新元素

新千年以來,超文本標(biāo)記語言(HTML)5 第一次向 HTML 中引入新的元素。新的結(jié)構(gòu)元素包括 aside 、 figure 和 section 。新的內(nèi)聯(lián)元素包括 time 、 meter 和 progress 。新的內(nèi)嵌元素有 video 和 aud
新千年以來,超文本標(biāo)記語言(HTML)5 第一次向 HTML 中引入新的元素。新的結(jié)構(gòu)元素包括 aside、figuresection。新的內(nèi)聯(lián)元素包括 timemeterprogress。新的內(nèi)嵌元素有 videoaudio。新的交互元素有 details、datagridcommand。

超文本標(biāo)記語言(HTML)的開發(fā)到 1999 年 HTML 4 就停止了。萬維網(wǎng)聯(lián)盟(W3C)把重點(diǎn)轉(zhuǎn)向?qū)?HTML 的底層語法從標(biāo)準(zhǔn)通用標(biāo)記語言(SGML)改為可擴(kuò)展標(biāo)記語言(XML),以及可縮放向量圖型(SVG)、XForms 和 MathML 這些全新的標(biāo)記語言。瀏覽器廠商則把精力放到選項卡和富站點(diǎn)摘要(RSS)閱讀器這類瀏覽器特性上。Web 設(shè)計人員開始學(xué)習(xí)使用異步 JavaScript + XML(Ajax),在現(xiàn)有的框架下通過層疊樣式表(CSS)和 JavaScript™ 語言建立自己的應(yīng)用程序。但是在接下來的八年中,HTML 本身沒有任何變化。

最近,它又復(fù)活了。三家重要的瀏覽器廠商 — Apple、Opera 和 Mozilla Foundation — 成立了 Web Hypertext Application Technology Working Group(WhatWG)來開發(fā)傳統(tǒng) HTML 的新版本。最近,W3C 也注意到了這些活動,也啟動了自己的新一代 HTML 項目,雙方的成員有很多是相同的。這兩個項目最終很可能合并。雖然很多細(xì)節(jié)還在爭論之中,但下一版本 HTML 的大體輪廓已經(jīng)清楚了。

Web 開發(fā)人員從 1999 年就一直期待 HTML 的新版本(通常稱為 HTML 5,但是也稱為 Web Applications 1.0),現(xiàn)在它終于發(fā)布了。它保持了 HTML 原來的特色:沒有名稱空間或模式。元素不必結(jié)束。瀏覽器會寬容地對待錯誤。p 仍然是 p,table 仍然是 table

如果在 1999 年將一位 Web 開發(fā)人員冷凍起來,現(xiàn)在再解凍,那么他會遇到一些新的讓人迷惑的元素。是的,他熟悉的元素(比如 div)仍然保留了;但是,HTML 現(xiàn)在還包含 section、header、footernav 等新元素。em、codestrong 仍然存在,但是增加了 meter、timemimgembed 仍然可用,但是還增加了 videoaudio。但是,他仔細(xì)觀察一下就會發(fā)現(xiàn),這些元素實(shí)際上沒什么區(qū)別。其中許多元素可能在 1999 年是開發(fā)人員需要而沒有得到的。通過與他已經(jīng)掌握的元素進(jìn)行簡單的類比,這些新元素都很容易理解。實(shí)際上,與 Ajax 或 CSS 相比,它們非常容易掌握。

最后,當(dāng)他打開 300MHz 的筆記本(運(yùn)行的是 Windows 98,也是在 1999 年冷凍起來的)時,他可能對 Netscape 4 和 Windows® Internet Explorer® 5 中顯示的新頁面效果很吃驚。當(dāng)然,這些老式瀏覽器不認(rèn)識新元素,會完全忽略它們,但是頁面仍然會顯示,內(nèi)容仍然是完整的。

這并不是什么虛構(gòu)的故事。HTML 5 的設(shè)計原則就是在不支持它的瀏覽器中能夠平穩(wěn)地退化。原因很簡單:我們都是這樣的 “原始人”。瀏覽器現(xiàn)在有選項卡、CSS 和 XmlHttpRequest,但是它們的 HTML 顯示引擎仍然停留在 1999 年的水平。除了用戶量大大增加之外,Web 其實(shí)在本質(zhì)上沒什么進(jìn)步。HTML 5 考慮到了這一點(diǎn)。它目前為 Web 開發(fā)人員一些真正的好處,隨著瀏覽器的緩慢升級,頁面瀏覽者會逐漸享受到這些好處。我們來看看 HTML 5 提供了什么。

結(jié)構(gòu)

由于缺少結(jié)構(gòu),即使是形式良好的 HTML 頁面也比較難以處理。必須分析標(biāo)題的級別,才能看出各個部分的劃分方式。邊欄、頁腳、頁眉、導(dǎo)航條、主內(nèi)容區(qū)和各篇文章都由通用的 div 元素來表示。HTML 5 添加了一些新元素,專門用來標(biāo)識這些常見的結(jié)構(gòu):

  • section:這可以是書中的一章或一節(jié),實(shí)際上可以是在 HTML 4 中有自己的標(biāo)題的任何東西
  • header:頁面上顯示的頁眉;與 head 元素不一樣
  • footer:頁腳;可以顯示電子郵件中的簽名
  • nav:指向其他頁面的一組鏈接
  • article:blog、雜志、文章匯編等中的一篇文章

我們來考慮一個典型的 blog 主頁,它的頂部有頁眉,底部有頁腳,還有幾篇文章、一個導(dǎo)航區(qū)和一個邊欄,見清單 1。


清單 1. 典型的 blog 頁面

                
<html>
  <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
<div id="page">
  <div id="header">
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </div>
  <div id="container">
    <div id="center" class="column">               
      <div class="post" id="post-1000572">
        <h2><a href=
      "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
      Spring Comes (and Goes) in Sussex County</a></h2>
        
        <div class="entry">
          <p>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. </p>
        </div>
      </div>


      <div class="post" id="post-1000571">
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
           But does it count for your life list?</a></h2>
        
        <div class="entry">
          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. 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.</p>
        </div>
      </div>

      </div>
    
    <div class="navigation">
      <div class="alignleft">
         <a href="/blog/page/2/">&laquo; Previous Entries</a>
       </div>
      <div class="alignright"></div>
    </div>
  </div>

  <div id="right" class="column">
    <ul id="sidebar">
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='/blog/2007/04/'>April 2007</a></li>
          <li><a href='/blog/2007/03/'>March 2007</a></li>
          <li><a href='/blog/2007/02/'>February 2007</a></li>
          <li><a href='/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="footer">
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </div>
</div>
  
</body>
</html>

 

即使有正確的縮進(jìn),這些嵌套的 div 仍然讓人覺得非常混亂。在 HTML 5 中,可以將這些元素替換為語義性的元素,見清單 2。


清單 2. 用 HTML 5 編寫的典型 blog 頁面

                
<html>
 <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
  <header>
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </header>
  <section>               
      <article>
        <h2><a href=
        "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
         Spring Comes (and Goes) in Sussex County</a></h2>
        
        <p>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. </p>
      </article>


      <article>
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
          But does it count for your life list?</a></h2>
        
          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. 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.</p>
      </article>    
    <nav>
      <a href="/blog/page/2/">&laquo; Previous Entries</a>
    </nav>
  </section>

  <nav>
    <ul>
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='/blog/2007/04/'>April 2007</a></li>
          <li><a href='/blog/2007/03/'>March 2007</a></li>
          <li><a href='/blog/2007/02/'>February 2007</a></li>
          <li><a href='/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <footer>
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </footer>
  
</body>
</html>

 

現(xiàn)在不再需要 div 了。不再需要自己設(shè)置 class 屬性,從標(biāo)準(zhǔn)的元素名就可以推斷出各個部分的意義。這對于音頻瀏覽器、手機(jī)瀏覽器和其他非標(biāo)準(zhǔn)瀏覽器尤其重要。


\
\
\
\
 
回頁首


 

語義性的塊元素

除了結(jié)構(gòu)性元素之外,HTML 5 還增加了一些純語義性的塊級元素:

  • aside
  • figure
  • dialog

我在文章和書中一直使用前兩個元素。第三個元素我不經(jīng)常用,它主要用于書面文本。

aside

aside 元素代表說明、提示、邊欄、引用、附加注釋等,也就是敘述主線之外的內(nèi)容。例如,在 developerWorks 文章中,常常會看到用表格形式編寫的邊欄,見清單 3。


清單 3. 用 HTML 4 編寫的 developerWorks 邊欄

                
<table align="right" border="0" cellpadding="0" cellspacing="0" width="40%">
<tbody><tr><td width="10">
<img alt="" src="//www.ibm.com/i/c.gif" height="1" width="10"></td>
<td>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td bgcolor="#eeeeee">
<p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p>
<p>
The <code type="inline">.xf-value</code> 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
<code type="inline">::value</code> pseudo-class instead like so:
</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr><td class="code-outline">
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em  }</pre>
</td></tr></tbody></table><br>

<p>
However, Firefox doesn't yet support this syntax. 
</p>
</td></tr></table>

 

在 HTML 5 中,可以按照更有意義的方式編寫這個邊欄,見清單 4。


清單 4. 用 HTML 5 編寫的 developerWorks 邊欄

                
<aside>
<h3>.xf-value</h3>
<p>
The <code type="inline">.xf-value</code> 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
<code type="inline">::value</code> pseudo-class instead like so:
</p>
  
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em  }</pre>

<p>
However, Firefox doesn't yet support this syntax. 
</p>
</aside>

 

瀏覽器可以決定把這個邊欄放在哪里(可能需要用一點(diǎn)兒 CSS 代碼)。

figure

figure 元素代表一個塊級圖像,還可以包含說明。例如,在許多 developerWorks 文章中,可以看到清單 5 這樣的標(biāo)記;其結(jié)果見圖 1。


清單 5. 用 HTML 4 編寫的 developerWorks 圖

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


圖 1. Install Mozilla XForms dialog
A Web site is requesting permission to install the following item: Mozilla XForms 0.7 Unsigned
 

在 HTML 5 中,可以按照更有語義性的方式編寫這個圖,見清單 6。


清單 6. 用 HTML 5 編寫的 developerWorks 圖

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

 

最重要的是,瀏覽器(尤其是屏幕閱讀器)可以明確地將圖和說明聯(lián)系在一起。

figure 元素不只可以顯示圖片。還可以使用它給 audiovideo、iframe、objectembed 元素加說明。

dialog

dialog 元素表示幾個人之間的對話。HTML 5 dt 元素可以表示講話者,HTML 5 dd 元素可以表示講話內(nèi)容。所以,在老式瀏覽器中也可以以合理的方式顯示對話。清單 7 顯示在 Galileo 的 “Dialogue Concerning the Two Chief World Systems” 上的一段著名對話。


清單 7. 用 HTML 5 編寫的 Galilean 對話

                
<dialog>
	<dt>Simplicius </dt> 
    <dd>According to the straight line AF,
	and not according to the curve, such being already excluded
	for such a use.</dd>

	<dt>Sagredo </dt> 
    <dd>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. </dd>

	<dt>Salviati </dt> 
    <dd><p> 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. </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>

 

對于這個元素的準(zhǔn)確語法還有爭議。一些人希望在 dialog 元素中嵌入非對話文本(比如劇本中的舞臺說明),還有人不喜歡擴(kuò)展 dtdd 元素的作用。盡管在具體語法方面有爭議,但是大多數(shù)人都認(rèn)為以這樣的語義性方式表達(dá)對話是好事情。


\
\
\

 
 


 

語義性內(nèi)聯(lián)元素

HTML 4 用 5 個不同的內(nèi)聯(lián)元素表示略有差異的計算機(jī)代碼:var、code、kbd、ttsamp。但是,它無法表示時間、數(shù)字等基本數(shù)值。HTML 5 提供了幾個新的內(nèi)聯(lián)元素來滿足非技術(shù)作者的需求。

m

m 元素表示文本被 “加上標(biāo)志”,但是不一定要強(qiáng)調(diào)??梢园阉胂癯蓵型怀鲲@示的一節(jié)。Google 的緩存頁面就是典型的用例。如果鏈接到一個緩存的副本,搜索詞就被加上標(biāo)志。例如,如果搜索 “Egret”,那么緩存的 Google 頁面可能像下面這樣:

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

 

對于這個元素的名稱當(dāng)前還有爭議。在規(guī)范發(fā)布之前,它可能從 m 改為 mark。

time

time 元素表示一個時間值,比如 5:35 P.M., EST, April 23, 2007。例如:

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

 

time 元素可以幫助瀏覽器和其他程序識別出 HTML 頁面中的時間。它不要求對元素內(nèi)容應(yīng)用任何特定的格式。但是,每個 time 元素都應(yīng)該有一個 datetime 屬性,其中包含更適合機(jī)器識別的時間值,比如:

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

 

適合機(jī)器讀取的時間值可能對搜索引擎、日歷程序等有幫助。

meter

meter 元素表示指定范圍內(nèi)的數(shù)字值。例如,可以用它表示薪水、投票給 Le Pen 的法國選民的百分比或考試分?jǐn)?shù)。在這里,我使用 meter 標(biāo)出 Software Development 2007 上一位 Google 程序員提供的數(shù)據(jù):

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

 

meter 元素幫助瀏覽器和其他客戶機(jī)識別 HTML 頁面中的數(shù)量。它不要求對元素內(nèi)容應(yīng)用任何特定的格式。但是,每個 meter 元素可以有最多 6 個屬性,它們按照更適合機(jī)器識別的形式表示這個數(shù)量:

  • value
  • min
  • low
  • high
  • max
  • optimum

這些屬性都應(yīng)該包含一個十進(jìn)制數(shù)字。例如,期末考試的分?jǐn)?shù)可以寫成下面這樣:

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

 

這表示這個學(xué)生的分?jǐn)?shù)是百分制中的 88.7??赡艿淖畹头?jǐn)?shù)是 0,但是實(shí)際的最低分?jǐn)?shù)是 65。可能的最高分?jǐn)?shù)是 100,但是實(shí)際的最高分?jǐn)?shù)是 96。用戶代理可以用某種數(shù)值控件顯示這一信息,也可以在工具提示中顯示額外的數(shù)據(jù),但是最常見的情況可能是像其他內(nèi)聯(lián)元素一樣對它應(yīng)用樣式。

progress

progress 元素表示一個正在進(jìn)行的過程的狀態(tài),就像圖形用戶界面(GUI)應(yīng)用程序中的進(jìn)度條。例如,可以用它表示一個文件已經(jīng)下載的百分比或者播放電影時的當(dāng)前位置。下面這個進(jìn)度控件表示下載已經(jīng)完成了 33%:

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

 

value 屬性表示操作的當(dāng)前狀態(tài)。max 屬性表示操作的總量。這個元素指出要下載的數(shù)據(jù)總量是 4,603,807 字節(jié),已經(jīng)下載了 1,534,602 字節(jié)。

忽略 max 屬性,就可以顯示無限的進(jìn)度。

在操作進(jìn)行時,應(yīng)該使用 JavaScript 語言動態(tài)地更新進(jìn)度條。在靜態(tài)情況下,這個元素沒什么意義。


\
\
\
\
 
回頁首


 

內(nèi)嵌的媒體

視頻已經(jīng)在 Web 上廣泛流行了,但是其格式幾乎都是專有的。YouTube 使用 Flash,Microsoft 使用 Windows Media®,Apple 使用 QuickTime。在一種瀏覽器中用來嵌入這些內(nèi)容的標(biāo)記在另一種瀏覽器中是無效的。因此,WhatWG 提議引入一個新的 video 元素,用來嵌入任意視頻格式。例如,可以用以下代碼嵌入我的 QuickTime 電影 “a Sora in Prospect Park”:

<video src="http://www.cafeaulait.org/birds/sora.mov" />
  

 

對于以哪種格式和解碼器作為首選,仍然有爭議??赡軙?qiáng)力推薦或要求使用 Ogg Theora。還可以可選地支持 QuickTime 等專有格式和 MPEG-4 等受專利限制的格式。實(shí)際使用的格式很可能由市場決定,就像是 GIF、JPEG 和 PNG 格式那樣(這些格式通過市場競爭壓倒了 BMP、X-Bitmap 和 JPEG 2000 等競爭者,成為 img 元素的首選格式)。

還提議引入 audio 元素。例如,可以使用以下代碼給 Web 頁面加上背景音樂:

<audio src="spacemusic.mp3"
    autoplay="autoplay" loop="20000" />
  

 

autoplay 屬性指示瀏覽器在裝載頁面后立即開始播放,而不等待明確的用戶請求。音頻循環(huán)播放 20,000 次,然后停止(或者在用戶關(guān)閉窗口或轉(zhuǎn)到另一個頁面時停止)。當(dāng)然,瀏覽器可以(而且應(yīng)該)允許用戶關(guān)閉內(nèi)嵌的媒體,不應(yīng)該只按頁面作者的要求去做。

瀏覽器必須支持 WAV 格式,還可以支持 MP3 等其他格式。

因為老式瀏覽器不支持這些元素,而且它們對于盲人和聾人用戶來說沒有意義,所以 audiovideo 元素可以包含額外的標(biāo)記,用來描述音頻和視頻的內(nèi)容。這對搜索引擎也有幫助。在理想情況下,這些標(biāo)記是音頻和視頻內(nèi)容的完整文字版本。例如,清單 8 顯示 John F. Kennedy 的就職演說。


清單 8. 用 HTML 5 編寫的 John F. Kennedy 的就職演說

                
<audio src="kennedyinauguraladdrees.mp3">
    <p>
    Vice President Johnson, Mr. Speaker, Mr. Chief Justice,
    President Eisenhower, Vice President Nixon, President Truman,
    Reverend Clergy, fellow citizens:
    </p>
    
    <p>
    We observe today not a victory of party, but a celebration of
    freedom -- symbolizing an end, as well as a beginning -- 
   signifying renewal, as well as change. For I have sworn before
    you and Almighty God the same solemn oath our forebears
    prescribed nearly a century and three-quarters ago.
    </p>
    
    <p>
    The world is very different now. For man holds in his mortal
    hands the power to abolish all forms of human poverty and all
    forms of human life. And yet the same revolutionary beliefs for
    which our forebears fought are still at issue around the globe -- 
    the belief that the rights of man come not from the
    generosity of the state, but from the hand of God.
    </p>
    
    <p>
    ...
    </p>
    
    </audio>


\
\
\
\
 
回頁首


 

交互

HTML 5 也被稱為 Web Applications 1.0。為了實(shí)現(xiàn)這個目標(biāo),增加了幾個為 Web 頁面提供交互體驗的新元素:

  • details
  • datagrid
  • menu
  • command

這些元素都可以根據(jù)用戶的操作和選擇改變顯示的內(nèi)容,而不需要從服務(wù)器裝載新頁面。

details

details 元素表示在默認(rèn)情況下可能不顯示的詳細(xì)信息??蛇x的 legend 元素可以提供詳細(xì)信息的摘要。details 元素的用途之一是提供腳注和尾注。例如:

The bill of a Craveri's Murrelet is about 10% thinner 
than the bill of a Xantus's Murrelet. 
<details>
<legend>[Sibley, 2000]</legend>
<p>Sibley, David Allen, The Sibley Guide to Birds, 
(New York: Chanticleer Press, 2000) p. 247
 </p>
</details>

 

沒有指定具體的顯示方式。瀏覽器可以選用腳注、尾注和工具提示等方式。

每個 details 元素可以有一個 open 屬性。如果設(shè)置了這個屬性,那么詳細(xì)信息在最初就顯示出來。如果沒有設(shè)置這個屬性,那么會隱藏它們,直到用戶要求顯示它們。無論是哪種情況,用戶都可以通過單擊一個圖標(biāo)或其他控件來顯示或隱藏詳細(xì)信息。

datagrid

datagrid 元素提供一個網(wǎng)格控件??梢杂盟@示樹、列表和表格,用戶和腳本可以更新這些界面元素。與之相反,傳統(tǒng)的表格主要用來顯示靜態(tài)數(shù)據(jù)。

datagrid 從它的內(nèi)容(一個 table、select 或其他 HTML 元素)獲得初始數(shù)據(jù)。例如,清單 9 中的 datagrid 包含一張成績表。在這個示例中,datagrid 的數(shù)據(jù)來自一個 table。更簡單的一維 datagrid 可以從 select 元素獲得數(shù)據(jù)。如果使用其他 HTML 元素,那么每個子元素成為網(wǎng)格中的一行。


清單 9. 成績表 datagrid

                
<datagrid>
  <table>
    <tr><td>Jones</td><td>Allison</td><td>A-</td><td>B+</td><td>A</td></tr>
    <tr><td>Smith</td><td>Johnny</td><td>A</td><td>C+</td><td>A</td></tr>
    <tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>
    <tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B+</td><td>A</td></tr>
  </table>
</datagrid>

 

這個元素與常規(guī)表格的區(qū)別在于,用戶可以選擇行、列和單元格;把行、列和單元格折疊起來;編輯單元格;刪除行、列和單元格;對網(wǎng)格排序;以及在客戶機(jī)瀏覽器中直接進(jìn)行其他數(shù)據(jù)操作。可以用 JavaScript 代碼監(jiān)視更新。Document Object Model(DOM)中增加了 HTMLDataGridElement 接口以支持這個元素(清單 10)。


清單 10. HTMLDataGridElement

                
interface HTMLDataGridElement : HTMLElement {
           attribute DataGridDataProvider data;
  readonly attribute DataGridSelection selection;
           attribute boolean multiple;
           attribute boolean disabled;
  void updateEverything();
  void updateRowsChanged(in RowSpecification row, in unsigned long count);
  void updateRowsInserted(in RowSpecification row, in unsigned long count);
  void updateRowsRemoved(in RowSpecification row, in unsigned long count);
  void updateRowChanged(in RowSpecification row);
  void updateColumnChanged(in unsigned long column);
  void updateCellChanged(in RowSpecification row, in unsigned long column);
};

 

還可以使用 DOM 在網(wǎng)格中動態(tài)地裝載數(shù)據(jù)。也就是說,datagrid 可以不包含那些提供初始數(shù)據(jù)的子元素??梢杂靡粋€ DataGridDataProvider 對象設(shè)置它(清單 11)。這樣就可以從數(shù)據(jù)庫、XmlHttpRequest 或者 JavaScript 代碼能夠訪問的任何資源裝載數(shù)據(jù)。


清單 11. DataGridDataProvider

                
interface DataGridDataProvider {
  void initialize(in HTMLDataGridElement datagrid);
  unsigned long getRowCount(in RowSpecification row);
  unsigned long getChildAtPosition(in RowSpecification parentRow, 
      in unsigned long position);
  unsigned long getColumnCount();
  DOMString getCaptionText(in unsigned long column);
  void getCaptionClasses(in unsigned long column, in DOMTokenList classes);
  DOMString getRowImage(in RowSpecification row);
  HTMLMenuElement getRowMenu(in RowSpecification row);
  void getRowClasses(in RowSpecification row, in DOMTokenList classes);
  DOMString getCellData(in RowSpecification row, in unsigned long column);
  void getCellClasses(in RowSpecification row, in unsigned long column, 
      in DOMTokenList classes);
  void toggleColumnSortState(in unsigned long column);
  void setCellCheckedState(in RowSpecification row, in unsigned long column, 
      in long state);
  void cycleCell(in RowSpecification row, in unsigned long column);
  void editCell(in RowSpecification row, in unsigned long column, in DOMString data);
};

 

menu 和 command

menu 元素實(shí)際上在 HTML 2 中就出現(xiàn)了。在 HTML 4 中廢棄了它,但是 HTML 5 又恢復(fù)了它并指定了新的意義。在 HTML 5 中,menu 包含 command 元素,每個 command 元素引發(fā)一個操作。例如,清單 12 是一個彈出警告框的菜單。


清單 12. HTML 5 菜單

                
<menu>
    <command onclick="alert('first command')"  label="Do 1st Command"/>
    <command onclick="alert('second command')" label="Do 2nd Command"/>
    <command onclick="alert('third command')"  label="Do 3rd Command"/>
</menu>

 

還可以用 checked="checked" 屬性將命令轉(zhuǎn)換為復(fù)選框。通過指定 radiogroup 屬性,可以將復(fù)選框轉(zhuǎn)換為單選按鈕,這個屬性的值是互相排斥的按鈕的組名。

除了簡單的命令列表之外,還可以使用 menu 元素創(chuàng)建工具欄或彈出式上下文菜單,這需要將 type 屬性設(shè)置為 toolbarpopup。例如,清單 13 顯示一個與 WordPress 等 blog 編輯器相似的工具欄。它使用 icon 屬性鏈接到按鈕的圖片。


清單 13. HTML 5 工具欄

                
<menu type="toolbar">
    <command onclick="insertTag(buttons, 0);"  label="strong" icon="bold.gif"/>
    <command onclick="insertTag(buttons, 1);"  label="em" icon="italic.gif"/>
    <command onclick="insertLink(buttons, 2);" label="link" icon="link.gif"/>
    <command onclick="insertTag(buttons, 3);"  label="b-quote" icon="blockquote.gif"/>
    <command onclick="insertTag(buttons, 4);"  label="del" icon="del.gif"/>
    <command onclick="insertTag(buttons, 5);"  label="ins" icon="insert.gif"/>
    <command onclick="insertImage(buttons);"   label="img" icon="image.gif"/>
    <command onclick="insertTag(buttons, 7);"  label="ul" icon="bullet.gif"/>
    <command onclick="insertTag(buttons, 8);"  label="ol" icon="number.gif"/>
    <command onclick="insertTag(buttons, 9);"  label="li" icon="item.gif"/>
    <command onclick="insertTag(buttons, 10);" label="code" icon="code.gif"/>
    <command onclick="insertTag(buttons, 11);" label="cite" icon="cite.gif"/>
    <command onclick="insertTag(buttons, 12);" label="abbr" icon="abbr.gif"/>
    <command onclick="insertTag(buttons, 13);" label="acronym" icon="acronym.gif"/>
</menu>

 

label 屬性提供菜單的標(biāo)題。例如,清單 14 顯示一個 Edit 菜單。


清單 14. HTML 5 Edit 菜單

                
<menu type="popup" label="edit">
    <command onclick="undo()"   label="Undo"/>
    <command onclick="redo()"   label="Redo"/>
    <command onclick="cut()"    label="Cut"/>
    <command onclick="copy()"   label="Copy"/>
    <command onclick="paste()"  label="Paste"/>
    <command onclick="delete()" label="Clear"/>
</menu>

 

菜單可以嵌套在其他菜單中,形成層次化的菜單結(jié)構(gòu)。


\
\
\
\
 
回頁首


 

結(jié)束語

HTML 5 是未來的 Web 的一部分。它的新元素會產(chǎn)生更干凈更簡單的代碼,讓頁面更容易理解。Divspan 仍然有用處,但是不會像以前那樣頻繁地使用它們了。許多頁面不再需要它們了。

盡管目前并非所有瀏覽器都支持這些元素,但這是 HTML 引入大多數(shù)新元素之后的普遍情況,比如 img、table、object 等等。隨著時間的推移,支持會逐漸完善。瀏覽器會忽略不認(rèn)識的 HTML 元素,這意味著老式瀏覽器的用戶仍然能夠閱讀 HTML 5 頁面,他們的瀏覽方式與以前一樣?,F(xiàn)代瀏覽器的用戶可以獲得更好的用戶體驗,但是沒有人會由于 HTML 5 新元素而妨礙瀏覽。

用 8 年時間等待新特性的出現(xiàn)實(shí)在是夠漫長的,尤其是在快速變化的 Web 世界中。在 Web 時代的早期,Netscape、Microsoft 和其他公司幾乎每周都會引入新元素,HTML 5 終于也為我們提供了一些令人興奮的東西。同時,它以一種謹(jǐn)慎得多的方式定義這些元素,讓我們可以放心地使用它們。前景是光明的。

【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測試外,其他素材未做測試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

這篇文章主要介紹了有關(guān)HTML5頁面在iPhoneX適配問題,需要的朋友可以參考下
本篇文章主要介紹了html5中canvas圖表實(shí)現(xiàn)柱狀圖的示例,本文使用canvas來實(shí)現(xiàn)一個圖表,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
Adobe公司出品的多媒體處理軟件產(chǎn)品線較多,涵蓋了音視頻編輯、圖像處理、平面設(shè)計、影視后期等領(lǐng)域。這篇文章主要介紹了Adobe Html5 Extension開發(fā)初體驗圖文教程,非常不錯,需要的朋
這篇文章主要介紹了基于HTML5的WebGL經(jīng)典3D虛擬機(jī)房漫游動畫,需要的朋友可以參考下
這篇文章主要介紹了關(guān)于h5中的fetch方法解讀(小結(jié)),fetch身為H5中的一個新對象,他的誕生,是為了取代ajax的存在而出現(xiàn),有興趣的可以了解一下
這篇文章主要介紹了html5實(shí)現(xiàn)移動端適配完美寫法,需要的朋友可以參考下
主站蜘蛛池模板: 空冷器|空气冷却器|空水冷却器-无锡赛迪森机械有限公司[官网] | 奇酷教育-Python培训|UI培训|WEB大前端培训|Unity3D培训|HTML5培训|人工智能培训|JAVA开发的教育品牌 | 宽带办理,电信宽带,移动宽带,联通宽带,电信宽带办理,移动宽带办理,联通宽带办理 | 合金耐磨锤头_破碎机锤头_郑州市德勤建材有限公司 | 上海噪音治理公司-专业隔音降噪公司-中广通环保 | 电动百叶窗,开窗器,电动遮阳百叶,电动开窗机生产厂家-徐州鑫友工控科技发展有限公司 | 阴离子_阳离子聚丙烯酰胺厂家_聚合氯化铝价格_水处理絮凝剂_巩义市江源净水材料有限公司 | 礼堂椅厂家|佛山市艺典家具有限公司 | 范秘书_懂你的范文小秘书 | 合景一建-无尘车间设计施工_食品医药洁净车间工程装修总承包公司 | COD分析仪|氨氮分析仪|总磷分析仪|总氮分析仪-圣湖Greatlake | PCB设计,PCB抄板,电路板打样,PCBA加工-深圳市宏力捷电子有限公司 | 披萨石_披萨盘_电器家电隔热绵加工定制_佛山市南海区西樵南方综合保温材料厂 | 安全,主动,被动,柔性,山体滑坡,sns,钢丝绳,边坡,防护网,护栏网,围栏,栏杆,栅栏,厂家 - 护栏网防护网生产厂家 | 楼梯定制_楼梯设计施工厂家_楼梯扶手安装制作-北京凌步楼梯 | 食安观察网| 化工ERP软件_化工新材料ERP系统_化工新材料MES软件_MES系统-广东顺景软件科技有限公司 | 立式_复合式_壁挂式智能化电伴热洗眼器-上海达傲洗眼器生产厂家 理化生实验室设备,吊装实验室设备,顶装实验室设备,实验室成套设备厂家,校园功能室设备,智慧书法教室方案 - 东莞市惠森教学设备有限公司 | 陕西自考报名_陕西自学考试网 | 5L旋转蒸发器-20L-50L旋转蒸发器-上海越众仪器设备有限公司 | 土壤养分检测仪|土壤水分|土壤紧实度测定仪|土壤墒情监测系统-土壤仪器网 | 不锈钢螺丝 - 六角螺丝厂家 - 不锈钢紧固件 - 万千紧固件--紧固件一站式采购 | 伺服电机维修、驱动器维修「安川|三菱|松下」伺服维修公司-深圳华创益 | 不锈钢/气体/液体玻璃转子流量计(防腐,选型,规格)-常州天晟热工仪表有限公司【官网】 | 废气处理_废气处理设备_工业废气处理_江苏龙泰环保设备制造有限公司 | 大型冰雕-景区冰雕展制作公司,3D创意设计源头厂家-[赛北冰雕] | PAS糖原染色-CBA流式多因子-明胶酶谱MMP-上海研谨生物科技有限公司 | 国产频谱分析仪-国产网络分析仪-上海坚融实业有限公司 | 石家庄小程序开发_小程序开发公司_APP开发_网站制作-石家庄乘航网络科技有限公司 | 淘趣英语网 - 在线英语学习,零基础英语学习网站 | 仓储笼_金属箱租赁_循环包装_铁网箱_蝴蝶笼租赁_酷龙仓储笼租赁 测试治具|过炉治具|过锡炉治具|工装夹具|测试夹具|允睿自动化设备 | 龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司_龙门加工中心-数控龙门加工中心厂家价格-山东海特数控机床有限公司 | 安徽合肥项目申报咨询公司_安徽合肥高新企业项目申报_安徽省科技项目申报代理 | 周口风机|周风风机|河南省周口通用风机厂| 新能源汽车教学设备厂家报价[汽车教学设备运营18年]-恒信教具 | 硬质合金模具_硬质合金非标定制_硬面加工「生产厂家」-西迪技术股份有限公司 | 据信,上课带着跳 D 体验-别样的课堂刺激感受引发网友热议 | 软装设计-提供软装装饰和软装配饰及软装陈设的软装设计公司 | 电磁流量计厂家_涡街流量计厂家_热式气体流量计-青天伟业仪器仪表有限公司 | 安德建奇火花机-阿奇夏米尔慢走丝|高维|发那科-北京杰森柏汇 | 保镖公司-私人保镖-深圳保镖公司【环宇兄弟保镖】 |