php%3cul%3e 无序列表,详解网页HTML有序列表ol和无序列表ul

r囧r小猫 2022-10-21 13:58 45阅读 0赞

本文详解网页HTML有序列表ol和无序列表ul

用于组织数据的列表

学习了这么多控制网页显示的HTML标签，读者可以初步制作纯文章页面了。本节学习HTML中的列表元素，列表形式在网站设计中占有比较大的比重，显示信息非常整齐直观，便于用户理解。在后面的CSS样式学习中将大量使用到列表元素的高级作用。

用于组织数据的列表

学习了这么多控制网页显示的HTML标签，读者可以初步制作纯文章页面了。本节学习HTML中的列表元素，列表形式在网站设计中占有比较大的比重，显示信息非常整齐直观，便于用户理解。在后面的CSS样式学习中将大量使用到列表元素的高级作用。

![1a132aa7500afb7f67fc08e25c6fcf2f.gif][]

4.4.1 列表的结构组成

HTML的列表元素是一个由列表标签封闭的结构，包含的列表项由

组成。具体结构如图4.17所示。

4.4.2 制作无序列表

顾名思义，无序列表就是列表结构中的列表项没有先后顺序的列表形式。大部分网页应用中的列表均采用无序列表，其列表标签采用

*  列表项一
 *  列表项二
 *  列表项三
 *  列表项四
 *  列表项五

![afbc20efa342022167e4f6190c889b30.png][] 4.4.3 制作有序列表

顾名思义，有序列表就是列表结构中的列表项有先后顺序的列表形式，从上到下可以有各种不同的序列编号，如1、2、3或a、b、c等。在D:\\web\\目录下创建网页文件，命名为ul\_ol.htm，编写代码如代码4.17所示。

代码4.17 列表的设置：ul\_ol.htm

列表的设置

网页前台技术

*  HTML
 *  CSS
 *  JavaScript
 *  FLASH

网页后台的学习

1.  ASP
2.  ASP.net
3.  PHP
4.  CGI
5.  Ruby
6.  Python

在浏览器地址栏输入http://localhost/ul\_ol.htm，浏览效果如图4.18所示。

![85a81775af9180ccab52ee1c711b7480.png][]

图4.18 列表的设置

[1a132aa7500afb7f67fc08e25c6fcf2f.gif]: /images/20221021/ce3fc584c41a445f99fc9ba9e3abbbec.png
[afbc20efa342022167e4f6190c889b30.png]: /images/20221021/59207be1c3c148359b5128213f2b2c6c.png
[85a81775af9180ccab52ee1c711b7480.png]: /images/20221021/b657415c16a24dbda207747c1ba14c32.png

发表评论取消回复

表情：

评论列表（有 0 条评论，45人围观）

还没有评论，来说两句吧...

相关阅读

相关无序列表＜ul＞和有序列表＜ol＞

（1）创建无序列表 `<ul>` 标签定义无序列表。将 `<ul>` 标签与 `<li>` 标签一起使用，创建无序列表。 ![在这里插入图片描述][b758531

今天药忘吃喽~/ 2024年03月29日 15:46/ 0 赞/ 124 阅读

相关如何创建无序列表和有序列表？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 无序列表 ⭐ 无序列表 ⭐ 注意事项 ⭐ 写在最后 --------------------

小灰灰/ 2023年10月14日 14:01/ 0 赞/ 87 阅读

相关有序列表、无序列表、嵌套列表

<!DOCTYPE HTML PUBLIC "-//DTD//W3C HTML 4.01 Transitional//EN" "http://www.w3.org/TR

た入场券/ 2023年06月30日 02:57/ 0 赞/ 48 阅读

相关 html之无序列表和有序列表

无序列表 html代码： <ul type=""> <li>苹果</li> <li>梨</li> <li>香

以你之姓@/ 2022年12月19日 13:13/ 0 赞/ 213 阅读

相关 HTML中的有序列表、无序列表和自定义列表

列表标签表格是用来显示数据的，列表用来布局列表最大的特点就是整齐、整洁、有序，它作为布局会更加的自由和方便。列表可以分为三大类：无序列表、有序列表和自定义列表。

ゞ浴缸里的玫瑰/ 2022年12月15日 14:14/ 0 赞/ 250 阅读

相关 php%3cul%3e 无序列表,详解网页HTML有序列表ol和无序列表ul

本文详解网页HTML有序列表ol和无序列表ul 用于组织数据的列表学习了这么多控制网页显示的HTML标签，读者可以初步制作纯文章页面了。本节学习HTML中的列表元素，列表

r囧r小猫/ 2022年10月21日 13:58/ 0 赞/ 46 阅读

相关有序列表<ol>与无序列表ul用法

有序列表<ol>与无序列表ul用法其中<li> 标签定义列表项目，<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。 ![watermark_ty

亦凉/ 2022年03月17日 20:16/ 0 赞/ 454 阅读

相关 HTML的无序列表、有序列表、自定义列表

HTML的无序列表： 1.无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul 标签。每个列表项始于 <li。 > 2.无

落日映苍穹つ/ 2022年02月15日 18:25/ 0 赞/ 830 阅读

相关有序列表:ol ，无序列表:ul

qq：581478349 ![20190325172437532.png][] <!DOCTYPE html> <html> <hea

素颜马尾好姑娘i/ 2021年09月18日 14:44/ 0 赞/ 490 阅读

相关 HTML <ul> 无序列表

ul的英文全称是unordered list，翻译成汉语就是无序列表的意思。顾名思义，通过`< ul>`元素可以创建无法标记顺序的列表（也就是无序列表）。所谓无序...

小灰灰/ 2020年05月16日 17:26/ 0 赞/ 994 阅读