目标效果
目标效果
知识点
- html标签之
<ol>
<ol>标签定义有序列表
实例：
<ol>
<li>第一章</li>
<li>第二章</li>
</ol>
显示效果：
有序列表
- html标签之
<ul>
<ul>标签定义无序列表
实例：
<ul>
<li>JavaScript</li>
<li>Java</li>
</ul>
显示效果：
无序列表
实现代码
通过对<ol>和<ul>标签的嵌套使用，可以实现目标效果。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>html实现一个简单列表</title>
</head>
<body>
<ul>
<li>JavaScript</li>
<ol>
<li>第一章</li>
<ul>
<li>const</li>
<li>let</li>
</ul>
<li>第二章</li>
<ul>
<li>function</li>
<li>object</li>
</ul>
</ol>
<li>Java</li>
<ol>
<li>第一章</li>
<ul>
<li>class</li>
<li>package</li>
</ul>
<li>第二章</li>
<ul>
<li>private</li>
<li>public</li>
</ul>
</ol>
</ul>
</body>
</html>
网友评论