站長(zhǎng)資訊網(wǎng)
之前的文章《一招教你使用css給HTML字體添加背景圖（代碼分享）》中，給大家介紹了如何用css給HTML字體添加背景圖的方法。下面下面本篇文章給大家介紹怎樣在html中給文本添加有序列表與無(wú)序列表，我們一起看看怎么做。
html文本添加有序列表與無(wú)序列表的方法
1、首先打開(kāi)html文檔，輸入<!doctype html>然后<body>本文<body>。
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
2、這個(gè)標(biāo)簽<ul>叫做無(wú)序列表標(biāo)簽，如果咱們想用的話 ，它底下還得必須包含一個(gè)東西叫做<li>這兩個(gè)標(biāo)簽 ，它們是配合著使用，通過(guò)給大家代碼示例。
代碼示例
<ul> <li>我喜歡吃蘋(píng)果</li> <li>我喜歡吃西瓜</li> <li>我喜歡吃香蕉</li> <li>我喜歡吃火龍果</li> </ul>
代碼效果
無(wú)序列表<Li>可以有無(wú)限，所有其余的內(nèi)容放在<li>里面就可以。
看看試試能不能把<a>標(biāo)簽放在li里面效果怎么樣？我們一起看看吧
代碼示例
<ul> <li>我喜歡吃蘋(píng)果</li> <li>我喜歡吃西瓜</li> <li>我喜歡吃香蕉</li> <li>我喜歡吃火龍果</li> <li><a href="https://www.baidu.com/">我要打開(kāi)百度</a></li> </ul>
代碼效果
結(jié)束出來(lái)，可以，但是在低級(jí)瀏覽器上不可以，OK 正常來(lái)說(shuō)ul下面只能第1層，這個(gè)就是咱們無(wú)序列表的一個(gè)基本使用，接下來(lái)有序列表怎么做呢。
3、這個(gè)標(biāo)簽<ol>叫做有序列表標(biāo)簽，和<ul>做法一樣，必須包含一個(gè)東西叫做li這兩個(gè)標(biāo)簽 ，通過(guò)給大家代碼示例。
代碼示例
<ol> <li>我喜歡吃蘋(píng)果</li> <li>我喜歡吃西瓜</li> <li>我喜歡吃香蕉</li> <li>我喜歡吃火龍果</li> <li><a href="https://www.baidu.com/">我要打開(kāi)百度</a></li> </ol>
代碼效果
其實(shí)這兩個(gè)基本玩了一下這個(gè)html里的兩個(gè)比較重要的標(biāo)簽 ，還有一個(gè)叫做<ul> 一個(gè)叫做<ol> 一個(gè)叫做無(wú)序列表 ，一個(gè)叫做有序列表 ，大家一定要注意 ，既然使用基本方法一致。
推薦學(xué)習(xí)：Html視頻教程
