HTML中l(wèi)i標(biāo)簽用法案例

發(fā)布時間：2020-10-12 17:25:06 來源：億速云閱讀：213 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)HTML中l(wèi)i標(biāo)簽用法案例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

HTML li標(biāo)簽的定義和用法：

<li> 標(biāo)簽定義列表項目。

<li>標(biāo)簽（全稱為list item）是HTML語言中的一個元素標(biāo)簽。屬于列表標(biāo)簽。以<li>開始</li>結(jié)束，<li> 標(biāo)簽可用在有序列表 (<ol>) 和無序列表 (<ul>) 中。

HTML <li> 標(biāo)簽用法實例：

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

HTML li標(biāo)簽的屬性：

HTML中l(wèi)i標(biāo)簽用法案例 HTML li標(biāo)簽的用法詳細(xì)說明：

無序列表是一個項目的列表 [1] ，此列項目使用粗體圓點（典型的小黑圓圈）進(jìn)行標(biāo)記。無序列表始于 <ul> 標(biāo)簽。每個列表項始于 <li>。例：

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

瀏覽器顯示如下：

·Coffee

·Milk

列表項內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

有序列表也是一個項目的列表，列表項目使用數(shù)字進(jìn)行標(biāo)記。有序列表始于 <ol> 標(biāo)簽。每個列表項始于 <li> 標(biāo)簽。例：

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

瀏覽器顯示如下：

1.Coffee

2.Milk

列表項內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

HTML li標(biāo)簽如何去點無序列表中的小點：

首先來看看我們使用列表標(biāo)簽出現(xiàn)的問題。

<ul>
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
</ul>

我們發(fā)現(xiàn)會出現(xiàn)了一個黑的小點點。因為我們使用的是無序列表標(biāo)簽。那么要怎么除去這些點點呢。

接下來看看怎么解決問題咯。先打開記事本或者其他的html編輯器。我使用的editplus.新建一個html文件

在源代碼中加入如下的代碼：

ul li{
list-style: none;
}

這樣就可以去除默認(rèn)的樣式了。當(dāng)然你也可以直接寫在標(biāo)簽里面把樣式，不過我推薦大家使用這種這發(fā)，使得代碼后期方便維護(hù)。

還有更直觀的辦法：

<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
">網(wǎng)易</a></li>
   <li><a href = "
http://www.qq.com
">騰訊</a></li>
   <li><a href = "
http://www.php.cn
">億速云</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" 屬性是不被支持的。

關(guān)于HTML中l(wèi)i標(biāo)簽用法案例就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

HTML中l(wèi)i標(biāo)簽用法案例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽