ul: unordered lists 
ol: ordered lists 
li: Lists

ol 有序列表。

<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
  表现为:

1……
2……
3……
  ul 无序列表,表现为li前面是大圆点而不是123

<ul>
<li>……</li>
<li>……</li>
</ul>
  很多人容易忽略 dl dt dd的用法

  

dl 内容块
  dt 内容块的标题
  dd 内容
  可以这么写:

<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
  dt 和dd中可以再加入 ol ul li和p
  理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局。

LI代码的格式化:

A).运用CSS格式化列表符:

以下是引用片段:
ul li{ 
list-style-type:none; 
}

B).如果你想将列表符换成图像,则:

以下是引用片段:
ul li{ 
list-style-type:none; 
list-style-image: url(/blog/images/icon.gif); 
}

C).为了左对齐,可以用如下代码:

以下是引用片段:
ul{ 
list-style-type:none; 
margin:0px; 
}

D).如果想给列表加背景色,可以用如下代码:

以下是引用片段:
ul{ 
list-style-type: none; 
margin:0px; 

ul li{ 
background:#CCC; 
}

E).如果想给列表加MOUSEOVER背景变色效果,可以用如下代码:

以下是引用片段:
ul{ list-style-type: none; margin:0px; } 
ul li a{ display:block; width: 100%; background:#ccc; } 
ul li a:hover{ background:#999; }说明:display:block;这一行必须要加的,这样才能块状显示!

F).LI中的元素水平排列,关键FLOAT:LEFT:

以下是引用片段:
ul{ 
list-style-type:none; 
width:100%; 

ul li{ 
width:80px; 
float:left; 
}

<ul><li>的区别

<LI> 的参数设定(常用):

例如: <li type="square" value="4">

type="square"

只适用于非顺序清单,设定符号款式,其值有三种,如下,内定为 type="disc":

以下是引用片段:
      符号 是当 type="disc" 时的列项符号。 
      符号 if" width=10 height=10 border=0> 是当 type="circle" 时的列项符号。 
      符号 是当 type="square" 时的列项符号。 
      value="4"

只适用于顺序清单,设定该一项的数目,其後各项将以此作为起始数目而递增,但前面各项则不受影响,其值只能是 1,2,3.. 等整数,没有内定值。

<UL>称为无序清单标记。

所谓无序清单就是在每一项前面加上 、、等符号,故又称符号清单。

<UL> 的参数设定(常用):

例如: <UL type="square">

type="square"

设定符号款式,其值有三种,如下,内定为 type="disc":

以下是引用片段:
      符号 是当 type="disc" 时的列项符号。 
      符号 是当 type="circle" 时的列项符号。 
      符号 是当 type="square" 时的列项符号。

<ul>是项目列表,<li>是列表项,项目列表就是用符号来列的,所以你列出来默认的就是黑点,还有一个是<ol>这个是编号列表,用数字来列的,也是用<li>做列表项

<li>是 list item 即列表项,但列表有很两种,所以外面得有 <ul> 或者 <ol> 用来区别无序列表(小点点)和有序列表(1,2,3...)

HTML中的ul, ol,li , dl,dt, dd标签的更多相关文章

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

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

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

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

  3. HTML 列表 <ol><ul><li><dl><dt><dd>

    <ol>标签-有序列表 定义和用法: <ol>标签定义有序列表. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,ol 元素的 "compact&q ...

  4. html中的dl,dt,dd标签

    html <dl> <dt> <dd>是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与table表格类似组合标签,故名我们也 ...

  5. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...

  6. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一.dl dt dd认识 ...

  7. 前端学习笔记系列一:15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用

    ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...

  8. 关于H标签 DL DT DD标签的一个小故事

    看了一篇关于SEO论坛的论文,大概故事内容是:一个专业的销售公司,里面SEO  技术多多,可就是销售网站的SEO的情况极为恼火.这天,老板又招到了一个SEO,直接聘为SEO主管全权负责网站的SEO,并 ...

  9. html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

    <!-- a:  a{ /*清除a标签的下划线*/ text-decoration: none; }  (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...

随机推荐

  1. 在Centos系统下使用命令安装gnome图形界面程序

    第一步:先检查yum 是否安装了,以及网络是否有网络.如果这两者都没有,先解决网络,在解决yum的安装. 第二步:在命令行下 输入下面的命令来安装Gnome包. # yum groupinstall ...

  2. Atcoder #014 agc014_C BFS

    LINK 题意:给定起点和最大操作次数$k$,地图'#'为上锁房间, 每次可以走$k$步,并任意解锁$k$个房间,问到达地图边界的最小次数. 思路:其实上锁与否并没有关系,因为先把$k$步走的次数用完 ...

  3. windows安装zookeeper和kafka,flume

    一.安装JDK 过程比较简单,这里不做说明. 最后打开cmd输入如下内容,表示安装成功 二.安装zooeleeper 下载安装包:http://zookeeper.apache.org/release ...

  4. [linux]codeblocks开发mysql配置

    1.在安装好mysql后,可以应该安装必要的库文件 $sudo apt-get install libmysqlclient-dev 2.将codeblocks与mysql的库文件连接起来 在code ...

  5. 【BZOJ】1036 [ZJOI2008]树的统计Count

    [算法]树链剖分+线段树 [题解]模板题,见http://www.cnblogs.com/onioncyc/p/6207462.html 调用线段数时要用新编号pos[i] !!! #include& ...

  6. 【CodeForces】932 E. Team Work

    [题目]E. Team Work [题意]给定n和k,n个人中选择一个大小为x非空子集的代价是x^k,求所有非空子集的代价和%1e9+7.n<=10^9,k<=5000. [算法]斯特林反 ...

  7. 用sqoop将mysql的数据导入到hive表中

    1:先将mysql一张表的数据用sqoop导入到hdfs中 准备一张表 需求 将 bbs_product 表中的前100条数据导 导出来  只要id  brand_id和 name 这3个字段 数据存 ...

  8. spring-boot支持websocket

    spring-boot本身对websocket提供了很好的支持,可以直接原生支持sockjs和stomp协议.百度搜了一些中文文档,虽然也能实现websocket,但是并没有直接使用spring-bo ...

  9. vue--------脚手架vue-cli搭建

    今天在看公司的项目的时候,用到的是Vue框架,哈哈,Vue已经火好久了,想必大家也晓得哈,这里宝宝就不瞎渣渣了~ 由于宝宝已经三个月木有看过代码了,所以对新公司的很多的架构和代码都是懵逼的,再加上宝宝 ...

  10. php之复制文件——php经典实例

    php之复制文件——php经典实例 <?php function dirCopy($dir1,$dir2){ //判断是否目录存在 if(!file_exists($dir2) || !is_d ...