一、HTML无序列表
无序列表是一个项目的列表,项目使用粗体圆点(典型的小黑圆圈)进行标记,适合成员之间无级别顺序关系的情况。
- 使用标签:
<ul> - 代码示例:
<!DOCTYPE html> <html> <head><title>童心少年</title><meta charset="UTF-8"> </head> <body><ol><li>Coffee</li><li>Milk</li></ol> </body> </html>
- 浏览器显示效果:
- Coffee
- Milk
三、HTML自定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合,以
<dl>标签开始,每个自定义列表项以<dt>开始,每个自定义列表项的定义以<dd>开始。一个术语名可以对应多重定义或者多个术语名对应同一个定义,如果只有术语名或者只有定义也是可行的,即<dt>与<dd>在其中数量不限、对应关系不限。- 使用标签:
<dl>、<dt>、<dd> - 代码示例:
<!DOCTYPE html> <html> <head><title>童心少年</title><meta charset="UTF-8"> </head> <body><dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl> </body> </html>
- 浏览器显示效果:
- Coffee - black hot drink
- Milk - white cold drink
四、注意事项与更多实例
- 注意事项:列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
- 更多实例:
- 不同类型的有序列表:展示不同标记类型(如字母、罗马数字等)的有序列表。
- 不同类型的无序列表:展示不同标记类型(如圆圈、方块等)的无序列表。
- 嵌套列表:展示如何在列表内部嵌套另一个列表。
- 自定义列表:展示一个包含术语及其定义的自定义列表。
五、HTML列表标签总结
标签 描述 <ol>定义有序列表 <ul>定义无序列表 <li>定义列表项 <dl>定义列表(自定义列表) <dt>自定义列表项目(术语) <dd>定义自定义列表的描述 通过以上学习,可以掌握HTML中的无序列表、有序列表和自定义列表的创建方法,以及如何在列表中使用不同的标签和属性来丰富页面内容。
- 浏览器显示效果:
- 浏览器显示效果: