• 2022/09/10、11 day01/02:HTML和CSS


    今日内容

    1. web概念概述
    2. 主要学习HTML

    web概念概述

    • JavaWeb:使用java语言开发基于互联网的项目。

    软件架构

    我们要学习的是B/S架构!

    • 软件架构:
      1. C/S架构:Client/Server 客户端/服务器端
        1. 在用户本地有一个客户端程序,在远程有一个服务器端程序
        2. 如:QQ、迅雷等等。
        3. 优点:用户体验好
        4. 缺点:开发、安装、部署、维护麻烦(开发两端)
      2. B/S架构:Browser/Server 浏览器/服务器端
        1. 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序。
        2. 优点:开发、安装、部署、维护简单
        3. 缺点:
          1. 如果应用过大,用户的体验可能会受到影响(有些网页游戏)卡顿或带宽占用多
          2. 对硬件要求过高
          3. 总结:都是硬件水平没有跟上,导致的(未来硬件水平应该更好)

    概念介绍-资源分类

    我们要学习的是资源分类,先学习的是静态资源的HTML!

    B/S架构详解(B/S架构如何进行访问?)

    • 资源分类:

      1. 静态资源:使用静态网页开发技术来开发发布的资源。
        • 特点1:所有用户访问,得到的效果结果是一样的。
        • 如:文本、图片、音频、视频,HTML、CSS,JavaScript(静态网页开发技术
        • 特点2:如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以来展示静态资源。
      2. 动态资源:使用动态网页技术开发发布的资源。
        • 特点1:所有用户访问,得到的结果可能不一样。
        • 如:jsp/servlet,php,asp…静态网页技术
        • 特点2:如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,在再发送给浏览器。
    • 我们要学习动态资源,必须要先学习静态资源!

    • 静态资源有哪些?(静态网页技术三剑客

      • HTML:今天学习,用于搭建基础网页,展示页面的内容。
      • CSS:下次学习,用于美化页面,布局页面
      • JavaScript:下下次学习,控制页面的元素,让页面有一些动态的效果

    HTML概念介绍

    1. 概念:Hyper Text Markup Language 超文本标记语言,是最基础的网页开发语言
      • 超文本:超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。(超级文本)
      • 标记语言:由标签构成的语言<标签名称>,如 html,xml
        • 标记语言不是编程语言,没有任何逻辑性,写上就会执行。

    HTML的快速入门

    • 语法:
      1. html文档后缀名 .html 或 .htm
      2. 标签分类:
        1. 围堵标签:有开始标签和结束标签,如(中间可以嵌套其他的标签)根标签,开始与结束标签
        2. 自闭合标签:开始标签和结束标签在一起。如
          换行标签
      3. 标签可以嵌套:
        • 需要正确嵌套,不能“你中有我,我中有你”
        • 正确: 这是文字
      4. 在开始标签中可以定义属性。属性是由键值对构成,值是需要用引号引起来(单双都可以)
      5. html的标签不区分大小写,但建议使用小写。

    效果展示:

    <html> 
    
    	<head>
    		<title> titletitle>
    	head>
    	
    	<body>
    		<font color='red'> Hello Worldfont><br/>
    		
    		<font color='green'> Hello Worldfont>
    	body>
    
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    HTML标签-文件标签

    这里需要借助一个文档《W3cschool菜鸟教程》

    • 标签学习(H5有上百个标签)
      1. 文件标签:构成html最基本的标签。

        1. html:html文档的根标签。
        2. head:头标签。用于指定html文档的一些属性。引入外部的资源。
        3. title:标题标签。定义网页的标题的标签。
        4. body:体标签。定义文档的主体。
        5. :html5中定义该文档是html文档
      2. 文本标签:和文本有关的标签

        1. 注释: 指不会被显示的内容。
        2. to

          :标题标签。自带换行。字体大小逐渐递减。
        3. :段落标签。自带换行。



        4. :换行标签。自闭和标签。


        5. :水平线标签。显示一条水平线。自闭和标签。 * 属性 1. color:颜色 2. width:宽度 3. size:高度 4. align:对其方式 1. center:居中 2. left:左对齐 3. right:右对齐
        6. :字体加粗
        7. :字体斜体
        8. :已经过时。字体标签。
          • 属性:
            1. color:颜色
            2. size:大小
            3. face:字体(电脑得支持才行)
        9. :这也是一个过时的标签。文本居中标签。自带换行。
        10. 属性定义:
          * color:颜色。
          1. 英文单词:red,green,blue
          2. rgb(值1,值2,值3):值的范围:0-255 如:rgb(0,0,255)表示红色和绿色都没有,蓝色占满。通过三原色可以调整出很多颜色。【但是现在很多浏览器已经不支持了,推荐使用第三种】
          3. #值1值2值3:与 rgb(值1,值2,值3)是等效的。值的范围:00-FF(十六进制)。
         * width:宽度。
             1. 数值:width='20',数值的单位,默认时px(像素)。表示20个像素。
             2. 数值%:占比相对于父元素的比例。
        
        • 1
        • 2
        • 3
      3. 图片标签:

        1. img:展示图片
          • src:指定图片的位置。
          • align:根据周围文本来排列图像
          • alt:规定图像的替代文本
          • width:规定图片的宽度
          • height:规定图片的长度
      4. 列表标签:

        1. 有序列表
          1. ol:有序列表标签
          2. li:排序序号
        2. 无序列表
          1. ul:无序列表标签
          2. li:无序序号
      5. 链接标签:

        1. a:定义一个超链接、
          • 属性:
            • href:指定访问资源的URL(统一资源定位符)
              • 不仅可以指定网络上的资源。
              • 还能指定项目上的资源
            • target:指定打开资源的方式
              • _ self:默认值,在当前页面打开
              • _ blank:在空白页面打开
      6. div和span:块级标签和行内标签(结合CSS一起使用)

        • span:文本信息在一行展示,行内标签,内联标签
        • div:每一个div占满一整行。会自动换行。称为块级标签
      7. 语义化标签:html5中为了提高程序的可读性,提供了一些标签(结合CSS一起使用)

        1. :页眉
        2. :页脚
      8. 表格标签:

        1. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PObtkvH8-1662904835297)(en-resource://database/5745:1)]
        2. table:定义表格
          1. width:表示宽度
          2. border:边框
          3. cellpadding:定义内容和单元格的距离,一般为0.
          4. cellspacing:定义单元格之间的距离,如果指定为0,则单元格的线合为一条。
          5. bgcolor:背景颜色。
          6. align:表格对屏幕的对其方式。
            • center 居中显示
        3. tr:定义行
          • bgcolor:背景颜色。
          • align:表格对屏幕的对其方式。
        4. td:定义单元格
          • colspan:合并列
          • rowspan:合并行
        5. th:定义表头单元格
        6. :表格标题
        7. :表示表格的头部分,增加可读性,CSS一起使用
        8. :表示表格的体部分,增加可读性,CSS一起使用
        9. :表示表格的脚部分,增加可读性,CSS一起使用

    代码1:文件标签。IDEA中创建模块。新建module–> Web --> 新建HTML file

    DOCTYPE html>
    <html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    head>
    <body>
    <font color='red'> Hello Worldfont><br/>
    <font color='green'> Hello Worldfont>
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    代码2:文本标签

    DOCTYPE html>
    <html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>文本标签title>
    head>
    <body>
    <font color='red'> 白日依山尽font><br/>
    <font color='green'> 黄河入海流font>
    
    <h1>黑马旅游网h1>
    <h2>标题2h2>
    <h3>标题3h3>
    <h4>标题4h4>
    <h6>标题6h6>
    
    <p>盼望着,盼望着,东风来了,春天的脚步近了。 p>
    <p>一切都像刚睡醒的样子,欣欣然张开了眼。山朗润起来了,水涨起来了,太阳的脸红起来了。p>
    <p>小草偷偷地从土里钻出来,嫩嫩的,绿绿的。园子里,田野里,瞧去,一大片一大片满是的。坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几回迷藏。风轻悄悄的,草软绵绵的。p>
    
    <hr color="red" width="200" size="10" align="left"/>
    <hr color="red" width="20" size="10" align="left"/>
    <hr color="red" width="50%" size="10" align="left"/>
    <hr>
    
    没加粗<br>
    <b>加粗bb>
    
    <br><br>
    不是斜体<br>
    <i>斜体ii>
    
    <br><br>
    <font color="aqua" size="5" face="宋体">
    你看看我是什么字体呢!--宋体
    font><br>
    <font color="#FF00FF">
        我的颜色很奇特哦!
    font><br>
    
    <center>
        我能让文本居中哦!
    center><br>
    <center>
        <font color="aqua" size="5" face="宋体">
            包裹居中
        font><br>
    center>
    
    
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

    代码3:文本标签案例:案例1_公司简介
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8rFHU0ay-1662904835298)(en-resource://database/5731:1)]
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4MpZETpw-1662904835298)(en-resource://database/5733:1)]

    DOCTYPE html>
    <html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>黑马程序员简介title>
    head>
    <body>
    <h1>公司简介h1>
    <hr color="#ffd700">
    <p><font color="#FF0000">"中关村黑马程序员训练营"font>是由<i><b>传智播客b>i>联合中关村软件园、CSDN, 并委托传智播客进行教学实施的软件开发高端培训机构,致力于服务各大软件企业,解决当前软件开发技术飞速发展, 而企业招不到优秀人才的困扰。<br>
    目前,“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地, 并被评为中关村软件园重点扶持人才企业。p>
    <p>黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业,而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度,远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”, 必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说,黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量,并降低企业的用人风险。p>
    <p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目实施管理能力,并密切关注技术革新, 不断引入先进的技术,研发更新技术课程,确保学员进入企业后不仅能独立从事开发工作,更能给企业带来新的技术体系和理念。p>
    <p>一直以来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、 开放和协作,努力打造高质量的IT人才服务平台。p>
    <hr color="#ffd700">
    
    <center><font color="#a9a9a9" size="2">江苏传智播客教育科技股份有限公司font>center>
    <center><font color="#a9a9a9" size="2.5">版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882font>center>
    
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    代码4:图片标签

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片标签title>
    head>
    <body>
    
    
    <img src="image/jingxuan_2.jpg" align="left" alt="古镇" width="500" height="500"/>
    
    
    <img src="./image/jiangwai_1.jpg" height="500"/>
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    代码5:列表标签

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表标签title>
    head>
    <body>
    
    
    早上起床干的事情:有序版
    <ol type="1" start="5">
      <li>1. 睁眼瞎li>
      <li>2. 看手机li>
      <li>3. 穿衣服li>
      <li>4. 洗漱li>
      <li>5. 这是一个有顺序的列表li>
    ol>
    
    
    
    早上起床干的事情:无序版
    <ul type="disc">
      <li>1. 睁眼瞎li>
      <li>2. 看手机li>
      <li>3. 穿衣服li>
      <li>4. 洗漱li>
      <li>5. 这是一个有顺序的列表li>
    ul>
    
    
    早上起床干的事情:无序版
    <ul type="square">
      <li>1. 睁眼瞎li>
      <li>2. 看手机li>
      <li>3. 穿衣服li>
      <li>4. 洗漱li>
      <li>5. 这是一个有顺序的列表li>
    ul>
    
    
    早上起床干的事情:无序版
    <ul type="circle">
      <li>1. 睁眼瞎li>
      <li>2. 看手机li>
      <li>3. 穿衣服li>
      <li>4. 洗漱li>
      <li>5. 这是一个有顺序的列表li>
    ul>
    
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51

    代码6:链接标签

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>连接标签title>
    head>
    <body>
    
    <a href="http://www.baidu.com">点我a><br>
    <a href="1_HelloWorld.html" target="_self">点我a><br>
    <a href="1_HelloWorld.html" target="_blank">点我哦a><br>
    <a href="mailto:2079930908@qq.com">联系我们a><br>
    <a href="http://www.baidu.com" target="_blank"> <img src="image/jiangxuan_3.jpg">a>
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    代码7:div和span

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>块标签title>
    head>
    <body>
    
    
    
    <span>黑马程序员span>
    <span>传智播客span>
    <hr>
    <div>黑马程序员div>
    <div>传智播客div>
    
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    代码8:语义化标签

    DOCTYPE html>
    <html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>黑马程序员简介title>
    head>
    <body>
    
    <header>
    <div id="header">
    <h1>公司简介h1>div>header>
    
    <hr color="#ffd700">
    <p><font color="#FF0000">"中关村黑马程序员训练营"font>是由<i><b>传智播客b>i>联合中关村软件园、CSDN, 并委托传智播客进行教学实施的软件开发高端培训机构,致力于服务各大软件企业,解决当前软件开发技术飞速发展, 而企业招不到优秀人才的困扰。<br>
    目前,“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地, 并被评为中关村软件园重点扶持人才企业。p>
    <p>黑马程序员的学员多为大学毕业后,有理想、有梦想,想从事IT行业,而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度,远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”, 必须经历长达2个月的面试流程,这些流程中不仅包括严格的技术测试、自学能力测试,还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说,黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量,并降低企业的用人风险。p>
    <p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识,更注重培养项目实施管理能力,并密切关注技术革新, 不断引入先进的技术,研发更新技术课程,确保学员进入企业后不仅能独立从事开发工作,更能给企业带来新的技术体系和理念。p>
    <p>一直以来,黑马程序员以技术视角关注IT产业发展,以深度分享推进产业技术成长,致力于弘扬技术创新,倡导分享、 开放和协作,努力打造高质量的IT人才服务平台。p>
    <hr color="#ffd700">
    
    <footer>
    <div id="footer">
    <center><font color="#a9a9a9" size="2">江苏传智播客教育科技股份有限公司font>center>
    <center><font color="#a9a9a9" size="2.5">版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882font>center>
    div>footer>
    
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    代码9:表格标签

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格标签title>
    head>
    <body>
    
    <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#adff2f" align="center">
    
    
      <tr>
        <th>编号th>
        <th>姓名th>
        <th>成绩th>
      tr>
    
      <tr>
        <td>1td>
        <td>小龙女td>
        <td>100td>
      tr>
    
      <tr>
        <td>2td>
        <td>杨过td>
        <td>50td>
      tr>
    
    table>
    
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    代码10:表格标签2

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格标签title>
    head>
    <body>
    
    <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#adff2f" align="center">
    
    
      <tr>
        <th>编号th>
        <th>姓名th>
        <th>成绩th>
      tr>
    
      <tr>
        <td>1td>
        <td>小龙女td>
        <td>100td>
      tr>
    
      <tr>
        <td>2td>
        <td>杨过td>
        <td>50td>
      tr>
    table>
    
    <hr>
    
    <thead>
    <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#adff2f" align="center">
      
    <caption>学生信息表caption>
    
      <tr>
        <th>编号th>
        <th>姓名th>
        <th>成绩th>
      tr>thead>
    
      <tbody>
      <tr bgcolor="#7fffd4" align="center">
        <td>1td>
        <td>小龙女td>
        <td>100td>
      tr>tbody>
    
      <tfoot>
      <tr>
        <td>2td>
        <td>杨过td>
        <td>50td>
      tr>tfoot>
    
    table>
    
    
    <hr>
    
    
    <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#adff2f" >
      
      <caption>学生信息表caption>
    
      <tr>
        <th rowspan="2">编号th>
        <th>姓名th>
        <th>成绩th>
      tr>
    
      <tr>
      
        <td>小龙女td>
        <td>100td>
      tr>
    
    
      <tr>
        <td>2td>
        <td colspan="2">杨过td>
      
      tr>
    
    table>
    
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102

    代码11:综合案例 旅游网站首页
    作业:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xccEC2pL-1662904835299)(en-resource://database/5747:1)]
    分析:

    1. 确定使用table来完成布局
    2. 如果某一行只有一个单元格,则使用
    3. 如果某一行有多个单元格,则使用
    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>黑马旅游网title>
    head>
    <body>
    
    
    
    <table width="100%" align="center">
        
        <tr>
            <td>
                <img src="image/top_banner.jpg" width="100%">
            td>
        tr>
        
        <tr>
            <td>
                <table width="100%" align="center">
                    <tr align="center">
                        <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="#ffd700" 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 color="#ffd700">
            td>
        tr>
        
        <tr>
            <td>
                <table align="center" width="95%">
                    <tr>
                        <td>
                            <img src="image/jiangxuan_1.jpg" alt="" height="100%">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 899font>
                        td>
                        <td>
                            <img src="image/jiangxuan_1.jpg" alt="" height="100%">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 899font>
                        td>
                        <td>
                            <img src="image/jiangxuan_1.jpg" alt="" height="100%">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 899font>
                        td>
                        <td>
                            <img src="image/jiangxuan_1.jpg" alt="" height="100%">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 899font>
                        td>
                    tr>
                table>
            td>
        tr>
        
        <tr>
            <td>
                <img src="image/icon_6.jpg" alt="">
                国内游
                <hr color="#ffd700">
            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_2.jpg" alt="" height="100%">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 699font>
                        td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 699font>
                        td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 699font>
                        td>
                    tr>
    
                    <tr>
    
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="" height="100%">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 699font>
                        td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 699font>
                        td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 699font>
                        td>
                    tr>
                table>
            td>
        tr>
        
        <tr>
            <td>
                <img src="image/icon_7.jpg" alt="">
                境外游
                <hr color="#ffd700">
            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="" height="100%">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 699font>
                        td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 699font>
                        td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 699font>
                        td>
                    tr>
    
                    <tr>
    
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="" height="100%">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 699font>
                        td>
                        <td>
                            <img src="image/jiangxuan_3.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 699font>
                        td>
                        <td>
                            <img src="image/jiangxuan_2.jpg" alt="">
                            <p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)p>
                            <font color="red">¥ 699font>
                        td>
                    tr>
                table>
            td>
        tr>
        
        <tr>
            <td>
                <img src="image/footer_service.png" alt="" width="100%">
            td>
        tr>
        
        <tr>
            <td>
                <center><font color="#a9a9a9" size="2">江苏传智播客教育科技股份有限公司font>center>
                <center><font color="#a9a9a9" size="2.5">版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882font>center>
            td>
        tr>
    
    table>
    
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219

    在这里插入图片描述

                                                                                     ——此文档为学习笔记!
    
    • 1
  • 相关阅读:
    Linux常用命令(Hadoop)
    vscode + mingw + cmake C++配置管理项目
    SpringCloud-01
    家庭教育专家:如何创建家庭自主学习环境?
    星际争霸之小霸王之小蜜蜂(十三)--接着奏乐接着舞
    kube-controller-manager和kube-scheduler不能正常启动
    苹果电脑Git客户端 SourceTree for Mac中文
    Ansys Zemax / Ansys Speos | 如何使用Ansys光学解决方案设计和分析 HUD系统
    【大数据存储技术】思考题及参考答案
    技术面试面面观
  • 原文地址:https://blog.csdn.net/w2079930908/article/details/126810287