HTML基础03列表标签


列表标签一般用于表示文本列表，比如显示新闻列表，还用于制作导航条。

在HTML文档中，列表结构可以分为三种类型:无序列表、有序列表、定义列表。无序列表使用项目符号来表示，列表元素之间没有顺序之分。有序列表使用编号来表示列表元素的顺序。定义列表是一一种特殊的结构，它包含词条和解释。具体说明如下。

  • <ul>...</ul>: 无序列表的父级元素。
  • <ol>...</ol>: 有序列表的父级元素。
  • <li>...</il>:表示列表元素。
  • <dl>...</dI>:定义列表的父级元素。
  • <dt>...</dt> :标识词条
  • <dd>...</dd>:标识解释。

无序列表

<ul>
    <li>列表项</li>
    <li>列表项</li>
    ···
</ul>

type属性值：通过设置type属性值可以改变项目符号样式

值 描述
disc 圆点
square 正方形
circle 空心圆

 

 

 

 

 

演示代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>标题</title>
 6 </head>
 7 <body>
 8     <h1>什么是HTML？</h1>
 9     <p>HTML是用来描述网页的一种语言。</p>
10     <ul type="disc"><!-- 圆形 -->
11         <li>HTML指的是超文本标记语言（Hyper Text Markup language）</li>
12         <li>HTML不是一种编程语言，而是一种标记语言（markup language）</li>
13         <li>标记语言是一套标记标签（markup tag）</li>
14         <li>HTML 使用标记标签类描述网页</li>
15     </ul>
16     <ul type="square"><!-- 正方形 -->
17         <li>HTML指的是超文本标记语言（Hyper Text Markup language）</li>
18         <li>HTML不是一种编程语言，而是一种标记语言（markup language）</li>
19         <li>标记语言是一套标记标签（markup tag）</li>
20         <li>HTML 使用标记标签类描述网页</li>
21     </ul>
22     <ul type="circle">
23         <li>HTML指的是超文本标记语言（Hyper Text Markup language）</li>
24         <li>HTML不是一种编程语言，而是一种标记语言（markup language）</li>
25         <li>标记语言是一套标记标签（markup tag）</li>
26         <li>HTML 使用标记标签类描述网页</li>
27     </ul>
28     <hr/>
29 
30 </body>
31 </html>

 

效果图

有序列表

<ol>
    <li>列表项</li>
    <li>列表项</li>
    ···
</ol>

 

type属性值：通过设置type属性值可以改变项目符号样式

值 描述
1 数字1，2····
a 小写字母a,b···
A 大写字母A,B···
i 小写罗马数字i
I 大写罗马数字I

 

 

 

 

 

 

 

 

演示代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>标题</title>
 6 </head>
 7 <body>
 8 
 9     <h1>什么是HTML？</h1>
10     <ol type="1">
11         <li>HTML指的是超文本标记语言（Hyper Text Markup language）</li>
12         <li>HTML不是一种编程语言，而是一种标记语言（markup language）</li>
13         <li>标记语言是一套标记标签（markup tag）</li>
14         <li>HTML 使用标记标签类描述网页</li>
15     </ol>
16     <ol type="a">
17         <li>HTML指的是超文本标记语言（Hyper Text Markup language）</li>
18         <li>HTML不是一种编程语言，而是一种标记语言（markup language）</li>
19         <li>标记语言是一套标记标签（markup tag）</li>
20         <li>HTML 使用标记标签类描述网页</li>
21     </ol>
22     <ol type="I">
23         <li>HTML指的是超文本标记语言（Hyper Text Markup language）</li>
24         <li>HTML不是一种编程语言，而是一种标记语言（markup language）</li>
25         <li>标记语言是一套标记标签（markup tag）</li>
26         <li>HTML 使用标记标签类描述网页</li>
27     </ol>
28 
29     <hr/>
30     
31 </body>
32 </html>

 

效果图

 

自定义列表

<dl>
    <dt>定义列表项</dt>
    <dd>列表描述项</dd>
    <dd>列表描述项</dd>
    <dt>定义列表项</dt>
    <dd>列表描述项</dd>
    ···
</dl>

 

演示代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>标题</title>
 6 </head>
 7 <body>
 8     
 9     <dl>
10     <dt>什么是HTML？</dt>
11         <dd>HTML是用来描述网页的一种语言。</dd>
12         <dd>HTML指的是超文本标记语言（Hyper Text Markup language）</dd>
13     <dt>Html标签</dt>
14         <dd>HTML标记标签通常被称为HTML标签</dd>
15     </dl>
16 
17 </body>
18 </html>

 

效果图

 

posted @ 2020-07-22 12:05  雪中加点糖  阅读(314)  评论(0)    收藏  举报