HTML-列表

最新推荐文章于 2023-10-12 23:00:27 发布
最新推荐文章于 2023-10-12 23:00:27 发布
阅读量317 收藏
点赞数
分类专栏： Html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/grace666/article/details/52854112
版权

1.无序列表

（1）是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记

（2）始于 <ul> 标签，每个列表项始于 <li>

（3）列表项内部可以使用段落、换行符、图片、链接以及其他列表等等


示例代码：

<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html>

<head>
</head>

<meta charset="utf-8">

<body style="background-color:green;color:white">
<!--定义无序列表-->
<ul>
    <li>Coffee</li>
    <li>Milk</li>
    <li>D:\download\testimg2.gif</li>
</ul>

</body>
</html></span></span></span>

展示效果：


（4）不同类型的无序列表：

示例代码：

<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html>

<head>
</head>

<meta charset="utf-8">

<body style="background-color:green;color:white">
<h4>Disc 项目符号列表：</h4>
<ul type="disc">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

<h4>Circle 项目符号列表：</h4>
<ul type="circle">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

<h4>Square 项目符号列表：</h4>
<ul type="square">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

</body>
</html></span></span>

展示效果：



（5）嵌套列表1：

示例代码：

<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html>

<head>
</head>

<meta charset="utf-8">

<body style="background-color:green;color:white">
<!--嵌套列表-->
<h4>嵌套列表1：</h4>
<ul>
    <li>咖啡</li>
    <li>茶
        <ul>
            <li>红茶</li>
            <li>绿茶</li>
        </ul>
    </li>
    <li>牛奶</li>
</ul>
</body>
</html></span></span>

展示效果：



（6）嵌套列表2：

示例代码：

<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html>

<head>
</head>

<meta charset="utf-8">

<body style="background-color:green;color:white">
<h4>嵌套列表2：</h4>
<ul>
    <li>咖啡</li>
    <li>茶
        <ul>
            <li>红茶</li>
            <li>
                绿茶
                <ul>
                    <li>中国茶</li>
                    <li>非洲茶</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>牛奶</li>
</ul>
</body>
</html></span></span>

展示效果：



2.有序列表

（1）也是一列项目，列表项目使用数字进行标记

（2）有序列表始于 <ol> 标签，每个列表项始于 <li> 标签

（3）列表项内部可以使用段落、换行符、图片、链接以及其他列表等


示例代码：

<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html>

<head>
</head>

<meta charset="utf-8">

<body style="background-color:green;color:white">
<!--定义有序列表-->
<ol>
    <li>Coffee</li>
    <li>Milk</li>
    <li>D:\download\testimg2.gif</li>
</ol>

</body>
</html></span></span></span>
展示效果：



（4）不同类型的有序列表

示例代码：

<!--不同类型的有序列表-->
<h4>数字列表：</h4>
<ol>
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ol>

<h4>字母列表：</h4>
<ol type="A">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ol>

<h4>小写字母列表：</h4>
<ol type="a">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ol>

<h4>罗马字母列表：</h4>
<ol type="I">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ol>

<h4>小写罗马字母列表：</h4>
<ol type="i">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ol>

展示效果：



3.自定义列表

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

（2）自定义列表以 <dl> 标签开始，每个自定义列表项以 <dt> 开始，每个自定义列表项的定义以 <dd> 开始。

示例代码：

<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html>

<head>
</head>

<meta charset="utf-8">

<body style="background-color:green;color:white">
<!--定义自定义列表-->
<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dd>aaaaaa</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

</body>
</html></span></span></span>
展示效果：



grace666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML列表
zxc_c_java的博客
08-24 237
列表和前面文章中讲的表格是有区别的，列表可以作为当前站点的一个内容分类的集中 无序列表： 无序列表是一个项目列表，这个列表使用粗体圆点标记，无序列表始于标签，每个列表项始于标签 例：              item1         item2        有序列表： 有序列表项目用数字来标记 有序列表始于标签，每个列表项始于标签 例：
html描述列表在线实例,HTML 列表(示例代码)
weixin_35997246的博客
05-31 300
HTML 支持有序、无序和定义列表:HTML 列表有序列表第一个列表项第二个列表项第三个列表项无序列表列表项列表项列表项在线实例无序列表本例演示无序列表。有序列表本例演示有序列表。(可以在本页底端找到更多实例。)HTML无序列表无序列表是一个项目的列表，此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表使用 标签CoffeeMilk浏览器显示如下：CoffeeMilkHTML 有序列表同样...
html项目列表类型值,HTML有序列表
weixin_33736666的博客
06-23 368
示例可以使用标记创建有序列表，并且可以使用标记创建每个列表项，如下例所示：ItemAnotherItemYetAnotherItem这将产生一个编号列表(这是默认样式)：项目另一个项目另一个项目手动更改数字有几种方法可以使数字显示在有序列表的列表项中。第一种方法是使用start属性设置起始号码。该列表将从此定义的数字开始，然后像往常一样继续增加一。ItemSomeOtherItemYet...
用html帮我写一个聊天列表
weixin_35749796的博客
02-13 214
好的，这是一个简单的HTML聊天列表的例子： <html> <head> <title>聊天列表</title> </head> <body> <h1>聊天列表</h1> <ul> <li>用户1: 您好，今天天气怎么样？</...
HTML-聊天-信息（内容）框，编写
qq_43323894的博客
08-10 1660
HTML-聊天-信息（内容）框，编写 成品展示 1.html代码 <div class="allChat"> <ul class="right"> <li> <span class="content"> 陕西省交界处学史力行什么啊 心理学陕西省交界处学史力行 界处学史力行什么心理学陕西 学史力行什么心理学莫西莫西 </span> </li> </ul> </di
HTML-列表和表格，2D3D动画
07-08
本人清风，这次给大家分享本人学习的心得和笔记，记录点点滴滴，用的md格式，这是第五个，列表 和表格，2D3D动画
HTML练习题-列表源代码
07-05
HTML练习题--列表源代码
09-动态生成列表.html
02-15
09-动态生成列表.html
某马机构----列表.rar
09-28
在前端开发领域，HTML（HyperText Markup Language）是构建网页内容的...熟练运用HTML列表不仅可以提高网页的可读性和用户体验，还能为后续学习更复杂的前端技术（如JavaScript、jQuery和响应式设计）打下坚实基础。
使用HTML开发商业网站-列表样式属性-image课件.pptx
07-10
通过这种方式，HTML列表不再局限于基础样式，可以根据设计师的需求创造出各种独特的视觉效果，从而提升商业网站的用户体验和吸引力。在实际开发中，我们可以结合其他CSS属性如颜色、边距等进一步调整列表的外观，以...
html如何写对话框,用css写一个对话框
weixin_31481495的博客
06-07 2134
要实现的对话框效果首先分析一下对话框的组成：大致可以分两部分，左边的矩形和右边的三角形。矩形实现起来简单，那么三角形呢？三角形的实现首先要从div说起1.首先画一个div，给它设置宽高和背景颜色。再加上四条边的边框Document.one{width:100px;height:100px;border-top: 50px solid pink;border-left: 50px solid red...
【HTML网页设计 + CSS样式表】详细记录 / 含代码 by.Akaxi
Akaxi的博客
10-12 6151
【HTML网页设计 + CSS样式表】详细记录 / 含代码
HTML（列表代码 ）
Lin_yuzhao的博客
03-25 2666
linyuzhao body{ counter-reset: OuterItemCount 5 InnerItemCount; } #outerlist>li:before{ content:counter(OuterItemCount)"."; counter-increment: OuterItemCount 2; } ul.innerlist>li:bef
html项目列表页面源码,HTML 列表
weixin_30696613的博客
06-04 1487
HTML 列表HTML 支持有序、无序和定义列表:HTML 列表有序列表第一个列表项第二个列表项第三个列表项无序列表列表项列表项列表项在线实例无序列表本例演示无序列表。有序列表本例演示有序列表。(可以在本页底端找到更多实例。)HTML无序列表无序列表是一个项目的列表，此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表使用 标签CoffeeMilk浏览器显示如下：CoffeeMilkHTML...
测试开发系列之——项目模块&项目列表功能
anniewhite的博客
02-23 1183
目录project模块项目列表ProjectController.java的代码Postman调用查询项目列表接口前端编码前端projectList.html的代码访问项目列表页面遇到的问题汇总 project模块 与用户表有关联 userId 项目列表 统计count 查询id 新增 删除 更新 项目列表 shiro filter：进入项目页面，首先判断用户是否登录，如果未登录，进入到登录...
HTML-预文本格式&计算机输出标签
grace666的专栏
07-19 6917
1.预文本格式标签： （1）用来定义预格式化的文本，被包围在此标签中的文本通常会保留空格和换行符，并且文本也会以等宽形式呈现 （2）一个常见的应用便是用来保存计算机中的源代码的文本。但是，需要注意的是， 可以导致段落断开的标签（例如标题、 和 标签）绝不能包含在 所定义的块里。 pre标签允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。 当把其他标签（比如 标
HTML-h、p、a、img标签小试
grace666的专栏
07-04 3274
1.HTML标题（Heading） （1）通过 - 等标签进行定义的 示例代码如下： My First Heading This is heading-1 This is heading-2 This is heading-3 This is heading-6 My 7 Headings My di 11 Headings 效果图： 2.HTML
HTML-表格
grace666的专栏
10-10 1232
1.表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。 2.字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 3.如果不定义边框属性，表格将不显示边框，定义边框用border属性 4.表格的表头使用 标签进行定义。大多数浏览器会把表头显示为粗体居中的
HTML-块和类
grace666的专栏
12-03 1143
1.块元素 （1）大多数 HTML 元素被定义为块级元素或内联元素。 （2）块级元素在浏览器显示时，通常会以新行来开始（和结束），比如：, , , 2.内联元素 （1）在显示时通常不会以新行开始，例如：, , , 3.元素 （1）HTML 元素是块级元素，它是可用于组合其他 HTML 元素的容器。 （2） 元素没有特定的含义，除此之外，由于它属于块级
z-paging虚拟列表
最新发布
12-08
```html <z-paging :total="total" :page-size="pageSize" :current-page="currentPage" :virtual="true" :item-height="itemHeight" :data-source="dataSource" @page-change="handlePageChange" > ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值