学习目标
能够使用idea创建html文档
能够使用h1~h6,hr,p,br等与文本有关的标签
能够使用有序列表ul-li和无序列表ol-li显示列表内容
能够使用块级标签div与内联标签span
能够使用图片img标签把图片显示在页面中
能够使用超链接a标签实现页面跳转
能够使用table，tr，td标签定义表格
第一章 HTML概述
1、HTML概念
1.1 什么是HTML
HTML:Hyper Text Markup Language，超文本标记语言。是用来帮助我们编写网页的。
【超文本】 ：网页本身是一个文本文件 ，而超文本指的是这种文件中既可以包含文本信息 ，又可以包含图片 ，音频 ，视频 和链接 等非文字的信息。
【标记语言】 ：标记，也叫做标签。也就是说HTML这门语言是由标签组成的。
1.2 什么是HTML5
2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布，这是一次重大的革新。
HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台 带来无缝衔接的丰富内容。
2、开发HTML
2.1 HTML文件
使用浏览器打开一个网页，在网页上点击鼠标右键–>检查，浏览器下方会弹出一个控制台，在Element栏中即可展示当前网页的html代码。如下图所示：
在这个页面上按Ctrl+S后可以将这个html文件保存下来，保存后的文件的后缀名为html。如果使用文本编辑工具打开这个文件，发现里边全都是标签，如果使用浏览器打开则能够显示出正常的网页。这说明html文件有以下特点：
- html文件后缀名是.html（也可以是.htm）；
- html文件由html标签组成；
- html文件是由浏览器来运行的；
2.2 HTML文件的基本结构
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
-
<!DOCTYPE html>：文档声明，告诉浏览器当前的html是那个版本的；- HTML4.01 版本的文档声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">- HTML5 版本的文档声明：
<!DOCTYPE html> -
<html></html>：html标签是html文件的根标签，html文件必须以<html>开头并以</html>标签结尾 ； -
<head></head>： head标签是html文件的头部标签，head标签中的内容一般不会显示在浏览器的窗体中，其中会设置一些当前html文件的配置信息（给浏览器用的）。head标签中通常会有以下两个标签：<meta charset="UTF-8">:meta标签设置了这个html文件的元信息；<title>Title</title>：title标签设置了这个html文件的标题，会显示在浏览器的标题栏中；
-
<body></body>：body标签是html文件的主体标签，其中书写的内容会显示在浏览器的窗体中；
2.3 入门案例
【需求】编写html文件，在浏览器上显示出"Hello World!"
【实现步骤】
- 新建一个文本文件:hello.txt；
- 将这个文件的后缀名改为html；
- 使用文本编辑工具打开这个文件；
- 将HTML文件的基本结构书写进去；
- 在body中书写"Hello World!"；
- 使用浏览器打开这个文件；
【参考代码】
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello World!
</body>
</html>
2.4 小结
- HTML是一种超文本标记语言，是用来编写网页的；
- HTML文件属于文本文件，后缀名为
html或htm; - HTML文件由标签组成；
- HTML文件的基本结构包括：文档声明，html，head，title，meta和body标签；
- HTML文件是由浏览器来解释运行的；
3、使用IDEA创建HTML
实际的开发过程中，我们不会使用记事本来编写html文件，因为效率太低。我们基础班用来编写Java代码的开发工具IDEA整合了强大的前端开发工具WebStorm。所以，我们可以直接使用IDEA来创建项目并编写HTML文件。只是，我们这里创建的不是Java Project而是Static Web项目。创建过程如下：
- 第一步：File—>New—>Project
- 第二步：选择Static Web项目
- 第三步：填写项目名和指定项目存储的路径
- 第四步：创建完成
Static Web项目创建完成之后，项目目录下面只有idea的配置文件。我们需要在项目的根目录下面创建三个directory：html，css，js
- 第五步：在html文件夹上面，点击鼠标右键：New -->HTML File即可创建HTML文件；
-
第六步：运行html文件：
点击IDEA编辑区右上方的浏览器图标即可快速使用浏览器打开当前的html页面。
第二章 标签和标签属性
1、标签
html的标签是由尖括号+标签名+标签体组成的，如：<body> Hello World</body> ;
1.1 标签从哪来
我们使用的html标签都是由W3C组织预先定义好的。
我们可以通过查询API来查找要使用的标签；
1.2 标签分类
按照标签书写时需要书写标签的个数，可以将标签分为：单标签和双标签；
| 标签类型 | 示例 | 说明 |
|---|---|---|
| 单标签 | <br/> 或<br > | 由1个标签组成 |
| 双标签 | <body> Hello World! </body> | 由开始标签和结束标签 组成 |
【注意】结束标签前面需要加/;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
标签来源：
xml:可扩展的标签语言
<book> <price>1</price> </book>
html:的标签是由w3c组织预先定义
标签分类：
单标签： <br> <br/> 功能单一
双标签： 开始标签 + 标签体 + 结束标签 <body> aasdseew </body>
注意事项：
双标签的结束标签前需要加： /
-->
<!--
需求：在页面上分别书写单标签和双标签，并运行！
-->
asdsadsa <br>
asdsaaadsa
<a>asdsaewtsdfsdfdfd</a>
</body>
</html>
2、标签属性
HTML标签只是给我们提供了在页面上固定一块区域(或者body标签)或者是某个单一功能，而现实生活中我们需要在页面上展示出的效果往往是比较复杂的。这样，单纯地使用HTML的标签是不能够满足我们的需求的。这时候，我们就需要给标签添加一些属性来完成这些标签之外的功能。
【需求】将浏览器窗体区域的背景颜色设置成红色
需求分析：
- 浏览器窗体部分可以使用body标签来定义；
- 将窗体的背景颜色设置成红色可以在body标签上添加属性：bgcolor="red"来实现；
【参考代码】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="red">
<!--
标签属性：
作用：给标签增加额外功能，修饰标签
写法： 属性名 = "属性值"
学习标签：
1、明确标签的基本作用；
2、明确标签的常用属性；
-->
<!--
【需求】将浏览器窗体的背景变成红色
-->
</body>
</html>
2.1 标签属性的作用
标签属性的作用定义了标签额外的功能。
2.2 标签属性的书写规则
书写格式：属性名 = “属性值”;
| 标签类型 | 书写示例 | 说明 |
|---|---|---|
| 单标签 | <hr size = "3"> | 直接在标签中添加属性="属性值" |
| 双标签 | <body bgcolor="red"></body> | 在开始标签中添加属性="属性值" |
【注意事项】：属性值必须添加双引号" " ；
3、HTML标签的学习方法
- 学习标签的基本作用；
- 学习这个标签的常用属性；
第三章 常用标签
1、新闻字体标签
新闻字体标签主要指网页上的文字效果及排版标签，通过对新闻字体标签的学习，我们最终要做出如下效果：新闻字体案例 ;
【文字素材】：
公司简介
"中关村黑马程序员训练营"是由传智播客联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
【相关标签】：
| 标签名 | 常用属性 | 使用方法 | 说明 |
|---|---|---|---|
| h | align：水平对齐方式 | <h1 align="center">公司简介</h1> | 水平居中的一级标题。标题标签取值：h1~h6 |
| hr | size：粗细，color：颜色,noshade:取消阴影 | <hr size="2" color="orange" noshade="noshade"/> | 在页面上创建一条size="2"橘黄色的水平线 |
| font | color：颜色，size：大小，face：字体 | <font color="red" size="7" face="宋体">传智播客</font> | 修饰文字的颜色，字号和字体 |
| b | 无 | <b>传智播客</b> | 将文字加粗 |
| i | 无 | <i>黑马程序员</i> | 文字倾斜 |
| p | 无 | <p>传智播客，黑马程序员</p> | 将文字划分段落 |
| br | 无 | 传智播客<br />黑马程序员 | 手动换行 |
【练习一】h标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
h标签：
作用：修饰文章的标题
分类：h1 -- h6
属性：
align:
center:居中
left:左对齐
right：右对齐
-->
公司简介
<h1 align="center">公司简介</h1>
<h2 align="left">公司简介</h2>
<h3 align="right">公司简介</h3>
<h4>公司简介</h4>
<h5>公司简介</h5>
<h6>公司简介</h6>
</body>
</html>
【练习二】hr标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
hr标签：
作用：在页面上创建一条水平线
常用属性：
noshade: noshade="noshade" 取消水平线的阴影
size: 1-n 设置水平线的粗细
color: 设置水平线的颜色
颜色取值：
1、颜色名取值： color="red";
2、十六进制值： color="#7FFFD4";
-->
<!--
【需求】
1.在页面上创建一条水平线；
2.在页面上创建一条水平实线；
3.在页面上创建一条红色的水平实线；
4.在页面上创建一条粗细为6的水平实线；
-->
<hr>
<hr noshade="noshade">
<hr noshade="noshade" size="1">
<hr noshade="noshade" size="100" color="red">
<hr noshade="noshade" size="100" color="Aquamarine ">
<hr noshade="noshade" size="100" color="#7FFFD4">
<hr noshade="noshade" size="100" color="#509DA5">
</body>
</html>
【练习三】font标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
font标签：
作用：设置文字的颜色，字号，字体
属性：
color：设置文字的颜色
size：1-7
face：字体 从系统中获取字体样式
注意事项：
1、font标签的字号：1~7
2、font标签的字体样式是从系统中获取的
-->
<!--
【需求】
1.将文字"传智播客"的字体设置如下效果：
1.字号为5;
2.颜色为红色;
3.字体为宋体;
-->
<font color="yellow">传智播客</font> <br>
<font color="yellow" size="1">传智播客</font> <br>
<font color="red" size="7" face="宋体">传智播客</font> <br>
<font color="red" size="100" face="小篆">传智播客</font> <br>
</body>
</html>
【练习四】b标签和i标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
b标签：blod 粗体
作用：将文字加粗
i标签：italic 斜体
作用：将文字倾斜
注意事项：
标签可以嵌套，但是要正确嵌套
-->
<!--
【需求】
1.给"传智播客"文字加粗；
2.给"黑马程序员"文字倾斜；
3.给"上海市浦东新区"加粗和倾斜；
-->
传智播客 <br>
<b>传智播客</b> <br>
<i>黑马程序员</i> <br>
<b><i>上海市浦东新区</i></b> <br>
<i><b>上海市浦东新区</b></i> <br>
</body>
</html>
【练习五】p标签和br标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
p标签：
作用：设置文章的段落
br标签：
作用：手动换行
区别：
p标签上下两行中间有空行
br：只手动换行
-->
<!--
【需求】
1.给下列文字添加p标签修饰；
传智播客
传智播客
传智播客
传智播客
2.给下列文字添加br标签修饰；
黑马程序员
黑马程序员
黑马程序员
黑马程序员
3.运行后观察效果：
-->
<p>传智播客</p>
<p>传智播客</p>
<p>传智播客</p>
<p>传智播客</p>
黑马程序员<br>
黑马程序员<br>
黑马程序员<br>
黑马程序员<br>
</body>
</html>
【案例】新闻字体综合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2 align="center">公司简介</h2>
<hr size="2" color="orange">
<p>
<font color="red">“中关村黑马程序员训练营”</font> 是由 <b><i>传智播客</i></b> 联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。<br>
目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
</p>
<p>
黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
</p>
<p>
中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>
一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>
</body>
</html>
2、特殊字符
特殊字符指的是由于浏览器对标签的解析而导致一些字符不能够在页面上正常显示，这是后就需要使用到这类的特殊字符来展示这些字符。
常用的特殊字符有以下几个：
| 特殊字符 | 含义 | 示例 |
|---|---|---|
  | 空格 | " " |
< | 小于号 | < |
> | 大于号 | > |
© | 版权符 | © |
【练习】特殊字符
需求：在页面上展示如下效果
要求：
1. "文"和"字"之间要有4个空格；
2. 在页面上显示font的标签的使用方法：`<font color="red">传智播客</font>`；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
【需求】
1."文"和"字"之间要有4个空格；
2.在页面上显示font标签的使用方法，如：<font color="red">传智播客</font>
-->
<!--
常用特殊字符：
空格：
< : < less than
> : > greater than
版权符：© 版权
-->
文 字 <br>
在页面上显示font标签的使用方法，如：<font color="red"> <font color="red">传智播客</font> </font> <br>
2017 © sh.itcast.cn
</body>
</html>
3、图片标签
图片标签是img标签，作用是在网页上引入一张图片。
3.1 语法：
<img src="../../1.jpg" />
3.2 常用属性
我们可以通过img标签的以下属性来对引入的图片进行修饰；
| 属性 | 使用示例 | 说明 |
|---|---|---|
| src | <img src="../../mm.jpg"/> | 设置图片的路径 |
| alt | <img alt="这是一个球" /> | 图片无法显示时的替代文本 |
| width | <img width="200px" /> | 设置图片的宽度 |
| height | <img height="200px"/> | 设置图片的高度 |
| title | <img title="美女"/> | 设置鼠标停留在图片上显示的文字 |
【注意】：width和height在设置其中任意一个的时候，另一个属性会自动根据图片原来的宽高比例，自动变化；
【练习】图片标签练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
图片标签：img
作用：在页面上引入一张图片
属性：
src：设置图片的路径
width:宽度 px,%
heigth：高度
alt：在图片无法显示时出现的替代文字
title：设置图片的标题，鼠标停留在图片上的时候显示
-->
<img src="../img/mm2.jpg" width="50%" alt="这是一个球" title="美女" />
</body>
</html>
4、列表超链接
4.1 列表
列表标签的作用是在页面上显示一列数据。在html中列表分为：无序列表 和有序列表 。
列表标签是一个组合标签，具体组成如下：
无序列表：ul>li;
有序列表：ol>li;
| 标签名 | 使用示例 | 常用属性 | 说明 |
|---|---|---|---|
| 无序列表 | <ul> <li>百度</li> </ul> | type：cicle，disc，square | 不需排序 |
| 有序列表 | <ol><li>百度</li></li> | type:1,a,A,i,I | 需要排序，序号由type属性决定 |
【练习一】无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
无序列表：ul>li
作用：在页面上创建一列不需排序的数据
属性：
type：
type="circle"
type="disc"
type="square"
-->
<ul>
<li>百度</li>
<li>淘宝</li>
<li>传智播客</li>
</ul>
<ul type="circle">
<li>百度</li>
<li>淘宝</li>
<li>传智播客</li>
</ul>
<ul type="disc">
<li>百度</li>
<li>淘宝</li>
<li>传智播客</li>
</ul>
<ul type="square">
<li>百度</li>
<li>淘宝</li>
<li>传智播客</li>
</ul>
</body>
</html>
【练习二】有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
有序列表：ol>li
作用：在页面上创建一个需要排序的列表
属性：
type：改变序号的而表现形式
-->
<ol>
<li>淘宝</li>
<li>百度</li>
<li>传智播客</li>
</ol>
<ol type="1">
<li>淘宝</li>
<li>百度</li>
<li>传智播客</li>
</ol>
<ol type="a">
<li>淘宝</li>
<li>百度</li>
<li>传智播客</li>
</ol>
<ol type="A">
<li>淘宝</li>
<li>百度</li>
<li>传智播客</li>
</ol>
<ol type="i">
<li>淘宝</li>
<li>百度</li>
<li>传智播客</li>
</ol>
<ol type="I">
<li>淘宝</li>
<li>百度</li>
<li>传智播客</li>
</ol>
</body>
</html>
4.2 超链接【重点】
超链接标签的作用是，使被修饰的文字能够点击，点击后能够跳转到设置的外部网络资源；
4.2.1 基本语法
<a href="http://www.baidu.com">百度</a>
4.2.2 常用属性
通过a标签的href可以设置要跳转的地址，通过设置target属性能够设置跳转的方式。
| 属性 | 取值 | 使用示例 | 说明 |
|---|---|---|---|
| href | href=“地址” | <a href="http://www.baidu.com">百度</a> | 设置跳转的地址 |
| target | target="_self"或 target="_blank" | <a href="http://www.baidu.com" target="_self">百度</a> | target="_self"：在当前页面打开链接资源；target="_blank"：在一个新开的页面打开链接资源 |
【注意】当href属性取值为：javascript:; ，javascript:void(0) 或者# 时，这个链接被阻止。超链接就变成了空链接。
【练习】a标签练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
a标签：-----超链接
作用：链接到外部的网路资源
属性：
href:设置跳转的路径
target:
_self:在当前页面打开链接资源 默认打开方式
_blank:新开一个页面打开链接资源
-->
<a href="http://www.itcast.cn" target="_self">传智播客_self</a><br />
<a href="http://www.itcast.cn" target="_blank">传智播客_blank</a><br />
<!--
a标签：----空链接
-->
<a href="javascript:;">空链接</a><br />
<a href="javascript:void(0);">空链接</a><br />
<a href="#">空链接</a><br />
</body>
</html>
【案例】列表超链接案例
【需求】使用列表和超链接标签实现如下可点击的列表
需求分析：
1. 在页面上创建一个无序列表，序号设置为方块；
2. 每个列表项的文字使用a标签包裹，设置成超链接；
【参考代码】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
【需求】在页面上创建一个无序列表，要求列表项的文字有超链接效果
-->
<ul type="square">
<li>
<a href="http://www.baidu.com" target="_blank">百度</a>
</li>
<li>
<a href="">传智播客</a>
</li>
<li>
<a href="">淘宝</a>
</li>
</ul>
</body>
</html>
5、表格标签【重点】
5.1 作用
在html中表格标签的作用有两个：
- 格式化展示数据；
- 网页布局（目前用得比较少）；
5.2 组成
表格标签是一个组合标签，由以下标签组成：
| 标签名 | 作用 | 常用属性 | 说明 |
|---|---|---|---|
| table | 表格容器 | border：边框；width：宽度；height：高度；cellspacing：单元格间距；cellpadding：单元格与内容之间的距离；bgcolor：表格背景色 | |
| tr | 行 | align：left,center,right 设置当前行的水平对齐方式 | tr中必须嵌套td或者th |
| td | 列（单元格） | align：设置单元格内容的水平对齐方式；colspan：跨列；rowspan：跨行； | |
| th | 列标题 | 同td一样 | |
| caption | 表格的标题 | 标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 |
【注意】
- tr中必须嵌套td或者th；
- 只有td或者th中才能书写要显示的内容；
【练习一】制作普通表格
需求：在页面展示一个3行4列表格，内容包括：
1）编号、姓名、性别、年龄
2）设置边框1px
3）单元格边沿与其内容之间的空白（cellpadding）为5px
4）单元格之间的空白（cellspacing）为5px
5）背景颜色（bgcolor）为黄色
6）宽度400px，高度300px。
【参考代码】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
【案例】制作一个普通表格
需求：在页面展示一个3行4列表格，内容包括：
1）编号、姓名、性别、年龄
2）设置边框1px
3）单元格边沿与其内容之间的空白（cellpadding）为5px
4）单元格之间的空白（cellspacing）为5px
5）背景颜色（bgcolor）为黄色
6）宽度400px，高度300px。
-->
<table width="400px" height="300px" border="1px" cellpadding="5px" cellspacing="5px" bgcolor="yellow">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
【练习二】制作跨行表格
需求：
需求1: 实现跨行，制作电话本
设置一个表格4行2列：
1）边框为：1
2）单元格之间的距离（cellspacing）为：0
3）单元格与内容之间的距离为：10
4）表格宽度为：300
5）合并姓名为张三的单元格
如下图所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
【案例】制作跨行表格
需求1: 实现跨行，制作电话本
设置一个表格4行2列：
1）边框为：1
2）单元格之间的距离（cellspacing）为：0
3）单元格与内容之间的距离为：10
4）表格宽度为：300
5）合并姓名为张三的单元格
-->
<table border="1px" cellspacing="0" cellpadding="10" width="300px">
<tr>
<th>姓名</th>
<th>手机号</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>13333333333</td>
</tr>
<tr>
<td>13333333334</td>
</tr>
<tr>
<td>李四</td>
<td>13333333335</td>
</tr>
</table>
</body>
</html>
【练习三】制作跨列表格
【需求】
需求2: 实现跨列，制作电话本
设置一个表格3行3列：
1）边框为：1
2）单元格之间的距离（cellspacing）为：0
3）单元格与内容之间的距离为：10
4）表格宽度为：400
5）合并内容为手机号的单元格
如下图所示：
【参考代码】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
需求2: 实现跨列，制作电话本
设置一个表格3行3列：
6）边框为：1
7）表格之间的距离（cellspacing）为：0
8）表格与内容之间的距离为：10
9）表格宽度为：300
10）合并内容为手机号的单元格
-->
<table cellspacing="0" border="1px" cellpadding="10px" width="400px">
<tr>
<td>姓名</td>
<td colspan="2" align="center">手机号</td>
</tr>
<tr>
<td>张三</td>
<td>13333333333</td>
<td>13333333334</td>
</tr>
<tr>
<td>李四</td>
<td>14444444444</td>
<td>14444444445</td>
</tr>
</table>
</body>
</html>
【小结】制作跨行跨列表格的思路
1.制作一个完整的数据表格；
2.填充数据；
3.把相同的数据表格合并；
4.把被合并的部分删除掉；
第四章 黑马旅游网首页案例
1、案例效果
2、页面布局
整个页面可以划分成一个9行1列的表格，然后再在每一行的td中嵌套table完成局部的布局。注意：需要把布局table的width设置成100%。
【思路】
第一步：整体布局 9行1列表格
第二步：具体布局
头部：
第1行：头部图片
第2行：头部工具条
第3行：头部导航条
第4行：头部轮播图
主体：
第5行：黑马精选
第6行：国内游
第7行：境外游
底部：
第8行：底部图片
第9行：底部版权信息
【参考代码】
注意：给table设置边框知识方便观察布局，所有的表格嵌套必须在td中书写。
<table>
<!--
头部：
-->
<tr>
<td>
<!--第1行：头部图片-->
</td>
</tr>
<tr>
<td>
<!--第2行：头部工具条 ：1行3列表格-->
</td>
</tr>
<tr>
<td>
<!--第3行：头部导航条-->
</td>
</tr>
<tr>
<td>
<!--第4行：头部轮播图-->
</td>
</tr>
<!--
主体：
-->
<tr>
<td>
<!--第5行：黑马精选 2行4列-->
</td>
</tr>
<tr>
<td>
<!--第6行：国内游 3行4列-->
</td>
</tr>
<tr>
<td>
<!--第7行：境外游 3行4列-->
</td>
</tr>
<!--
底部：
-->
<tr>
<td>
<!--第8行：底部图片-->
</td>
</tr>
<tr>
<td>
<!--第9行：底部版权信息-->
</td>
</tr>
</table>
3、填充内容
3.1 头部
1 、头部广告
头部广告：在td中嵌入一个img标签，宽度设置成100%
【代码示例】
<tr>
<td>
<!--第一行：头部广告 1张图片-->
<img src="../img/top_banner.jpg"/>
</td>
</tr>
2、 头部搜索栏
头部搜索栏是一个1行3列的表格
【代码示例】
<tr>
<td>
<!--第二行：头部搜索框 1行3列表格-->
<table width="100%">
<tr>
<td>
<img src="../img/logo.jpg"/>
</td>
<td>
<img src="../img/search.png" width="500px"/>
</td>
<td>
<img src="../img/hotel_tel.png"/>
</td>
</tr>
</table>
</td>
</tr>
3、头部导航条
头部导航条可以看成是一个1行10列的表格，每个单元格中都是一个超链接
【代码示例】
<tr>
<td>
<!--第三行：头部导航 1行10列表格-->
<table width="100%" bgcolor="#FFC900" height="40px">
<tr>
<td>
<a href="#">首页</a>
</td>
<td>
门票
</td>
<td>
酒店
</td>
<td>
香港车票
</td>
<td>
出境游
</td>
<td>
国内游
</td>
<td>
港澳游
</td>
<td>
抱团定制
</td>
<td>
全球自由行
</td>
<td>
收藏排行榜
</td>
</tr>
</table>
</td>
</tr>
4、 轮播图
轮播图有一系列图片组成，周期性地切换。这里由于所学知识有限，使用一张图片代替；
【代码示例】
<tr>
<td>
<!--第四行 ：轮播图 一张图片-->
<img src="../img/banner_3.jpg" width="100%"/>
</td>
</tr>
3.2 主体
1、黑马精选
<tr>
<td>
<!--第5行：黑马精选:2行4列-->
<table width="100%">
<tr>
<td colspan="4">
<img src="../img/icon_5.jpg" alt="">黑马精选
<hr color="orange">
</td>
</tr>
<tr>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p>¥899</p>
</td>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p>¥899</p>
</td>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p>¥899</p>
</td>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p>¥899</p>
</td>
</tr>
</table>
</td>
</tr>
2、国内游
<tr>
<td>
<!--
国内游：3行4列
第一行：
-->
<table width="100%">
<tr>
<td colspan="4">
<img src="../img/icon_6.jpg" alt=""> 国内游
<hr color="#FFC900">
</td>
</tr>
<tr>
<td rowspan="2">
<img width="398" height="550" src="../img/guonei_1.jpg" alt="">
</td>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<font color="red">¥899</font>
</td>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<font color="red">¥899</font>
</td>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<font color="red">¥899</font>
</td>
</tr>
<tr>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<font color="red">¥899</font>
</td>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<font color="red">¥899</font>
</td>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<font color="red">¥899</font>
</td>
</tr>
</table>
</td>
</tr>
3、境外游
<tr>
<td>
<!--第7行：境外游 3行4列-->
<table width="100%">
<tr>
<td colspan="4">
<img src="../img/icon_7.jpg" alt="">境外游
<hr color="orange">
</td>
</tr>
<tr>
<td rowspan="2">
<img src="../img/jiangwai_1.jpg" alt="">
</td>
<td>
<img src="../img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p><font color="red">¥699</font></p>
</td>
<td>
<img src="../img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p><font color="red">¥699</font></p>
</td>
<td>
<img src="../img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p><font color="red">¥699</font></p>
</td>
</tr>
<tr>
<td>
<img src="../img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p><font color="red">¥699</font></p>
</td>
<td>
<img src="../img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p><font color="red">¥699</font></p>
</td>
<td>
<img src="../img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<p><font color="red">¥699</font></p>
</td>
</tr>
</table>
</td>
</tr>
3.3 底部
1、 底部图片
【代码实现】
<tr>
<td>
<!--第六行：底部图片 一张图片-->
<img src="../img/footer_service.png" width="100%"/>
</td>
</tr>
2、 底部版权声明
输入文字，背景色#ffc900，内容居中，高度40px。文字大小2，颜色用灰色
【代码示例】
<tr bgcolor="#ffc900" align="center" height="40px">
<td>
<!--第七行：底部版权信息 一行文字-->
<font size="2" color="gray">
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
</font>
</td>
</tr>
【完整代码】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
text-decoration: none;
}
</style>
</head>
<body>
<!--
【案例】商城首页
需求：使用table表格布局，完成商城首页的布局和显示
第一步：整体布局 9行1列表格
第二步：具体布局
头部：
第1行：头部图片
第2行：头部工具条
第3行：头部导航条
第4行：头部轮播图
主体：
第5行：黑马精选
第6行：国内游
第7行：境外游
底部：
第8行：底部图片
第9行：底部版权信息
-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<!--头部：4行-->
<tr>
<td>
<!--头部图片-->
<img width="100%" src="../img/top_banner.jpg" alt="">
</td>
</tr>
<tr>
<td>
<!--1行3列表格-->
<table width="100%">
<tr align="center">
<td><img src="../img/logo.jpg" alt=""></td>
<td><img width="483px" height="52px" src="../img/search.png" alt=""></td>
<td><img src="../img/hotel_tel.png" alt=""></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!--1行10列：导航条-->
<table width="100%" bgcolor="#FFC900">
<tr>
<td height="50px">首页</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%" alt="">
</td>
</tr>
<!--主体：旅游产品 3行-->
<tr>
<td>
<!--黑马精选：2行4列-->
<table width="100%">
<tr>
<!--跨4列-->
<td colspan="4">
<img src="../img/icon_5.jpg" alt=""> 黑马精选
<hr color="#FFC900">
</td>
</tr>
<tr>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<font color="red">¥899</font>
</td>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<font color="red">¥899</font>
</td>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<font color="red">¥899</font>
</td>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<font color="red">¥899</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!--
国内游：3行4列
第一行：
-->
<table width="100%">
<tr>
<td colspan="4">
<img src="../img/icon_6.jpg" alt=""> 国内游
<hr color="#FFC900">
</td>
</tr>
<tr>
<td rowspan="2">
<img width="398" height="550" src="../img/guonei_1.jpg" alt="">
</td>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<font color="red">¥899</font>
</td>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<font color="red">¥899</font>
</td>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<font color="red">¥899</font>
</td>
</tr>
<tr>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<font color="red">¥899</font>
</td>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<font color="red">¥899</font>
</td>
<td>
<img src="../img/jiangxuan_1.jpg" alt="">
<p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p>
<font color="red">¥899</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!--作业-->
</td>
</tr>
<!--底部：2行 -->
<tr>
<td>
<img width="100%" src="../img/footer_service.png" alt="">
</td>
</tr>
<tr>
<td bgcolor="#FFC900" align="center" height="46">
<font color="gray" size="2">
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
</font>
</td>
</tr>
</table>
</body>
</html>
第五章 小结
扫一扫
998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
