頻道欄目
首頁 > 資訊 > HTML實例/測驗/總結 > 正文

HTML 列表

16-01-29        來源:[db:作者]  
收藏   我要投稿
無序列表
源代碼
<!DOCTYPE html>
<html>
<body>

<h4>An Unordered List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

 

運行結果
有序列表
源代碼
<!DOCTYPE html>
<html>
<body>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
</body>
</html>

 

運行結果
不同類型的有序列表
源代碼
<!DOCTYPE html>
<html>
<body>

<h4>Numbered list:</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Letters list:</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Lowercase letters list:</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Roman numbers list:</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

</body>
</html>

 

運行結果
不同類型的無序列表
源代碼
<!DOCTYPE html>
<html>
<body>

<p><b>Note:</b> The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5.
Therefore we have used the style attribute and the CSS list-style-type property, to define different types of unordered lists below:</p>

<h4>Disc bullets list:</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>Circle bullets list:</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>Square bullets list:</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

</body>
</html>

 

運行結果
嵌套列表
源代碼
<!DOCTYPE html>
<html>
<body>

<h4>A list inside a list:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

 

運行結果
嵌套列表 2
源代碼
<!DOCTYPE html>
<html>
<body>

<h4>Lists inside a list:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

 

運行結果
定義列表
源代碼
<!DOCTYPE html>
<html>
<body>

<h4>A Definition List:</h4>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

</body>
</html>

 

運行結果
實例解析

HTML 列表


HTML 支持有序、無序和定義列表:

HTML 列表

有序列表

  1. The first list item
  2. The second list item
  3. The third list item

無序列表

  • List item
  • List item
  • List item


HTML無序列表

無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記。

無序列表使用 <ul> 標簽

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

瀏覽器顯示如下:

  • Coffee
  • Milk

HTML 有序列表

同樣,有序列表也是一列項目,列表項目使用數字進行標記。 有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。

列表項項使用數字來標記。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

瀏覽器中顯示如下:

  1. Coffee
  2. Milk

HTML 自定義列表

自定義列表不僅僅是一列項目,而是項目及其注釋的組合。

自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

瀏覽器顯示如下:

Coffee- black hot drinkMilk- white cold drink

注意事項 - 有用提示

提示: 列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。


 

HTML 列表標簽

標簽 描述
<ol> 定義有序列表
<ul> 定義無序列表
<li> 定義列表項
<dl> 定義定義列表
<dt> 自定義列表項目
<dd> 定義自定列表義的描述

相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

美女MM131爽爽爽毛片