JavaEE Day07 HTML

今日内容
  • Web概念概述
  • HTML
一、Web概念概述1. JavaWeb:使用Java语言开发的基于互联网的项目2.软件架构
  • C/S架构:Client/Server--- 客户端/服务器端(安卓)
    • 在用户本地有一个客户端程序,与远程服务器端进行交互
    • 如:QQ、迅雷
    • 优点:
      • 用户体验好
    • 缺点:
      • 开发(客户端、服务器端)、安装、部署、维护麻烦
  • B/S架构:Browser/Server---浏览器/服务器端
    • 网站:http://www.itcast.com  传智播客
    • 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
    • 优点:   
      • 开发、安装、部署、维护简单
    • 缺点:
      • 如果应用过大(带宽占用多),用户的体验可能会受到影响
      • 对硬件要求过高
2.概念介绍_资源分类(B/S架构详解)资源分类
  • 静态资源:使用静态网页开发技术发布的资源
    • 所有用户访问,得到的结果是一样的
    • 如:文本、图片、音频、视频,HTML,CSS,JavaScript【静态网页开发技术】
    • 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。
    • 浏览器中内置了静态资源的解析引擎,可以用来展示静态资源
  • 动态资源:使用动态网页技术发布的资源
    • 所有用户访问,得到的结果可能不一样
    • 如jsp/Servlet,php,asp(.net)。。。
    • 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
3.要学习动态资源,必须先学习静态资源HTML:用于搭建基础网页,展示页面的内容CSS:用于美化页面,布局页面(字变大变色,图片放到什么位置)JavaScript:控制页面的元素,让页面有动态效果JavaEE Day07 HTML二、HTML(Hyper Text Markup Language)超文本标记语言1.概念:最基础的网页开发语言
  • Hyper Text超文本:用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。
    JavaEE Day07 HTML

  • Markup Language标记语言:由标签构成的语言。
    • <标签名称> 如html、xml、latex
    • 标记语言不是编程语言,不像编程语言一样有逻辑型
2.快速入门
  • 语法
    • 后缀名: .html/.htm
    • 标签分为
      • 围堵标签:有开始标签和结束标签,如<html>  </html>
      • 自闭和标签:开始标签和结束标签在一起,如<br/>
    • 标签可以嵌套:
      • 需要正确嵌套,不能你中有我,我中有你
      • 错误示范:<a><b></a></b>
      • 正确示范:<a><b></b></a>
    • 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单引号或双引号都可以)引起来
    • html的标签不区分大小写,但是建议使用小写
3.文件标签JavaEE Day07 HTMLHTML5多用于移动端web的开发,功能排序3.1需要学习 new module-->static web文件标签:构成html最基本的标签
    1. html:标识html文档的根标签,H5新增属性lang="en"要改为ch或不写
    2. head:头标签。用于指定html文档的一些属性。引入一些外部资源
      1. <meta charset="UTF-8">指定字符集,默认使用GBK进行解码
    3. title:标题标签
    4. body:体标签
    5. <!DOCTYPE>? 定义文档类型。 如 <!DOCTYPE html>表示该文档是一个html文档
3.2文本标签:和文本有关的标签
    1. 注释:<!--内容-->
    2. <h1> to <h6>,标题标签,h1-h6字体大小逐渐递减
    3. <p>段落标签
    4. <br>:换行标签,<br /> <br>均可
    5. <hr>:显示水平线,新闻标题与内容之间,可以通过属性(H5不再使用,但浏览器向下兼容)控制其样式<hr />自闭和标签
      1. color="red"颜色
      2. width="200"宽度
      3. size="10"高度
      4. align="left"对齐(center居中,left和right)
    6. <i>:斜体
    7. <b>:字体加粗
    8. h5淘汰<font>:字体标签
      1. color="red"---颜色
      2. size="5"---字号
      3. face="楷体"---字体
    9. <center>:文本居中
    10. 属性定义
      1. color颜色
        1. 英文单词:red blue yellow grey white
        2. RGB(值1,值2,值3):值的范围:0-255 如rgb(0,0,255)表示蓝颜色
        3. #值1值2值3:值的范围为:00-FF之间(16进制,16*16=255),如#FF00FF
      2. width:
        1. 数值:width="20" ,数值的单位默认是px(像素)
        2. 数值%:占比相对于父元素(屏幕的宽度)的比例
<!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案例--文本标签JavaEE Day07 HTMLJavaEE Day07 HTMLJavaEE Day07 HTML
<!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 &copy; 2006-2018, All Rights Reserved &nbsp;苏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的样式进行修改 
  1. 有序列表
    1. ol 有序列表
      1. type:类型
      2. start:开始序号
    2. li:表示列表的每一项
  2. 无序列表
    1. ul
    2. 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 链接标签
  1. a 定义超链接,不指定属性,啥也没有
  2. 属性   
    1. href:指定访问资源的url(统一资源定位符/资源的表示形式)
      1. 指向链接:http://www.
      2. 指向其他html文件:相对路径
      3. 指向邮箱:  mailto:邮箱地址
      4. 图片链接<a href="http://www.itcast.cn" target="_self"><img src="image/jingxuan_2.jpg"> </a>
    2. target:指定打开资源的方式:
      1. _self:在当前页面打开
      2. _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中为了提高可读性,提供了语义化标签,无样式JavaEE Day07 HTML
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 &copy; 2006-2018, All Rights Reserved &nbsp;苏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 &copy; 2006-2018, All Rights Reserved &nbsp;苏ICP备16007882
        </center>
    </font>
</footer>
</body>
</html>
3.9 表格标签真正表格JavaEE Day07 HTMLhtml中的表格JavaEE Day07 HTML案例JavaEE Day07 HTML
  • table:定义一个表格
    • width:宽度
    • border:边框
    • cellpadding:定义内容和单元格之间的距离,一般为0
    • cellspacing:定义单元格之间的距离,如果指定为0,则单元格的线会合为一条。
    • bgcolor:表格的背景色
    • align:对齐方式
    • 注意:以后会需要CSS控制,不常用
    • caption:表格的标题
  • tr:定义行
    • bgcolor
    • align
  • td:定义单元格
    • bgcolor
    • align
    • colspan:按行合并单元格
    • rowspan:按列合并单元格
JavaEE Day07 HTML
  • th:定义表头单元格(和其他单元格样式不一样)
  • <thead>:表示表格的头
  • <tbody>:表示表格的体部分
  • <tfoot>:表示表格的尾部分
JavaEE Day07 HTML
<!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>
三、综合案例:旅游网站首页JavaEE Day07 HTMLJavaEE Day07 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">&yen; 899</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
                            </p>
                            <font color="red">&yen; 899</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
                            </p>
                            <font color="red">&yen; 899</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
                            </p>
                            <font color="red">&yen; 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">&yen; 699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
                            </p>
                            <font color="red">&yen; 699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
                            </p>
                            <font color="red">&yen; 699</font>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
                            </p>
                            <font color="red">&yen; 699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
                            </p>
                            <font color="red">&yen; 699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_1.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
                            </p>
                            <font color="red">&yen; 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">&yen; 699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
                            </p>
                            <font color="red">&yen; 699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
                            </p>
                            <font color="red">&yen; 699</font>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
                            </p>
                            <font color="red">&yen; 699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
                            </p>
                            <font color="red">&yen; 699</font>
                        </td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>
                                上海飞三亚五天四晚*行(春节销售+亲子+蜜月+*行+豪华酒店)
                            </p>
                            <font color="red">&yen; 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 &copy; 2006-2018, All Rights Reserved &nbsp;苏ICP备16007882
                    </center>
                </font>
            </td>
        </tr>
    </table>

</body>
</html>


来自为知笔记(Wiz)

上一篇:基于javaEE技术的课程设计管理系统设计与实现


下一篇:JavaEE Day12 Xml