html里列表如何制作,HTML列表制作讲解——零基础自学网页制作

有序列表

经过之前关于表格、表单的学习后，再来学习列表，就显得非常的简单和容易理解了。

学习是构建知识体系的过程，没有形成体系的知识学习再多也是碎片，是很难形成技能或深刻理解的，因此，如果您是零基础的初学者，第一次看我的教程，如果时间允许的话，请务必从目录中找寻第一篇，循序渐进的学习。

列表分为有序列表、无序列表和定义列表，同时列表之中还能嵌套列表，和表格非常相似。

首先介绍有序列表

要用

标签告诉浏览器这里是列表。

然后在里面添加

标签，在这个标签中添加内容即可。

示例代码如下

我喜欢的水果

1. 葡萄
2. 西瓜
3. 苹果
4. 桃子

大家可以把它放到一个新的html框架中看看效果。

完整代码如下：

列表有序列表

我喜欢的水果

1. 葡萄
2. 西瓜
3. 苹果
4. 桃子

页面效果如下：

通过修改

1. 标签中的type属性我们可以改变序号显示的样式，默认的是数字，大家看一下不同的type值的不同效果吧！示例代码如下：
   1. 葡萄
   2. 西瓜
   3. 苹果
   4. 桃子
   1. 葡萄
   2. 西瓜
   3. 苹果
   4. 桃子 、
   1. 葡萄
   2. 西瓜
   3. 苹果
   4. 桃子
   页面效果如下：

下面给大家介绍一下搜狗输入法中如何输入罗马数字。

step1.点击"输入方式"

step2.点击"特殊符号"后选择数字序号，找到罗马数字即可

除此之外我们还可以使用CSS的方法为有序列表的序号提供更多样式。在

1. 标签中修改style属性可以直接调用这些css中的属性。写法是style="list-style-type:属性值；"

示例代码如下：(使用日语中的片假名表示序号)

1. 葡萄
2. 西瓜
3. 苹果
4. 桃子

页面效果如图所示：

是不是很有趣，这里的测试就不一一做了。为大家奉上list-style-type的值的列表与说明，大家自己课下去尝试，这个列表中既有有序列表的值也有无序列表的值。

如图：

资料来自w3school

无序列表

无序列表与有序列表的区别在于最外层的标签，它的写法是这样的：

有一个记忆的小技巧，有序的英文是order，故有序列表为order list(列表)，缩写为ol。

无序为unorder，无序列表为unorder list，缩写为ul。

无序列表

• 标签的type属性用来控制列表前的标记显示演示。

示例代码如下：

无序列表

我喜欢的水果

• 葡萄
• 西瓜
• 苹果
• 桃子

• 葡萄
• 西瓜
• 苹果
• 桃子

• 葡萄
• 西瓜
• 苹果
• 桃子

• 葡萄
• 西瓜
• 苹果
• 桃子

页面效果如下：

通过图片我们可知，无序列表默认的列表标识就是type="disc"。

style属性的话大家自己试试吧，这里就不啰嗦了。

定义列表

这个列表比较特殊，也比较不常见，主要就是显示名词定义的。

首先要写入

标签。这是告诉浏览器这里是个定义列表，和

1. 或

• 一样。

定义的英文是definition，定义列表就是definition list，缩写是dl。

下面在

标签中间写入定义的名称,即definition title(标题)。

与定义名称标签并列的是定义描述

,即definition describe(描述)。

示例代码如下：

计算机

用来计算的仪器 ... ...

显示器

以视觉方式显示信息的装置 ... ...

页面效果如下：

今天的内容结束了！

列表嵌套列表的测试大家自己试试吧，学到现在，相信你们都可以完成了！

如果您喜欢我的教程请关注我，点赞也能让我充满动力！

如果您有任何疑问请给我留言，如有问题或错误请予以斧正！

举报/反馈