HTML基础学习第三课（列表的创建、有序和无序）

最新推荐文章于 2023-09-10 10:26:50 发布

XM..

最新推荐文章于 2023-09-10 10:26:50 发布

阅读量1.1k

点赞数 2

分类专栏： HTML 文章标签： php

本文链接：https://blog.csdn.net/xiaomoge__/article/details/126772223

版权

HTML 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

1、无序列表：

一、无序列表是一个项目的列表，此列项目使用粗点圆点（典型的小黑圆圈）进行标记。

二、无序列表始于<ul>标签，每个列表项始于<li>。

总结知识进行练习一：实现以下内容

代码如下：

<!DOCTYPE html>
<html>
     <head>
	      <meta charset="UTF-8">
	      <title></title>
	 </head>
	 <body>
	    <ul>
		   <li>咖啡</li>
		   <li>奶茶</li>
		</ul>
	 </body>
</html>

2、有序列表：

一、同样，有序列表也是一列项目，列表项目使用数字进行标记。

二、有序列表始于<ol>标签，每个列表始于<li>。

总结知识进行练习二：实现以下内容

代码如下：

<!DOCTYPE html>
<html>
     <head>
	      <meta charset="UTF-8">
	      <title></title>
	 </head>
	 <body>
	      <ol>
		    <li>牛奶</li>
			<li>果茶</li>
		  <ol/>
	 </body>
</html>

嵌套列表练习三：实现以下内容

代码如下：

<!DOCTYPE html>
<html>
     <head>
	 <meta charset="UTF-8">
	      <title></title>
	 </head>
	 <body>
	      <h2>海南政法职业学院</h2>
		  <ul>
		    <li>公安司法系</li>
			<li>应用法律系</li>
			<li>法务技术系</li>
			<li>公共安全技术系
			  <ul>
			    <li>信息安全专业</li>
				<li>计算机通信专业</li>
				<li>安全防范技术专业</li>
				<li>消防工程专业</li>
			 </ul>
			 </li>
	 </body>
</html>

练习四：实现以下内容

代码如下：

<!DOCTYPE html>
<html>
     <head>
	 <meta charset="UTF-8">
	      <title></title>
	 </head>
	 <ul>
	    <li><img src="i01.jpg"/></li>
		<a href="http://www.hnplc.com">苹果手表</a>
		<p>￥3000</p>
		<li><img src="i01.jpg"/></li>
		<a href="httm://www.hnplc.com">联想小新</a>
		<p>￥5000</p>
	 </ul>
</html>