html 把值显示在页面_HTML列表制作讲解——零基础自学网页制作

有序列表

0d5491676b36527470744fbab5edb964.png

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

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

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

首先介绍有序列表

要用

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

然后在里面添加

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

示例代码如下

我喜欢的水果

葡萄 西瓜 苹果 桃子

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

完整代码如下:

       列表有序列表

我喜欢的水果

葡萄 西瓜 苹果 桃子

页面效果如下:

e7cc24c7cce2d0a7a0cad78747fc5172.png

通过修改

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

页面效果如下:

2ac07d0b1e2475fdf2a16d1cf58e5141.png

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

step1.点击"输入方式"

5f5fe999fbac6d70c7f4e8187f418684.png

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

b6c2ca537093aa5550f7c1efab5ee479.png

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

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

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

葡萄 西瓜 苹果 桃子

页面效果如图所示:

ae2172c2f5bed8aec646ad4d98f5f5b0.png

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

如图:

18ca430e088ed5cf84358af4cc8b3c8a.png

资料来自w3school

无序列表

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

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

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

无序列表

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

示例代码如下:

无序列表

我喜欢的水果

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

页面效果如下:

576953ccfe3f727f483921e195c4963c.png

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

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

定义列表

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

首先要写入

标签。这是告诉浏览器这里是个定义列表,和
  • 一样。

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

下面在

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

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

,即definition describe(描述)。

示例代码如下:

计算机 用来计算的仪器 ... ... 显示器 以视觉方式显示信息的装置 ... ...

页面效果如下:

7efb3ab68cb58cde0d1736e136fbd28f.png

今天的内容结束了!

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

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

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

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么?——零基础自学网页制作

第一个HTML页面如何写?——零基础自学网页制作

HTML页面中head标签有啥用?——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的

块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用标签实现文本内链接——零基础自学网页制作

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页