HTML 列表

最新推荐文章于 2022-11-12 14:27:55 发布

梦见憨憨丽吖

最新推荐文章于 2022-11-12 14:27:55 发布

阅读量159

点赞数 1

分类专栏： web HTML

本文链接：https://blog.csdn.net/weixin_44799645/article/details/102787671

版权

web 同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

HTML

12 篇文章 0 订阅

订阅专栏

HTML 列表
HTML 支持有序、无序和定义列表:
1、列表
1、什么是列表
按照一定的结构化方式显示数据，默认情况，是按照从上到下的方式来显示数据
2、列表的组成
主要由列表类型和列表项来组成
3、语法
1、有序列表
标记:

– Order List
列表项：

<li></li>

			<ol>
				<li>内容</li>
				<li>内容</li>
				... ...
			</ol>

		属性：
			1、type
				作用：列表项前的标识
				取值：
					1、1 数字，默认值
					2、a 小写字母
					3、A 大写字母
					4、i 小写罗马数字
					5、I 大写罗马数字
			2、start
				指定 列表项 从第几个字符开始显示
	2、无序列表
		标记：<ul></ul> -- Unorder List
		列表项：<li></li>
		属性：
			1、type
				1、disc，实心圆（默认值）
				2、circle，空心圆
				3、square，实心方块
				4、none，没有
	3、列表的嵌套
		通过列表嵌套，可以实现多层列表 
		被嵌套的内容，必须放在li中 
4、定义列表
	1、作用
		定义列表用于给出一类事物的定义情形

		掩耳盗铃
			xxxxxxxxxxxx
	2、语法
		<dl></dl>:定义一个定义列表
			<dt></dt>:定义列表中要解释的名词或术语
			<dd></dd>:定义列表中对名词或术语的解释


	3、使用场合
		图文混排 时

以下代码作为练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>有序列表和无序列表</title>
</head>
<body>
    <!--定义列表-->
    <dl>
        <dt>WEB前端</dt>
        <dd>WEB前端是网页开发必不可少的一项重要技术。也是必不可少的一块模板</dd>
        <dt>HTML</dt>
        <dd>HTML是网页开发技术，用于构建网页结构</dd>
    <>
    <!--嵌套列表-->
    <ol> 
        <li>喜羊羊<>
        <li>三国演义<>
        <li>火隐忍者
            <ul type="square"> 
                <li>金毛狮王<>
                <li>白眉鹰王<>
                <li>刘德华<>
                <li>金刚葫芦娃<>
            </ul>
            
        <>
        <li>灰太狼
            <ol>
                <li>
                    大力哇
                <>
                <li>二娃<>
            </ol>
        <>
    </ol>    
    <!--有序列表-->
    <ol type="a"> 
        <li>西游记<>
        <li>三国演义<>
        <li>火隐忍者<>
        <li>海贼王<>
    </ol>
    <!--无序列表-->
    <ul type="square"> 
        <li>金毛狮王<>
        <li>白眉鹰王<>
        <li>刘德华<>
        <li>赵四<>
    </ul>
</body>
<ml>

详细解释：
HTML无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用

标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于

标签。每个列表项始于
标签。

列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以

标签开始。每个自定义列表项以开始。每个自定义列表项的定义以

开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>自定义列表</title> 
</head>
<body>

<h4>编号列表：</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>大写字母列表：</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>罗马数字列表：</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写罗马数字列表：</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

</body>
</html>

总结注意哦:
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。