一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>html 列表</title>

</head>

<body>

    <!--无序列表-->

    <h4>An Unordered list</h4>

    <ul>

        <li>Cofferr</li>

        <li>tea</li>

        <li>Mide</li>

    </ul>

    <!--有序列表-->

    <ol start="50">

        <li>Cooffee</li>

        <li>Tea</li>

        <li>Mike</li>

    </ol>

    <!--自定义列表-->

    <dl>

        <dt>Coffer</dt>

        <dd>--black hot drink</dd>

        <dt>mike</dt>

        <dd>--white cold drink</dd>

    </dl>

    <!--不同类型的有序列表-->

    <h4>Numbered list:</h4>

    <ol>

        <li>apples</li>

        <li>bananas</li>

        <li>lemons</li>

        <li>orange</li>

    </ol>

    <h4>letters list:</h4>

    <ol type="A">

        <li>apples</li>

        <li>bananas</li>

        <li>lemons</li>

        <li>orange</li>

    </ol>

    <h4>Lowercase  letters list:</h4>

    <ol type="a">

        <li>apples</li>

        <li>bananas</li>

        <li>lemons</li>

        <li>orange</li>

    </ol>

    <h4>Roman numbers list:</h4>

    <ol type="I">

        <li>apples</li>

        <li>bananas</li>

        <li>lemons</li>

        <li>orange</li>

    </ol>

    <h4>lowercase Roman numbers list:</h4>

    <ol type="i">

        <li>apples</li>

        <li>bananas</li>

        <li>lemons</li>

        <li>orange</li>

    </ol>

    <!--不同类型的无序列表-->

    <p><b>Note:</b> The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5. Therefore we have used the style attribute and the CSS list-style-type property, to define different types of unordered lists below:</p>

    <h4>disc bullets list:</h4>

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

        <li>Apples</li>

        <li>bananas</li>

        <li>lemons</li>

        <li>orange</li>

    </ul>

    <h4>circle bullets list:</h4>

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

        <li>Apples</li>

        <li>bananas</li>

        <li>lemons</li>

        <li>orange</li>

    </ul>

    <h4>square bullets list:</h4>

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

        <li>Apples</li>

        <li>bananas</li>

        <li>lemons</li>

        <li>orange</li>

    </ul>

    <!--嵌套列表-->

    <h4>A list inside a list:</h4>

    <ul>

        <li>Coffee</li>

        <li>Tea</li>

        <ul>

            <li>black tea</li>

            <li>green tea</li>

        </ul>

        <li>Mike</li>

    </ul>

    <!--嵌套列表2-->

    <h4>lists inside a list</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>mick</li>

    </ul>

    <!--自定义列表-->

    <h4>A definition List</h4>

    <dl>

        <dt>coffee</dt>

        <dd>-black hot drink</dd>

        <dt>mike</dt>

        <dd>-white cold drink</dd>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-HTML-列表的更多相关文章

  1. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  2. 【hadoop代码笔记】hadoop作业提交之汇总

    一.概述 在本篇博文中,试图通过代码了解hadoop job执行的整个流程.即用户提交的mapreduce的jar文件.输入提交到hadoop的集群,并在集群中运行.重点在代码的角度描述整个流程,有些 ...

  3. DW网页代码笔记

    DW网页代码笔记 1.样式.       class  插入类样式  标签技术(html)解决页面的内容样式技术(css)解决页面的外观脚本技术       解决页面动态交互问题<form> ...

  4. LoadRunner中的Web 函数列表

    LoadRunner中的Web 函数列表 web test LoadRunner fuction_list D:\Program Files (x86)\Mercury Interactive\Mer ...

  5. 【hadoop代码笔记】Mapreduce shuffle过程之Map输出过程

    一.概要描述 shuffle是MapReduce的一个核心过程,因此没有在前面的MapReduce作业提交的过程中描述,而是单独拿出来比较详细的描述. 根据官方的流程图示如下: 本篇文章中只是想尝试从 ...

  6. 【Hadoop代码笔记】目录

    整理09年时候做的Hadoop的代码笔记. 开始. [Hadoop代码笔记]Hadoop作业提交之客户端作业提交 [Hadoop代码笔记]通过JobClient对Jobtracker的调用看详细了解H ...

  7. <Python Text Processing with NLTK 2.0 Cookbook>代码笔记

    如下是<Python Text Processing with NLTK 2.0 Cookbook>一书部分章节的代码笔记. Tokenizing text into sentences ...

  8. Fiddler Web Session 列表（1）

    Web Session 列表 位置: Web Session 列表 位于Fiddler界面的左侧 ,是Fiddler所抓取到的所有Session会话的列表集合. Web Session 列表 栏名词解 ...

  9. KVM虚拟化学习笔记系列文章列表（转）

    Kernel-based Virtual Machine KVM虚拟化学习笔记系列文章列表----------------------------------------kvm虚拟化学习笔记(一)之k ...

  10. [学习笔记] SSD代码笔记 + EifficientNet backbone 练习

    SSD代码笔记 + EifficientNet backbone 练习 ssd代码完全ok了,然后用最近性能和速度都非常牛的Eifficient Net做backbone设计了自己的TinySSD网络 ...

随机推荐

  1. 如何用impress.js写有逼格的ppt

    概述 这是我学习课程impress让你的内容"舞"起来而做的总结和练手. 你可以点这里在线预览我做的ppt 注意:等加载完了之后,点击空格键翻页! 简化模板 下面是一个简化的模板 ...

  2. [CocoaPods]入门

    什么是CocoaPods? CocoaPods管理Xcode项目的库依赖项. 项目的依赖项在名为Podfile的单个文本文件中指定.CocoaPods将解析库之间的依赖关系,获取生成的源代码,然后在X ...

  3. Swift5 语言指南(十四) 下标

    类,结构和枚举可以定义下标,下标是用于访问集合,列表或序列的成员元素的快捷方式.您可以使用下标按索引设置和检索值,而无需单独的设置和检索方法.例如,您可以访问在元素Array实例作为someArray ...

  4. log4j 详细使用教程【转载】

    日志是应用软件中不可缺少的部分,Apache的开源项目log4j是一个功能强大的日志组件,提供方便的日志记录.在apache网站:jakarta.apache.org/log4j 可以免费下载到Log ...

  5. Spring Boot发布将jar包转为war包。

    Spring Boot是支持发布jar包和war的,但它推荐的是使用jar形式发布.使用jar包比较方便,但如果是频繁修改更新的项目,需要打补丁包,那这么大的jar包上传都是问题.所以,jar包不一定 ...

  6. 【xsy1596】旅行 期望+状压DP

    题目大意:有$m$个人要从城市$1$开始,依次游览城市$1$到$n$. 每一天,每一个游客有$p_i$的概率去下一个城市,和$1-p_i$的概率结束游览. 当游客到达城市$j$,他会得到$(1+\fr ...

  7. 元素 'beans' 必须不含字符 [子级], 因为该类型的内容类型为“仅元素”；Syntax error on token "Invalid Character"；Server returned HTTP response code: 503 for URL；

    元素 'beans' 必须不含字符 [子级], 因为该类型的内容类型为“仅元素”:复制的代码有中文空格 Syntax error on token "Invalid Character&qu ...

  8. java中打印实心菱形以及空心菱形的方法

    一.打印效果 二.实现代码汇总 为了方便初学者对代码的理解,建议熟练t1到t5为各种三角的打印,然后再进行菱形的打印实现. package circulationDemo; import java.u ...

  9. Hadoop项目实战－用户行为分析之应用概述（一）

    1.概述 本课程的视频教程地址:<Hadoop 回顾> 好的,下面就开始本篇教程的内容分享,本篇教程我为大家介绍我们要做一个什么样的Hadoop项目,并且对Hadoop项目的基本特点和其中 ...

  10. Java并发编程笔记之PriorityBlockingQueue源码分析

    JDK 中无界优先级队列PriorityBlockingQueue 内部使用堆算法保证每次出队都是优先级最高的元素,元素入队时候是如何建堆的,元素出队后如何调整堆的平衡的? PriorityBlock ...