web快速入门之基础篇-html：7、列表-实际应用-嵌套列表

最新推荐文章于 2023-08-22 00:13:07 发布

被开发耽误的大厨

最新推荐文章于 2023-08-22 00:13:07 发布

阅读量1.2k

点赞数 2

分类专栏： web前端（H5）

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.csdn.net/YuDBL/article/details/104001837

版权

web前端（H5）专栏收录该内容

83 篇文章 15 订阅

订阅专栏

一、前言

上一篇文章我整理以前的笔记是：列表的基础语法 ol、ul、li 标签的使用，详细可参考博文 web快速入门之基础篇-html：6、列表-基础语法这篇文章我将整理笔记：列表-实际应用-嵌套列表，也就是主要介绍 ol、ul、li 标签的嵌套使用，实现分级菜单的一些知识

二、实例演示

实例代码

我们先来看看一个例子，如下代码：02_嵌套列表_实际应用.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>这是title标题</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	</head>
	<body>
	
	<h3>---直接使用---</h3>
	<ol>
		<li>书</li>
		<li>家电</li>
		<li>日用品</li>
	</ol>
	
        <h3>---嵌套的列表---</h3>
	<ol>
		<li>个人所得税
			<ul>
			<li><a href="#问题1.1">问题</a></li>
			<li><a href="#方案1.2">方案</a></li>
			<li><a href="#实现1.3">实现</a></li>
			</ul>
		</li>
		<li>其他税收介绍
		</li>
	</ol>
	
	<img src="if.jpg" width="450"/><br/>

	<a name="问题1.1">这是问题</a><br/>
	<img src="if.jpg" width="450"/><br/>
	<a name="方案1.2">这是方案</a><br/>
	<img src="if.jpg" width="450"/><br/>
	<a name="实现1.3">这是实现</a><br/>
	<img src="if.jpg" width="450"/><br/>
	
	</body>
</html>