DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML入門知識 >> 5.2 html有序列表
5.2 html有序列表
編輯:HTML入門知識     

一、html有序列表簡介

有序列表的各個列表項是有順序的。有序列表從<ol>開始,到</ol>結束,中間的列表項是<li>標簽內容。有序列表的列表項是有先後順序的,一般采用數字或字母作為順序,默認是采用數字順序。

語法:

 
<ol>
    <li>有序列表項</li>
    <li>有序列表項</li>
    <li>有序列表項</li>
</ol>

說明:

<ol>,即“ordered list(有序列表)”。<li>,即“list(列表項)”。理解標簽語義更有利於你記憶,而記憶HTML標簽的語義是HTML的基礎。更多標簽語義請查看HTML標簽的含義。

在該語法中,<ol>和</ol>標志著有序列表的開始和結束,而<li>和</li>標簽表示這是一個列表項。在有序列表中可以包含多個列表項。

注意,<ol>標簽和<li>標簽是配合使用,沒有單獨使用,而且<ol>標簽內部不能存在任何其他標簽,一般情況下只能存在<li>標簽(對於初學者,我們忽略嵌套列表)。這個概念要非常清楚,在網站開發中很容易犯錯。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>有序列表</title>
</head>
<body>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Ajax</li>
        <li>SEO</li>
        <li>ASP.NET</li>
    </ol>
</body>
</html>

在浏覽器預覽效果如下:

二、有序列表type屬性

看到上面的例子,初學者會問,我們只能用數字來表示列表項的順序碼?默認情況下,有序列表使用數字作為列表項符號,不過我們可以通過有序列表type屬性來改變列表項符號。

表1 有序列表type屬性 type屬性值 列表項的序號類型 1 數字1、2、3…… a 小寫英文字母a、b、c…… A 大寫英文字母A、B、C…… i 小寫羅馬數字i、ii、iii…… I 大寫羅馬數字I、II、III……

type屬性實現的效果可以用CSS的list-style-type實現,作為初學者我們可以先用一下type屬性,到時候學了CSS入門教程之後,我們直接摒棄type屬性,而全部改用CSS控制樣式。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>有序列表</title>
</head>
<body>
    <ol type="a">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Ajax</li>
        <li>SEO</li>
        <li>ASP.NET</li>
    </ol>
</body>
</html>

在浏覽器預覽效果如下:

疑問

1、有序列表語法格式:

 
<ol>
    <li>有序列表項</li>
    <li>有序列表項</li>
    <li>有序列表項</li>
</ol>
表1 有序列表type屬性 type屬性值 列表項的序號類型 1 數字1、2、3…… a 小寫英文字母a、b、c…… A 大寫英文字母A、B、C…… i 小寫羅馬數字i、ii、iii…… I 大寫羅馬數字I、II、III……

學習了CSS之後,有序列表列表項符號由list-style-type屬性定義,到時候應該摒棄type屬性。

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