- 内容摘要:
- 介绍无序列表标签ul,li
9.无序列表
知识点:
- 无序列表:项目使用粗体圆点(典型的小黑圆圈)进行标记
- 无序列表始于<ul> 标签。每个列表项始于 <li> 标签
- <ul>与<li>组合使用
- <ul>可以通过style或者CSS设置list-style-type属性值,实现不同的展现形式
- list-style-type属性值有disc,circle,square
- <ul>支持全局属性,HTML 事件属性
- <ul>与<ul>可以嵌套展示
- <ul>与<ol>可以嵌套展示
- <li>列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
标签 | 描述 |
---|---|
<ul> | 定义无序列表 |
<li> | 定义列表项 |
运用例子:
备注:请亲自动手模仿着输入代码,在反复练习中熟悉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 无序列表</title>
</head>
<body>
<h4>armenian无序列表:</h4>
<ul style="list-style-type:armenian">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>four</li>
<li>five</li>
</ul>
<h4>cjk-ideographic无序列表:</h4>
<ul style="list-style-type:cjk-ideographic">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>four</li>
<li>five</li>
</ul>
<h4>decimal无序列表:</h4>
<ul style="list-style-type:decimal">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>four</li>
<li>five</li>
</ul>
<h4>ul与ul嵌套:</h4>
<ul>
<li>一级目录</li>
<li>一级目录
<ul>
<li>二级目录</li>
<li>二级目录</li>
</ul>
</li>
<li>一级目录</li>
</ul>
<h4>ul与ul嵌套:</h4>
<ul>
<li>一级目录</li>
<li>一级目录
<ul>
<li>二级目录</li>
<li>二级目录
<ul>
<li>三级目录</li>
<li>三级目录</li>
</ul>
</li>
</ul>
</li>
<li>一级目录</li>
</ul>
<h4>ul与 ol嵌套</h4>
<ul>
<li>一级目录</li>
<li>一级目录
<ol>
<li>二级目录</li>
<li>二级目录</li>
</ol>
</li>
<li>一级目录</li>
</ul>
</body>
</html>