HTML 列表详解
1.有序列表
有序列表是编号列表,用于对网页中的某些内容进行编号排列,以便使读者清晰地了解每行的顺序。在HTML中插入有序列表是通过<ol>和<li>标签来实现的。首标签<ol>和尾标签</ol>之间的内容是有序列表的内容,列表的每一项必包括在<li>与</li>之间。
有序列表的语法格式如下:
<ol>
<li>列表项1</li>
<li>列表项2</li>
………
<li>列表项n</li>
</ol>
说明:<ol>标签有两个属性:type和start,type属性用于指定数字编号的样式。start属性用于指定起始编号,如不设start属性,默认使用阿拉伯数字,从1开始。
type属性和start属性的取值及含义如下:
type="1" start="10" 编号用阿拉伯数字,从阿拉伯数字10开始
type="a" start="b" 编号用小写英文字母,从小写字母b开始
type="A" start="K" 编号用大写英文字母,从大写字母K开始
type="i" 编号用小写罗马数字
type="I" 编号用大写罗马数字
例题:有序列表练习
<html>
<head><title>有序列表练习<title><head>
<body>
<ol type="A">
<li><font color="#0000ff" size="4" face="宋体">树上的鸟儿是喧闹的</font></li>
<li><font color="#0000ff" size="4" face="宋体">水里的鱼儿是沉默的</font></li>
<li><font color="#0000ff" size="4" face="宋体">天上的云儿是漂泊的</font></li>
<li><font color="#0000ff" size="4" face="宋体">地上的人儿是孤独的</font></li>
</ol>
<body>
</html>
2.有序列表
无序列表是项目列表,列表内容可以按任意顺序排列。列表项前不是用连续编号而是用一个特定符号来标记,通常是在每一列表项前加上一个圆点儿。无序列表与有序列表的实现方法很相似,只是用标记<ul>来代替有序列表中的<ol>。
无序列表的语法格式如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
………
<li>列表项n</li>
</ul>
说明:<ul>标签有type属性,用于设置项目符号类型,属性值有如下3种:
type="disc" 设置项目符号样式为圆点。
type="circle" 设置项目符号样式为圆圈。
type="square" 设置项目符号样式为矩形。
例题:无序列表练习
<html>
<head><title>无序列表练习</title></head>
<body>
<ul type="square">
<li><font color="#0000ff" size="4" face="宋体">树上的鸟儿是喧闹的</font></li>
<li><font color="#0000ff" size="4" face="宋体">水里的鱼儿是沉默的</font></li>
<li><font color="#0000ff" size="4" face="宋体">天上的云儿是漂泊的</font></li>
<li><font color="#0000ff" size="4" face="宋体">地上的人儿是孤独的</font></li>
</ul>
</body>
</html>
3.定义列表
定义列表用于对清单条目进行简短说明,首标签<dl>和尾标签</dl>之间是列表内容,列表项目用标签<dt>引导,列表项目的说明用标签<dd>引导。通常<dt>和<dd>是一起出现的。一个列表项目可以对应一个说明项,也可以对应多个说明项。
定义列表中每个列表项有一个缩进的说明项,与字典的编排有相同的格式,所以又称为“字典列表”。
定义列表的语法格式如下:
<dl>
<dt>列表项目1</dt>
<dd>说明1</dd>
<dd>说明2</dd>
………
<dt>列表项目2</dt>
<dd>说明1</dd>
<dd>说明2</dd>
………
………
</dl>
例题:定义列表练习
<html>
<head><title>定义列表练习</title></head>
<body>
<font color="#0000ff" size=4 face="黑体">计算机网络的分类</font>
<dl>
<dt><font color="#ff0000" size=2 face="宋体">局域网</font></dt>
<dd><font color="#ff0000" size=2 face="宋体">LAN(LOcal Area Network)</font></dd>
<dd><font color="#ff0000" size=2 face="宋体">小区域内使用,成本低易管理</font></dd>
</dl>
<dl>
<dt><font color="#ff0000" size=2 face="宋体">广域网</font></dt>
<dd><font color="#ff0000" size=2 face="宋体">WAN(Wide Arae Network)</font></dd>
<dd><font color="#ff0000" size=2 face="宋体">Internet就是典型的广域网</font></dd>
</dl>
<dl>
<dt><font color="#ff0000" size=2 face="宋体">城域网</font></dt>
<dd><font color="#ff0000" size=2 face="宋体">MAN(Metropolitan Area Network)</font></dd>
<dd><font color="#ff0000" size=2 face="宋体">覆盖地理范围介于局域网和广域网之间</font></dd>
</dl>
</body>
</html>
HTML 列表详解的更多相关文章
- 28.Python list列表详解
在实际开发中,经常需要将一些(不只一个)数据暂储起来,以便将来使用.说到这里,一些读者可能知道或听说过数组,它就可以把多个数据挨个存储到一起,通过数组下标可以访问数组中的各个元素.但使用数组存储数据有 ...
- adb shell命令模拟按键/输入input使用keycode 列表详解
在adb shell里有一个非常使用的命令,模拟按键输入,这里首先不要理解为是键盘的模拟按键,下面命令的使用和键值做一个详解. input命令格式 adb shell input keyevent & ...
- Android开发 ExpandableListView 可折叠列表详解
前言 在需要实现一个List的item需要包含列表的时候,我们就可以选择ExpandableListView. 其实这个View的原始设计还是ListView的那套.就是增加2层的ListView而已 ...
- ESX虚拟机文件列表详解
http://jackiechen.blog.51cto.com/196075/210492 关闭状态时的文件列表: *-flat.vmdk:虚拟机的原始磁盘文件,包含整个虚拟机镜像. *.nvr ...
- Xcode中的Info.plist字段列表详解
Info.plist用于向iOS提供关于app,bundle或者framework的一些重要信息.它指定了比如一个应用应该怎样启动,它如何被本地化,应用的名称,要显示的图标,还有更多.Info.pli ...
- Python列表详解
#列表:增,删,改,查.names=['N0','N1','N2',['EX1','EX2'],'N3'] '''#------------------------------------------ ...
- HMTL列表详解
1.无序列表<ul> ul其实没啥好说的,大家用得最多就是它,它的属性无非就是type: disc circle square 2.有序列表<ol> H4的时候就有2个属性,t ...
- Info.plist字段列表详解
常用字段: 1.获取版本信息: NSDictionary*infoDic = [[NSBundle mainBundle] infoDictionary]; NSString *localVersio ...
- python基础知识(列表详解)
列表(list) 列表中可以存入整数.实数.布尔值.字符串.序列.对象 可变序列 列表 [] 元素间隔用 ,号分隔 列表的创建和删除 使用赋值运算符直接创建列表 listname = [元素1 ...
随机推荐
- UIImagePickerController和UIAlertController结合使用
在处理个人资料 - 头像的时候,通常有两个选项,一个是调用系统相机,一个是调用系统相册.这里要使用的就是UIImagePickerController方法. 在头像位置的imageView添加一个手势 ...
- 读取微博feed伪代码
// 读取我的好友fids $db = new DB(); $mc = new Memcached(); $_uid = 1; // my uid $sql = "select * from ...
- vs13的内存占用 关闭之
.如何关闭CodeLens呢? 在VS菜单栏 >> 工具 >> 选项 >> 文本编辑器 >> 所有语言 >> CodeLens In VS ...
- JDK8+Dubbo2.5.2实践
几年前就听说过Dubbo的大名,今天由于工作需要,研究一下. 从网上找了一篇文章,非常靠谱,并且提供了简单的示例代码,基本上可以跑起来. 文章地址: http://www.cnblogs.com/Ja ...
- web前端基础篇⑩
1.960栅格式布局法屏幕分辨率为1024*768.采用接 main宽为960px的布局方式12列式:每格60px 间距20px 3 6 3版 三格式布局(最常用)16列式:每格40px 间距20px ...
- 【python】操作excel——xlrd xlwt xlutils
from xlutils.copy import copy import xlrd # import xlutils #打开已存在的excel rb=xlrd.open_workbook('D:\\1 ...
- 用Python获取沪深两市上市公司股票信息,提取创近10天股价新高的、停牌的、复牌不超过一天或者新发行的股票,并存入mysql数据库
#该脚本可以提取沪深两市上市公司股票信息,并按以下信息分类:(1)当天股价创近10个交易日新高的股票:(2)停牌的股票:(3)复牌不超过一个交易日或者新发行的股票 #将分类后的股票及其信息(股价新高. ...
- linux下查看进程状态
1.查看进程的启动时间和执行时间 使用 ps 命令 :#ps -A -opid,stime,etime,args $ ps -A -opid,stime,etime,args PID STIME EL ...
- FastFDS配置安装
先说环境: win7旗舰版,配CRT连接虚拟机,虚拟机用的vmware Player,安装的CentOS6.4版本. 1.添加用户 useradd fastdfs 这步可以不做,后面的操作用root账 ...
- Linux下使用NMON监控、分析系统性能
一.下载nmon. 根据CPU的类型选择下载相应的版本:http://nmon.sourceforge.net/pmwiki.php?n=Site.Downloadwget http://source ...