![《HTML 简易速速上手小册》第3章:HTML 的列表与表格(2024 最新版)_第1张图片](http://img.e-com-net.com/image/info8/24e9c337e2bb4ac7a446d8b48bf512a1.jpg)
文章目录
- 3.1 创建无序和有序列表( 信息的时尚搭配师)
-
- 3.1.1 基础示例:创建一个简单的购物清单
- 3.1.2 案例扩展一:创建一个旅行计划清单
- 3.1.3 案例扩展二:创建一个混合列表
- 3.2 基础表格的构建( 数据的小秘书)
-
- 3.2.1 基础示例:创建一个简单的课程表
- 3.2.2 案例扩展一:创建一个生日派对邀请名单
- 3.2.3 案例扩展二:制作一个简单的产品价格表
- 3.3 表格的高级应用和样式调整( 网页的数据艺术家)
-
- 3.3.1 基础示例:添加颜色和边框样式
- 3.3.2 案例扩展一:合并单元格
- 3.3.3 案例扩展二:在表格中嵌入图片和链接
3.1 创建无序和有序列表( 信息的时尚搭配师)
在这一节里,我们将变身为信息的时尚搭配师,使用无序和有序列表来给我们的网页内容增添一些秩序和风格。让我们一步步探索如何利用这些小巧的工具来整理我们的信息。
3.1.1 基础示例:创建一个简单的购物清单
想象一下,你正在准备一个周末聚会,需要制作一个购物清单。使用无序列表是个不错的选择,因为买东西的顺序并不重要。
DOCTYPE html>
<html>
<head>
<title>周末聚会购物清单title>
head>
<body>
<h2>购物清单h2>
<ul>
<li>薯片li>
<li>可乐li>
<li>披萨li>
ul>
body>
html>
这里,
标签创建了一个无序列表,而每个
(列表项)则是你的购物清单上的一个项目。
3.1.2 案例扩展一:创建一个旅行计划清单
现在,假设你正在规划一次旅行,想要列出你需要按顺序做的事情。有序列表在这里就派上用场了。
DOCTYPE html>
<html>
<head>
<title>我的旅行计划title>
head>
<body>
<h2>旅行前需要做的事情h2>
<ol>
<li>预定机票li>
<li>预订酒店li>
<li>打包行李li>
ol>
body>
html>
在这个例子中,
代表有序列表,每个
则是旅行准备过程中的一个步骤。
3.1.3 案例扩展二:创建一个混合列表
有时候,你可能需要在一个列表中同时使用无序和有序列表,比如说,你正在写一篇关于如何烹饪完美意面的博客。
DOCTYPE html>
<html>
<head>
<title>如何烹饪完美意面title>
head>
<body>
<h2>烹饪意面的步骤h2>
<ol>
<li>煮开水li>
<li>加入意面
<ul>
<li>确保水是滚烫的li>
<li>加入适量盐li>
ul>
li>
<li>煮到意面变软li>
<li>排水,加入你喜欢的酱料li>
ol>
body>
html>
在这个例子中,我们使用了一个有序列表
来描述烹饪的主要步骤,而在其中的某些步骤,比如“加入意面”,我们又使用了无序列表
来描述相关的细节。这种混合使用列表的方式可以让你的信息既清晰又详细。
通过这些案例,你现在应该已经成为一个无序和有序列表的使用高手了!记住,列表不仅仅是让事情变得有条理,它们还可以给你的网页增加可读性和吸引力。现在就去试试,用列表给你的网页内容增添一些组织和风格吧!
![《HTML 简易速速上手小册》第3章:HTML 的列表与表格(2024 最新版)_第2张图片](http://img.e-com-net.com/image/info8/7c5d7571dff04ab5b1098a39ab74decd.jpg)
3.2 基础表格的构建( 数据的小秘书)
表格,这个数据的晚礼服大师,可以把乏味的数字和文字转换成引人注目的信息。在本节中,我们将一起学习如何使用 HTML 来创建基础但优雅的表格。让我们一步步揭开表格的神秘面纱!
3.2.1 基础示例:创建一个简单的课程表
假设你是一个热爱学习的学生,想要为你的一周课程创建一个表格。这个基础表格可以帮你一眼看清每天的课程安排。
DOCTYPE html>
<html>
<head>
<title>我的课程表title>
head>
<body>
<h2>周课程表h2>
<table border="1">
<tr>
<th>时间th>
<th>星期一th>
<th>星期二th>
<th>星期三th>
<th>星期四th>
<th>星期五th>
tr>
<tr>
<td>8:00-10:00td>
<td>数学td>
<td>物理td>
<td>化学td>
<td>英语td>
<td>体育td>
tr>
table>
body>
html>
在这个例子中, 是创建表格的核心元素。 代表表格的一行, 用于表头(标题),而 用于普通单元格(数据)。这样,一眼望去,就可以清楚地知道每天的课程安排。
3.2.2 案例扩展一:创建一个生日派对邀请名单
接下来,让我们试着为即将到来的生日派对创建一个邀请名单表格。这个表格可以帮助你追踪谁已经确认参加。
DOCTYPE html>
<html>
<head>
<title>生日派对邀请名单title>
head>
<body>
<h2>生日派对邀请名单h2>
<table border="1">
<tr>
<th>姓名th>
<th>是否确认th>
<th>备注th>
tr>
<tr>
<td>小明td>
<td>是td>
<td>带礼物来td>
tr>
<tr>
<td>小红td>
<td>否td>
<td>可能有事td>
tr>
table>
body>
html>
这个表格不仅列出了被邀请的人员名单,还包括了他们是否确认参加以及相关的备注。
3.2.3 案例扩展二:制作一个简单的产品价格表
最后,假设你正在运营一家小店,需要创建一个产品价格表来展示给你的客户。
DOCTYPE html>
<html>
<head>
<title>产品价格表title>
head>
<body>
<h2>我们的产品h2>
<table border="1">
<tr>
<th>产品名称th>
<th>价格th>
<th>库存量th>
tr>
<tr>
<td>苹果td>
<td>¥5/斤td>
<td>20斤td>
tr>
<tr>
<td>香蕉td>
<td>¥3/斤td>
<td>30斤td>
tr>
table>
body>
html>
通过这个表格,你的客户可以轻松了解到每种产品的价格和库存量,从而做出购买决策。
通过这些案例,你已经掌握了基础表格的构建技巧。记住,表格不仅是展示数据的工具,它们还可以成为你网页上的视觉亮点。现在,就让我们用表格将那些平淡的信息变得生动起来吧!
3.3 表格的高级应用和样式调整( 网页的数据艺术家)
表格不只是数据的展示架,它们还可以变身为精致的艺术品!在本节中,我们将学习如何利用一些高级技巧和样式调整,让你的表格从普通走向非凡。
3.3.1 基础示例:添加颜色和边框样式
首先,我们来给一个基础表格添加一些颜色和边框样式,使其更加吸引人。
DOCTYPE html>
<html>
<head>
<title>彩色课程表title>
<style>
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid black; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
tr:nth-child(even) { background-color: #f9f9f9; }
style>
head>
<body>
<h2>我的彩色课程表h2>
<table>
<tr>
<th>时间th>
<th>星期一th>
<th>星期二th>
<th>星期三th>
<th>星期四th>
<th>星期五th>
tr>
<tr>
<td>8:00-10:00td>
<td>数学td>
<td>物理td>
<td>化学td>
<td>英语td>
<td>体育td>
tr>
table>
body>
html>
在这个例子中,我们通过 标签添加了一些 CSS 样式,使得表格拥有了统一的边框、间距和颜色主题,更具可读性和美观性。
3.3.2 案例扩展一:合并单元格
接下来,我们来看一个更高级的技巧:合并单元格。这在创建诸如时间表或事件日程时特别有用。
DOCTYPE html>
<html>
<head>
<title>活动时间表title>
<style>
td { text-align: center; }
style>
head>
<body>
<h2>周末活动时间表h2>
<table>
<tr>
<th>时间th>
<th>活动th>
tr>
<tr>
<td>上午td>
<td>远足td>
tr>
<tr>
<td rowspan="2">下午td>
<td>烧烤td>
tr>
<tr>
<td>游泳td>
tr>
table>
body>
html>
在这个例子中,rowspan="2" 使得“下午”这个单元格跨越了两行,方便地表示了两个连续的活动都在下午进行。
3.3.3 案例扩展二:在表格中嵌入图片和链接
最后,我们来试试在表格中嵌入图片和链接,这能让表格的信息表达更加丰富和直观。
DOCTYPE html>
<html>
<head>
<title>我的旅行相册title>
<style>
img { width: 100px; height: auto; }
style>
head>
<body>
<h2>旅行相册h2>
<table>
<tr>
<th>地点th>
<th>照片th>
<th>描述th>
tr>
<tr>
<td>巴黎td>
<td><img src="paris.jpg" alt="巴黎">
td>
<td><a href="https://example.com/paris">关于这个地方的更多信息a>td>
tr>
table>
body>
html>
在这个表格中,我们不仅展示了旅行的地点,还通过 ![]() 标签添加了相应的照片,以及通过 标签添加了指向更多信息的链接。
通过这些案例,你应该已经掌握了如何将基础表格转变为具有更高级功能和更吸引人样式的技巧。现在,就让我们用这些技巧给你的网页增添一些数据的魅力吧!
|
|