HTML基础笔记——列表

最新推荐文章于 2023-03-30 11:29:29 发布

Kll .

最新推荐文章于 2023-03-30 11:29:29 发布

阅读量1.2k

点赞数 2

分类专栏：前端学习笔记文章标签：列表 html

本文链接：https://blog.csdn.net/qq_48894948/article/details/118765580

版权

前端学习笔记专栏收录该内容

18 篇文章 1 订阅

订阅专栏

在HTML中，列表共有三种：有序列表、无序列表、定义列表

在有序列表中，列表项之间有先后顺序之分。在无序列表中，列表项之间没有先后顺序之分。而定义列表是一组带有特殊含义的列表，一个列表项中包含“条件”和“列表”两部分

1.有序列表

<ol>
    <li>列表内容</li>
</ol>

ol即ordered list有序列表，一个有序列表可以包含多个li即list列表项，注意ol标签和li标签需要配合一起使用，不可以单独使用，而ol标签的子标签也只能是li标签

在HTML中，我们可以使用type属性来改变列表项符号，在默认情况下，有序列表使用数字作为列表项符号。

<ol type="属性值">
    <li>列表内容</li>
</ol>

属性值	列表项符号
1	阿拉伯数字
a	小写英文字母
A	大写英文字母
i	小写罗马数字
I	大写罗马数字

对于有序列表的列表项符号，在我们学习CSS后我们可以不再使用type属性，而应该使用liststyle-type属性

2.无序列表

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

无序列表跟有序列表基本相同，默认情况下无序列表的表项符号是实心圆，我们也可以通过type属性来改变其样式

属性值	符号
disc	实心圆●
circle	空心圆○
square	实正方形■

对于无序列表的列表项符号也一样，在我们学习CSS后我们可以不再使用type属性，而应该使用list-style-type属性

在实际的前端开发中，无序列表比有序列表更为实用。更准确的说，一般使用的都是无序列表，几乎用不到有序列表

3.定义列表

在HTML中，定义列表由两部分组成：名词和描述

<dl>
    <dt>名词</dt>
    <dd>描述</dd>\
    ......
</dl>

dl即definition list（定义列表），dt即definition term（定义名词），dd即definition description（定义描述），在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，dt标签用于添加要解释的名词，dd标签用于添加该名词的具体解释。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>定义列表的学习</title>
    </head>
    <body>
       <dl>
           <dt>音乐</dt>
           <dd>音乐使人愉悦</dd>
           <dt>运动</dt>
           <dd>运动使人身体健康</dd>
       </dl>
    </body>
</html>

Kll .

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML基础笔记——列表

在HTML中，列表共有三种：有序列表、无序列表、定义列表在有序列表中，列表项之间有先后顺序之分。在无序列表中，列表项之间没有先后顺序之分。而定义列表是一组带有特殊含义的列表，一个列表项中包含“条件”和“列表”两部分1.有序列表<ol> <li>列表内容</li></ol>ol即ordered list有序列表，一个有序列表可以包含多个li即list列表项，注意ol标签和li标签需要配合一起使用，不可以单独使用，而ol标签的子标签也只
复制链接

扫一扫