HTML列表分为有序列表,无序列表和描述列表。我们常用的是有序列表(ol)与无序列表(ul)。

  • 有序列表

<ol>标签就可以定义一个有序列表,之所以称其为有序列表,是因为可以使列表具有排序功能。具体的列表项使用<li>元素来规定。

type属性:实现不同方式的有序排序功能,不赞成使用,通常都会使用样式取代它。

(1)1表示以1,2,3,4数字方式的排序。

(2)a表示以a,b,c,d小写字母的方式排序。

(3)A表示以A,B,C,D大写字母的方式排序。

(4)i表示以i,ii ,iii罗马数字小写的方式排序。

(5)I表示以 I,II,III罗马数字大写的方式排序。

编号的样式可以使用CSS中的 list-style-type 属性定义。

HTML5中新增的reversed属性可以规定倒序排序。

 
  • 无序列表

HTML无序列表用<ul>标签定义,之所以称其为无序列表,是因为列表没有排序功能。具体的列表项还是使用<li>元素来规定。

type属性:定义列表项前面的符号形状,不赞成使用,通常都会使用样式取代它。

(1)dise:实心圆(默认值)。

(2)circle:空心圆。

(3)square:实心方块。

 

HTML知识点总结之ul,ol,li标签的更多相关文章

  1. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  2. html5 分组标签 br hr p div blockquote figure ul ol li pre

    <br>    换行, 单标签 <hr>    分割线,水平线 <p>    段落, 有<br>换行功能, 而且行距会比普通换行要宽. <div& ...

  3. HTML中的ul, ol,li , dl,dt, dd标签

    ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...

  4. Jquery和JS获取ul中li标签(转)

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  5. Jquery和JS获取ul中li标签

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  6. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

  7. 用正则表达式抓取网页中的ul 和 li标签中最终的值!

                获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1& ...

  8. ul ol li的序号编号样式

    序号样式例子,下面是html代码(做参考) <ol> <li>列表内容列表内容列表内容列表</li> <li>列表内容列表内容列表内容列表</li ...

  9. 关于<ul><ol><li>的用法

    <ul>:无序列表 <ol>:有序列表 <li>:行. 想要去掉前面的序号和点可以在<ol>或<ul>style中用list-style: ...

  10. HTML的ul和li标签的使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. string.prototype.replace 和正则表达式

    字符串的replace方法是操作字符串的常用方法之一,但这个方法只有当与正则合并使用时,才能体现出它的强大之处. 语法:str.replace(regexp|substr, newsubStr|fun ...

  2. Ubuntu 编译安装 OpenCV 3.1

    目标系统:Ubuntu 16.04-64bit OpenCV 版本:opencv-3.1.0 安装步骤 安装 cmake.sudo apt-get isntall cmake cmake-qt-gui ...

  3. 小白的Python之路 day1 字符编码

    字符编码 python解释器在加载 .py 文件中的代码时,会对内容进行编码(默认ascill) ASCII(American Standard Code for Information Interc ...

  4. CentOS ifconfig无IP地址解决办法

    修改/etc/sysconfig/network-scripts/ifcfg-ens33 把 ONBOOT 改为 yes,重启后就会有ip,且物理机和虚拟机可以互相ping通了.

  5. ES6之Set方法与Map方法

    ES6提供了新的数据结构--Set与Map,Set本身是一个构造函数且成员的值是唯一的,没有重复的值!!!Set()是一个存储已排序的无重复元素的数据而Map()是一对数据Map()使用关键值Key来 ...

  6. n年前,我没钱但年轻,我怕n年后我老时,还是一无所成——2017我的收获和反思

    记得当年我刚从学校里出来时,应该和现在的95后差不多,当时还是很惶恐的,怕找不到工作,怕无法挣到足够的钱买房子支撑家庭,(当然还有其它的担心点),却唯独没意识到自己拥有着最宝贵的财富:年轻. 年轻意味 ...

  7. 封装数据库配置文件App配置文件

    <connectionStrings>   <add name="strCon" connectionString="Data Source=.;Ini ...

  8. rabbitmq 启动报错

    =============================================== 2017/10/24_第1次修改                       ccb_warlock = ...

  9. 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  10. 【转】java.lang.NoSuchMethodError: javax.persistence.Table.indexes()[Ljavax/persistence/Index;

    最近在配置最新的ssh(struts2.3.16.3+hibernate4.3.7+spring4.1.2)的时候遇到的这个错误提示,后来在网上找了半天都不能解决,虽然有个说法是model对象用这样@ ...