day01HTML基础入门

最新推荐文章于 2024-10-12 06:22:08 发布

「已注销」

最新推荐文章于 2024-10-12 06:22:08 发布

阅读量895

点赞数

本文链接：https://blog.youkuaiyun.com/yukuiadeyu2/article/details/103658141

版权

day01HTML基础入门

1、今日内容学习目标

1) 能够使用idea创建html文档(掌握)

2)能够使用h1~h6、hr、p、br 等与文本有关的标签

3)能够使用有序列表ul-li和无序列表ol-li显示列表内容

4)能够使用图片img标签把图片显示在页面中

5) 能够使用超链接a标签跳转到一个新页面(掌握)

6) 能够使用table、tr、td标签定义表格(掌握)

7) 能够制作黑马旅游网的首页(掌握)

2、今日学习标签总览

一天的学习需要使用众多独立没有关联的标签，为了大家更好的吸收，现给出标签总览，以**“重要程度”排序。例如：“表格标签”**为今天最重要的标签。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lb49FN1h-1577025658883)(img/1.bmp)]

3、前端知识介绍

1、关于前端的一些要知道的事情：

前端课程的特点：知识点细，碎，多

学习前端方法：

不要死记硬背，要学会运用

案例驱动，通过案例学习

2、前端7天架构

我们学习java其实是在做JavaEE开发，主要是开发基于网页的后台应用程序，例如：京东、淘宝等购物网站。

在基础班，我们主要学习了JavaSE中的一些API，就是为了给我们在就业班学习JavaEE企业级应用开发打下坚实的基础！

而现在，我们还不能直接进入JavaEE的学习，在此之前，我们需要先学习一些有关网页开发的技术，这是进入JavaEE开发的必经之路！

下面，让我们先来了解一下JavaEE企业级开发的技术架构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5diy4422-1577025658884)(img/2.bmp)]

说明：

HTML 网页的骨架，用来书写网页的。

Css 美化网页的。

javaScript 网页的灵魂，用来交互前端页面和后台服务器之间的数据的，没有js。那么html+css就是一个静态页面，不会和后台服务器进行

数据的交互。开发中也就没有什么意义了。

4、案例介绍

通过今天的学习要做出如下网页的：黑马旅游网的首页。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SGAmTD8s-1577025658884)(img/3.bmp)]

当然，大家现在还不知道怎么来完成这个案例，因为这个案例中需要使用很多HTML中的标签。所以想完成上述案例，我们必须先学习html这门语言。

5、HTML的概述

5.1、什么是HTML

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ndUrJHtp-1577025658885)(img/4.bmp)]

HTML：超文本标记语言（HyperText Markup Language）

1)“超文本”就是指超过普通文本，页面内可以包含图片、链接、视频、音乐等非文字内容。并且超文本还可以设置大小，颜色，点击文本还可以进行页面跳转。说白了就是文本文件只能书写字符数据，不能包含图片、连接、视频、音乐等。而超文本是可以书写非字符的内容。超人普通人

2) “标记”：网页由各种各样的标记(标签)组成，就是使用标签的方法将需要的内容包括起来。例如：www.itcast.cn 标记是一个超链接。只是一些文本，由浏览器去解析这些标签符号。

3)“语言” 就是指人与计算机交互的方式。例如，之前学习的javase，sql语句，html语言。

总结：它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程。

补充：网页存放在服务器上，运行在浏览器上，运行之前先从服务器上下载到本地，在本地浏览器上解析。

5.2、什么是HTML5

2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布，这是一次重大的革新。

HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准，以其能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。

目前支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari(苹果系统)，Opera等。不同的浏览器之间是有差异，同一个网页运行可能会不同。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ad8lAwpt-1577025658885)(img/5.bmp)]

5.2.1、HTML能干什么

HTML用于编写网页。平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时，可以通过“右键/查看网页源代码”看到具体的html代码。

网页内容包含：HTML代码、CSS代码、JavaScript代码等内容。

1)HTML代码：结构层（好比人的骨骼/身体）负责从语义的角度搭建页面结构

2)CSS代码：表现层（好比人的穿衣打扮）负责从审美的角度美化页面

3)JavaScript代码：行为层（好比一个人能歌善舞）负责从交互的角度提升用户体验。

网页根据内容是否改变分为：静态页面、动态页面

4)静态页面：编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。

5)动态页面：会根据不同的情况展示不同的内容。例如：登录成功后右上角显示用户名。

5.2.2、HTML语言特点 (了解)

1、 HTML文件不需要编译，直接使用浏览器解析即可。

2、 HTML文件的扩展名是*.html 或 *.htm。

3、 HTML结构都是由标签组成。

4、标签名预先定义好的，我们只需要了解其功能即可。

1) 标签名不区分大小写，通常都是小写。

2) 通常情况下标签由开始标签和结束标签组成。叫做双标签。例如：www.baidu.com 超链接

3) 如果没有结束标签，建议以/结尾。叫做单标签。例如：

补充：img a 称为标签名

5、 HTML结构包括两部分：头head和体body。

5.2.3、 HTML标签的属性 (了解)

语法格式：

<标签名 属性名1="属性值" 属性名2="属性值" ...></标签名>

特点：

1、 HTML属性一般都出现在HTML标签中, 是HTML标签的一部分。

2、标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。

3、标签可以拥有多个属性。

4、一般属性由属性名和属性值成对组成的。

示例：

<a href="http://www.itcast.cn">上海传智播客</a>  <!-- 定义一个上海传智播客的超链接 -->

补充：上海传智播客叫做a标签的文本值。

<img src="images/baby.jpg" width="80" height="50"/>   <!-- 定义一张图片，并设置图片的宽度和高度-->

5.3、开发HTML

5.3.1、使用记事本创建html

1、在任意位置，创建“文本文档”，重命名“1.html”。注意文件后缀名是.html或者叫做.htm都可以。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XZf5OBmi-1577025658886)(img/6.bmp)]

2、右键/ 打开方式/ 记事本，开发html文件，并编写如下内容

<html>
		<head>
				<title>这是标题</title>
		</head>
		<body>
				这是正文
		</body>
</html>

说明：

1) 上述内容除了汉字，其他的字符都是固定不变的。

2) 以上使用的标签组成了HTML页面的基本结构，现将所有标签进行陈述：

整个页面的根标签，一个页面只需要一个，由头和体组成。

头标签，用于引入脚本、导入样式等。一般情况下头标签的内容在浏览器端都不显示。

子标签，用于显示浏览器标题。

体标签，是整个网页的主体，我们编写的html代码基本都在此标签体内。

3、使用浏览器打开

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n96Ucu5w-1577025658886)(img/7.bmp)]

关于上面在浏览器中显示的内容，我们在浏览器中查看也没有什么特殊的效果，接下来修改下代码，在这里只是先了解，后面我们会详细讲解。

<html>
	<head>
		<title>这是标题</title>
	</head>
	<body>
		<font size="5" color="red">这是正文</font>
	</body>
</html>

浏览器显示效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NsPZAebI-1577025658887)(img/8.bmp)]

5.3.2、以下是HTML的基本结构

<!-- 基本结构 -->
<html>根标签
	<!-- 网页头部 -->
	<head>
		<!-- 标题 -->
		<title>这是标题</title>
	</head>
		<!-- 网页主体 -->
	<body>
        <font size="5" color="red">这是正文</font>
	</body>
</html>

标签名	作用
html	网页的根元素，只能有一个根元素
head	网页的头部，可以指定网页的标题
body	网页的主体部分，我们的内容就写在主体中。
	注释嵌套：HTML的注释不能嵌套

格式：

注释特点：

浏览器查看时，不显示。右键查看源码可以看到。

5.3.3、使用IntelliJ IDEA创建html(掌握)

使用“记事本”开发效率低，现阶段使用idea做为开发工具，开发步骤如下：

在IDEA中创建静态Web工程

1.创建静态Web工程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SAv1yEOY-1577025658887)(img/9.bmp)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UVUTs0li-1577025658888)(img/10.bmp)]

2.指定工程名和保存位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f90Zrv3E-1577025658888)(img/11.bmp)]

3.创建HTML文件，选择html5的版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n3LfULPX-1577025658889)(img/12.bmp)]

4.创建HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <!--指定当前页面的字符集-->
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>hello，上海黑马程序员</h1>
</body>
</html>

说明：在html中添加注释的快捷键是：ctrl+/

5.点右上角一排浏览器按钮运行，idea会使用内置的服务器在指定的浏览器上运行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p8kMJr3L-1577025658890)(img/13.bmp)]

6.在浏览器上运行的结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m9GPMMIL-1577025658890)(img/14.bmp)]

5.3.4、项目结构

一个网页项目建议按如下目录创建结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aqnDVkny-1577025658890)(img/15.bmp)]

6、网站信息页面显示

6.1、案例需求

通常在一个网站中都会有关于公司的介绍, 那么我们就来完成这样的案例。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ygZbHUOf-1577025658891)(img/16.bmp)]

当然，大家现在还不知道怎么来完成这个案例，因为这个案例中需要使用很多HTML中的标签。所以想完成上述案例，我们必须先学习html这门语言中的标签。

6.2、相关知识点

本案例中需要使用的标签如下：

<h1></h1> 标题标签
<hr />水平线标签
<font>字体标签
<b></b>加粗标签
<i></i>斜体标签
<p></p>段落标签 
<br />换行标签

下面我们开始一个一个的介绍，为了方便演示，在day01_html项目下新建一个案例1标签演示的目录，并在该目录下创建一个“demo01.html”文件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tL0LGvq3-1577025658892)(img/17.bmp)]

6.2.1、标题标签

HTML提供<hn>系列标签，用于修饰标题，包含：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。
其中：<h1> 定义最大的标题。<h6> 定义最小的标题。
<hn>标题标签</hn>	n的取值1-6

示例：

在body标签体中书写如下标签：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GWp8DJkn-1577025658892)(img/18.bmp)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-viSlJDpY-1577025658892)(img/19.bmp)]

6.2.2、水平线标签：

标签在 HTML 页面中创建一条水平分隔线。

size属性：水平线的高度，单位像素：px

noshade属性：没有阴影，取值：noshade，表示显示纯色

<hr size="5" noshade="noshade" />

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XSSmq2sU-1577025658893)(img/20.bmp)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uvKBWlIy-1577025658893)(img/21.bmp)]

6.2.3、字体标签：

<font size="2" color="red" face="微软雅黑">字体的内容</font>

用于设置字体尺寸、字体颜色等。

标签具有如下属性：

size 属性：设置字体的大小。可能的值：从 1 到 7 的数字。浏览器默认值是 3。

说明：如果字体设置超过7，都是按照7进行显示。

color属性：设置字体的颜色。

颜色的取值：#xxxxxx 或 colorname

1、#xxxxxx 表示使用红绿蓝三原色设置颜色

红绿蓝分别取值：00 – FF，此处使用16进制。

#000000 表示黑色，#FFFFFF白色

#FF0000红色，#00FF00绿色，#0000FF蓝色

红绿蓝2位取值相同可以省略成1位。例如：# FF0000 简化成#F00

2、colorname 使用英文单词确定颜色。red 红色，blue 蓝色，green绿色

face 属性：设置文字的字体。

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-INW0UAwF-1577025658894)(img/22.bmp)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FBM5JGQv-1577025658894)(img/23.bmp)]

说明：在html5中对于font标签不建议使用，但是仍然保留了html4的这个标签，在我们还没有学习css样式之前，这个标签还是经常使用的，现在各大浏览器对其还是支持的，所以我们还可以继续使用。

6.2.4、格式化标签：

粗体

斜体

<b>要加粗的字体</b>
<i>要倾斜的字体</i>

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hcEQzGdk-1577025658895)(img/24.bmp)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EtmsqWlA-1577025658895)(img/25.bmp)]

6.2.5、段落标签：

在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是

。

插入单个换行。

<p>段落内容</p><!-- 每个段落之间有留白 -->
<br /> <!-- 换行标签，只是换行，不会有留白 -->

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-090xw0QG-1577025658896)(img/26.bmp)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zEcLyc49-1577025658896)(img/27.bmp)]

6.3、案例分析

6.3.1、知识点分析

需要的使用标签已经介绍完成，现在我们一次分析一下“公司简介”基本信息不同的地方都使用了哪些标签。

1、 “公司简介”，需要使用标题标签完成，例如：

。

2、 “中关村黑马程序员训练营” 需要使用字体标签完成。

3、 “传智播客” 需要斜体和粗体 组合完成。

4、这个文档被划分成4个区域，每一个区域之间有定义的间隔，需要使用段落标签

完成。

5、第2行或第3行是一个普通的换行，在html标签中，需要使用
完成。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IzTdWfmY-1577025658897)(img/28.bmp)]

6.3.2、步骤分析

1、创建test01.html页面用来显示页面信息

2、将课前资料文件，黑马程序员介绍信息.txt 中内容，复制到idea软件中

3、使用标题标签

修饰“公司简介”

4、使用标题标签

添加分隔线

5、使用段落标签

和
划分区域

6、使用字体标签修饰“中关村黑马程序员训练营”

7、使用格式化标签 修饰“传智播客”

6.4、代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>公司简介</h1>
		<hr />
		<p><font color="red">“中关村黑马程序员训练营”</font>是由<i><b>传智播客</b></i>联合中关村软件园、优快云，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 <br />目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。</p>

		<p>黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。</p>

		<p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。</p>

		<p>一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。</p>
	</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mLbl2LlS-1577025658897)(img/29.bmp)]

7、特殊字符标签

我们把特殊字符称为实体字符，所有的实体字符以 & 开头，以 ; 结尾。

符号	名称	HTML页面展示
	空格符	  &nbsp;
<	小于号	  &lt;  less than
>	大于号	  &gt;  greate than
©	版权符	  &copy;
¥	元(yen) &yen;

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IxPPuzo5-1577025658924)(img/30.bmp)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YRAPdQrg-1577025658925)(img/31.bmp)]

8、网站图片页面显示案例

8.1、案例介绍

在上面的案例中，我们发现这个页面都是文字的内容，而我们看到的页面往往文字和图片是并存的，

或者很多地方都是图片的效果，那么我们如何在页面中显示图片呢？

1）需求：制作家用电器排行榜

2) 案例效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G0pAkPdw-1577025658925)(img/32.bmp)]

当然，大家现在还不知道怎么来完成这个案例，因为我们还没有学习HTML中的图片标签，那么我们现在就来学习一下吧。

8.2、案例相关标签

图片标签：在html页面中引用一张图片。

格式：

<img src="图片的路径地址" />

注意：

1）src：表示图片的路径，一般使用当前服务器，也可以使用其它服务器。不能使用本地地址。c:/aaa.jpg

img标签对应的属性：

属性名称	含义	作用
src	图片的路径地址	表示图片的路径，一般使用当前服务器，也可以使用其它服务器。不能使用本地地址。c:/aaa.jpg
width	宽度	如果只设置其中一项，那么图片会等比例缩放
height	高度
title	提示文本	鼠标悬停在图片上方会出现的文字信息
alt	替换文本	图片加载失败的时候才会出现的文字信息
border	边框	只能定义边框的粗细

示例：

1)在案例2标签演示文件夹下新创键一个文件夹叫做：img。然后将图片复制到img文件夹下。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-81rdmASc-1577025658926)(img/33.bmp)]

演示代码如下：

在案例2标签演示文件夹下新创键一个html页面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Kl4mTqD-1577025658926)(img/34.bmp)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片演示</title>
</head>
<body>
    <!--图片标签-->
    <img src="img/mm.jpg" width="400" height="300" title="我是一个大美女" border="1">
    <img src="img/美女.jpg" width="400" height="300" title="我是一个大美女" alt="这里曾经有一个大美女">
</body>
</html>

8.3、案例分析

8.3.1、知识点分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5fznkKxV-1577025658927)(img/35.bmp)]

8.3.2、分析步骤

1、创建案例二: 网站图片页面显示的html页面，即test02.html。

2、使用图片标签标签的src属性引入图片

8.3.3、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家用电器排行榜</title>
</head>
<body>
    <h2>家用电器排行榜</h2>
    <!--图片标签-->
    <img src="img/tv01.jpg">TCL太差了
    <hr/>
    <img src="img/tv02.jpg">创维还不错
    <hr/>
    <img src="img/tv03.jpg">小米还不错
    <hr/>
    <img src="img/tv04.jpg">创维还不错
    <hr/>
    <img src="img/tv05.jpg">创维还不错
    <hr/>
    <!--访问其他服务器的图片-->
    <img src="http://www.itcast.cn/files/image/201802/20180207094540257.jpg">
</body>
</html>

8.3.4、实现效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eRaIYNyn-1577025658927)(img/36.bmp)]

9、网站列表页展示

9.1、案例介绍

在页面中显示文字和图片我们已经完成了，那么如果想在页面中显示一组友情链接信息，效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qob6toy2-1577025658928)(img/37.bmp)]

点击这几个链接，可以跳转到相应的网站上.那么现在我们就来实现这样的效果。

9.2、相关知识点

9.2.1、列表标签：

9.2.1.1、无序列表

<ul type="disc">
	<li>内容一</li>
	<li>内容二</li>
</ul>

说明：对于无序列表标签ul单独使用没有任何意义，我们一般都会结合ul的子标签li一起使用。

ul无序列表的属性：

名称	含义
type=“circle”	空心圆
type=“disc”	默认值，实心黑色圆
type=“square”	实心黑色正方形
注意：type属性写在ul身上是所有li改变，写在li身上是单个子标签li改变。

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fAMIYTcP-1577025658928)(img/38.bmp)]

9.2.1.2、有序列表

<ol type="1">
	<li>内容一</li>
	<li>内容二</li>
</ol>

ol有序列表的属性：

名称	形式
type=“1”	默认值，1、2、3…
type=“a”	小写的英文字母，a、b、c…
type=“A”	大写的英文字母，A、B、C…
type=“i”	小写的罗马数字，i、ii、iii…
type=“I”	大写的罗马数字，I、II、III…
注意：属性type写在ol身上是所有li改变，写在li身上是单个改变

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f2xo1LIU-1577025658929)(img/39.bmp)]

9.2.2、超链接标签：(掌握)

标签是超链接。页面中必不可少的一个标签，互联网正是因为有了超链接而变得丰富多彩，我们可以通过超链接跳转页面、跳转图片等相应的操作。

<a href="跳转的路径地址"></a>

超链接的属性：

名称	作用	取值
href	用于确定需要显示页面的路径（URL）	必写属性
target	确定以何种方式打开href所设置的页面	blank 新窗口打开 self 在自己的页面中打开，将原来页面覆盖。默认打开方式

9.2.2.1、外部链接(掌握)

如果想通过一个链接跳转一个网址，那么这里要注意必须加上http://或者https://的协议。

<a href="http://www.itcast.cn/">去传智官网</a>

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dbiwvHuI-1577025658929)(img/40.bmp)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1hpcMI8I-1577025658930)(img/41.bmp)]

9.2.2.2、空连接(理解)

如果我们希望这是一个链接，但是用户单击之后又不需要跳转，那么这种称之为空链接，也叫做假链接。

<a href="#"></a>
<a href="javascript:;"></a> √建议使用这个
<a href="javascript:"></a> √建议使用这个
<a href="javascript:void(0);"></a>
<a href="javascript:void(0)"></a>

说明：

1）一般不建议使用第一种 # 。因为第一种格式，当点击该超链接的时候浏览器地址栏会发生变化，多一个#;

这种方法会在地址栏的后面添加一个#号，然后回到页面顶部。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VSn4ibWl-1577025658930)(img/42.bmp)]

点击超链接之后，地址栏会多一个#:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fepjx0qT-1577025658930)(img/43.bmp)]

2）第一种格式除了多一个#号，如果页面内容比较多的时候，点击该超链接的时候，会出现如下所示现象：

就是当点击该超链接的时候，页面会重新回到页面的最上面。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YhKVxj9i-1577025658931)(img/44.bmp)]

当把页面下拉到页面的最下面的时候，点击超链接的时候，页面又会回到页面上面。

3）第2、3、4、5种属于我们后面学习的javascript语言的伪协议。上面使用javascript的伪协议的作用相同，会使a标签链接到一个js方法，但这个方法是void（0），则不会触发。

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GoK6R0Pb-1577025658931)(img/45.bmp)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FYodyJLX-1577025658932)(img/46.bmp)]

9.2.2.3、锚点链接(了解)

通过和name值做一个绑定，实现区域的跳转。

用法：

1、首先创建点击跳转的链接a标签，href写上 #锚点名实现一个绑定的操作。

2、定义一个锚点a标签，定义一个name属性，name的值要与锚点名一致，这个操作也称之为抛锚。

<a href="#锚点名">点击跳转</a>
<a name="锚点名">目标区域</a>

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3c3ug7nt-1577025658932)(img/47.bmp)]

效果：直接从上面找到页面的下面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B5ChVwk1-1577025658932)(img/48.bmp)]

9.3、案例分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D5xjRf3P-1577025658933)(img/49.bmp)]

分析：通过网页显示看出，需要使用无序列表，并且具有超连接。

9.4、案例实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--定义一个无序列表-->
		<ul type="square">
			<li><a href="http://www.itcast.cn">传智播客</a></li>
			<li><a href="http://www.baidu.com">百度</a></li>
			<li><a href="http://www.163.com">网易</a></li>
			<li>百合</li>
		</ul>
	</body>
</html>

说明：这里需要使用无序列表，ul，并且在ul下面含有4个子标签li。所以，这里我们可以使用快捷键生成：

先书写：ul>li*4 ------》然后按tab快捷键。

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rl2gN26M-1577025658933)(img/50.bmp)]

10、黑马旅游网站首页显示

10.1、案例介绍

我们在平时开发中会经常使用表格

布局更多。比如以下页面就是使用table来布局的。一个table表格是由多行和多列组成。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IwbRAJNH-1577025658933)(img/51.bmp)]

10.2、相关知识点

10.2.1、案例相关标签

本案例使用的标签，如下：

表格标签

表格中的行标签

3)表格中一行中的列标签

10.2.1.1、表格标签

HTML表格由

标签以及一个或多个、

(表头)或	标签组成。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dfDzJET0-1577025658934)(img/52.bmp)]

<table> 是父标签，相当于整个表格的容器。

table标签的属性：

名称	作用
border	表格边框的宽度
width	表格的宽度
height	表格的高度
cellpadding	单元格边沿与其内容之间的空白
cellspacing	单元格之间的空白
bgcolor :background color	表格的背景颜色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SBveNBbc-1577025658934)(img/53.bmp)]

<tr>标签用于定义行

tr标签的属性：

名称	作用
align	单元格内容的水平对齐方式,取值：left 左、right 右、center 居中

<td>标签用于定义表格的单元格（一个列）
td标签的属性：column 列 row 行

名称	作用
colspan	单元格可横跨的列数(横向合并单元格) column
rowspan	单元格可横跨的行数(纵向合并单元格)
align	单元格内容的水平对齐方式,取值：left 左、right 右、center 居中

<th>标签用于定义表头。单元格内的内容默认居中、加粗。th中也具有colspan和rowspan属性

10.2.2、简单的表格

需求：在页面上显示4个用户的编号、姓名、年龄、性别。

分析：需要使用表格标签table完成。

由于4个用户+头标签----》5行----》5个tr

编号、姓名、年龄、性别------》4列----》4个td

案例代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			需求：在页面上显示4个用户的编号、姓名、年龄、性别
			分析：需要使用表格标签table完成。
			由于4个用户+头标签----》5行
			编号、姓名、年龄、性别------》4列
		-->
		<h3>简单的表格</h3>
		<!--
			border="1px"   表示table表格的边框宽度是1像素
			width="400px"  表示table表格的宽度是400px
			height="300px" 表示table表格的高度是300px
		-->
		<table border="1px" width="400px" height="300px">
			<tr>
				<td>编号</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>性别</td>
			</tr>
			<tr>
				<td>1</td>
				<td>锁哥</td>
				<td>18</td>
				<td>男</td>
			</tr>
			<tr>
				<td>2</td>
				<td>黑旋风</td>
				<td>19</td>
				<td>男</td>
			</tr>
			<tr>
				<td>3</td>
				<td>助教</td>
				<td>23</td>
				<td>男</td>
			</tr>
			<tr>
				<td>4</td>
				<td>班导</td>
				<td>22</td>
				<td>女</td>
			</tr>
		</table>
	</body>
</html>

完成效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZLd9Skdy-1577025658934)(img/54.bmp)]

注意：

1）表格默认是没有边框的，需要手动添加border的属性，每一个单元格的大小是根据内容自动适配的，同样可以给表格标签设置整体的大小。

没有给表格添加border的属性的样子：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pVmO1oc4-1577025658935)(img/55.bmp)]

2）改变table表格的背景颜色，在table标签中添加一个属性 bgcolor，然后设置属性值即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pB3A6AUO-1577025658935)(img/56.bmp)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tEmc7b0s-1577025658936)(img/57.bmp)]

3）通过添加表格边框我们发现单元格和单元格之间具有缝隙，如果想把单元格之间的距离以及单元格和内容之间的距离清除，那么需要在table表格标签上加上cellspacing(单元格之间的空白)和cellpadding(单元格边沿与其内容之间的空白)分别设置为0。

4）另外还有一个属性align水平对齐方式，加在tr身上是改变这一行里面所有单元格的内容，如果加在td身上就是改变这一个单元格内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			需求：在页面上显示4个用户的编号、姓名、年龄、性别
			分析：需要使用表格标签table完成。
			由于4个用户+头标签----》5行
			编号、姓名、年龄、性别------》4列
		-->
		<h3>简单的表格</h3>
		<!--
			border="1px"   表示table表格的边框宽度是1像素
			width="400px"  表示table表格的宽度是400px
			height="300px" 表示table表格的高度是300px
			
			cellspacing="0" 表示单元格之间的距离是0
			cellpadding="0" 表示单元格中的字体和边框之间的距离
		-->
		<table border="1px" width="400px" height="300px" cellspacing="0" cellpadding="0">
			<tr>
				<td>编号</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>性别</td>
			</tr>
			<!--
				<tr align="center"> 表示这一行数据都位于中间
			-->
			<tr align="center">
				<td>1</td>
				<td>锁哥</td>
				<td>18</td>
				<td>男</td>
			</tr>
			<tr>
				<td>2</td>
				<!--
					<td align="center">黑旋风</td> 
					表示只有这一列数据  黑旋风 位于中间
				-->
				<td align="center">黑旋风</td>
				<td>19</td>
				<td>男</td>
			</tr>
			<tr>
				<td>3</td>
				<td>助教</td>
				<td>23</td>
				<td>男</td>
			</tr>
			<tr>
				<td>4</td>
				<td>班导</td>
				<td>22</td>
				<td>女</td>
			</tr>
		</table>
	</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lz8lmsLh-1577025658936)(img/58.bmp)]

10.2.3、带有表头的表格

如果希望某一个单元格是一个标题，可以把单元格标签td改写成th，标题自带加粗和居中的页面显示效果。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-86twrWZk-1577025658936)(img/59.bmp)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nSp3f3BJ-1577025658937)(img/60.bmp)]

10.2.4、合并单元格

表格可以合并单元格的操作，通过跨行和跨列的标签属性进行合并，但是要注意被合并的单元格标签需要手动删除才可以。

需求1: 实现跨行,制作电话本。如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QEjZYhDi-1577025658937)(img/61.bmp)]

分析：

上述案例有4行，先查看多的行数，2列。对于张三是跨2行的。

跨行使用td标签中的rowspan属性可以实现纵向合并单元格。

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>跨行表格</h1>
		<!--
			4行2列
		-->
		<table border="1px" width="400" cellspacing="0" cellpadding="10">
			<tr>
				<th>姓名</th>
				<th>手机号</th>
			</tr>
			<tr>
				<!--这里rowspan="2" 表示td跨2行-->
				<td rowspan="2">张三</td>
				<td>13800000000</td>
			</tr>
			<tr>
				<!--删除该行-->
				<!--<td>张三</td>-->
				<td>13800000001</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>13800000000</td>
			</tr>
		</table>
</html>

需求2: 实现跨列,制作电话本。如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZuG1JN7E-1577025658937)(img/62.bmp)]

分析：

上述案例有3行，3列。查看多的列，对于手机号是跨2列的。

跨列使用td标签中的colspan(横向合并单元格)。

案例代码：

		<h1>跨列表头</h1>
		<table border="1" width="400" cellpadding="10" cellspacing="0">
			<tr>
				<th>姓名</th>
				<!--colspan="2" 表示手机号跨2列-->
				<th colspan="2">手机号</th>
				<!--<td>手机号</td>-->
			</tr>
			<tr>
				<td>张三</td>
				<td>13800000000</td>
				<td>13800000001</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>13900000000</td>
				<td>13900000001</td>
			</tr>
		</table>

10.2.5、关于table表格的标签补充

标签名	作用
caption	整个表格的标题[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F0YKmGZ4-1577025660860)(img/63.bmp)] 实现效果：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ZDPCB2P-1577025660860)(img/64.bmp)]
tbody	表格主体，无论有没有写tbody，浏览器都会在解析的时候生成一个tbody标签[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UXJm5mr2-1577025660860)(img/65.bmp)]

10.3、案例分析

根据对黑马旅游网首页页面的分析，我们将采用表格嵌套的方式绘制。**首页绘制一个7行1列的表格用于作为外围的整体结构，**然后给每一行分别添加表格绘制自己的模块，有1×4 表格，有1×10表格。对于第4行轮播条暂时不编写，需要使用js。（第3天和第4天讲解），这里只是暂时放一张图片即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Eshfq7ZD-1577025658938)(img/66.png)]

10.4、案例开发步骤

10.4.1、整体布局

创建最外面的表格，边框、单元格间隔、单元格与内容的间隔都设置成0，宽度100%，居中对齐

说明：width="100%"表示自适应父容器body的大小，这里就是整个页面

创建7行tr和和1列td

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑马旅游网首页</title>
</head>
<body>
    <!--1.创建最外面的表格，边框、单元格间隔、单元格与内容的间隔都设置成0，宽度100%，居中对齐-->
    <table border="0" cellspacing="0" cellpadding="0" width="100%" align="center">
        <tr>
            <td>
                1
            </td>
        </tr>
        <tr>
            <td>
                2
            </td>
        </tr>
        <tr>
            <td>
                3
            </td>
        </tr>
        <tr>
            <td>
                4
            </td>
        </tr>
        <tr>
            <td>
                5
            </td>
        </tr>
        <tr>
            <td>
                6
            </td>
        </tr>
        <tr>
            <td>
                7
            </td>
        </tr>
    </table>
</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JqVtKQHG-1577025658938)(img/67.png)]

10.4.2、最上面的横幅图片

1)案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-STqFXF9y-1577025658938)(img/68.bmp)]

2)案例分析

直接在里面插入一张图片top_banner.jpg即可，图片的宽度使用100%

3)案例代码

<!--第1行:横幅图片-->
<tr>
    <td>
        <img src="img/top_banner.jpg" width="100%"/>
    </td>
</tr>

10.4.3、 Logo所在行

1)案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-www9T4Li-1577025658939)(img/69.bmp)]

2)案例分析

使用表格嵌套，插入一个1行3列的表格。边框、单元格间隔、单元格与内容的间隔都设置成0，宽度100%。

表格只有1行，全部居中

第1列的图片：logo.jpg。第2列的图片search.png，宽度设置为500。第3列图片hotel_tel.png

3)案例代码

<!-- 第2行:表格嵌套,插入1行3列的表格 -->
<tr>
    <td>
        <table border="0" width="100%" cellpadding="0" cellspacing="0">
            <!--这一行全部居中-->
            <tr align="center">
                <!--第1列是logo-->
                <td>
                    <img src="img/logo.jpg">
                </td>
                <!--第2列是搜索框,宽度500-->
                <td>
                    <img src="img/search.png" width="500">
                </td>
                <!--第3列是电话-->
                <td>
                    <img src="img/hotel_tel.png">
                </td>
            </tr>
        </table>
    </td>
</tr>

10.4.4、导航条

1)案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d5pLtWlt-1577025658939)(img/70.bmp)]

2)案例分析

插入一个1行10列的表格

边框、单元格间隔、单元格与内容的间隔都设置成0，宽度100%，背景色设置#ffc900。

在每个单元格中输入一个菜单项，每个菜单项上可以加上a标签，单元格的高度设置为45

tr对齐居中，则表格中的文字居中

3)案例代码

<!--第3行:导航条 -->
    <tr>
        <td align="center">
            <!--1行10列的表格,宽100%-->
            <!--2.边框、单元格间隔、单元格与内容的间隔都设置成0，宽度100%，背景色设置#ffc900。-->
            <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffc900">
                <!--4.tr对齐居中，则表格中的文字居中-->
                <tr align="center">
                    <!--3.在每个单元格中输入一个菜单项，每个菜单项上可以加上a标签，单元格的高度设置为45-->
                    <!--门票	酒店	香港车票	出境游	国内游	港澳游	抱团定制	全球自由行	收藏排行榜-->
                    <td height="45">
                        <a href="javascript:;">首页</a>
                    </td>
                    <td height="45">
                        <a href="javascript:;">门票</a>
                    </td>
                    <td height="45">
                        <a href="javascript:;">酒店	</a>
                    </td>
                    <td height="45">
                        <a href="javascript:;">香港车票</a>
                    </td>
                    <td height="45">
                        <a href="javascript:;">出境游</a>
                    </td>
                    <td height="45">
                        <a href="javascript:;">国内游</a>
                    </td>
                    <td height="45">
                        <a href="javascript:;">港澳游</a>
                    </td>
                    <td height="45">
                        <a href="javascript:;">抱团定制</a>
                    </td>
                    <td height="45">
                        <a href="javascript:;">全球自由行</a>
                    </td>
                    <td height="45">
                        <a href="javascript:;">收藏排行榜</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

10.4.5、轮播图

1)案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lM5V5ut3-1577025658939)(img/71.bmp)]

2)案例分析

因为没有学习相关的js知识，这里只要插入一张图片banner_3.jpg即可，宽度为100%

3)案例代码

<!--第4行:轮播图-->
<tr>
    <td>
        <img src="img/banner_3.jpg" width="100%">
    </td>
</tr>

10.4.6、旅游产品部分

1)案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nP85vDtK-1577025658940)(img/72.bmp)]

2)案例分析

a:“黑马精选”、“国内游”、"境外游"三个部分嵌套一个6行1列的表格，边框、内边距、单元格间距都为0，表格宽度为95%，表格设置居中。

b:其中1，3，5行在td中添加图标icon_5.jpg、icon_6.jpg、icon_7.jpg和文字，下面使用hr添加水平线，粗细即size是2，颜色为：#ffc900，td单元格的高度为80

c:第2行嵌套一个1行4列的表格，每个单元格插入1张图片jiangxuan_1.jpg和文字。文字使用p。价格使用font标签设置为红色。

d:第4行嵌套一个1行2列的表格，边框、单元格间隔、单元格与内容的间隔都设置成0，宽度100%。左边1列单元格插入1张图片guonei_1.jpg，右边1列嵌套一个2行3列的表格，每个单元格插入1张图片和文字。

e:第6行与第4行的制作方法相同，左边1列的图片名为jiangwai_1.jpg，修改文字和图片即可

3)案例代码

<!--1."黑马精选"、"国内游"、"境外游"三个部分嵌套一个6行1列的表格，边框、内边距、单元格间距都为0，表格宽度为95%，表格设置居中。-->
<table border="0" cellspacing="0" cellpadding="0" width="95%" align="center">
    <!--2.其中1，3，5行在td中添加图标icon_5.jpg、icon_6.jpg、icon_7.jpg和文字，
    下面使用hr添加水平线，粗细2，颜色为：#ffc900，td单元格的高度为80-->
    <!--黑马精选-->
    <tr>
        <td height="80">
            <img src="img/icon_5.jpg">黑马精选
            <hr size="2" color="#ffc900"/>
        </td>
    </tr>
    <tr>
        <td>
            <!--3.第2行嵌套一个1行4列的表格，每个单元格插入1张图片jiangxuan_1.jpg和文字。
            文字使用p。价格使用font标签设置为红色。-->
            <table>
                <tr>
                    <td>
                        <img src="img/jiangxuan_1.jpg">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="img/jiangxuan_1.jpg">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="img/jiangxuan_1.jpg">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <font color="red">&yen;899</font>
                    </td>
                    <td>
                        <img src="img/jiangxuan_1.jpg">
                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                        <font color="red">&yen;899</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!--国内游-->
    <tr>
        <td height="80">
            <img src="img/icon_6.jpg">国内游
            <hr size="2" color="#ffc900"/>
        </td>
    </tr>
    <tr>
        <td>
            <!--第4行嵌套一个1行2列的表格，左边1列单元格插入1张图片guonei_1.jpg,
            右边1列嵌套一个2行3列的表格，每个单元格插入1张图片和文字。-->
            <table border="0" cellspacing="0" cellpadding="0" width="100%">
                <tr>
                    <td>
                        <img src="img/guonei_1.jpg">
                    </td>
                    <td>
                        <table>
                            <tr>
                                <td>
                                    <img src="img/jiangxuan_2.jpg">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                    &yen;778
                                </td>
                                <td>
                                    <img src="img/jiangxuan_2.jpg">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                    &yen;778
                                </td>
                                <td>
                                    <img src="img/jiangxuan_2.jpg">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                    &yen;778
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="img/jiangxuan_2.jpg">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                    &yen;778
                                </td>
                                <td>
                                    <img src="img/jiangxuan_2.jpg">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                    &yen;778
                                </td>
                                <td>
                                    <img src="img/jiangxuan_2.jpg">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                    &yen;778
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

        </td>
    </tr>
    <!--境外游-->
    <tr>
        <td height="80">
            <img src="img/icon_7.jpg">境外游
            <hr size="2" color="#ffc900"/>
        </td>
    </tr>
    <tr>
        <td>
            <!--5.第6行与第4行的制作方法相同，左边1列的图片名为jiangwai_1.jpg，修改文字和图片即可-->
            <table border="0" cellspacing="0" cellpadding="0" width="100%">
                <tr>
                    <td>
                        <img src="img/jiangwai_1.jpg">
                    </td>
                    <td>
                        <table>
                            <tr>
                                <td>
                                    <img src="img/jiangxuan_3.jpg">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                    &yen;778
                                </td>
                                <td>
                                    <img src="img/jiangxuan_3.jpg">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                    &yen;778
                                </td>
                                <td>
                                    <img src="img/jiangxuan_3.jpg">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                    &yen;778
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="img/jiangxuan_3.jpg">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                    &yen;778
                                </td>
                                <td>
                                    <img src="img/jiangxuan_3.jpg">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                    &yen;778
                                </td>
                                <td>
                                    <img src="img/jiangxuan_3.jpg">
                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                    &yen;778
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

10.4.7、页面脚部

1)案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d2URUvIS-1577025658940)(img/73.bmp)]

2)案例分析

第6行插入图片footer_service.png，宽度100%
第7行要求td的背景色即bgcolor是#ffc900，td中的内容居中显示，td的高度是45。输入文字，文字写在font标签中，文字大小2，颜色用灰色

3)案例代码

<tr>
    <td>
        <!--6 1.第6行插入图片footer_service.png，宽度100%-->
        <img src="img/footer_service.png" width="100%"/>
    </td>
</tr>
<tr>
    <td bgcolor="#ffc900" align="center" height="45">
        <!--7 第7行要求td的背景色即bgcolor是#ffc900，td中的内容居中显示，td的高度是45。输入文字，文字写在font标签中，文字大小2，颜色用灰色-->
       <font size="2" color="gray"> 江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882</font>
    </td>
</tr>

10.5、完整案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑马旅游网首页</title>
</head>
<body>
    <!--1.创建最外面的表格，边框、单元格间隔、单元格与内容的间隔都设置成0，宽度100%，居中对齐-->
    <table border="0" cellspacing="0" cellpadding="0" width="100%" align="center">
        <tr>
            <td>
                <!--横幅图片-->
                <img src="img/top_banner.jpg" width="100%">
            </td>
        </tr>
        <tr>
            <td>
                <!--1.使用表格嵌套，插入一个1行3列的表格。边框、单元格间隔、单元格与内容的间隔都设置成0，宽度100%。-->
                <!--2.表格只有1行，全部居中-->
                <!--3.第1列的图片：logo.jpg。第2列的图片search.png，宽度设置为500。第3列图片hotel_tel.png-->
                <table border="0" cellspacing="0" cellpadding="0" width="100%">
                    <tr align="center">
                        <td>
                            <img src="img/logo.jpg">
                        </td>
                        <td>
                            <img src="img/search.png" width="500">
                        </td>
                        <td>
                            <img src="img/hotel_tel.png">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <!--1.插入一个1行10列的表格-->
                <!--2.边框、单元格间隔、单元格与内容的间隔都设置成0，宽度100%，背景色设置#ffc900。-->
                <!--3.在每个单元格中输入一个菜单项，每个菜单项上可以加上a标签，单元格的高度设置为45-->
                <!--4.tr对齐居中，则表格中的文字居中-->
                <!--5.上一级的td对齐居中，则表格整个位置居中。-->
                <table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffc900">
                    <tr align="center">
                        <td height="45">
                            <a href="javascript:void(0);">首页</a>
                        </td>
                        <td>首页</td>
                        <td>首页</td>
                        <td>首页</td>
                        <td>首页</td>
                        <td>首页</td>
                        <td>首页</td>
                        <td>首页</td>
                        <td>首页</td>
                        <td>首页</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <!--轮播图-->
                <img src="img/banner_3.jpg" width="100%">
            </td>
        </tr>
        <tr>
            <td>
                <!--1."黑马精选"、"国内游"、"境外游"三个部分嵌套一个6行1列的表格，边框、内边距、单元格间距都为0，表格宽度为95%，表格设置居中。-->
                <table border="0" cellspacing="0" cellpadding="0" width="95%" align="center">
                    <!--2.其中1，3，5行在td中添加图标icon_5.jpg、icon_6.jpg、icon_7.jpg和文字，
                    下面使用hr添加水平线，粗细2，颜色为：#ffc900，td单元格的高度为80-->
                    <!--黑马精选-->
                    <tr>
                        <td height="80">
                            <img src="img/icon_5.jpg">黑马精选
                            <hr size="2" color="#ffc900"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <!--3.第2行嵌套一个1行4列的表格，每个单元格插入1张图片jiangxuan_1.jpg和文字。
                            文字使用p。价格使用font标签设置为红色。-->
                            <table>
                                <tr>
                                    <td>
                                        <img src="img/jiangxuan_1.jpg">
                                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                        <font color="red">&yen;899</font>
                                    </td>
                                    <td>
                                        <img src="img/jiangxuan_1.jpg">
                                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                        <font color="red">&yen;899</font>
                                    </td>
                                    <td>
                                        <img src="img/jiangxuan_1.jpg">
                                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                        <font color="red">&yen;899</font>
                                    </td>
                                    <td>
                                        <img src="img/jiangxuan_1.jpg">
                                        <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                        <font color="red">&yen;899</font>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <!--国内游-->
                    <tr>
                        <td height="80">
                            <img src="img/icon_6.jpg">国内游
                            <hr size="2" color="#ffc900"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <!--第4行嵌套一个1行2列的表格，左边1列单元格插入1张图片guonei_1.jpg,
                            右边1列嵌套一个2行3列的表格，每个单元格插入1张图片和文字。-->
                            <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                <tr>
                                    <td>
                                        <img src="img/guonei_1.jpg">
                                    </td>
                                    <td>
                                        <table>
                                            <tr>
                                                <td>
                                                    <img src="img/jiangxuan_2.jpg">
                                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                                    &yen;778
                                                </td>
                                                <td>
                                                    <img src="img/jiangxuan_2.jpg">
                                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                                    &yen;778
                                                </td>
                                                <td>
                                                    <img src="img/jiangxuan_2.jpg">
                                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                                    &yen;778
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <img src="img/jiangxuan_2.jpg">
                                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                                    &yen;778
                                                </td>
                                                <td>
                                                    <img src="img/jiangxuan_2.jpg">
                                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                                    &yen;778
                                                </td>
                                                <td>
                                                    <img src="img/jiangxuan_2.jpg">
                                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                                    &yen;778
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>

                        </td>
                    </tr>
                    <!--境外游-->
                    <tr>
                        <td height="80">
                            <img src="img/icon_7.jpg">境外游
                            <hr size="2" color="#ffc900"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <!--5.第6行与第4行的制作方法相同，左边1列的图片名为jiangwai_1.jpg，修改文字和图片即可-->
                            <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                <tr>
                                    <td>
                                        <img src="img/jiangwai_1.jpg">
                                    </td>
                                    <td>
                                        <table>
                                            <tr>
                                                <td>
                                                    <img src="img/jiangxuan_3.jpg">
                                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                                    &yen;778
                                                </td>
                                                <td>
                                                    <img src="img/jiangxuan_3.jpg">
                                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                                    &yen;778
                                                </td>
                                                <td>
                                                    <img src="img/jiangxuan_3.jpg">
                                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                                    &yen;778
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <img src="img/jiangxuan_3.jpg">
                                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                                    &yen;778
                                                </td>
                                                <td>
                                                    <img src="img/jiangxuan_3.jpg">
                                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                                    &yen;778
                                                </td>
                                                <td>
                                                    <img src="img/jiangxuan_3.jpg">
                                                    <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
                                                    &yen;778
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <!--6 1.第1行插入图片footer_service.png，宽度100%-->
                <img src="img/footer_service.png" width="100%"/>
            </td>
        </tr>
        <tr>
            <td bgcolor="#ffc900" align="center" height="45">
                <!--7 2.第2行输入文字，背景色#ffc900，内容居中，高度45，文字大小2，颜色用灰色-->
               <font size="2" color="gray"> 江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882</font>
            </td>
        </tr>
    </table>
</body>
</html>