当前位置：首页 > news >正文

html列表总结补充

news 2025/9/14 11:37:12

1.有序列表的type属性

不同的type值表示不同的排序标号

1 表示列表项目用数字标号（1,2,3...）

a 表示列表项目用小写字母标号（a,b,c...）

A 表示列表项目用大写字母标号（A,B,C...）

i 表示列表项目用小写罗马数字标号（i,ii,iii...）

I 表示列表项目用大写罗马数字标号（I,II,III...）

实例：

<body>

<ol>
<li>尚学堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京东</li>
</ol>

<ol type="1">
<li>尚学堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京东</li>
</ol>

<ol type="a">
<li>尚学堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京东</li>
</ol>

<ol type="A">
<li>尚学堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京东</li>
</ol>

<ol type="i">
<li>尚学堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京东</li>
</ol>

<ol type="I">
<li>尚学堂</li>
<li>itbaizhan</li>
<li>阿里</li>
<li>京东</li>
</ol>

<ol>
<li>100</li>
<li>
<ol>
<li>201</li>
<li>202</li>
<li>203</li>
</ol>
</li>
<li>300</li>
</ol>

</body>

2.无序列表

无序列表的type属性

disc 默认实心圆

circle 空心圆

square 小方块

none 不显示

这个type属性也是表示的每一项前面的标号，不过抽象的用符号表示

<body>

<ul>
<li>尚学堂</li>
<li>itbaizhan</li>
<li>京东</li>
<li>阿里</li>
</ul>

<ul type="disc">
<li>尚学堂</li>
<li>itbaizhan</li>
<li>京东</li>
<li>阿里</li>
</ul>

<ul type="circle">
<li>尚学堂</li>
<li>itbaizhan</li>
<li>京东</li>
<li>阿里</li>
</ul>

<ul type="square">
<li>尚学堂</li>
<li>itbaizhan</li>
<li>京东</li>
<li>阿里</li>
</ul>

<ul type="none">
<li>尚学堂</li>
<li>itbaizhan</li>
<li>京东</li>
<li>阿里</li>
</ul>

在以上代码中，无序列表是可以嵌套的，有序列表是不能嵌套的

3.列表快捷键：

快捷键的本质是将超链接套在一个载体之中

这是普通列表

<ul>
<li>Xiaomi手机</li>
<li>Redmi手机</li>
<li>电视</li>
<li>笔记本</li>
</ul>

这是嵌套之后的快捷键列表

<ul>
<li><a href="https://itbaizhan.com">itbaizhan</a></li>
<li><a href="https://mi.com">小米</a></li>
<li><a href="https://jd.com">京东</a></li>
</ul>

有序无序自定义列表都可以添加快捷键

4。自定义列表：

可以把自定义列表理解成生活里的 “物品 + 说明书” 组合 —— 它不只是简单列一堆东西，而是给每个东西都配上专门的解释 / 说明，就像你买了个家电，既有 “家电名称”（项目），又有 “家电用法”（注释），两者是一一对应的关系。

先看一个最直观的例子：用自定义列表介绍 3 种水果（项目）和它们的特点（注释），代码和效果对应如下：

<!-- 自定义列表的核心结构：dl（列表容器）、dt（项目，即“物品”）、dd（注释，即“说明书”） -->
<dl><!-- 第一个项目：苹果 --><dt>苹果</dt><!-- 苹果的注释：解释它的特点 --><dd>常见水果，口感脆甜，富含维生素C，能直接吃或做沙拉。</dd><!-- 第二个项目：香蕉 --><dt>香蕉</dt><!-- 香蕉的注释：解释它的特点 --><dd>热带水果，口感软糯，富含钾元素，能快速补充能量。</dd><!-- 第三个项目：葡萄 --><dt>葡萄</dt><!-- 葡萄的注释：解释它的特点 --><dd>串状水果，分甜、酸两种口味，富含花青素，适合鲜食或酿葡萄酒。</dd>
</dl>

这个例子里，你能清楚看到 “项目 + 注释” 的组合逻辑：