ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaEE Day07 HTML

2021-02-16 22:05:38  阅读:258  来源: 互联网

标签:四晚 yen 学员 Day07 JavaEE 程序员 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:控制页面的元素,让页面有动态效果二、HTML(Hyper Text Markup Language)超文本标记语言1.概念:最基础的网页开发语言
  • Hyper Text超文本:用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。


  • Markup Language标记语言:由标签构成的语言。
    • <标签名称> 如html、xml、latex
    • 标记语言不是编程语言,不像编程语言一样有逻辑型
2.快速入门
  • 语法
    • 后缀名: .html/.htm
    • 标签分为
      • 围堵标签:有开始标签和结束标签,如<html>  </html>
      • 自闭和标签:开始标签和结束标签在一起,如<br/>
    • 标签可以嵌套:
      • 需要正确嵌套,不能你中有我,我中有你
      • 错误示范:<a><b></a></b>
      • 正确示范:<a><b></b></a>
    • 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单引号或双引号都可以)引起来
    • html的标签不区分大小写,但是建议使用小写
3.文件标签HTML5多用于移动端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案例--文本标签
<!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中为了提高可读性,提供了语义化标签,无样式
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 表格标签真正表格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">&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)

标签:四晚,yen,学员,Day07,JavaEE,程序员,HTML,标签,黑马
来源: https://www.cnblogs.com/liujinhui/p/05a2520980396c2e3c6249eaf5180fbf.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有