HTML ol li 項目標籤

HTML <ol> 是有排序的項目標籤,<ul> 與 <li> 標籤搭配成為一個標籤組,每個項目前,會有預設的數字排序,初始排序從 1 開始,若不需要數字排序的效果,可以使用:HTML ul li 項目標籤。HTML <ol> 標籤支援 id、class、title、style、dir、lang、xml 等標準屬性,所有主流的瀏覽器都支援 HTML <ol><li> 有排序項目標籤寫法。

HTML <ol><li> 基本語法
<ol>
 <li></li>
 <li></li>
 <li></li>
 ...
</ol>
HTML <ol></ol> 標籤組由一個 <ol> 開始以及一個 </ol> 結束,其間包含有多組的 <li></li> 項目標籤,成為一個標準的有排序標籤組,每個項目可用來顯示文字清單或超連結清單等。

HTML <ol><li> 項目標籤範例一、基本款
<ol>
 <li>星期一</li>
 <li>星期二</li>
 <li>星期三</li>
</ol>
以上範例輸出結果(比較:HTML ul li 項目標籤
  1. 星期一
  2. 星期二
  3. 星期三
由範例可以看到 <ol> 與 </ol> 之間有三個項目,分別使用 <li> 與 </li> 包起來,呈現結果的每個項目前都有排序數字,且這個數字從 1 開始排序,原則上 <ol></ol> 間可以有無數組 <li></li> 項目,且每個項目除了文字之外,也可以設定超連結效果或其他 HTML 效果。

HTML <ol><li> 項目標籤範例二、加入超連結
<ol>
 <li><a href="http://www.wibibi.com" target="_blank">Wibibi 網頁設計教學百科</a></li>
 <li><a href="http://www.wibibi.com/c.php?cid=9" target="_blank">HTML</a> - Wibibi 網頁設計教學百科</li>
</ol>
以上範例輸出結果
  1. Wibibi 網頁設計教學百科
  2. HTML - Wibibi 網頁設計教學百科
我們在範例中的每個 <li></li> 文字加上了 HTML 的超連結標籤,製作出超連結的效果,可以整個字串都是超連結,也可以只做某幾個字是超連結,自由變化即可,關於詳細的超連結用法請參閱:HTML a href 連結屬性

相關主題延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C