<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<h4>无序列表:</h4>

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

<ol start="50">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

</body>

</html>

HTML无序列表

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

无序列表使用 <ul> 标签

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>
HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>
HTML 自定义列表

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

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

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

浏览器显示如下：

注意事项 - 有用提示

提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

</head>

<body>

<h4>编号列表：</h4>

<ol>

 <li>Apples</li>

 <li>Bananas</li>

 <li>Lemons</li>

 <li>Oranges</li>

</ol>  

<h4>大写字母列表：</h4>

<ol type="A">

 <li>Apples</li>

 <li>Bananas</li>

 <li>Lemons</li>

 <li>Oranges</li>

</ol>  

<h4>小写字母列表：</h4>

<ol type="a">

 <li>Apples</li>

 <li>Bananas</li>

 <li>Lemons</li>

 <li>Oranges</li>

</ol>  

<h4>罗马数字列表：</h4>

<ol type="I">

 <li>Apples</li>

 <li>Bananas</li>

 <li>Lemons</li>

 <li>Oranges</li>

</ol>  

<h4>小写罗马数字列表：</h4>

<ol type="i">

 <li>Apples</li>

 <li>Bananas</li>

 <li>Lemons</li>

 <li>Oranges</li>

</ol>  

</body>

</html>

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

</head>

<body>

<p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>

<h4>圆点列表：</h4>

<ul style="list-style-type:disc">

 <li>Apples</li>

 <li>Bananas</li>

 <li>Lemons</li>

 <li>Oranges</li>

</ul>  

<h4>圆圈列表：</h4>

<ul style="list-style-type:circle">

 <li>Apples</li>

 <li>Bananas</li>

 <li>Lemons</li>

 <li>Oranges</li>

</ul>  

<h4>正方形列表：</h4>

<ul style="list-style-type:square">

 <li>Apples</li>

 <li>Bananas</li>

 <li>Lemons</li>

 <li>Oranges</li>

</ul>

</body>

</html>

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

</head>

<body>

<h4>嵌套列表​：</h4>

<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

      <li>Black tea</li>

      <li>Green tea</li>

    </ul>

  </li>

  <li>Milk</li>

</ul>

</body>

</html>

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

</head>

<body>

<h4>嵌套列表：</h4>

<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

      <li>Black tea</li>

      <li>Green tea

        <ul>

          <li>China</li>

          <li>Africa</li>

        </ul>

      </li>

    </ul>

  </li>

  <li>Milk</li>

</ul>

</body>

</html>

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

</head>

<body>

<h4>一个自定义列表：</h4>

<dl>

  <dt>Coffee</dt>

  <dd>- black hot drink</dd>

  <dt>Milk</dt>

  <dd>- white cold drink</dd>

</dl>

</body>

</html>

吴裕雄--天生自然HTML学习笔记：HTML 列表的更多相关文章

  1. 吴裕雄--天生自然HADOOP学习笔记：hadoop集群实现PageRank算法实验报告

    实验课程名称:大数据处理技术 实验项目名称:hadoop集群实现PageRank算法 实验类型:综合性 实验日期:2018年 6 月4日-6月14日 学生姓名 吴裕雄 学号 15210120331 班 ...

  2. 吴裕雄--天生自然 oracle学习笔记：oracle理论学习详解及各种简单操作例子

    1. 数据库的发展过程 层次模型 -->网状模型 -->关系模型 -->对象关系模型 2. 关于数据库的概念 DB:数据库(存储信息的仓库) DBMS:数据库管理系统(用于管理数据库 ...

  3. 吴裕雄--天生自然HADOOP学习笔记：基本环境配置

    实验目的 学习安装Java 学习配置环境变量 学习设置免密码登陆的方法 掌握Linux环境下时间同步的配置 实验原理 1.Java的安装 java是大数据的黄金语言,这和java跨平台的特性是密不可分 ...

  4. 吴裕雄--天生自然HADOOP学习笔记：使用yum安装更新软件

    实验目的 了解yum的原理及配置 学习软件的更新与安装 学习源代码编译安装 实验原理 1.编译安装 前面我们讲到了安装软件的方式,因为linux是开放源码的,我们可以直接获得源码,自己编译安装.例如: ...

  5. 吴裕雄--天生自然HADOOP学习笔记：Shell工具使用

    实验目的 学习使用xshell工具连接Linux服务器 在连上的服务器中进入用户目录 熟悉简单的文件操作命令 实验原理 熟悉shell命令是熟悉使用linux环境进行开发的第一步,我们在linux的交 ...

  6. 吴裕雄--天生自然MySQL学习笔记：MySQL UPDATE 更新

    如果需要修改或更新 MySQL 中的数据,我们可以使用 SQL UPDATE 命令来操作. 语法 以下是 UPDATE 命令修改 MySQL 数据表数据的通用 SQL 语法: UPDATE table ...

  7. 吴裕雄--天生自然MySQL学习笔记：MySQL 插入数据

    MySQL 表中使用 INSERT INTO SQL语句来插入数据. 可以通过 mysql> 命令提示窗口中向数据表中插入数据,或者通过PHP脚本来插入数据. 以下为向MySQL数据表插入数据通 ...

  8. 吴裕雄--天生自然python学习笔记：python 用pyInstaller模块打包文件

    要想在没有安装 Python 集成环境的电脑上运行开发的 Python 程序,必须把 Python 文件打包成 .exe 格式的可执行 文件. Python 的打包工作 PyInstaller 提供了 ...

  9. 吴裕雄--天生自然python学习笔记：python 用pygame模块动画一让图片动起来

    动画是游戏开发中不可或缺的要素,游戏中的角色只有动起来才会拥有“生命”, 但动画处理也是最让游戏开发者头痛的部分.Pygame 包通过不断重新绘制绘图窗口,短短几行代码就可以让图片动起来! 动画处理程 ...

  10. 吴裕雄--天生自然python学习笔记：python 文件批量查找

    在多个文本文件中查找 我们首先来学习文本文件的查找字符 . 我们通过 os.walk 扩大查找范围, 查找指定目录和子目录下的文件. 应用程序总览 读取 当 前目录及子目录下的所有 PY 和 txt ...

随机推荐

  1. EL表达式获取属性值的原理

    EL表达式获取对象属性的原理是这样的:以表达式${user.name}为例EL表达式会根据name去User类里寻找这个name的get方法,此时会自动把name首字母大写并加上get前缀,一旦找到与 ...

  2. webpack快速使用笔记

    一.NPM1.NPM是随同NodeJS一起安装的包管理工具. http://www.1994july.club/?p=14542.安装npm install npm -gnpm -v 测试是否成功安装 ...

  3. Python—快速排序算法

    # _*_ coding=utf-8 _*_ """ 快速排序: 通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比 另外一部分的所有数据都要小,然后 ...

  4. JavaScript详解（二）

    js的流程控制 if语句: if (条件表达式A){ xx; }else if (条件表达式B){ xx; } else{ xx; } switch语句: switch (表达式){ case 值1: ...

  5. 【hdu6613】Squrirrel 树形DP

    题意:给一个带权树,求把一条边的权值变成0,再选一个点做根,最大深度最小是多少. \(\sum n \le 10^6\) key:树形DP 题里有边权小于等于200,然而并没有什么用. 首先做出 \( ...

  6. UI Automation编程辅助工具Inspect的下载和使用

    UIAutomation微软提供的UI自动化库,主要用AutomationElement类来表示UI 自动化目录树中的一个UI自动化元素,.NET Windows的窗体应用程序和WPF应用程序. In ...

  7. 论文翻译——Dynamic Pooling and Unfolding Recursive Autoencoders for Paraphrase Detection

    Dynamic Pooling and Unfolding Recursive Autoencoders for Paraphrase Detection 动态池和展开递归自动编码器的意译检测 论文地 ...

  8. AtCoder Grand Contest 033

    为什么ABC那么多?建议Atcoder多出些ARC/AGC,好不容易才轮到AGC…… A 签到.就是以黑点为源点做多元最短路,由于边长是1直接bfs就好了,求最长路径. #include<bit ...

  9. vue中axios的post请求使用form表单格式发送数据

    vue使用插件qs实现 (qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库.) 在jquery中的ajax的方法已将此封装,所以不需要再次序列化 1. 安装   在项目中使用命令行工具输 ...

  10. Metasploit详解

    title date tags layout Metasploit 详解 2018-09-25 Metasploit post 一．名词解释 exploit 测试者利用它来攻击一个系统,程序,或服务, ...