HTML li標籤是幹嘛的？ HTML li標籤用法和屬性的介紹-html教學-PHP中文網

首頁

web前端

html教學

HTML li標籤是幹嘛的？ HTML li標籤用法和屬性的介紹

寻∝梦

Aug 18, 2018 pm 05:18 PM

htmlli

HTML li標籤是幹嘛的？ HTML li標籤用法和屬性的介紹都在這裡，這篇文章告訴大家的是HTML li標籤的定義及屬性介紹，還有html li標籤如何去掉無序列表中的預設小點樣式。

HTML li標籤的定義與用法：

標籤定義清單項目。

標籤（全稱為list item）是HTML語言中的一個元素標籤。屬於清單標籤。以

開始

結束，

標籤可用在有序列表 (

) 和無序列表 (

HTML

標籤用法實例：

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

HTML li標籤的屬性：

HTML li標籤是幹嘛的？ HTML li標籤用法和屬性的介紹 HTML li標籤的用法詳細說明：

無序列表是一個項目的清單[1] ，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。無序列表始於

。範例：
```
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
```
瀏覽器顯示如下：

·Coffee

#·Milk

清單項目內部可以使用段落、換行符號、圖片、連結以及其他列表等等。

有序列表也是一個項目的列表，列表項目使用數字來標記。有序列表始於
1. 標籤。範例：
```
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
```
  瀏覽器顯示如下：
  
  1.Coffee
  
  #2.Milk
  
  清單項目內部可以使用段落、換行符號、圖片、連結以及其他列表等等。
  
  HTML li標籤如何去點無序列表中的小點：
  
  首先來看看我們使用清單標籤出現的問題。
```
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>
```
  我們發現會出現了一個黑的小點點。因為我們使用的是無序列表標籤。那麼要怎麼除去這些點點呢。
  
  接下來看看怎麼解決問題咯。先開啟記事本或其他的html編輯器。我使用的editplus.新建一個html檔
  
  在原始碼中加入如下的程式碼：
```
ul li{
list-style: none;
}
```
  這樣就可以去除預設的樣式了。當然你也可以直接寫在標籤裡面把樣式，不過我推薦大家使用這種這發，讓程式碼後期方便維護。
  
  有更直覺的方法：
  
  #
```
<html>
  <head>
  <style>
   ul,  li{display:block; position:relative;}
   li{float:left; margin:auto 10px; list-style:none; height:30px; line-height:30px;}
   .cle{clear:both;}
   </style>
  </head>
<body>
  <ul>
   <li><a href = "
http://www.baidu.com
">百度</a></li>
  <li><a href = "
http://www.sina.com.cn
">新浪</a></li>
   <li><a href = "
http://www.163.com
">网易</a></li>
   <li><a href = "
http://www.qq.com
">腾讯</a></li>
   <li><a href = "
http://www.php.cn
">PHP中文网</a></li>
   <li><a href = "
http://www.google.com.hk
">谷歌</a></li>
 <div class="cle"></div>
  </ul>
</body>
</html>
```
  HTML 與XHTML 之間的差異
  
  ##在HTML 4.01 中，li 元素的"type" 和"value" 屬性是不被贊成使用的。
  
  在 XHTML 1.0 Strict DTD 中，li 元素的 "type" 和 "value" 屬性是不被支援的。
  ###【相關推薦】#########html5 border屬性怎麼設定？ html5 table中的border屬性介紹###############htm5新增的表單元素keygen標籤的用法與屬性介紹############### ###