web前端之列表（五）————有序无序自定义

最新推荐文章于 2024-05-20 22:38:25 发布
最新推荐文章于 2024-05-20 22:38:25 发布
阅读量4.4k 收藏 5
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq939782569/article/details/65435213
版权

1。无序列表

<!DOCTYPE html>
<html>
<head>
<title>wuxu.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--
    ul无序列表
    ol有序列表有起始值 start从多少开始，默认从1开始

-->

</head>

<body>
    <h4>无序列表:</h4>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
</body>
</html>

2、有序列表

<!DOCTYPE html>
<html>
<head>
<title>youxu.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>
    <ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>

    <ol start="50">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>
</body>
</html>

3、自定义列表

<!DOCTYPE html>
<html>
<head>
<title>zidingyi.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--
    自定义列表不仅仅是一列项目，而是项目及其注释的组合。
    自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
-->

</head>

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

4、不同类型的有序列表

<!DOCTYPE html>
<html>
<head>
<title>butongleixing.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--有序列表，根据Type去定义不同类型的起始值-->

</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>

5、不同类型无序列表

<!DOCTYPE html>
<html>
<head>
<title>butongwuxu.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


</head>

<body>
    <p>
        <b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS
        代替来定义不同类型的无序列表如下：
    </p>

    <h4>圆点列表：</h4>
    <ul style="list-style-type:disc">
        <li>Apples</li>
        <li>Bananas</li>
        <li>Lemons</li>
        <li>Oranges</li>
    </ul>

    <h4>圆圈列表：</h4>
    <ul style="list-style-type:circle">
        <li>Apples</li>
        <li>Bananas</li>
        <li>Lemons</li>
        <li>Oranges</li>
    </ul>

    <h4>正方形列表：</h4>
    <ul style="list-style-type:square">
        <li>Apples</li>
        <li>Bananas</li>
        <li>Lemons</li>
        <li>Oranges</li>
    </ul>
</body>
</html>

6、两层嵌套列表

<!DOCTYPE html>
<html>
  <head>
    <title>qiantaoliebiao.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <h4>
        <ul>
            <li>Coffee</li>
                <li>Tea
                    <ul>
                    <li>Black tea</li>
                    <li>Green tea</li>
                    </ul>   
                </li>
            <li>milk</li>
        </ul>

    </h4>
  </body>
</html>

7、三层嵌套列表

<!DOCTYPE html>
<html>
  <head>
    <title>sancengqiantao.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <h4>
        <ul>
            <li>coffee</li>
            <li>Tea
                <ul>
                    <li>
                        Black tea
                    </li>
                    <li>Green tea
                        <ul>
                            <li>
                            China
                            </li>
                            <li>
                            Afria
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
            Milk
            </li>

        </ul>


    </h4>
  </body>
</html>
哎吆我呸
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web第七课：列表
YY的博客
08-23 1517
有序标签、无序标签、自定义标签
HTML_CSS学习笔记.docx
07-15
4.2. <ol><li>标签：实现有序列表 16 5. HTML5图片，链接&表格标签 16 5.1. 标签：为网页添加图片 16 5.2. 标签：为网页添加超链接 17 5.3. 标签 target属性：在窗口中打开链接 17 5.4. 家族：为网页添加表格 18 5.5...
零基础学习WEB前端开发(十)：列表标签（无序列表、自定义列表、有序列表）
陶小桃Blog
10-28 3090
列表主要是用来布局的。 列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由方便。 列表的分类： 无序列表 有序列表 自定义列表 一、无序列表 <ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，列表项使用<li>标签定义。 1.1 基本语法 <ul> <li>列表项1</li> <li>列表项1</li> <li>列表项1</..
Web前端开发技术、详细文章、（例子）html 列表、有序列表、无序列表、列表嵌套
jingyu飞鸟
05-20 1143
为首标记，以...
Web前端开发技术-第四章-列表
weixin_61909417的博客
10-20 1019
这章我们学习的是HTML中的列表，其中有无序列表、有序列表、定义列表和列表之间的相互嵌套。无序列表要知道无序列表的3个符号，有序列表要认识有序列表中编号的5种type的取值和起始编号对后续编号的影响，定义列表要明白格式，先是列表的标记，后是标题的标记和最后的标题的内容。最重要的是要清楚列表中的嵌套。
web前端——列表标签
xishaoguo的博客
02-26 6799
列表标签分为：有序列表、无序列表、自定义列表有序列表：                &lt;ol&gt;                    &lt;li&gt;你&lt;/li&gt;                    &lt;li&gt;我&lt;/li&gt;                    &lt;li&gt;他&lt;/li&gt;                &
Web前端技术基础实验报告四之列表实现简易网站导航
Lucky的博客
05-09 8800
Web前端技术基础实验报告四之列表实现简易网站导航
Web编程入门经典-HTML、XHTML和CSS(第2版)
05-21
8. **Web组件和框架**：随着Web开发的进步，源代码可能包含使用Bootstrap或其它前端框架构建的页面，以及自定义组件的实现。 9. **Web Accessibility**：遵循无障碍网页标准（WCAG）的示例，帮助创建对所有用户友好...
NhanNguyenCWU.github.io:Web基础知识组合网站项目
05-13
6. **列表元素**：`<ul>`和`<ol>`创建无序和有序列表，`<li>`定义列表项。 7. **表格元素**：`<table>`、`<tr>`（行）、`<td>`（单元格）和`<th>`（表头）用于组织数据。 8. **表单元素**：`<form>`、`<input>`、`...
Java_A markdown editor that you can deploy on your own serv.zip
最新发布
05-21
常见的Markdown语法包括#（标题）、*斜体*、**粗体**、`代码段`、-（无序列表）、1.（有序列表）等。 2. **Java**: Java是一种广泛使用的面向对象的编程语言，具有跨平台性、安全性强和性能高效等特点。在这个项目...
Particle_Templates:Particle.js设计模板集合
04-29
Particle.js支持自定义粒子形状，六边形粒子可以构建出有序或无序的图形，创造出极具现代感的视觉体验。这种模板可以应用于背景、加载动画或交互式界面中。 3. basic1模式：作为基础模板之一，basic1模式展示了粒子...
web前端--------列表
binhyun的博客
01-21 554
dl是definition list的缩写 ，表示定义列表。<dl>标签一般和<dd>、<dt>标签配合使用，不会单独出现，且尽量在<dl>标签中只使用<dd>、<dt>标签。一般情况下，一个<dl>标签可以包含多对<dt>和<dd>。dt是definition term的缩写，表示术语，也就是我们说的标题。<dt>标签不能单独存在，必须包裹在<dl>标签中。<dt>标签和<li>标签一样属于容器标签，里面可以添加任意标签，也就是可以包含段落、图片、链接、列表等dd。
根据要求完成以下网页菜单： 1、使用无序列表和超链接完成菜单； 2、鼠标悬停菜单后，菜单样式发生变化。
lmhnba的博客
10-01 2343
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ​ \* { ​ p
在HTML 页面中如何显示带圈圈的数字
oscar999的专栏
08-02 5081
本篇介绍如何使用Unicode统一编码在HTML页面中便捷显示带圈圈的数字。
Web第八讲：列表和超链接
m0_47670683的博客
12-06 1952
列表内容提要 无序列表、有序列表 定义列表标记语法及属性语法 菜单列表、目录列表标记语法 使用无序、有序及定义列表设计Web网页 使用嵌套列表设计小型网站首页 列表的简介 列表能对网页中的相关信息进行合理的布局，将项目有序或无序地罗列在一起，从而方便用户浏览和操作。 HTML中列表一共有5种，分别是无序列表、有序列表、定义列表、菜单列表、目录列表。其中较常用的是无序列表、有序...
Web前端开发笔记8——列表
DRLDER的博客
04-16 754
1.列表是用来排序布局的，主要分为下面的三类： 无序列表 有序列表 自定义列表 2.无序列表：包含ul和li标签，分别表示列表定义及每一行主体。 <h3>下面是无须列表，以手机品牌为例</h3> <ul> <li>华为</li> <li>三星</li> <li>小米</li> <li>vivo</li> </ul> 代码效
前端HTML入门——无序列表、有序列表、自定义列表
中意你的博客
03-26 3536
无序列表的标签格式 <ul> <li>...</li> </ul> 代码图： 效果图： 使用无序列表需要注意，在<ul>..</ul>内只能使用<li>..</li>标签，即不能出现其它与<li>..</li>标签同级的标签 有序列表的标签格式 <ol...
HTML中的有序排列和无序列表标签
不是很好的先生
06-08 7274
自己有感而发，有帮助自好，无帮助请略过~
html中关于有序列表、无序列表和自定义列表之间的区别
热门推荐
qingyisuo的博客
12-28 5万+
有序列表（ol-li） <ol > <li>dd</li> <li>aa</li> <li>dd</li> </ol>如图一 可以发现在有序列表中默认的type类型是数字，而且是从1开始的。它有两个属性：type、start。 type：有五个属性值：1、a、A、i、I(罗马数字)，表示列表
web中的有序列表和无序列表
03-11
有序列表使用 <ol> 标签，无序列表使用 <ul> 标签。有序列表中的每个项目都有一个编号，而无序列表中的每个项目都有一个符号。例如： 有序列表： 第一项 第二项 第三项 无序列表： 第一项 第二项 第三项 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值