- Web概念概述
- HTML
- C/S架构:Client/Server--- 客户端/服务器端(安卓)
- 在用户本地有一个客户端程序,与远程服务器端进行交互
- 如:QQ、迅雷
- 优点:
- 用户体验好
- 缺点:
- 开发(客户端、服务器端)、安装、部署、维护麻烦
- B/S架构:Browser/Server---浏览器/服务器端
- 网站:http://www.itcast.com 传智播客
- 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
- 优点:
- 开发、安装、部署、维护简单
- 缺点:
- 如果应用过大(带宽占用多),用户的体验可能会受到影响
- 对硬件要求过高
- 静态资源:使用静态网页开发技术发布的资源
- 所有用户访问,得到的结果是一样的
- 如:文本、图片、音频、视频,HTML,CSS,JavaScript【静态网页开发技术】
- 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。
- 浏览器中内置了静态资源的解析引擎,可以用来展示静态资源
- 动态资源:使用动态网页技术发布的资源
- 所有用户访问,得到的结果可能不一样
- 如jsp/Servlet,php,asp(.net)。。。
- 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
- Hyper Text超文本:用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。
- Markup Language标记语言:由标签构成的语言。
- <标签名称> 如html、xml、latex
- 标记语言不是编程语言,不像编程语言一样有逻辑型
- 语法
- 后缀名: .html/.htm
- 标签分为
- 围堵标签:有开始标签和结束标签,如<html> </html>
- 自闭和标签:开始标签和结束标签在一起,如<br/>
- 标签可以嵌套:
- 需要正确嵌套,不能你中有我,我中有你
- 错误示范:<a><b></a></b>
- 正确示范:<a><b></b></a>
- 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单引号或双引号都可以)引起来
- html的标签不区分大小写,但是建议使用小写
- html:标识html文档的根标签,H5新增属性lang="en"要改为ch或不写
- head:头标签。用于指定html文档的一些属性。引入一些外部资源
- <meta charset="UTF-8">指定字符集,默认使用GBK进行解码
- title:标题标签
- body:体标签
- <!DOCTYPE>? 定义文档类型。 如 <!DOCTYPE html>表示该文档是一个html文档
- 注释:<!--内容-->
- <h1> to <h6>,标题标签,h1-h6字体大小逐渐递减
- <p>段落标签
- <br>:换行标签,<br /> <br>均可
- <hr>:显示水平线,新闻标题与内容之间,可以通过属性(H5不再使用,但浏览器向下兼容)控制其样式<hr />自闭和标签
- color="red"颜色
- width="200"宽度
- size="10"高度
- align="left"对齐(center居中,left和right)
- <i>:斜体
- <b>:字体加粗
- h5淘汰<font>:字体标签
- color="red"---颜色
- size="5"---字号
- face="楷体"---字体
- <center>:文本居中
- 属性定义
- color颜色
- 英文单词:red blue yellow grey white
- RGB(值1,值2,值3):值的范围:0-255 如rgb(0,0,255)表示蓝颜色
- #值1值2值3:值的范围为:00-FF之间(16进制,16*16=255),如#FF00FF
- width:
- 数值:width="20" ,数值的单位默认是px(像素)
- 数值%:占比相对于父元素(屏幕的宽度)的比例
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<!--这是注释-->
<!--br 换行-->
白日依山尽,<br /> <!--不然就解析为一个空格-->
黄河入海流。<br>
<!--标题标签 h1~h6-->
黑马旅游网<br>
<h1>黑马旅游网</h1> <!--自动换行-->
<h2>黑马旅游网</h2>
<h3>黑马旅游网</h3>
<h4>黑马旅游网</h4>
<h5>黑马旅游网</h5>
<h6>黑马旅游网</h6>
<!--段落标签-->
<!-- 间隔比直接使用br标签更大,间隔两行-->
<p>
昆仑好客两节课金卡戴珊回款汇款会塞看拉萨路虎规范。进口国开酒鬼酒,ad哈撒给枫语过IEU币吧,手机卡的会玩。大家是客户端和卡塞尔。
</p>
<p>
空间hiua三个豆腐干。圣诞节客户我,成绩会萨克江南府次方。
</p>
<p>
砂咖啡uwuie认为高房价牛黄。大赛不不封闭,阿胡说八道越贵。等我哈蝙蝠磁轭。爱上大口径阿比。
</p>
<!-- hr 显示一条水平线-->
<hr color="red" width="200" size="10" align="left"/>
<hr>
<!--加粗-->
白日依山尽<br>
<b>白日依山尽</b><br><hr>
白日依山尽<br>
<i>白日依山尽</i>
<br><br><br>
<!--字体标签-->
<hr>
<font color="red" size="5" face="楷体">
白日依山尽
</font><hr>
<font color="#FF00FF" size="5" face="楷体">
黑马
</font><hr>
<font color="#3621F5" size="5" face="楷体">
黑马
</font>
<hr color="red" width="50%" size="10" align="left"/>
<center>
<font color="red" size="5" face="楷体">
白日依山尽
</font>
</center>
</body>
</html>
3.3案例--文本标签<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>黑马程序员简介</title>
</head>
<body>
<h1>公司简介</h1>
<hr color="#f0ff18" />
<p>
<font color="#ff0000"> "中关村黑马程序员训练营"</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN, 并委托传智播客进行教学实施的软件开发高端培训机构,致力于服务各大软件企业,解决当前软件开发技术飞速发展, 而企业招不到优秀人才的困扰。
</p>
<p>
目前,“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地, 并被评为中关村软件园重点扶持人才企业。
</p>
<p>
黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业,而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度,远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”, 必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说,黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量,并降低企业的用人风险。
</p>
<p>
中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目实施管理能力,并密切关注技术革新, 不断引入先进的技术,研发更新技术课程,确保学员进入企业后不仅能独立从事开发工作,更能给企业带来新的技术体系和理念。
一直以来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、 开放和协作,努力打造高质量的IT人才服务平台。
</p>
<hr color="#f0ff18" />
<font color="#696969" size="2">
<center>
江苏传智播客教育科技股份有限公司 版权所有<br>
Copyright © 2006-2018, All Rights Reserved 苏ICP备16007882
</center>
</font>
</body>
</html>
3.4图片标签- img:展示图片<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="300"/>
- src指定图片的位置,指示图片相对路径,./表示当前目录,../表示当前文件的上一级目录
- alt表示替换的文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<!--展示一张图片 img-->
<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="300"/>
<!--
相对路径
以.开头的路径
./代表当前目录 ./image/1.jpg 默认就是./
../代表后退到上一级目录
-->
<img src="./image/jiangxuan_.jpg" align="right" alt="古镇" width="500" height="300"/>
<img src=".././image/jiangxuan_1.jpg" align="right" alt="古镇" width="500" height="300"/>
<img src="../image/jiangxuan_1.jpg" align="right" alt="古镇" width="500" height="300"/>
</body>
</html>
3.5 列表标签,不建议通过html的属性控制,而是希望使用CSS的样式进行修改 - 有序列表
- ol 有序列表
- type:类型
- start:开始序号
- li:表示列表的每一项
- 无序列表
- ul
- li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--定义一个有序列表ol(order list)-->
早上起床要干的事情
<ol type="a" start="2">
<li>睁眼</li>
<li>玩手机</li>
<li>穿衣服</li>
<li>洗漱</li>
<li>吃饭</li>
</ol>
<!--无序列表 ul(unorder list)-->
<ul>
<!--默认圆点-->
<li>睁眼</li>
<li>玩手机</li>
<li>穿衣服</li>
<li>洗漱</li>
<li>吃饭</li>
</ul>
<ul type="square">
<li>睁眼</li>
<li>玩手机</li>
<li>穿衣服</li>
<li>洗漱</li>
<li>吃饭</li>
</ul>
<ul type="circle">
<li>睁眼</li>
<li>玩手机</li>
<li>穿衣服</li>
<li>洗漱</li>
<li>吃饭</li>
</ul>
</body>
</html>
3.6 链接标签- a 定义超链接,不指定属性,啥也没有
- 属性
- href:指定访问资源的url(统一资源定位符/资源的表示形式)
- 指向链接:http://www.
- 指向其他html文件:相对路径
- 指向邮箱: mailto:邮箱地址
- 图片链接<a href="http://www.itcast.cn" target="_self"><img src="image/jingxuan_2.jpg"> </a>
- target:指定打开资源的方式:
- _self:在当前页面打开
- _blank:在空白页面打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>连接标签</title>
</head>
<body>
<!--超链接, a-->
<a href="http://www.itcast.cn">点我</a>
<br>
<a href="http://www.itcast.cn" target="_self">在当前选项卡打开页面</a>
<br>
<a href="http://www.itcast.cn" target="_blank">在新选项卡打开页面</a>
<br>
<a href="./5_列表标签.html">列表标签(访问资源的路径)</a>
<br>
<a href="mailto:ljh.ahu@qq.com">联系我们</a>
<br>
<a href="http://www.itcast.cn" target="_self"><img src="image/jingxuan_2.jpg">
</a>
</body>
</html>
3.7 div和span块标签和CSS结合使用,是两张白纸,便于通过CSS进行控制div:块级标签span:内联标签(行内标签)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块标签</title>
</head>
<body>
<!--div:每一个div占满一整行,会自动换行。块级标签
span:文本信息在一行展示,行内标签 内联标签
-->
<!--可以通过CSS控制span的样式,如果其他有样式则不好控制-->
<span>黑马程序员</span>
<span>传智播客</span>
<hr>
<div>黑马程序员</div>
<div>传智播客</div>
</body>
</html>
3.8 语义化标签(h5提供):html5中为了提高可读性,提供了语义化标签,无样式html4及之前:如果对开头、结尾、正文进行控制,可以用div将其包裹起来,并加上id,使用css控制
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>黑马程序员简介</title>
</head>
<body>
<div id="header">
<h1>公司简介</h1>
</div>
<hr color="#f0ff18" />
<p>
<font color="#ff0000"> "中关村黑马程序员训练营"</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN, 并委托传智播客进行教学实施的软件开发高端培训机构,致力于服务各大软件企业,解决当前软件开发技术飞速发展, 而企业招不到优秀人才的困扰。
</p>
<p>
目前,“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地, 并被评为中关村软件园重点扶持人才企业。
</p>
<p>
黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业,而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度,远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”, 必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说,黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量,并降低企业的用人风险。
</p>
<p>
中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目实施管理能力,并密切关注技术革新, 不断引入先进的技术,研发更新技术课程,确保学员进入企业后不仅能独立从事开发工作,更能给企业带来新的技术体系和理念。
一直以来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、 开放和协作,努力打造高质量的IT人才服务平台。
</p>
<hr color="#f0ff18" />
<div id=""footer>
<font color="#696969" size="2">
<center>
江苏传智播客教育科技股份有限公司 版权所有<br>
Copyright © 2006-2018, All Rights Reserved 苏ICP备16007882
</center>
</font>
</div>
</body>
</html>
html5:语义化标签<header></header> <footer></footer><!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>黑马程序员简介</title>
</head>
<body>
<header>
<h1>公司简介</h1>
</header>
<hr color="#f0ff18" />
<p>
<font color="#ff0000"> "中关村黑马程序员训练营"</font>是由<b><i>传智播客</i></b>联合中关村软件园、CSDN, 并委托传智播客进行教学实施
的软件开发高端培训机构,致力于服务各大软件企业,解决当前软件开发技术飞速发展, 而企业招不到优秀人才的困扰。
</p>
<p>
目前,“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地, 并被评为中关村软件园重点扶持人才企业。
</p>
<p>
黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业,而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度,远比现在
90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”, 必须经历长达2个
月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说,黑马程序员训练营所
有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量,并降低企业的用人风险。
</p>
<p>
中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目实施管理能力,并密切关注技术革新, 不断引入先进的技术,研发更新技术
课程,确保学员进入企业后不仅能独立从事开发工作,更能给企业带来新的技术体系和理念。
一直以来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、 开放和协作,努力打造高质量
的IT人才服务平台。
</p>
<hr color="#f0ff18" />
<footer>
<font color="#696969" size="2">
<center>
江苏传智播客教育科技股份有限公司 版权所有<br>
Copyright © 2006-2018, All Rights Reserved 苏ICP备16007882
</center>
</font>
</footer>
</body>
</html>
3.9 表格标签真正表格html中的表格案例- table:定义一个表格
- width:宽度
- border:边框
- cellpadding:定义内容和单元格之间的距离,一般为0
- cellspacing:定义单元格之间的距离,如果指定为0,则单元格的线会合为一条。
- bgcolor:表格的背景色
- align:对齐方式
- 注意:以后会需要CSS控制,不常用
- caption:表格的标题
- tr:定义行
- bgcolor
- align
- td:定义单元格
- bgcolor
- align
- colspan:按行合并单元格
- rowspan:按列合并单元格
- th:定义表头单元格(和其他单元格样式不一样)
- <thead>:表示表格的头
- <tbody>:表示表格的体部分
- <tfoot>:表示表格的尾部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#7fffd4" align="center">
<tr>
<!--<td>
编号
</td>
<td>
姓名
</td>
<td>
成绩
</td>-->
<th>
编号
</th>
<th>
姓名
</th>
<th>
成绩
</th>
</tr>
<tr>
<td>
1
</td>
<td>
小龙女
</td>
<td>
100
</td>
</tr>
<tr>
<td>
2
</td>
<td>
杨过
</td>
<td>
50
</td>
</tr>
</table><hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#7fffd4" align="center">
<caption>学生信息表</caption>
<thead>
<tr>
<!--<td>
编号
</td>
<td>
姓名
</td>
<td>
成绩
</td>-->
<th>
编号
</th>
<th>
姓名
</th>
<th>
成绩
</th>
</tr>
</thead>
<tfoot>
<tr>
<td>
3
</td>
<td>
尹志平
</td>
<td>
50
</td>
</tr>
</tfoot>
<tbody>
<tr bgcolor="#deb887" align="center">
<td>
1
</td>
<td>
小龙女
</td>
<td>
100
</td>
</tr>
<tr>
<td>
2
</td>
<td>
杨过
</td>
<td>
50
</td>
</tr>
</tbody>
</table><hr>
<table border="1" cellpadding="0" cellspacing="0" align="center" width="50%">
<tr>
<th rowspan="2">
编号
</th>
<th>
姓名
</th>
<th>
成绩
</th>
</tr>
<tr>
<td>
小龙女
</td>
<td>
100
</td>
</tr>
<tr>
<td>
2
</td>
<td colspan="2">
杨过
</td>
</tr>
</table><hr>
</body>
</html>
三、综合案例:旅游网站首页- 1.确定使用XXX完成布局(以后:div和css),现在使用table完成布局
- 2.如果某一行只有一个单元格,则使用<tr><td></td></tr>
- 3.如果有一行有多个单元格,则使用<tr><td><table></table></td></tr>【单元格的嵌套,不需要再考虑单元格】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑马旅游网</title>
</head>
<body>
<!--采用table完成布局-->
<!--最外层的table-->
<table width="100%" border="0" align="center">
<!--第一行-->
<tr>
<td>
<img src="image/top_banner.jpg" width="100%" alt="顶">
</td>
</tr>
<!--第二行-->
<tr>
<td>
<table width="100%" border="0" align="center">
<tr>
<td>
<img src="image/logo.jpg" alt="">
</td>
<td>
<img src="image/search.png" alt="">
</td>
<td>
<img src="image/hotel_tel.png" alt="">
</td>
</tr>
</table></td>
</tr>
<!--第三行-->
<tr>
<td>
<table width="100%" align="center">
<tr bgcolor="#7fff00" align="center" height="45">
<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>
<!--第四行,图片-->
<tr>
<td>
<img src="image/banner_3.jpg" alt="" width="100%">
</td>
</tr>
<!--第五行-->
<tr>
<td>
<img src="image/icon_5.jpg" alt="">
黑马精选
<hr bgcolor="#7fff00" />
</td>
</tr>
<!--第六行-->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
</p>
<font color="red">¥ 899</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第七行-->
<tr>
<td>
<img src="image/icon_6.jpg" alt="">
国内游
<hr bgcolor="#7fff00" />
</td>
</tr>
<!--第八行-->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/guonei_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
</p>
<font color="red">¥ 699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>
上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
</p>
<font color="red">¥ 699</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第九行-->
<tr>
<td>
<img src="image/icon_7.jpg" alt="">
*游
<hr bgcolor="#7fff00" />
</td>
</tr>
<!--第十行-->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/jiangwai_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
</p>
<font color="red">¥ 699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>
上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
</p>
<font color="red">¥ 699</font>
</td>
</tr>
</table>
</td>
</tr>
<!--第十一行-->
<tr>
<td>
<img src="image/footer_service.png" alt="" width="100%">
</td>
</tr>
<!--第十二行-->
<tr>
<td align="center" bgcolor="yellow" height="40%">
<font color="grey" size="2">
<center>
江苏传智播客教育科技股份有限公司 版权所有<br>
Copyright © 2006-2018, All Rights Reserved 苏ICP备16007882
</center>
</font>
</td>
</tr>
</table>
</body>
</html>
来自为知笔记(Wiz)