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