【HTML學習】第四章更豐富的內容標記方法

4.1 以前的表現式元素與助手

舊式的字體樣式化元素和強調語義的標籤比較——
：原來是斜體，現在用於“另一種語音”形式的文本。
：原來是粗體，現在用於“文本補償”文本。
：原來是強調，現在是指“重音強調”。
：原來是強烈強調，現在表示“特別重要”。

HTML5中已經變形爲媒體獨立語義的四個元素：
：原來用於較小字體的文本，現在用於“旁註”。
<hr>：原來是一條水平線，現在用於“段落級的主題分隔”。
<s>原來是刪除線，現在用於表示“不再相關或不準確”的內容。
：原來是下劃線文本，現在用於發音不清、或雖顯式渲染但非正文註釋的文本。

4.1.1 賦予``和``元素新的語義含義

在 HTML 4.01 中， 標籤呈現斜體的文本。然而，在 HTML5 中沒有必要這麼做，可以使用樣式表來格式化  元素中的文本。
根據 HTML 5 的規範， 標籤應該做爲最後的選擇，只有在沒有其他標記比較合適時才使用它。HTML 5 規範聲明：標題應該用 <h1> - <h6> 標籤表示，被強調的文本應該用 標籤表示，重要的文本應該用  標籤表示，被標記的或者高亮顯示的文本應該用 標籤表示。

其他相關標籤

<!DOCTYPE html>
<html>
<body>

<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<dfn>Definition term</dfn><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>

</body>
</html>

Emphasized text
Strong text
Definition term
A piece of computer code
Sample output from a computer program
Keyboard input
Variable

 標籤是一個短語標籤，用來呈現爲被強調的文本。
 標籤是一個短語標籤，用來定義計算機程序的樣本重要的文本。
提示：我們並不反對使用這個標籤，但是如果您只是爲了達到某種視覺效果而使用這個標籤的話，我們建議您使用 CSS ，這樣可能會取得更豐富的效果。

4.1.2 ``元素

文本並不需要小於周圍的文字，如果想要更小的文字，請使用CSS。

4.1.3 `<hr>`元素

在 HTML5 中，<hr> 定義內容中的主題變化，並顯示爲一條水平線。在 HTML 4.01 中，所有的佈局屬性都已廢棄。在 HTML5 中不再支持這些屬性。請使用 CSS 來爲 <hr> 元素定義樣式。

4.1.4 `<s>`元素以及`<del>`和`<ins>`元素

HTML5 重定義了 <s> 元素，現在是被用來定義那些不再正確的文本。

<del>和<ins>是分句元素或流元素中比較獨特的元素，所以它們可以出現在元素的內部或包含元素。不要del的開標籤在一個塊級元素中，而閉標籤在另一個元素中。

<del> 和 <ins> 一起使用，描述文檔中的更新和修正。瀏覽器通常會在已刪除文本上添加一條刪除線，在新插入文本下添加一條下劃線。

<del>和<ins>都有兩個可選的屬性，cite屬性用於添加一個頁面的URL，以給出更多信息。

<del cite="/edits/r102.html">

detetime屬性用於記錄編輯的日期和時間，其格式是：

年-月-日 T 小時：分鐘：秒 時區

4.1.5 ``元素

HTML5 中衝定義了  元素，它定義與常規文本風格不同的文本，像拼寫錯誤的單詞或者漢語中的專有名詞。

請儘量避免使用  爲文本加下劃線，用戶會把它混淆爲一個超鏈接，HTML5 規範建議開發者儘量使用其他元素替代  元素。

4.2 帶有`<a>`元素的塊級鏈接

在 HTML 4.01 中，<a> 標籤既可以是超鏈接，也可以是錨。在 HTML5 中，<a> 標籤是超鏈接，但是假如沒有 href 屬性，它僅僅是超鏈接的一個佔位符。

4.3 其他HTML4略有變化的元素

4.3.1 `<ol>`元素及其新（舊）屬性

type屬性指定列表的樣式。
start屬性能讓我們設置有序列表的第一個計數器，便於一個列表分割成幾個<ol>元素，而相應的value屬性能夠對<li>設置一個值，使我們能夠手工設置一個或多個列表項的序號。
reversed是一個全新的屬性，並能讓我們創建遞減列表。

4.3.2 `<dl>`元素

在 HTML 4.01 中，<dl> 標籤定義一個定義列表。
在 HTML5 中，<dl> 標籤定義一個描述列表。

4.3.3 `<cite>`元素

在 HTML5 中，<cite> 標籤定義作品的標題。
在 HTML 4.01 中，<cite> 標籤定義一個引用。

4.4 新的語義化元素

4.4.1 ``元素

這一新元素是用來表示你想特別加亮或需要吸引注意力的文本，但並不改變該文本的重要性或強調。

4.4.2 Ruby註釋：`<ruby>`、`<rt>`和`<rp>`

<ruby> 標籤定義 ruby 註釋（中文註音或字符）。
<rt> 標籤定義字符（中文註音或字符）的解釋或發音。
<rp> 標籤在 ruby 註釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內容。
將 <ruby> 標籤與 <rt> 和 <rp> 標籤一起使用：
<ruby> 元素由一個或多個需要解釋/發音的字符和一個提供該信息的 <rt> 元素組成，還包括可選的 <rp> 元素，定義當瀏覽器不支持 “ruby” 元素時顯示的內容。

使用<rt>，只要記住封裝在<rt>中的簡單字符，是它前面複雜文本的<ruby>註釋即可。而添加<rp>元素，在不支持的瀏覽器中，ruby文本的顯示使用了HTML降級的備用文本。

4.4.3 `<time>`元素

<time> 標籤定義公曆的時間（24 小時制）或日期，時間和時區偏移是可選的。該元素能夠以機器可讀的方式對日期和時間進行編碼，這樣，舉例說，用戶代理能夠把生日提醒或排定的事件添加到用戶日程表中，搜索引擎也能夠生成更智能的搜索結果。

4.5 擴展HTML5

4.5.1 `<data>`元素

<data>元素用於表現其內容，並在其value屬性中包含該內容的機器可讀形式。使用微數據和潛在的微格式是一種很好的方式，這讓我們能夠將腳本數據與人類可讀的等效數據關聯在一起。其唯一的限制是<data>必須有value屬性，該屬性必須是元素內容的一種表現形式。

The Karman Line is <data value="100km">62 miles</data> above the Earth's sea level...

4.5.2 自定義的data屬性(data-*)

你可能需要在HTML中存儲一些讓JavaScript使用的值。HTML5引入了自定義的data屬性（data-）。“data-*”的名字由全局屬性“data-”加上你要使用的名字所組成。
例如響應式圖像，在這些地方默認會用一些小圖像進行顯式，然後用JavaScript在大屏幕設備上替換成大圖像。我們可以用data-*直接將這種大圖像直接存儲在<img>元素中：

<img src="picture.small.jpg" data-fullsrc="picture.large.jpg">

然後腳本可以在相應的設備上將它更新爲：

<img src="picture.large.jpg" data-smlsrc="picture.small.jpg">

4.5.3 微格式

微格式是以機器可讀的語義對HTML進行擴展的一種簡單方式，其設計宗旨首先是人類可讀，機器可讀次之。

4.5.4 微格式的輕量級介紹

用於許可信息的”rel-license”
添加許可信息是十分常見的活動，而且我們可以對Creative Commons或其他許可添加一個鏈接就足夠了，讀者通常必須閱讀這種許可信息才能理解有關內容的許可。
如果這種信息是機器可讀的，將會對搜索具有特定許可內容的用戶有所幫助。通過對相應鏈接添加一個rel=”lincense”這樣的rel-license微格式，便可完成這一工作。

<small>This article is licensed under a <a rel="license" 
href="http://creativecommons.org/lincenses/by-nc-sa/2.0/">Creative Commons Attribution Non-commercial Share-alike (By-<abbr>NC</abbr>--<abbr>SA</abbr>) license</a></small>

這種基本的微格式已經成爲HTML5的一部分而作爲一種鏈接類型，可將其作爲一種rel=”“類型的值添加到<a>、<link>或<area>元素上。
2. 使用XHTML Friends Networks(XFN)
這是一種指定你與他人關係的方式——對指向他們主頁的鏈接中使用這種rel屬性。該屬性主要有三種值：

rel=”contact”：你知道如何取得聯繫的人
rel=”me”：讓你能夠聲明自己的網站，包括你在社交網的賬號
rel=”author”：指向當前文章作者的鏈接

<p>Oli Studholme -<a rel="me" href="https://twitter.com/boblet">follow me on Twitter (@boblet)</a></p>

一個理解XFN的社交網站應用程序便能夠確認@boblet是我，檢查出我在Twitter上的朋友們，檢查這些人是否已經註冊，然後讓我能夠一個單擊就可以關注他們——太容易了。
3. 用於聯繫信息的hCard
幾乎每個網站都有包含聯繫信息的About頁面：

<p>By Oli Studholme - <a href="http://oli.jp">http://oli.jp</a>,or <a href="http://twitter.com/boblet">follow me on Twitter (@boblet)</a>.</p>

如果這種數據是機器可讀的，我們便能夠使用工具來導入它。下面的代碼添加了hCard微格式：

<p class="vcard">By <span class="fn">Oli studholme</span> - <a class="url" href="http://oli.jp/">http://oli.jp</a>, or <a class=url" href="http://twitter.com/boblet">follow me on Twitter (@<span class="nickname">boblet</span>)</a>.</p>

我們添加的class如下：
vcard，放在容器元素上，他表明這裏有微格式化的hCard數據。
fn，意指全名（fn——full name）
url，用於關聯主頁
nickname，暱稱

使用HTML5的微格式

4.5.5 微數據：HTML5的語義點綴

微數據和微格式的主要區別是：
微數據使用了新的全局屬性，而不是“重載的”class屬性
微數據是機器可解析的，無需所用詞彙方面的知識。
雖然我們建議標記的值是頁面內容的一部分，但頁面內容更與微數據條目之間並不存在內在的聯繫。
對於書上的內容有點難理解，所以在網上找了些資料，發現下面的資料講述的比書本上的內容要細緻，特意摘了出來。我這裏只對資料中未重點提及的實戰內容進行補充——

4.5.7 微數據實戰

微數據用途之一就是添加一些可以通過JavaScript進行操作的附加語義或數據，這與自定義data特性（data-*）所採取的方式是類似的。但是如果我們採用取自itemtype的詞彙，或基於URL的itemprop名稱，微數據會明顯變得更加強大。儘管微數據不需要知道詞彙表也是機器可讀的，但是我們一旦使用了詞彙表，其他人就能夠知道我們所用屬性的具體含義，實際上使用詞彙表會使微數據成爲內容的一種輕量級API。
那麼，我們在哪裏可以找到這種詞彙表呢？
1.使用schema.org詞彙表
通過使用這些詞彙，我們便能夠以這些搜索引擎可以理解的方式傳達出內容的語義信息。shema.org詞彙表引起爭議的一點是目前它只支持微數據。

對於HTML5微數據內容補充：

一、對於HTML微數據的定義

HTML5 微數據規範是一種標記內容以描述特定類型的信息，例如評論、人物信息或事件。每種信息都描述特定類型的項，例如人物、事件或評論。例如，事件可以包含 venue、starting time、name 和 category 屬性。
微數據使用 HTML 標記（常爲  或 <div>）中的簡單屬性爲項和屬性指定簡要的描述性名稱。
上面的釋義過於學術化，我們可以將其擱置一邊，先看個簡單的關於微數據的例子。平時，我們要在頁面上顯示對一個人的描述，HTML代碼可能如下：

<div>
  我的名字是王富強，但大家叫我小強。我的個人首頁是：
  <a href="http://www.example.com">www.example.com</a>
  我住在上海市富貴新村。我是工程師，目前在財富科技公司上班。
</div>

而如果使用針對人物的微數據標記，則HTML會如下：

<div itemscope itemtype="http://data-vocabulary.org/Person">
  我的名字是<span itemprop="name">王富強</span>，
  但大家叫我<span itemprop="nickname">小強</span>。
  我的個人首頁是：
  <a href="http://www.example.com" itemprop="url">www.example.com</a>
  我住在上海市富貴新村。我是<span itemprop="title">工程師</span>，
  目前在<span itemprop="affiliation">財富科技公司</span>上班。
</div>

您會發現，HTML代碼量多了不少，還出現了很多自定義的屬性，如itemscope, itemtype, itemprop等。這些屬性就是方面機器識別的特定的標記。其含義等依次如下：
1.itemscope
定義一組名值對，稱爲項。
2.itemprop=”屬性名”
添加一個數據項屬性。這個屬性名可以是個單詞或是個URL，與元素包含的文本值相關：

對於大部分元素，屬性名值就是元素標籤裏面的文本值（不是所有標籤）。
對於有URL屬性的元素，該值就是URL（如<img src="">, <a href="">, <object data="">等）。
對於<time>元素，該值就是datetime=""屬性。
對於<meta> itemprop="" content="">，該值就是content=""屬性。

3.itemref=””
允許微數據項通過指向特定ID（含有需要屬性的元素）包含非後代屬性。
4.itemtype=””
微數據定義的類型。其值爲URL，扮演詞彙表名稱的作用。
5.itemid=”“
允許詞彙表給微數據項定義一個全局標識符，例如書的ISBN數值，在同樣元素上使用itemid作爲數據項的itemscope和itemtype屬性。

微數據語法

1.itemscope和itemprop
先來個小例子：

<p itemscope>下週我要去<span itemprop="name">韓紅剛</span>家拔蘿蔔</p>

元素上的itemscope使其成爲了一個微數據項，其子元素上itemprop屬性的值name爲詞彙表中的一個關鍵屬性。一個微數據項至少有一個驗證的itemprop。
itemprop後面的名稱可以是單詞，也可以是URL，使用URL讓這個名稱全局唯一。如果使用單詞的話，最好使用詞彙表，這個單詞在該詞彙表中有定義，同樣可以讓名稱唯一。

2.itemprop值
對於一些元素，itemprop值來自元素的屬性，像是datetime屬性或是content屬性。還是拔蘿蔔的例子：

<p itemscope><time itemprop="date" datetime="2011-12-05">下週</time>我要去 <a itemprop="url" href="http://weibo.com/u/2499612703">韓紅剛</a>家拔蘿蔔</p>

定義了兩個itemprop下的屬性值url和date，所包含的值就是一個url地址（不是元素內的文本值韓紅剛）和一個特定格式的時間。
在微數據中，下面的元素以它們的URLs爲值：

<a href="">
<area href="">
<audio src="">
<embed src="">
<iframe src="">
<img src="">
<link href="">
<object data="">
<source src="">
<video src="">

相反，以下HTML5元素URL包含屬性不作爲屬性值使用：

<base href="">
<script src="">
<input src="">

上面兩個例子，我們可以來個簡單的整合，如下：

<p itemscope><time itemprop="date" datetime="2011-12-05">下週</time>我要去 <a itemprop="url" href="http://weibo.com/u/2499612703"><span itemprop="name">韓紅剛</span></a>家拔蘿蔔</p>

將itemprop=”name”嵌入在鏈接之中了。
嵌套項
我們可以給包含itemprop的元素添加itemscope插入嵌套項。

<p itemscope><span itemprop="name">五月天</span>主唱是<span itemprop="members"
  itemscope><span itemprop="name">阿信</span>。</span></p>

定義了一個項，有兩個關鍵字屬性：name和members。該name是五月天，members則是嵌套項，包含了一個值爲阿信的屬性name。注意到members並無文本值。
像上面p標籤這種父輩元素沒有任何一個微數據項的微數據項稱爲“頂級微數據項”。微數據API返回的是頂級數據項及其對應的屬性，以及其中嵌套的子數據項。
多屬性
先看例子：

<span itemprop="members" itemscope>前S˙H˙E 的成員是
  <span itemprop="name">任家萱</span>，
  <span itemprop="name">田馥甄</span>和
  <span itemprop="name">陳嘉樺</span>.</span>

項目可以包含不同值的多個屬性。例如上例name屬性定義了3個值：任家萱、田馥甄和陳嘉樺。
同一個元素同樣也可以有多個屬性關鍵名稱（用空格分隔），例如下面這個例子：

<p itemscope><span itemprop="name call">志玲姐</span>
 是個美女。</p>

“志玲姐”即是名字，又是稱謂。
通過itemref頁面內引用
還是先看個例子吧：

<p itemscope itemref="band-members">後天我要去看<span itemprop="name">
S˙H˙E</span>的演唱會，好興奮哈！</p>
……
<span id="band-members" itemprop="members" itemscope>S˙H˙E 的成員是
  <span itemprop="name">任家萱</span>，
  <span itemprop="name">田馥甄</span>和
  <span itemprop="name">陳嘉樺</span>.</span>

上面的定義通過引用ID band-members包含了members項的三個成員名稱屬性，每個都是不一樣的值。
使用meta添加內容
如果你想添加的文本並不是頁面內容的一部分，你可以在元素上使用content屬性：<meta itemprop="" content="">
舉個小例子：

<p itemscope><span itemprop="name" itemscope>
   鍾欣桐<meta itemprop="likes" content="twins成員">
  </span>攝影愛好者陳老師的粉絲。</p>

不過，有些遺憾的是，某些瀏覽器會自動把<meta>元素移動到head標籤中。比較靠譜的做法是使用itemref做頁面內引用，這樣即使瀏覽器移除了，一些工具啥的還是能夠識別出微數據。具體做法如下：

<p itemscope><span itemprop="name" itemscope itemref="meta-likes">
   鍾欣桐<meta id="meta-likes" itemprop="likes" content="twins成員">
  </span>攝影愛好者陳老師的粉絲。</p>

項類型(itemtype)及全局唯一名字
通過itemtype，我們可以給微數據項指定一種類型，這個屬性需要使用在含itemscope的元素上。itemtype的值是個URL地址，代表了微數據使用的詞彙。請注意，這個地址只能是文本字符串，用來唯一標示詞彙表，同時，該地址不一定非要指向真是的網頁地址（當然，指向最好了）。這樣我們就可以使用詞彙表中的name名稱作爲itemprop名稱做些定義了。
例如，下面這個例子：

<p itemscope itemtype="http://schema.org/MusicGroup">後天我要去看<span itemprop="name">
S˙H˙E</span>的演唱會，好興奮哈！</p>

http://schema.org/MusicGroup詞彙表中有個名爲”name”的關鍵名稱，如下截圖：

用itemid全局標識
有時，某些項需要唯一的標識進行標識。例如書的ISBN數值，我們可以藉助itemid屬性，如下例子：

<p itemscope itemtype="http://vocab.example.com/book"
  itemid="urn:isbn:0321687299">
  <!-- 書信息… -->
</p>

三、微數據幹什麼用？

說了這麼多，你可能會有疑問或不耐煩了：微數據這玩意，貌似蠻複雜，頭疼的，看上去鳥用都沒有，唉，還是按ctrl+w去微博轉轉吧~~
爲了打消這種疑慮，有必要中間插播介紹了微數據的真正體。我們可能都知道，給元素添加額外的語義東西，可以使用自定義data屬性(data-*)。但是，自定義data屬性只是純粹的屬性，而微數據有特定的規範，有特定屬性名稱的詞彙表，且更多是服務於現實世界，在這方面是很強大的。
說得太空太虛了吧？確實，過於學術化的說法往往不易讓人理解。通俗講，微數據就是在保證頁面內容顯示良好的情況下清晰而準確地勾勒出了數據的骨架與精髓，可以通過工具、API等進行方便強大的數據交互。
我們都知道，現在流行的數據交換格式是什麼？沒錯，就是JSON。從某種意義上來講，微數據的本質就是JSON，哦？沒看出來，不急，舉個例子就會知道了。
如下HTML下的微數據代碼：

<section>
  <h3><a href="http://atnd.org/events/5181" title="WDE-ex Vol11『iPad
  のウェブデザイン：私たちがみつけたこと 』 : ATND">WDE-ex Vol.11 — Designing
  for iPad: Our experience so far</a></h3>
  <p>On <time datetime="2010-07-21T19:00:00+09:00">July 21st 19:00
  </time>-<time datetime="2010-07-21T20:00:00+09:00">20:00</time> at
  <span itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" href="http://www.apple.com/jp/retail/ginza/map/">
  <span itemprop="name">Apple Ginza</span></a></span>,
  <span itemscope itemtype="http://schema.org/Person">
  <a itemprop="url" href="http://informationarchitects.jp/" title="iA">
  <span itemprop="name">Oliver Reichenstein</span>, CEO of iA</a>
  </span>, will share the lessons they've learned while creating three
  iPad apps and one iPad website.</p>
</section>

日本，英文不懂沒關係，機器也不懂，但是它懂微數據，你也一樣。上面微數據的數據本質是什麼？很亂，不是嗎？但是，如果我們只關注微數據的部分：itemscope, itemprop等，你會發現什麼？
我們使用Live Microdata對上面的HTML代碼跑一下，會得到下面的JSON數據：

{
  "items": [
    {
      "type": [
        "http://schema.org/Organization"
      ],
      "properties": {
        "url": [
          "http://www.apple.com/jp/retail/ginza/map/"
        ],
        "name": [
          "Apple Ginza"
        ]
      }
    },
    {
      "type": [
        "http://schema.org/Person"
      ],
      "properties": {
        "url": [
          "http://informationarchitects.jp/"
        ],
        "name": [
          "Oliver Reichenstein"
        ]
      }
    }
  ]
}

我想，您應該大致明白機器爲何可以識別微數據了。由於微數據的這種數據本質特性，在web應用中，我們做一些數據交互的時候，事情就會變得奇妙而輕鬆。例如，你訪問一個你中意的女孩子的個人主頁的時候，如果使用微數據，就可以自動把她的一些信息啊聯繫方式啊什麼的放到你的通訊錄中，是不是很贊！或是在你的日曆表中添加一些需要完成的事件等等。很多真實世界的應用與web應用有了更爲輕鬆強大的結合。

四、瀏覽器支持

Browser Support

Chrome 不支持
Safari 不支持
Firefox 進行中…
Opera 最快版本12.00-1033
Internet Explorer 不支持

雖然瀏覽器目前對微數據的支持基本上就是大鴨蛋，但是，由於搜索引擎還有一些三方工具都鳥他，微數據目前還是很有應用價值的。例如Bing, Google, 以及Yahoo使用schema.org詞彙表定義的微數據顯示搜索結果（特定格式的搜索結果，即將展示）。

五、豐富網頁摘要應用

先看國內應用微數據的實例。
我們打開谷哥哥，輸入“香口魚”，輕輕地回車，稍等片刻，得到下面截圖：

我們對比可以發現，大衆點評網搜索顯示的樣子跟下面的芸芸結果不一樣，有評分顯示，評論數，日期等。怎麼回事？莫非點評給Google塞了很多票子。非也，我們點擊鏈接進入該頁面，右鍵查看源代碼，就會發現如下代碼：

上面截圖各種標註的部分就是本文多次出現了微數據特有的關鍵屬性，名稱等。也就是說，點評的搜索結果的顯示之所以不同，是因爲其應用了HTML5之微數據，使用的詞彙表是相對簡單的Google豐富網頁摘要詞彙表中的。
關於具體怎麼使用，Google提供了詳盡的使用示例（包括代碼展示），而且是中文版的。就是上面這段末尾的鏈接。我想我沒有必要重複詳述。不過，有些同行可能就是單純地感興趣，不想跳來跳去，我還是依葫蘆畫瓢，做了個很簡單的微格式應用例子。
您可以狠狠地點擊這裏：微數據示例之評論demo

4.6 小結

本章整體內容簡單，但是最後一小塊對於沒有基礎的我來說可能理解上有點困難（主要不知道如何運用以及用在哪裏），但是從差了些資料後發現其實也挺簡單的，都是目前挺新的技術。
資料轉載自：http://www.zhangxinxu.com/wordpress/2011/12/html5%E6%89%A9%E5%B1%95-%E5%BE%AE%E6%95%B0%E6%8D%AE-%E4%B8%B0%E5%AF%8C%E7%BD%91%E9%A1%B5%E6%91%98%E8%A6%81/

secret114

發佈了50 篇原創文章 · 獲贊 7 · 訪問量 6萬+

私信關注

【HTML學習】第四章 更豐富的內容標記方法

4.1 以前的表現式元素與助手

4.1.1 賦予<i>和<b>元素新的語義含義

4.1.2 <small>元素

4.1.3 <hr>元素

4.1.4 <s>元素以及<del>和<ins>元素

4.1.5 <u>元素

4.2 帶有<a>元素的塊級鏈接

4.3 其他HTML4略有變化的元素

4.3.1 <ol>元素及其新（舊）屬性

4.3.2 <dl>元素

4.3.3 <cite>元素