web概念概述

  • JavaWeb：
    • 使用Java语言开发基于互联网的项目
  • 软件架构：
    1. C/S：Client/Server 客户端/服务器端
      • 在用户本地有个客户端程序，在远程有一个服务器端程序
      • 如：QQ,LoL…
      • 优点：
        1. 用户体验好
      • 缺点：
        1. 开发，安装，部署，维护 麻烦
    2. B/S：Browser/Server 浏览器/服务器端
      • 只需要一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序
      • 优点：
        1. 开发，安装，部署，维护 简单
      • 缺点：
        1. 如果应用过大，用户的体验可能会受到影响
        2. 对硬件要求过高
      • B/S架构详解：
        • 资源分类：
          1. 静态资源：
            • 使用静态网页开发技术发布的资源。
            • 特点：
              • 所有用户方钢管文，得到的结果是一样的。
              • 如：文本，图片，音频，视频，HTML，CSS，JavaScript
              • 如果用户请求的是静态资源，那么服务器会直接讲静态资源发送个浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
          2. 动态资源：
            • 使用动态网页技术发布的资源。
            • 特点：
              • 所用用户访问，得到的结果可能不一样。
              • 如：jsp/server,php,asp…
              • 如果用户请求的是动态资源，那么服务器会执行动态，转换为静态资源，再发送给浏览器
          3. 静态资源三剑客：
            1. HTML：用于搭建基础网站，展示页面的内容
            2. CSS：用于美化页面，布局页面
            3. JavaScript：控制页面的元素，让页面有一些动态的效果

HTML

  1. 概念：
    • Hype Text Markup Language 超文本标记语言
      • 超文本：
      • 标记语言：
        • 由标签构成的语言。<标签名称> 如 html,xml
        • 标记语言不是编程语言

  2. 快速入门

    • 语法：
      1. html文档后缀名 .html 或者 .htm
      2. 标签分为
        1. 围堵标签：有开始标签和结束标签。如<html></html>
        2. 自闭和标签：开始标签和结束标签在一起。如<br/>
      3. 标签可以嵌套
        • 需要正确的嵌套，不能你中有我，我中有你
          错误：<a><b></a></b>
          正确：<a><b></b></a>
      4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可以）引起来
      5. html的标签不区分大小写，但是建议小写

    • 代码：```html

      Hello World
      Hello World ```

  3. 标签学习：w3cschool

    1. 文件标签：构成html最基本的标签
      • html：html文档的根标签
      • head：头标签。用于指定html文档的一些属性。还可以引入外部的资源
      • title：标题标签。
      • body：体标签
      • <!DOCTYPE html>：html5中定义该文档是html文档
      • meta：定义字符集

    2. 文本标签：和文本有关的标签

      • 注释：<!--注释内容-->
      • <h1> to <h6>：标题标签
        • h1~h6：字体大小逐渐递减
      • <br>：换行标签
      • <p>：段落标签
      • <hr>：显示一条水平线
        • 属性：
          • color：颜色
          • width：宽度
          • size：高度
          • align：对其方式
            • center：居中
            • left：左对齐
            • right：右对齐
      • <b>：字体加粗
      • <i>：字体斜体
      • <font>：字体标签
        • 属性：
          • color：颜色
          • size：大小
          • face：字体
      • <center>：居中
      • 属性定义：
        • 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. 数值%：表示相对于父元素的比例
        • 特殊字符：空格 &nbsp
      • ```html <!DOCTYPE html> 白日依山尽，
        黄河入海流。

      杰哥无敌

      杰哥无敌

      杰哥无敌

      杰哥无敌

      杰哥无敌

      杰哥无敌

      1杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌

      2杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥

      3杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌杰哥无敌

      白日依山尽

      黄河入海流

      白日依山尽 白日依山尽 

  2.       - 
  3.    3. 图片标签：
  4.       - img：展示图片
  5.          - 属性：
  6.             - src：路径
  7.                - 相对路径：默认是./位置（当前目录），../表示上一级目录
  8.       - ```html
  9. <!DOCTYPE html>
  10. <html lang="en">
  11. <head>
  12.     <meta charset="UTF-8">
  13.     <title>图片</title>
  14. </head>
  15. <body>
  16.     <img src="img/01.jpg" align="right" alt="仙境" width="900" height="300">
  17. </body>
  18. </html>

  1. 列表标签：

    • 有序列表
      • ol
      • li
    • 无序列表
      • ul
      • li
    • ```html <!DOCTYPE html>

    早上起床：

    1. 睁眼
    2. 看手机
    3. 洗漱
    4. 穿衣

    早上起床：

    • 睁眼
    • 看手机
    • 洗漱
    • 穿衣
    早上起床：
    • 睁眼
    • 看手机
    • 洗漱
    • 穿衣

    早上起床：

    • 睁眼
    • 看手机
    • 洗漱
    • 穿衣

  2.    5. 链接标签：
  3.       - a：定义一个超链接
  4.          - 属性：
  5.             - href：指定访问资源URL（统一资源定位符）
  6.             - target：指定打开资源的方式
  7.                - _self：默认值，在当前界面打开
  8.                - _blank：在空白页面打开
  9.       - ```html
  10. <!DOCTYPE html>
  11. <html lang="en">
  12. <head>
  13.     <meta charset="UTF-8">
  14.     <title>链接</title>
  15. </head>
  16. <body>
  18.     <a href ="https://www.runoob.com/html/html-entities.html">点它</a>
  20.     <br>
  21.     <a href ="https://www.runoob.com/html/html-entities.html" target="_blank">点它</a>
  22.     <br>
  23.     <a href ="https://www.runoob.com/html/html-entities.html" target="_parent">点它</a>
  25.     <a href ="https://www.runoob.com/html/html-entities.html" target="_parent">
  26.         <img src="img/01.jpg" align="right" alt="仙境" width="300">
  27.     </a>
  28. </body>
  29. </html>

  1. div和span：```html <!DOCTYPE html>

    和css控制样式 和css控制样式

    jjj
    ddd
    ```

  2. 语义化标签：h5中为了提高程序的可读性提供的一些标签

    • <header></header>
    • <footer></footer>

  3. 表格标签：

    • table：定义表格
      • width：宽度
      • border：边框
      • cellpadding：定义内容和单元格之间的距离。
      • cellspacing：定义单元格之间的距离。
      • bgcolor：背景色
      • align：对齐方式
    • tr：定义行
      • bgcolor：背景色
      • align：对齐方式
    • td：定义单元格
      • colspan：合并行
      • rowspan：合并列
    • th：定义表头行
    • caption：表格标题
    • thead：表示表格的头部
    • tbody：表示表格的体部分

    • tfoot：表示表格的脚部分

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <title>表格</title>
      6. </head>
      7. <body>
      8. <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="gray" align="center">
      9. <caption>成绩</caption>
      10. <thead>
      11.     <tr>
      12.         <th>编号</th>
      13.         <th>姓名</th>
      14.         <th>成绩</th>
      15.     </tr>
      16. </thead>
      17. <tbody>
      18.     <tr>
      19.         <td rowspan="2">1</td>
      20.         <td>小龙女</td>
      21.         <td>100</td>
      22.     </tr>
      23.     <tr>
      25.         <td>杨过</td>
      26.         <td>77</td>
      27.     </tr>
      28. </tbody>
      30. <tfoot>
      31. <tr>
      32.     <td>3</td>
      33.     <td colspan="2">伊志平</td>
      34. </tr>
      35. </tfoot>
      36. </table>
      37. </body>
      38. </html>