• html简单学习

    * JavaWeb：

       * 使用Java语言开发基于互联网的项目

    * 软件架构：

      1. C/S: Client/Server 客户端/服务器端

     * 在用户本地有一个客户端程序，在远程有一个服务器端程序
            * 如：QQ，迅雷...
            * 优点：
                1. 用户体验好
            * 缺点：
                1. 开发、安装，部署，维护 麻烦


        2. B/S: Browser/Server 浏览器/服务器端

     * 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
            * 优点：
                1. 开发、安装，部署，维护 简单
            * 缺点：
                1. 如果应用过大，用户的体验可能会受到影响
                2. 对硬件要求过高

    * B/S架构详解

    * 资源分类：
            1. 静态资源：
                * 使用静态网页开发技术发布的资源。
                * 特点：
                    * 所有用户访问，得到的结果是一样的。
                    * 如：文本，图片，音频、视频, HTML,CSS,JavaScript
                    * 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
            2. 动态资源：
                * 使用动态网页及时发布的资源。
                * 特点：
                    * 所有用户访问，得到的结果可能不一样。
                    * 如：jsp/servlet,php,asp...
                    * 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

    * 静态资源：
            * HTML：用于搭建基础网页，展示页面的内容
            * CSS：用于美化页面，布局页面
            * JavaScript：控制页面的元素，让页面有一些动态的效果

    动态资源
        使用动态网页技术发布的资源
         如：jsp/servlet, php, asp...
    * 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

    区别
     静态资源:是指系统进入时，一次加载完成。
    动态资源:每次使用的时候 ，都会进行加载（需要消耗更多资源）
    但是 动态资源更灵活，如资源中的颜色，在Style里，发生改变，再需要动态资源。

    HTML

    1. 概念：是最基础的网页开发语言
        * Hyper Text Markup Language 超文本标记语言
            * 超文本:
                * 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
            * 标记语言:
                * 由标签构成的语言。<标签名称> 如 html，xml
                * 标记语言不是编程语言

    2. 快速入门：
        * 语法：
            1. html文档后缀名 .html 或者 .htm
            2. 标签分为
                1. 围堵标签：有开始标签和结束标签。如

    3. 标签学习：
        1. 文件标签：构成html最基本的标签
            * html:html文档的根标签
            * head：头标签。用于指定html文档的一些属性。引入外部的资源
            * title：标题标签。
            * body：体标签
            * ：html5中定义该文档是html文档
        2. 文本标签：和文本有关的标签
            * 注释：
            *

    to

    ：标题标签
                * h1~h6:字体大小逐渐递减
            *

    ：段落标签
            *
    ：换行标签
            *

    ：展示一条水平线
                * 属性：
                    * color：颜色
                    * width：宽度
                    * size：高度
                    * align：对其方式
                        * center：居中
                        * left：左对齐
                        * right：右对齐
            * ：字体加粗
            * ：字体斜体
            * :字体标签
            *
    :文本居中
                * 属性：
                    * color：颜色
                    * size：大小
                    * face：字体

            * 属性定义：
                * color：
                    1. 英文单词：red,green,blue
                    2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
                    3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
                * width：
                    1. 数值：width='20' ,数值的单位，默认是 px(像素)
                    2. 数值%：占比相对于父元素的比例

     代码运行结果：
          代码：

    1. html>
    2. <html lang="ch">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>这是文本标签title>
    6. head>
    7. <body>
    9. 醉后不知天在水, <br>
    10. 满船清梦压星河。<br>
    11.  
    13. <h1>这是一场试炼h1>
    14. <h2>这是一场试炼h2>
    15. <h3>这是一场试炼h3>
    16. <h4>这是一场试炼h4>
    17. <h5>这是一场试炼h5>
    18. <h6>这是一场试炼h6>
    19.  
    21. <p>
    22. 《论语》（lún yǔ），是春秋时期思想家、教育家孔子的弟子及再传弟子记录孔子及其弟子言行而编成的语录文集，成书于战国前期。全书共20篇492章，以语录体为主，叙事体为辅，较为集中地体现了孔子及儒家学派的政治主张、伦理思想、道德观念、教育原则等。作品多为语录，但辞约义富，有些语句、篇章形象生动，其主要特点是语言简练，浅近易懂，而用意深远，有一种雍容和顺、纡徐含蓄的风格，能在简单的对话和行动中展示人物形象。
    23. p>
    25. <hr color="grenn" width="200" size="10" align="left"/>
    26. <p>
    27.     《论语》是孔门弟子集体智慧的结晶。早在春秋后期孔子设坛讲学时期，《论语》主体内容就已初始创成；孔子去世以后，他的弟子和再传弟子代代传授他的言论，并逐渐将这些口头记诵的语录言行记录下来，因此称为“论”；《论语》主要记载孔子及其弟子的言行，因此称为“语”。清朝赵翼解释说：“语者，圣人之语言，论者，诸儒之讨论也。”其实，“论”又有纂的意思，所谓《论语》，是指将孔子及其弟子的言行记载下来编纂成书。其编纂者主要是仲弓、子游、子夏、子贡，他们忧虑师道失传，首先商量起草以纪念老师。然后和少数留在鲁国的弟子及再传弟子完成。
    28. p>
    29.  
    31. <b>君埋泉下泥销骨，我寄人间雪满头b><br>
    32.  
    34. <i>山河日月皆入梦,故人踏星似归来i><br>
    35.  
    37. <font color="blue" size="6" face="楷体"><center>春夜喜雨center>font>
    38. <font color="aqua" size="5" face="楷体">好雨知时节font><br>
    39. <font color="rgb(123,222,235)" size="5" face="楷体">当春乃发生font><br>
    40. <font color="#2343F1" size="5" face="楷体">随风潜入夜font><br>
    41. <font color="#2e8b57" size="5" face="楷体">润物细无声font><br>
    42.  
    43. body>
    44. html>
    45.

    3. 图片标签：
            * img：展示图片
                * 属性：
                    * src：指定图片的位置

            * 代码：
                

                古镇
            
                

  • <ol type="1">
  • <font face="楷体" size="6">早上起床font><br>
  • <li>睁开眼睛li>
  • <li>离开被窝li>
  • <li>穿衣洗漱li>
  • <li>搽护肤品li>
  • <li>带上手机出发li>
  • <li>打卡li>
  • <li>学习li>
  • ol>
  • <ul type="disc">
  • <font face="楷体" size="6">我的饮品font><br>
  • <li>咖啡li>
  • <li>牛奶li>
  • <li>茶li>
  • <li>奶茶li>
  • <li>橙汁li>
  • <li>酸奶li>
  • ul>
  • <ul type="square">
  • <font face="楷体" size="6">我的饮品font><br>
  • <li>咖啡li>
  • <li>牛奶li>
  • <li>茶li>
  • <li>奶茶li>
  • <li>橙汁li>
  • <li>酸奶li>
  • ul>
  • <ul type="circle">
  • <font face="楷体" size="6">我的饮品font><br>
  • <li>咖啡li>
  • <li>牛奶li>
  • <li>茶li>
  • <li>奶茶li>
  • <li>橙汁li>
  • <li>酸奶li>
  • ul>
  • body>
  • html>


    •     5. 链接标签：
            * a:定义一个超链接
                * 属性：
                    * href：指定访问资源的URL(统一资源定位符)
                    * target：指定打开资源的方式
                        * _self:默认值，在当前页面打开
                        * _blank：在空白页面打开

     

     代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>这是链接标签title>
    6. head>
    7. <body>
    10. <a href="http://www.baidu.com">点击一下，你就知道a><br>
    11.  
    13. <a href="http://www.baidu.com" target="_self">点击一下，你就知道a><br>
    14. <a href="http://www.baidu.com" target="_blank">点击一下，你就知道a><br>
    15.  
    17. <a href="4_列表标签.html" target="_blank">列表标签a><br>
    18.  
    20. <a href="wangxiaoxiaosad@163.com" target="_blank">联系我~a><br>
    21.  
    23. <a href="http://www.baidu.com" target="_blank"><img src="../img/百度一下.jpg">a><br>
    24. body>
    25. html>

         6. div和span：（以后会和CSS结合使用）
            * div:每一个div占满一整行。块级标签
            * span：文本信息在一行展示，行内标签 内联标签

        7. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。
            1.

    ：页眉
            2.
    ：页脚

    8. 表格标签：
            * table：定义表格
                * width：宽度
                * border：边框
                * cellpadding：定义内容和单元格的距离
                * cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
                * bgcolor：背景色
                * align：对齐方式
            * tr：定义行
                * bgcolor：背景色
                * align：对齐方式
            * td：定义单元格
                * colspan：合并列
                * rowspan：合并行
            * th：定义表头单元格
            * ：表格标题
            * ：表示表格的头部分
            * ：表示表格的体部分
            * ：表示表格的脚部分

    运行结果：

     代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>这是表格标签title>
    6. head>
    7. <body>
    8. <table width="50%" border="1" cellpadding="0" cellspacing="0">
    9.     <tr>
    10.         <th>编号th>
    11.         <th>姓名th>
    12.         <th>成绩th>
    13.     tr>
    14.     <tr>
    15.         <td>1td>
    16.         <td>海山了td>
    17.         <td>96td>
    18.     tr>
    19.     <tr>
    20.         <td>2td>
    21.         <td>高皓光td>
    22.         <td>98td>
    23.     tr>
    24.     <tr>
    25.         <td>3td>
    26.         <td>虎大绳td>
    27.         <td>61td>
    28.     tr>
    29. table>
    30.  
    31.  
    32. body>
    33. html>

    综合练习：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>这是综合案例：黑马旅游网01title>
    6. head>
    7. <body>
    8. <table width="100%" align="center">
    9.     
    10.     <tr>
    11.         <td width="100%" align="center"><img src="../img/旅游网1/top_banner.jpg" alt="同程亲子周边旅游节">td>
    12.     tr>
    13.  
    14.     
    15.     <tr>
    16.         <td>
    17.             <table width="100%" align="center">
    18.                 <tr>
    19.                     <td><img src="../img/旅游网1/logo.jpg" alt="logo">td>
    20.                     <td><img src="../img/旅游网1/search.png" alt="搜索框">td>
    21.                     <td><img src="../img/旅游网1/hotel_tel.png" alt="客服热线">td>
    22.                 tr>
    23.             table>
    24.         td>
    25.     tr>
    26.  
    27.     
    28.     <tr>
    29.         <td>
    30.             <table width="100%" align="center" bgcolor="#ffd700">
    31.                 <tr>
    32.                     <td><a href="">首页a>td>
    33.                     <td>门票td>
    34.                     <td>酒店td>
    35.                     <td>香港车票td>
    36.                     <td>出境游td>
    37.                     <td>国内游td>
    38.                     <td>港澳游td>
    39.                     <td>抱团定制td>
    40.                     <td>全球自由行td>
    41.                     <td>收藏排行榜td>
    42.                 tr>
    43.             table>
    44.         td>
    45.     tr>
    46.  
    47.     
    48.     <tr>
    49.         <td width="100%" align="center"><img src="../img/旅游网1/banner_3.jpg" alt="玉龙雪山">td>
    50.     tr>
    51.  
    52.     
    53.     <tr>
    54.         <td width="100%" align="left"><img src="../img/旅游网1/icon_5.jpg" alt="小星星">黑马精选
    55.             <hr color="#ffd700">
    56.         td>
    57.     tr>
    58.  
    59.     
    60.     <tr>
    61.         <td>
    62.             <table width="95%" align="center">
    63.                 <tr>
    64.                     <td><img src="../img/旅游网1/jiangxuan_1.jpg">
    65.                         <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）p>
    66.                         <p><font color="red">¥899font>p>
    67.                     td>
    68.  
    69.                     <td><img src="../img/旅游网1/jiangxuan_1.jpg">
    70.                         <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）p>
    71.                         <p><font color="red">¥899font>p>
    72.                     td>
    73.  
    74.                     <td><img src="../img/旅游网1/jiangxuan_1.jpg">
    75.                         <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）p>
    76.                         <p><font color="red">¥899font>p>
    77.                     td>
    78.  
    79.                     <td><img src="../img/旅游网1/jiangxuan_1.jpg">
    80.                         <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）p>
    81.                         <p><font color="red">¥899font>p>
    82.                     td>
    83.                 tr>
    84.             table>
    85.         td>
    86.     tr>
    87.  
    88.     
    89.     <tr>
    90.         <td width="100%" align="left"><img src="../img/旅游网1/icon_6.jpg" alt="摩天轮">国内游
    91.             <hr color="#ffd700">
    92.         td>
    93.     tr>
    94.  
    95.     
    96.     <tr>
    97.         <td>
    98.             <table width="95%" align="center">
    99.                 <tr>
    100.                     <td rowspan="2"><img src="../img/旅游网1/guonei_1.jpg">
    101.                     td>
    102.  
    103.                     <td><img src="../img/旅游网1/jiangxuan_2.jpg">
    104.                         <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）p>
    105.                         <p><font color="red">¥699font>p>
    106.                     td>
    107.  
    108.                     <td><img src="../img/旅游网1/jiangxuan_2.jpg">
    109.                         <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）p>
    110.                         <p><font color="red">¥699font>p>
    111.                     td>
    112.  
    113.                     <td><img src="../img/旅游网1/jiangxuan_2.jpg">
    114.                         <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）p>
    115.                         <p><font color="red">¥699font>p>
    116.                     td>
    117.                 tr>
    118.                 <tr>
    119.                     <td><img src="../img/旅游网1/jiangxuan_2.jpg">
    120.                         <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）p>
    121.                         <p><font color="red">¥699font>p>
    122.                     td>
    123.  
    124.                     <td><img src="../img/旅游网1/jiangxuan_2.jpg">
    125.                         <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）p>
    126.                         <p><font color="red">¥699font>p>
    127.                     td>
    128.  
    129.                     <td><img src="../img/旅游网1/jiangxuan_2.jpg">
    130.                         <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）p>
    131.                         <p><font color="red">¥699font>p>
    132.                     td>
    133.                 tr>
    134.             table>
    135.         td>
    136.     tr>
    137.  
    138.     
    139.     <tr>
    140.         <td width="100%" align="left"><img src="../img/旅游网1/icon_7.jpg" alt="定位">境外游
    141.             <hr color="#ffd700">
    142.         td>
    143.     tr>
    144.  
    145.     
    146.     <tr>
    147.         <td>
    148.             <table width="95%" align="center">
    149.                 <tr>
    150.                     <td rowspan="2"><img src="../img/旅游网1/jiangwai_1.jpg">
    151.                     td>
    152.  
    153.                     <td><img src="../img/旅游网1/jiangxuan_3.jpg">
    154.                         <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）p>
    155.                         <p><font color="red">¥699font>p>
    156.                     td>
    157.  
    158.                     <td><img src="../img/旅游网1/jiangxuan_3.jpg">
    159.                         <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）p>
    160.                         <p><font color="red">¥699font>p>
    161.                     td>
    162.  
    163.                     <td><img src="../img/旅游网1/jiangxuan_3.jpg">
    164.                         <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）p>
    165.                         <p><font color="red">¥699font>p>
    166.                     td>
    167.                 tr>
    168.                 <tr>
    169.                     <td><img src="../img/旅游网1/jiangxuan_3.jpg">
    170.                         <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）p>
    171.                         <p><font color="red">¥699font>p>
    172.                     td>
    173.  
    174.                     <td><img src="../img/旅游网1/jiangxuan_3.jpg">
    175.                         <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）p>
    176.                         <p><font color="red">¥699font>p>
    177.                     td>
    178.  
    179.                     <td><img src="../img/旅游网1/jiangxuan_3.jpg">
    180.                         <p>上海直飞三亚5天4晚自由行（春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机）p>
    181.                         <p><font color="red">¥699font>p>
    182.                     td>
    183.                 tr>
    184.             table>
    185.         td>
    186.     tr>
    187.  
    188.  
    189.     
    190.     <tr>
    191.         <td><img src="../img/旅游网1/footer_service.png" width="100%" align="center">td>
    192.     tr>
    193.  
    194.     
    195.     <tr>
    196.         <td bgcolor="#ffd700" width="100%" align="center" height="50">
    197.             <font color="gray">江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备 16007882
    198.             font>
    199.         td>
    200.     tr>
    201.  
    202. table>
    203.  
    204. body>
    205. html>

  • 相关阅读:
    【C++刷题】优选算法——模拟
    铝塑膜瑕疵检测系统
    支持向量机
    Spring Authorization Server 0.2.3发布，放出联合身份DEMO
    STM32:GPIO控制LED流水灯(主函数代码部分+代码解释)
    攻防演练蓝队|Windows应急响应入侵排查
    Redis 会被Dragonfly替代？
    DHCP基础
    MVCC，主要是为了做什么?
    数据库常用的数据类型和约束条件
  • 原文地址：https://blog.csdn.net/clover_oreo/article/details/127653007