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. Java--图片浏览器

    功能:启动后选择打开文件,可以打开图片进行浏览. v 1.0 :支持上一张 下一张功能.(欠缺,窗口大小未随着图片大小而改变) import java.awt.BorderLayout; import ...

  2. python之yagmail库笔记

    1. yagmail是啥 yagmail是给正常人用的,封装的比较彻底的一个python邮件库,发送接收邮件只需要几行代码,炒鸡简单. 2. 安装 使用pip安装,炒鸡简单: pip install ...

  3. 29、filter、map、reduce的作用?

    通俗的说..都是用在一堆数据(比如一个列表)上.. map是用同样方法把所有数据都改成别的..字面意思是映射..比如把列表的每个数都换成其平方.. reduce是用某种方法依次把所有数据丢进去最后得到 ...

  4. keypress 、keydown、keyup后触发回车

    1.keypress .keydown.keyup的区别 keypress表示键盘按下的全过程,只有按下任意字母数字键(后退.删除等系统功能键无效)时才触发,捕获到的keyCode区分大小写 keyd ...

  5. Django【进阶】modelform

    modelform:models+form   建议尽量用Djangoform,更灵活,但也有人用modelform,写起来很简单 缺点,在models里面,表模型必须有__str__()方法 可添加 ...

  6. sqlite3在Linux下的安装和使用

    自我补充:ubuntu在线安装sqlite3数据库的方法:  系统平台:ubuntu12.04   在ubuntu里面直接使用命令:sudo apt-get install sqlite3 ,出现: ...

  7. 大数据系列之Flume+kafka 整合

    相关文章: 大数据系列之Kafka安装 大数据系列之Flume--几种不同的Sources 大数据系列之Flume+HDFS 关于Flume 的 一些核心概念: 组件名称     功能介绍 Agent ...

  8. openjudge-NOI 2.6-1808 公共子序列

    题目链接:http://noi.openjudge.cn/ch0206/1808/ 题解: 裸题…… #include<cstdio> #include<cstring> #d ...

  9. Java Web Project Problems

    A: 项目红叉 1. 检验 Java Builder  Path 2. 检查 Projects Facets 3. 查看 Targets Runtimes B:项目红感叹号 1. 查看问题栏 Prob ...

  10. 动态更新echarts k线图数据 通过websocket取数据

    1.加载插件,实例化chart.2.链接websocket3.接收数据,处理数据,调用chart的实例,不断更新数据<!DOCTYPE html><html><head ...