HTML入门之列表

最新推荐文章于 2023-04-12 07:58:50 发布

青颗

最新推荐文章于 2023-04-12 07:58:50 发布

阅读量537

点赞数

分类专栏：前端学习文章标签： html

本文链接：https://blog.csdn.net/weixin_42892129/article/details/113807936

版权

前端学习专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、有序列表

HTML中的有序列表由<ol>开始，到</ol>结束。有序列表的列表项有先后顺序，默认采用数字顺序。
1.有序列表的列表项
有序列表的列表项只能是<li></li>，可以包含多个。
2.有序列表的type属性
type属性用于改变列表项符号，type属性的取值如下表：

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

如以下代码：

<!DOCTYPE html><html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>列表</title>
</head>
<body>    
	<ol type="A"><!--有序列表-->        
		<li>HTML</li>        
		<li>CSS</li>        
		<li>JavaScript</li>        
		<li>jQuery</li>        
		<li>Vue.js</li>    
	</ol>    
</body>
</html>

显示效果如下：
在这里插入图片描述

二、无序列表

HTML中的无序列表由<ul>开始，到</ul>结束。无序列表的列表项没有先后顺序，默认的列表项符号是●
1.无序列表的列表项
无序列表的列表项只能是<li></li>，可以包含多个。
2.无序列表的type属性
type属性用于改变列表项符号，type属性的取值如下表：

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

如以下代码：

<!DOCTYPE html><html lang="en">
<head>    
	<meta charset="UTF-8">    
	<meta name="viewport" content="width=device-width, initial-scale=1.0">    
	<title>列表</title>
</head>
<body>    
	<ul type="square"><!--无序列表-->        
		<li>HTML</li>        
		<li>CSS</li>        
		<li>JavaScript</li>        
		<li>jQuery</li>        
		<li>Vue.js</li>    
	</ul>
</body>
</html>

显示效果如下：
在这里插入图片描述

三、定义列表

HTML中的定义列表由<dl>开始，到</dl>结束。定义列表由两部分组成：名词和描述。
1.名词标签<dt></dt>
用于添加要解释的名词
2.描述标签<dd></dd>用于添加该名词的具体解释
如以下代码：

<!DOCTYPE html><html lang="en">
<head>    
	<meta charset="UTF-8">    
	<meta name="viewport" content="width=device-width, initial-scale=1.0">    
	<title>列表</title>
</head>
<body>    
	<dl><!--定义列表-->        
		<dt>HTML</dt>        
		<dd>制作网页的标准语言，控制网页的结构</dd> 
		<dt>CSS</dt>        
		<dd>层叠样式表，控制网页的样式</dd>
		<dt>JavaScript</dt>        
		<dd>脚本语言，控制网页的行为</dd>    
	</dl>
</body>
</html>

显示效果如下：
在这里插入图片描述

四、相关习题

一、单选题
1．在下面几种列表形式中，哪一种在HTML5中已经被废弃了（ D ）
A. 有序列表ol
B. 无序列表ul
C. 定义列表dl
D. 目录列表dir

2．下面哪种列表我们在实际开发中是用得最多的？（ B ）
A. 有序列表ol
B. 无序列表ul
C. 定义列表dl
D. 目录列表dir

3．下面有关ul元素（不考虑嵌套列表）说法不正确的是（ D ）。
A. ul元素的子元素只能是li，不能是其他元素
B. ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加
C. 绝大多数列表都是使用ul元素来实现，而不是ol元素
D. 我们可以在ul元素中直接插入div元素

4．下面有关HTML语义化不正确的是（ A ）。
A. 对于大多数标签实现的效果，我们完全可以使用div和span来代替实现
B. 学习HTML目的在于：在需要的地方，用正确的标签
C. 语义化对于搜索引擎优化来说是非常重要的
D. 语义化目的在于提高可读性和可维护性

二、编程题
1．下图是一个问卷调查网页，请制作出来。要求：（1）大标题用h1标签；（2）小题目用h3标签；（3）前两个问题使用有序列表；（4）最后一个问题使用无序列表。
在这里插入图片描述

<!DOCTYPE html><html lang="en">
<head>    
	<meta charset="UTF-8">    
	<meta name="viewport" content="width=device-width, initial-scale=1.0">    
	<title>习题</title>
</head>
<body>    
	<h1>问卷调查</h1>    
	<h3>1、你是通过什么途径来到本网站的？</h3>   
	<ol type="A">        
		<li>百度搜索</li>        
		<li>谷歌搜索</li>        
		<li>其他途径</li>    
	</ol>    
	<h3>2、你觉得本网站页面设计怎么样？</h3>   
	<ol type="A">        
		<li>酷炫大方</li>        
		<li>比较普通</li>       
		<li>非常粗糙</li>   
	</ol>   
	<h3>3、你觉得本书怎么样？（多选）</h3>    
	<ul>        
		<li>通俗易懂，轻松幽默</li>        
		<li>内容丰富，技巧颇多</li>        
		<li>三个字，好到爆！</li>    
	</ul>
</body>
</html>

青颗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门之列表

一、有序列表HTML中的有序列表由<ol>开始，到</ol>结束。有序列表的列表项有先后顺序，默认采用数字顺序。1.有序列表的列表项有序列表的列表项只能是<li></li>，可以包含多个。2.有序列表的type属性type属性用于改变列表项符号，type属性的取值如下表：属性值列表项符号1阿拉伯数字：1、2、3……a小写英文字母：a、b、c……A大写英文字母：A、B、C……i小写罗马数字：i、ii、ii
复制链接

扫一扫