【HTML】之列表

最新推荐文章于 2023-07-12 21:46:06 发布
最新推荐文章于 2023-07-12 21:46:06 发布
阅读量195 收藏 1
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RuRu_Bai/article/details/115400047
版权

列表

一、无序列表

1、基础结构

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

ul意思为一块，li为一行；内容都要写在li里面，ul只能包含li。
如果内容需要加粗，则应该在li里面套b标签。

2、常用结构

常用结构指的是加上超链接之后的结构是大家经常用到的结构。

<ul>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
</ul>

其中#位置是放超链接网址的，这种结构是我们经常点击某一个内容的时候会打开另一个网页，就比如点击新闻标题会出来新闻内容一样。如果想另外开启一个心得窗口，则需要在a里面再加上target=”_blank”
即：

<li><a href=”#” target=”_blank”>标题名字</a></li>

3、嵌套结构

ul和li可以相互嵌套

4、属性

Type:设置项目符号的类型

取值表示
disc黑色实心圆
circle空心圆
square正方形
none无

如果属性type加在ul当中，那么那一段所有行的项目符号都会改变；如果只是再li中，那么只有li那一行会改变。

<ul  type=circle>
	<li> </li>
	<li> </li>
	<li> </li>
	<li> </li>
</ul>

<ul>
	<li type=disc> </li>
	<li> </li>
	<li> </li>
	<li> </li>
</ul>

二、有序列表

1、基础结构

ol包含li，所有内容写在li里面

<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>

2、常用结构

ol嵌套li，li里面包含a

<ol>
	<li>  <a href=”#”> </a>  </li>
	<li>  <a href=”#”> </a>  </li>
	<li>  <a href=”#”> </a>  </li>
	<li>  <a href=”#”> </a>  </li>
</ol>

3、嵌套结构

ul和ol可以互相嵌套

4、属性

①type属性

是有提示的，1是默认的。

<ol type=””>
	<li></li>
	<li></li>
	<li></li>
</ol>

②start属性

取值为数字，表示从第几个数字开始，取值为number（数字）

<ol type=”Ⅰ” start=”4”>
	<li></li>
	<li></li>
	<li></li>
</ol>

③reversed

倒序的

<ol type=”Ⅰ” start=”4” reversed=”reversed”>或者<ol type=”Ⅰ” reversed”>（当属性值和属性相等的时候，可以简写）
<li></li>
<li></li>
<li></li>
</ol>

倒数完之后接着从阿拉伯数字开始倒数

三、自定义列表

基础结构

<dl>
	<dt>自定义列表的主题</dt>
	<dd>自定义列表的描述</dd>
</dl>

dt和dd是平级关系
经常用来做图片和图片的描述
一个主题可以有多个描述
一个自定义列表可以有多个主题
描述比主题多缩进两个字符

四、自定义练习如下：

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时代少年团TNT</title>
</head>

<body>
    一、无序列表练习
    <p>时代少年团
        <ul>
            <li><a href="https://baike.baidu.com/item/%E4%B8%81%E7%A8%8B%E9%91%AB/19867860" target="_blank">丁程鑫</a></li>
            <li><a href="https://baike.baidu.com/item/%E9%A9%AC%E5%98%89%E7%A5%BA/17979493" target="_blank">马嘉祺</a></li>
            <li><a href="https://baike.baidu.com/item/%E5%BC%A0%E7%9C%9F%E6%BA%90/5579766" target="_blank">张真源</a></li>
            <li><a href="https://baike.baidu.com/item/%E5%AE%8B%E4%BA%9A%E8%BD%A9" target="_blank">宋亚轩</a></li>
            <li><a href="https://baike.baidu.com/item/%E8%B4%BA%E5%B3%BB%E9%9C%96" target="_blank">贺峻霖</a></li>
            <li><a href="https://baike.baidu.com/item/%E4%B8%A5%E6%B5%A9%E7%BF%94" target="_blank">严浩翔</a></li>
            <li><a href="https://baike.baidu.com/item/%E5%88%98%E8%80%80%E6%96%87/22107590" target="_blank">刘耀文</a></li>
        </ul>
    </p>
    <p>
        <ul type="square">
            <li>
                刘耀文
                <ul>
                    <li type="disc">真可爱</li>
                    <li>真帅气</li>
                    <li>超级棒</li>
                </ul>

            </li>
        </ul>
    </p>

    二、有序列表练习
    <p>
        时代少年团
        <ol type="I" start="3" reversed>
            <li><a href="https://baike.baidu.com/item/%E4%B8%81%E7%A8%8B%E9%91%AB/19867860" target="_blank">丁程鑫</a></li>
            <li><a href="https://baike.baidu.com/item/%E9%A9%AC%E5%98%89%E7%A5%BA/17979493" target="_blank">马嘉祺</a></li>
            <li><a href="https://baike.baidu.com/item/%E5%BC%A0%E7%9C%9F%E6%BA%90/5579766" target="_blank">张真源</a></li>
            <li><a href="https://baike.baidu.com/item/%E5%AE%8B%E4%BA%9A%E8%BD%A9" target="_blank">宋亚轩</a></li>
            <li><a href="https://baike.baidu.com/item/%E8%B4%BA%E5%B3%BB%E9%9C%96" target="_blank">贺峻霖</a></li>
            <li><a href="https://baike.baidu.com/item/%E4%B8%A5%E6%B5%A9%E7%BF%94" target="_blank">严浩翔</a></li>
            <li><a href="https://baike.baidu.com/item/%E5%88%98%E8%80%80%E6%96%87/22107590" target="_blank">刘耀文</a></li>
        </ol>
    </p>

    三、自定义列表练习
    <p>
        <dl>
            <dt><img src="https://bkimg.cdn.bcebos.com/pic/8b82b9014a90f603738d5a83c05ba41bb051f9194796?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5/format,f_auto" alt="TNT"></dt>
            <dd>时代少年团</dd>
        </dl>
    </p>


</body>

</html>

运行结果如下：
结果1
结果2

Camina hacia ti
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML---列表
Ywyyy231128的博客
11-12 4401
和和标记和
[HTML]列表、表格、表单
m0_72058032的博客
07-09 365
列表 1.无序列表2.有序列表 3.定义列表 练习一​ 二、表格 列表练习 三、表单1、表单标签2、表单域文本框密码框单选框： 复选框： 文本域：下拉选择框3.按钮 效果如下： 效果如下： 效果如下： 效果图 属性：border 边框cellspacing: 代表格与格之间的距离cellpadding: 代表内容距离格子四周的距离bgcolor: 背景颜色width/height： 宽高rules： 值：none 格的四条边都不显示 ............
HTML系列之列表
StayAlive1887的博客
07-12 2560
名词列表项列表项列表项
HTML之列表标签——无序(ul)、有序(ol)、自定义(dl)
yoghurt&girl的博客
05-28 8691
CSDN话题挑战赛第1期 活动详情地址：CSDN 参赛话题：前端学习记录 话题描述：记录前端学习过程中的某个知识点、解决方案等等 概念 在平时网页设计中我们最常见的就是无序列表，有序列表就是会有顺序，我们也可以自定义序号的样式，而无序列表则是不分顺序的，自定义列表就如他名字一样，根据用户需要自定义。 语法格式： 有序列表语法格式： <ol> <li>列表一</li> ..... </ol> 无序列...
HTML无序列表
LEVIATHANq的博客
11-06 3961
无
HTML列表.rar
04-05
HTML列表是网页设计中不可或缺的一部分，它们用于组织和呈现有序或无序的信息。在这个名为"HTML列表.rar"的压缩包中，很可能包含了易语言编写的关于HTML列表的源代码示例，供学习者参考和实践。易语言是一种中文编程...
HTML 列表
12-13
HTML 列表   HTML 支持有序、无序和定义列表: HTML 列表 有序列表第一个列表项 第二个列表项 第三个列表项 无序列表列表项 列表项 列表项   在线实例 本例演示无序列表。 本例演示有序列表。 （可以...
Python 列表.html
02-06
了解什么是列表?用列表可以解决哪些问题？如何更新列表？添加、插入、删除对象，遍历列表中的元素，切片，列表排序，
浅谈html有序列表、无序列表与定义列表
12-30
有序列表 XML/HTML Code复制内容到剪贴板 , start> <!–ordered list–>  第一项  第二项    无序列表 XML/HTML Code复制内容到剪贴板  <!–unordered list–> <!–还有两种type：circle，...
html无序列表标签和有序列表标签使用示例
12-13
一、上下层列表标签:<dl>..</dl>： 上层dt下层dd：封装的内容会被自动缩进的效果 复制代码代码如下:<dl><dt>运动户外</dt><dd>板鞋</dd><dd>篮球鞋</dd><dd>足球鞋</dd><dd>跑步鞋</dd></dl> 二、定义有序列表: ...
使用 React 和 Redux 进行井字游戏并附带源代码.zip
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）
07-24
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明） 该设计为DK124控制的开关电源，实现12V 2A输出； 功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；
基于Springboot和Vue的生鲜超市管理的设计与实现源码 生鲜超市管理的设计与实现代码（优秀毕业设计）
07-24
生鲜超市管理的设计与实现源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
使用 ReactJs 编写的简单旅行计划器（附源代码）.zip
07-24
项目：使用 ReactJS 编写的简单旅行计划器（附源代码） ReactJs 中的简单旅行计划器是一个简单的 JavaScript 项目。该项目是 ReactJS 中待办应用程序的一个简单示例。 关于项目 Simple Trip Planner In Reactjs 是使用ReactJS开发的。这个项目很容易做一种应用程序。这个项目使用 React 库来完成任务。为了运行这个项目，你必须在系统中安装 NodeJs。当你运行这个项目时，你的应用程序从主页开始。从那里你可以导航到菜单。你只能将计划添加到你的书中。你还可以对旅行进行分类。你所要做的就是输入日期和地点，然后选择你想要的旅行计划类型。 要运行此项目，您需要 在计算机上安装ReactJS和 NodeJs，并使用现代浏览器，例如Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
俄罗斯方块的python代码
07-24
这段Python代码实现了一个简单的俄罗斯方块游戏，使用Pygame库处理图形和用户输入。游戏初始化Pygame库并设置屏幕大小为800x600像素，定义不同颜色和形状的方块。游戏由一个`Tetris`类管理，负责游戏状态和逻辑操作，每个方块由一个`Block`类表示，包含其形状、颜色、位置等信息。 在主循环中，游戏通过事件处理机制响应用户的键盘输入，箭头键用于移动和旋转方块，空格键用于快速下落。游戏会检测方块是否与已有的方块或边界发生碰撞，如发生碰撞，当前方块会固定在场地上并生成新方块。填满的行会被清除，玩家获得相应分数。 游戏通过一个二维数组维护场地状态，每个元素表示一个单元格是否被占据，通过检查和清除单元格实现行消除。整个游戏不断刷新屏幕更新显示，确保流畅运行，绘制背景、方块和边框，使界面美观易理解。 总体而言，这段代码展示了如何使用Pygame库实现经典俄罗斯方块游戏，包括图形绘制、用户输入处理和基本游戏逻辑，让玩家通过移动和旋转方块消除行并获得高分。
绿色金融：“双碳”经济时代，银行业务增长新引擎-埃森哲(
07-24
绿色金融：“双碳”经济时代，银行业务增长新引擎-埃森哲(
基于Springboot和Vue的结合疫情情况的婚恋系统源码 结合疫情情况的婚恋系统代码（高分毕设）
最新发布
07-24
结合疫情情况的婚恋系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值