腾讯云·社区
3.列表-HTML基础
一、列表介绍
列表是网页中最常用的一种数据排列方式。
1.列表分类
在 HTML 中，列表共分为 3 种：有序列表、无序列表、定义列表。 可能你在自学过程中会遇到 目录列表dir、菜单列表menu，其实这两种列表在HTML5标准中已经被废除了，现在都是用无序列表 ul 来替代。
（1）有序列表
列表项之间有先后顺序之分。
（2）无序列表（重点）
列表项之间没有先后顺序之分。
（3）定义列表
是一组带有特殊含义的列表，一个列表项中包含 条件、列表两部分。
二、有序列表-ol
在有序列表中，各个列表项都是有顺序的。 有序列表从
<ol>开始，到</ol>结束。 有序列表一般采用数字或字母作为顺序，默认采用数字顺序。
1.语法
<ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> ... </ol>
（1）语义
- ol，即 ordered list，有序列表。
- li，即 list ，列表项。
- 理解标签语义更有利于记忆。
① ol
<ol>和</ol>标志着有序列表的开始和结束。
② li
<li>和</li>标签表示这是一个列表项。 一个有序列表可以包含多个列表项。
③ 注意
- ol 标签和 li 标签是配合一起使用的，不可以单独使用。
- ol 标签的子标签只能是 li 标签，不能是其它标签。
（2）示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
</head>
<body>
<ol> <!--有序列表的开始-->
<li>贤思齊</li> <!--列表项-->
<li>君初见</li>
<li>王小淘</li>
<li>越努力，越幸运</li>
</ol> <!--有序列表的结束-->
</body>
</html>有序列表示例.png
2.type属性
我们知道，有序列表默认采用数字顺序，那么可不可以换成别的表现形式呢？ 当然可以啦！！！！！ 在
HTML中，我们可以使用type属性来改变列表项符号。
（1）语法
<ol type=" 属性值 "> <li>列表项</li> <li>列表项</li> <li>列表项</li> ... </ol>
① type可选属性值
属性值 | 列表项符号 |
|---|---|
1 | 阿拉伯数字：1、2、3、... |
a | 小写英文字母：a、b、c、... |
A | 大写英文字母：A、B、C、... |
i | 小写罗马数字： |
l (这是大写的 i 呦!!!) | 大写罗马数字：Ⅰ、Ⅱ、Ⅲ、... |
② 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
</head>
<body>
<ol type="I"> <!--有序列表的开始，列表项符号为大写罗马字母-->
<li>贤思齊</li> <!--列表项-->
<li>君初见</li>
<li>王小淘</li>
<li>越努力，越幸运</li>
</ol> <!--有序列表的结束-->
</body>
</html>有序列表type属性.png
对于有序列表的列表项符号，在之后的
CSS学习中，我们会舍弃type属性，而是用list-style-type属性来替代。
三、无序列表-ul（重点）
无序列表的列表项是没有顺序的。 默认情况下，无序列表的列表项符号为◉，可以通过
type属性来改变。
1.语法
<ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> ... </ul>
（1）语义（重点）
理解标签的语义有利于记忆。
- ul，即 unordered list，无序列表。
- li，即 list ，列表项。
① ul
<ul>和</ul>标志着无序列表的开始和结束。
② li
<li>和</li>标签表示这是一个列表项。 一个有序列表可以包含多个列表项。
③ 注意
- ul 标签和 li 标签是配合一起使用的，不可以单独使用。
- ul 标签的子标签只能是 li 标签，不能是其它标签。
（2）示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
</head>
<body>
<ul> <!--无序列表的开始-->
<li>贤思齊</li> <!--列表项-->
<li>君初见</li>
<li>王小淘</li>
<li>越努力，越幸运</li>
</ul> <!--无序列表的结束-->
</body>
</html>无序列表示例.png
2.type属性
（1）语法
<ul type=" 属性值 "> <li>列表项</li> <li>列表项</li> <li>列表项</li> ... </ul>
① type可选属性值
属性值 | 列表项符号 |
|---|---|
disc | 实心圆（默认值） |
circle | 空心圆 |
square | 正方形 |
学习
CSS后会被line-style-type取代。
② 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
</head>
<body>
<ul type="square"> <!--无序列表的开始，列表项符号为正方形-->
<li>贤思齊</li> <!--列表项-->
<li>君初见</li>
<li>王小淘</li>
<li>越努力，越幸运</li>
</ul> <!--无序列表的结束-->
</body>
</html>无序列表type属性.png
3.深入无序列表
真正的前端开发中，无序列表比有序列表更为实用。 几乎我们使用的都是无序列表，而有序列表基本用不到。
（1）无序列表的两个注意点
- ul 元素的子元素只能是 li，不能是其它元素。
- ul 元素内部的文本，只能在 li 元素内部添加，不能在 li 元素外部添加。
① 示例
Ⅰ.ul的子元素只能是li，不能是其它
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
</head>
<body>
<ul>
<div>华夏</div>
<li>人生若只如初见</li>
<li>当时只道是寻常</li>
<li>一蓑烟雨任平生</li>
</ul>
</body>
</html>
# 上述代码是错误的，因为ul的子元素只能是li，不能是其它，但在这里却有div。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
</head>
<body>
<div>华夏</div>
<ul>
<li>人生若只如初见</li>
<li>当时只道是寻常</li>
<li>一蓑烟雨任平生</li>
</ul>
</body>
</html>
# 这样写才是正确的。Ⅱ.文本不能直接放在ul元素内
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
</head>
<body>
<ul>
华夏
<li>人生若只如初见</li>
<li>当时只道是寻常</li>
<li>一蓑烟雨任平生</li>
</ul>
</body>
</html>
# 这样写是错误的，文本不能直接放在ul元素内。四、定义列表
在
HTML中，定义列表由 名词、描述 两部分组成。
1.语法
<dl> <dt>名词</dt> <dd>描述</dd> …… </dl>
（1）语义
-
dl，即 definition list，定义列表。 -
dt，即 definition term，定义名词。 -
dd，即 definition description，定义描述。
① dl
<dl>和</dl>标志着定义列表的开始和结束。
② dt
dt标签用于添加要解释的名词。
③ dd
dd标签用于添加该名词的具体解释。
（2）示例
① 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
</head>
<body>
<dl> <!--定义列表的开始-->
<dt>人生若只如初见</dt> <!--名词-->
<dd>一切还是停留在初次见面的时候为好。</dd> <!--名词的解释-->
<dt>当时只道是寻常</dt>
<dd>昔日平常往事,已不能如愿以偿。</dd>
<dt>一蓑烟雨任平生</dt>
<dd>一身蓑衣任凭风吹雨打，照样过我的一生。</dd>
</dl> <!--定义列表的结束-->
</body>
</html>定义列表示例.png
（3）实际开发
在实际开发中，定义列表虽然用的少，但是在某些高级效果（如：自定义表单）中也会用到。
五、HTML语义化（重点）
到现在为止，我们学习了很多标签，但是由于不熟悉标签的语义化，有时我们可能会用别的标签代替另一个标签，从而实现相同的效果，但这是一种错误的思想。
很多人觉得HTML简单，是的，HTML确实简单，学完一遍就觉得自己都会了，但其实他们连 HTML的精髓都没有搞懂，这是HTML学习中的一个误区。
1.HTML精髓
你可以用
div来代替p，也可以用p来代替h1~h6，但这却违背了 HTML 语言的初衷。 HTML 的精髓就在于标签的语义。 在 HTML 中，大部分标签都有它自身的语义。比如说：
- p标签：表示 paragraph，标记的是一个段落。
- h1标签：表示header1，标记的是一个最高级的标题。
div 和 span 是无语义的标签，应优先使用其它有语义的标签。
2.语义化
（1）可读性
在日后工作，代码往往成千上万行，如果全部用 div 和 span 来实现，将来在代码维护上会非常麻烦。
（2）搜索引擎优化
良好的语义，在搜索中的权重会较大，网络蜘蛛（如：百度、谷歌）会优先检索到。 语义化会在稍后的文章里详细介绍。
本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。
相关文章
扫码关注云+社区
领取腾讯云代金券
我来说两句