HTML基礎教學(7)--項目符號

有時我們會在文章中列舉一些項目, 我們除了可以自己打上項目符號或序號之外, 也可以利用 HTML 所提供的標籤語法來達成

這是項目之外的文字
<UL>
  <LI>第一個項目</LI>
  <LI>第二個項目</LI>
</UL>
這也是項目之外的文字

或者是

這是項目之外的文字
<OL>
  <LI>第一個項目</LI>
  <LI>第二個項目</LI>
</OL>
這也是項目之外的文字

使用這二組語法時, 同樣在顯示時會與上下文保留一點距離
每一整組項目用 UL 或 OL 標籤包住, 裡面的每一個 LI 標籤則為一個項目
用 UL 標籤包住的一組項目, 主要是以幾何形狀做為項目符號, 適用在不具順序性的項目, 預設會用一個圖點來做為每個項目的項目符號, 而用 OL 時, 則主要是以順序性的數字或字母來做為項目符號, 適用在具順序性的項目, 預設是用數字序號做為項目符號, 你也可以透過設定 UL 與 OL 的 type 屬性來改成它提供的其他樣式, 例如

這是項目之外的文字
<UL type="a">
  <LI>第一個項目</LI>
  <LI>第二個項目</LI>
</UL>
<OL type="square">
  <LI>第一個項目</LI>
  <LI>第二個項目</LI>
</OL>
這也是項目之外的文字

如此 UL 這一組就會變成小寫字母的項目符號, OL 這一組就會變成方塊的項目符號, 下面列出所有可用的 type 屬性值
circle (空心圖圈)
disc (實心圖點)
square (方塊)
1 (數字序號)
a (小寫字母序號)
A (大寫字母序號)
i (小寫羅馬數字序號)
I (大寫羅馬數字序號)

其實在 LI 標籤也是有 type 屬性, 可設定的值跟上面一樣, 只不過在 IE 瀏覽器上(我是使用IE6.029做測試)瀏覽時, 前三個值只有當包在 UL 標籤內時才有用, 相對的, 後五個值也只有當包在 OL 標籤內才有用, 例如下面的例子

<UL>
  <LI type="circle">這裡會是空心圓圈</LI>
  <LI type="disc">這裡會是實心圓點</LI>
  <LI type="square">這裡會是方塊</LI>
  <LI type="1">這裡會是實心圓點</LI>
  <LI type="a">這裡會是實心圓點</LI>
  <LI type="A">這裡會是實心圓點</LI>
  <LI type="i">這裡會是實心圓點</LI>
  <LI type="I">這裡會是實心圓點</LI>
</UL>
<OL>
  <LI type="circle">這裡會是數字序號</LI>
  <LI type="disc">這裡會是數字序號</LI>
  <LI type="square">這裡會是數字序號</LI>
  <LI type="1">這裡會是數字序號</LI>
  <LI type="a">這裡會是小寫字母序號</LI>
  <LI type="A">這裡會是大寫字母序號</LI>
  <LI type="i">這裡會是小寫羅馬數字序號</LI>
  <LI type="I">這裡會是大寫羅馬數字序號</LI>
</OL>

但是若是在Firefox上(我是在2.007版上測試)則是全部都有效果

--gs--
{HTML基礎教學}{IE 與 Firefox 在 HTML 語法上的差異}

沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。