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. 《JavaScript 实战》:实现图片幻滑动展示效果

    滑动展示效果主要用在图片或信息的滑动展示,也可以设置一下做成简单的口风琴(Accordion)效果.这个其实就是以前写的图片滑动展示效果的改进版,那是我第一篇比较受关注的文章,是时候整理一下了. 有如 ...

  2. Let's Encrypt 免费通配 https 签名证书 安装方法2 ,安卓签名无法认证!

    Let's Encrypt 免费通配 https 签名证书 安装方法 按照上文 配置完毕后你会发现 在pc浏览器中正常访问,在手机浏览器中无法认证 你只需要安装一个或多个中级证书 1.查看Nginx ...

  3. 【leetcode 简单】第四十题 求众数

    给定一个大小为 n 的数组,找到其中的众数.众数是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素. 你可以假设数组是非空的,并且给定的数组总是存在众数. 示例 1: 输入: [3,2,3] 输出: 3 ...

  4. Git其他的命令------(四)

    git除了在工作当中可以进行对代码进行管理的设置之外,git的其他指令也偶尔会被用到~ 1:删除某一个文件:   rm -rf node,然后按下tab 2:查看修改文件的修改的详细信息:  git ...

  5. WHY学习python?

    1.python更容易上手 2.功能库很多,不用重复造轮子 3.能干的事情很多(网站开发,爬虫,自动化运维,数据分析,游戏开发,人工智能) 网站开发:豆瓣,知乎 网站框架:django (姜狗) py ...

  6. 16级第二周寒假作业H题

    快速幂(三) TimeLimit:2000MS  MemoryLimit:128MB 64-bit integer IO format:%I64d Problem Description 计算( AB ...

  7. 残差网络(Residual Network)

    一.背景 1)梯度消失问题 我们发现很深的网络层,由于参数初始化一般更靠近0,这样在训练的过程中更新浅层网络的参数时,很容易随着网络的深入而导致梯度消失,浅层的参数无法更新. 可以看到,假设现在需要更 ...

  8. [Leetcode] Sum 系列

    Sum 系列题解 Two Sum题解 题目来源:https://leetcode.com/problems/two-sum/description/ Description Given an arra ...

  9. Linux进程调度原理【转】

    转自:http://www.cnblogs.com/zhaoyl/archive/2012/09/04/2671156.html Linux进程调度的目标 1.高效性:高效意味着在相同的时间下要完成更 ...

  10. 用VIM查看编辑二进制文件

    用VIM查看编辑二进制文件 vim可以很方便地编辑二进制文件,个人认为它比emacs的二进制编辑方式更好用.vim中二进制文件的编辑是先通过外部程序xxd来把文件dump成其二进制的文本形式,然后就可 ...