HTML-列表
来源:互联网 发布:海鸥手表怎么样 知乎 编辑:程序博客网 时间:2024/05/22 13:43
1.无序列表
(1)是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记
(2)始于 <ul> 标签,每个列表项始于 <li>
(3)列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
示例代码:
<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html><head></head><meta charset="utf-8"><body style="background-color:green;color:white"><!--定义无序列表--><ul> <li>Coffee</li> <li>Milk</li> <li>D:\download\testimg2.gif</li></ul></body></html></span></span></span>
展示效果:
(4)不同类型的无序列表:
示例代码:
<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html><head></head><meta charset="utf-8"><body style="background-color:green;color:white"><h4>Disc 项目符号列表:</h4><ul type="disc"> <li>苹果</li> <li>橘子</li> <li>香蕉</li></ul><h4>Circle 项目符号列表:</h4><ul type="circle"> <li>苹果</li> <li>橘子</li> <li>香蕉</li></ul><h4>Square 项目符号列表:</h4><ul type="square"> <li>苹果</li> <li>橘子</li> <li>香蕉</li></ul></body></html></span></span>
展示效果:
(5)嵌套列表1:
示例代码:
<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html><head></head><meta charset="utf-8"><body style="background-color:green;color:white"><!--嵌套列表--><h4>嵌套列表1:</h4><ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶</li> </ul> </li> <li>牛奶</li></ul></body></html></span></span>
展示效果:
(6)嵌套列表2:
示例代码:
<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html><head></head><meta charset="utf-8"><body style="background-color:green;color:white"><h4>嵌套列表2:</h4><ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li> 绿茶 <ul> <li>中国茶</li> <li>非洲茶</li> </ul> </li> </ul> </li> <li>牛奶</li></ul></body></html></span></span>
展示效果:
2.有序列表
(1)也是一列项目,列表项目使用数字进行标记
(2)有序列表始于 <ol> 标签,每个列表项始于 <li> 标签
(3)列表项内部可以使用段落、换行符、图片、链接以及其他列表等
示例代码:
<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html><head></head><meta charset="utf-8"><body style="background-color:green;color:white"><!--定义有序列表--><ol> <li>Coffee</li> <li>Milk</li> <li>D:\download\testimg2.gif</li></ol></body></html></span></span></span>展示效果:
(4)不同类型的有序列表
示例代码:
<!--不同类型的有序列表--><h4>数字列表:</h4><ol> <li>苹果</li> <li>橘子</li> <li>香蕉</li></ol><h4>字母列表:</h4><ol type="A"> <li>苹果</li> <li>橘子</li> <li>香蕉</li></ol><h4>小写字母列表:</h4><ol type="a"> <li>苹果</li> <li>橘子</li> <li>香蕉</li></ol><h4>罗马字母列表:</h4><ol type="I"> <li>苹果</li> <li>橘子</li> <li>香蕉</li></ol><h4>小写罗马字母列表:</h4><ol type="i"> <li>苹果</li> <li>橘子</li> <li>香蕉</li></ol>
展示效果:
3.自定义列表
(1)自定义列表不仅仅是一列项目,而是项目及其注释的组合。
(2)自定义列表以 <dl> 标签开始,每个自定义列表项以 <dt> 开始,每个自定义列表项的定义以 <dd> 开始。
示例代码:
<span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><span style="font-family:Microsoft YaHei;"><html><head></head><meta charset="utf-8"><body style="background-color:green;color:white"><!--定义自定义列表--><dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dd>aaaaaa</dd> <dt>Milk</dt> <dd>White cold drink</dd></dl></body></html></span></span></span>展示效果:
0 0
- HTML 列表
- HTML列表
- HTML列表
- html列表
- html列表
- html 列表
- HTML:列表
- HTML列表
- HTML列表
- HTML列表
- HTML 列表
- Html 列表
- HTML列表
- HTML列表
- HTML列表
- HTML-列表
- HTML-列表
- HTML 列表
- 每天一个常用的linux命令(14)--find
- JAVA从菜鸟【入门】到新手【实习】一一建站流程
- 345_圆角矩形背景
- 简简单单的爬虫
- 346_桌面悬浮窗
- HTML-列表
- 2016微信营销的几点思考:流量与渠道
- android 开发 app全局字体的设置
- LeetCode[419] Battleships in a Board
- Flask项目的代码组织方式
- 批处理实现以字符串/关键字删选文档内容
- SpringInAction学习笔记:运行时值注入
- 计算机进制和计算
- python之sys模块详解