DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5 教程(四) - 內聯元素
HTML5 教程(四) - 內聯元素
編輯:HTML5詳解     

HTML4用5個不同的內聯元素表示略有差異的計算機代碼:var、code、kbd、tt 和 samp。但是,它無法表示時間、數字等基本數值。Html 5 提供了幾個新的內聯元素來滿足非技術作者的需求。

m

  m 元素表示文本被 “加上標志”,但是不一定要強調。可以把它想像成書中突出顯示的一節。Google 的緩存頁面就是典型的用例。如果鏈接到一個緩存的副本,搜索詞就被加上標志。例如,如果搜索 “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>.
 
  對於這個元素的名稱當前還有爭議。在規范發布之前,它可能從 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 頁面中的時間。它不要求對元素內容應用任何特定的格式。但是,每個 time 元素都應該有一個 datetime 屬性,其中包含更適合機器識別的時間值,比如:

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

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

meter 

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

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

  meter 元素幫助浏覽器和其他客戶機識別 Html 頁面中的數量。它不要求對元素內容應用任何特定的格式。但是,每個 meter 元素可以有最多 6 個屬性,它們按照更適合機器識別的形式表示這個數量:
  value
  min
  low
  high
  max
  optimum
  這些屬性都應該包含一個十進制數字。例如,期末考試的分數可以寫成下面這樣:

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

  這表示這個學生的分數是百分制中的 88.7。可能的最低分數是 0,但是實際的最低分數是 65。可能的最高分數是 100,但是實際的最高分數是 96。用戶代理可以用某種數值控件顯示這一信息,也可以在工具提示中顯示額外的數據,但是最常見的情況可能是像其他內聯元素一樣對它應用樣式。

progress

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

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

  value 屬性表示操作的當前狀態。max 屬性表示操作的總量。這個元素指出要下載的數據總量是 4,603,807 字節,已經下載了 1,534,602 字節。
  忽略 max 屬性,就可以顯示無限的進度。
  在操作進行時,應該使用 JavaScript 語言動態地更新進度條。在靜態情況下,這個元素沒什麼意義。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved