文字列表-有序列表和无序列表
文字列表可以有序地编排一些信息资源,使其条理化结构化,并以列表的样式显示出来。
1 无序列表
无序列表没有行号数字,使用 <ul> 和 <li> 标记。
<ul>
<li></li>
<li></li>
<li></li>
</ul>Code language: HTML, XML (xml)
无序列表还可以嵌套使用。
2 有序列表
有序列表有一个自动的编号,使用 <ol> 和 <li> 标记。
<ol>
<li></li>
<li></li>
<li></li>
</ol>Code language: HTML, XML (xml)
本节完整代码
<!DOCTYPE html>
<html>
<head>
<title>标题栏</title>
</head>
<body>
<h1>今晚的活动</h1>
<ul>
<li>烛光晚餐</li>
<li>烧烤</li>
<li>唱K</li>
<li>打麻将</li>
<li>打台球</li>
<li>海鲜</li>
</ul>
<h1>明晚的活动</h1>
<ol>
<li>看日落</li>
<li>海水浴场</li>
<li>沙滩排球</li>
<li>冲浪</li>
<li>看雪山</li>
<li>古城</li>
</ol>
</body>
</html>Code language: HTML, XML (xml)
说明
<ul>是 unordered list(无序列表)的缩写,<ol>是 ordered list(有序列表)的缩写,<li>是 list item(列表项)- 无序列表浏览器默认以实心圆点(disc)作为项目符号,可通过 CSS 的
list-style-type改为空心圆(circle)、方块(square)或去掉符号(none) - 有序列表浏览器默认以数字编号(1, 2, 3…),可通过
type属性或 CSS 改为字母(a, b, c)、罗马数字(i, ii, iii)等 - 列表可以嵌套,例如在
<li>内部再放一个<ul>或<ol>,实现多级列表结构 <li>必须放在<ul>或<ol>内部,不能直接独立使用- 现代 HTML5 中
<ul>和<ol>只能直接包含<li>元素,<li>内部可以包含段落、标题、链接等其他块级或行内元素