五、列表

最新推荐文章于 2023-09-10 10:26:50 发布

m0_47589828

最新推荐文章于 2023-09-10 10:26:50 发布

阅读量289

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/m0_47589828/article/details/112252413

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

5.1 列表简介

列表是网页中最常用的一种数据排列方式。

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

“目录列表dir”和“菜单列表menu”：事实上，这两种列表在HTML5标准中已经被废除了，现在都是用无序列表ul来代替。

5.2 有序列表

一、有序列表简介

有序列表从<ol>开始，到</ol>结束。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序。

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

说明：
ol，即ordered list（有序列表）；li，即list（列表项）。
在该语法中，<ol>和</ol>标志着有序列表的开始和结束，而<li>和</li>标签表示这是一个列表项。一个有序列表可以包含多个列表项。
注意，ol标签和li标签是配合一起使用，不可以单独使用，而且<ol>标签的子标签只能是<li>标签，不能是其他标签。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>有序列表</title>
</head>
<body>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ol>
</body>
</html>

在这里插入图片描述

二、type属性

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

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

说明：
在有序列表中，type属性取值如下表所示。

属性值	列表项符号
1	阿拉伯数字：1、2、3……
a	小写英文字母：a、b、c……
A	大写英文字母：A、B、C……
i	小写罗马数字：i、ii、iii……
I	大写罗马数字：I、II、III……

对于有序列表的列表项符号，等学了CSS之后，我们可以放弃type属性，而使用list-style-type属性。

5.3 无序列表

一、无序列表简介

无序列表的列表项是没有顺序的，默认情况下，无序列表的列表项符号是●，不过可以通过type属性来改变其样式。

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

说明：
ul，即unordered list（无序列表）。li，即list（列表项）。
在该语法中，使用<ul></ul>标签表示一个无序列表的开始和结束，<li>表示这是一个列表项。一个无序列表可以包含多个列表项。
注意，ul标签和li标签也是配合一起使用，不可以单独使用，而且ul标签的子标签也只能是li标签，不能是其他标签。这一点跟有序列表是一样的。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>无序列表</title>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

在这里插入图片描述

二、type属性

和有序列表一样，我们也可以使用type属性来定义列表项符号。

<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

说明：
在无序列表中，type属性取值如下表所示。

属性值	列表项符号
disc	实心圆●（默认值）
circle	空心圆○
square	正方形■

跟有序列表一样，对于无序列表的列表项符号，等学了CSS之后，我们可以放弃type属性，而使用list-style-type属性。

三、深入无序列表

在实际的前端开发中，无序列表比有序列表更为实用。更准确点说，我们一般都是使用无序列表，几乎用不到有序列表。
对于无序列表来说，有以下两点要注意：
（1）ul元素的子元素只能是li，不能是其他元素。
（2）ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加。

5.4 定义列表

在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>HTML</dt>
        <dd>制作网页的标准语言，控制网页的结构</dd>
        <dt>CSS</dt>
        <dd>层叠样式表，控制网页的样式</dd>
        <dt>JavaScript</dt>
        <dd>脚本语言，控制网页的行为</dd>
    </dl>
</body>
</html>

在这里插入图片描述
在实际开发中，定义列表用得比较少。

5.5 HTML语义化

HTML的精髓就在于标签的语义。在HTML中，大部分标签都有它自身的语义，例如p标签，表示的是paragraph，标记的是一个段落；h1标签，表示header1，标记的是一个最高级标题……而div和span是无语义的标签，我们应该优先使用其他有语义的标签。

语义化，是非常重要的一个思想。在整站开发中，编写的代码往往都是成千上万行，如果全部使用div和span来实现，要是某一行代码出错了怎么办？怎么快速地找到那一行代码呢？除了可读性，语义化对于搜索引擎优化（即SEO）来说，也是极其重要的。

HTML很简单，因此很多初学者往往忽略了它的目的和重要性。我们学习HTML的目的并不是记住所有的标签，更重要的是在你需要的地方使用正确的语义化标签。把标签用在对的地方，这才是学习HTML的目的所在。

以上学习参考绿叶学习网

m0_47589828

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
五、列表

5.1 列表简介列表是网页中最常用的一种数据排列方式。在HTML中，列表共有3种：有序列表、无序列表和定义列表。在有序列表中，列表项之间有先后顺序之分。在无序列表中，列表项之间是没有先后顺序之分的。而定义列表是一组带有特殊含义的列表，一个列表项中包含“条件”和“列表”两部分。“目录列表dir”和“菜单列表menu”：事实上，这两种列表在HTML5标准中已经被废除了，现在都是用无序列表ul来代替。5.2 有序列表一、有序列表简介有序列表从<ol>开始，到</ol>结束。有
复制链接

扫一扫