1.无序列表（最常用）

先看个例子：如下图：

使用的 html标签为

 <ul>   <!--ul是UnorderList的缩写，意为无序列表；li是ListItem的缩写，列表项-->

     <li></li>

       </ul>

 <html>

   <head>

        <title>html list test</title>

   </head>

   <body>

       <!--ul is the Unordered_List -->

       <ul>

          <!--li is List_Item-->

          <li>Tommy</li>

          <li>Jacky</li>

          <li>Sam</li>

       </ul>

   </body>

 </html>

 注意：在上述的图中，看样看到列表前面有个小圆圈，这是通过修改 ul标签的 type属性来变化的

<ul type="value">    属性值：

值 描述
disc 默认值。实心圆。
circle 空心圆。
square 实心方块。

更多信息请参考官方文档：http://www.w3school.com.cn/tags/att_ul_type.asp

2.有序列表（用的不多）

标签为： <ol> <!--ol是OrderedList的简称-->

                        <li></li>

                    </ol>

       ol的排序指的是在数据的前方显示序号而已，并不会对内容进行任何排序(所以是个鸡肋)

两个常用的属性：

2.1. type属性：5个候选值，表示排序所使用的文字

2.2. start属性：表示排序的起始位置，效果如下图

<html>

  <head>

       <meta http-equiv="Content-Type" content="text/html;charset=utf-8;"/>

       <title>html ordered list test</title>

  </head>

  <body>

      <ol type="1">

         <li><font color="red">当type为数字1时，表示前方的排序用阿拉伯数字</font></li>

         <li>Tommy</li>

         <li>Jacky</li>

         <li>Sam</li>

      </ol>

        <ol type="a">

         <li><font color="red">当type为a时，表示前方的排序用小写字母</font></li>

         <li>Tommy</li>

         <li>Jacky</li>

         <li>Sam</li>

      </ol>

        <ol type="A">

         <li><font color="red">当type为A时，表示前方的排序用大写字母</font></li>

         <li>Tommy</li>

         <li>Jacky</li>

         <li>Sam</li>

      </ol>

        <ol type="i">

         <li><font color="red">当type为小写字母i时，表示前方的排序用小写罗马数字</font></li>

         <li>Tommy</li>

         <li>Jacky</li>

         <li>Sam</li>

      </ol>

        <ol type="I">

         <li><font color="red">当type为大写字母I时，表示前方的排序用大写罗马数字</font></li>

         <li>Tommy</li>

         <li>Jacky</li>

         <li>Sam</li>

      </ol>

        <ol start="100">

         <li><font color="red">start为排序起始数字，这里从100开始</font></li>

         <li>Tommy</li>

         <li>Jacky</li>

         <li>Sam</li>

      </ol>

  </body>

</html>

html的列表的更多相关文章

  1. ASP.NET Aries 入门开发教程8：树型列表及自定义右键菜单

    前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...

  2. ASP.NET Aries 入门开发教程6：列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

  3. ASP.NET Aries 入门开发教程3：开发一个列表页面及操控查询区

    前言: Aries框架毕竟是开发框架,所以重点还是要写代码的,这样开发人员才不会失业,哈. 步骤1:新建html 建一个Html,主要有三步: 1:引入Aries.Loader.js 2:弄一个tab ...

  4. ASP.NET Aries 入门开发教程2：配置出一个简单的列表页面

    前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...

  5. 散列表(hash table)——算法导论(13)

    1. 引言 许多应用都需要动态集合结构,它至少需要支持Insert,search和delete字典操作.散列表(hash table)是实现字典操作的一种有效的数据结构. 2. 直接寻址表 在介绍散列 ...

  6. Python列表去重

    标题有语病,其实是这样的: 假设有两个列表 : L1 = [1,2,3,4] ; L2 = [1,2,5,6] 然后去掉L1中包含的L2的元素 直接这样当然是不行的: def removeExists ...

  7. WPF 微信 MVVM 【续】修复部分用户无法获取列表

    看过我WPF 微信 MVVM这篇文章的朋友,应该知道我里面提到了我有一个小号是无法获取列表的,始终也没找到原因. 前两天经过GitHub上h4dex大神的指导,知道了原因,是因为微信在登录以后,web ...

  8. Emoji选项列表

    一.需要的前提文件 从网上下载Emoji的表情包,当然是png的图片,因为WPF不支持彩色的Emoji,所以,做列表的时候,需要用图片. 随着压缩包一起的还有一个Emoji.xml文件,文件的层级结构 ...

  9. UWP开发必备：常用数据列表控件汇总比较

    今天是想通过实例将UWP开发常用的数据列表做汇总比较,作为以后项目开发参考.UWP开发必备知识点总结请参照[UWP开发必备以及常用知识点总结]. 本次主要讨论以下控件: GridView:用于显示数据 ...

  10. 在DevExpress程序中使用GridView直接录入数据的时候，增加列表选择的功能

    在我上篇随笔<在DevExpress程序中使用Winform分页控件直接录入数据并保存>中介绍了在GridView以及在其封装的分页控件上做数据的直接录入的处理,介绍情况下数据的保存和校验 ...

随机推荐

  1. 卸载超级兔子后，word打不开（无法创建工作文件），VS2010也没法用（找不到CL.exe）。

    又折腾了一上午,昨天用优化大师和超级兔子整理了电脑,今天来到实验室,vs打开后报错,提示"找不到CL.exe,"(具体提示忘记了,就是找不到CL.exe),打开word2010也是 ...

  2. .net core i上 K8S(一)集群搭建

    1.前言 以前搭建集群都是使用nginx反向代理,但现在我们有了更好的选择——K8S.我不打算一上来就讲K8S的知识点,因为知识点还是比较多,我打算先从搭建K8S集群讲起,我也是在搭建集群的过程中熟悉 ...

  3. window.onload与$(document).ready()的对比

    一.window.onload:(1)必须等待网页中所有的内容加载完毕后(包括图片)才能执行:(2)不能同时编写多个,如: window.onload = function(){ alert(&quo ...

  4. luoguP3359 改造异或树

    https://www.luogu.org/problemnew/show/P3359 因为 a ^ b ^ b = a,所以我们预处理 1 到所有点的距离,将删边的操作反过来变成加边,对于每一个联通 ...

  5. Linux 下 SSH 远程超时解决方案

    Linux 下 SSH 远程超时解决方案 今天突然看到一个问题说是如何解决SSH远程超时的问题. 找了一点资料.用于解决这个需求~ 第一种:OpenSSH 配置文件设置 位于112行的 "C ...

  6. NTP搭建指南

    NTP搭建指南 前言: NTP是网络时间协议(Network Time Protocol),用于全球的标准时间(UTC)的校正. 一般NTP 服务有不同的层次:一层是源头NTP 服务器,一层服务器都设 ...

  7. 你不可不知的 React Native 混合用法（Android 篇）

    前言 当前 React Native 虽说版本更新比较快,各种组件也提供的很全面了,但是在某些情况下,混合开发的方式才会快速缩短开发周期,原因无非就是原生平台的"底蕴"无疑更深,拥 ...

  8. P5283 [十二省联考2019]异或粽子 可持久化01Trie+线段树

    $ \color{#0066ff}{ 题目描述 }$ 小粽是一个喜欢吃粽子的好孩子.今天她在家里自己做起了粽子. 小粽面前有 \(n\) 种互不相同的粽子馅儿,小粽将它们摆放为了一排,并从左至右编号为 ...

  9. c语言数据结构学习心得——二叉树

    二叉树 n(n>=0)个结点的有限集合:(五种形态) 1.或者为空二叉树,n=0: 2.或者由一个根结点和两个互不相交的被称为根的左子树和右子树组成.左子树和右子树又分别是一棵二叉树. 3.每个 ...

  10. 利用COOKIE保存历史浏览商品的一个简单思路

    <?php //如是COOKIE 里面不为空,则往里面增加一个商品ID if (!empty($_COOKIE['SHOP']['history'])){ //取得COOKIE里面的值,并用逗号 ...