• JavaEE进阶：基础知识

    JavaEE：Java企业开发 

    Web网站的工作流程

    ⽬前用户对PC端应⽤的开发结构模式主要分为C/S和B/S结构.
    CS即Client/Server（客户机/服务器）结构. 常⻅的C/S架构的应⽤⽐如QQ，CCTALK，各种⽹络游戏 等等，⼀般需要安装并且与服务器进⾏⽹络通信的都属于此类。
    BS即Browser/Server（浏览器/服务器）结构. B/S架构全称是浏览器 / 服务(Browser/Server)结构, 分为Web浏览器、服务器程序、数据库服务三部分，可以理解为是对C/S架构⼀种改进, 由于所有的业务逻辑都由服务器程序处理, 所以客⼾端仅使⽤浏览器就可以完成所有操作，⼤⼤降低了客⼾端的维护成本

    集群：企业中一人身兼多职

    分布式：把一个人的工作拆分给多个人

    前端Web开发：HTML CSS JavaScript Jquery
    后端Web开发：Maven Spring家族框架: Spring, SpringBoot,Spring MVC； Mybatis， Linux

    HTML：表示页面上有哪些元素

    HTML：超文本标记语言（后续会有专门一篇文章讲前端的知识）

    超文本：通过链接和交互的方式来组织和呈现信息的文本形式，不仅仅有文本，还可能包含图片，音频或者自己经审阅过它的学者所加的评注、补充或脚注等等。功能比文本还要强大

    标记语言：由标签构成的语言

    标签：HTML的标签大多是成对出现的

    例如：

    我是三级标题

    • 标签名 (body) 放到 < > 中

    • ⼤部分标签成对出现.

    为开始标签,

    为结束标签.

    • 少数标签只有开始标签, 称为 "单标签".

    • 开始标签和结束标签之间, 写的是标签的内容.

    • 开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码).

    标签提前预设了一定的格式

    上面这段代码其实不是规范的（规范的在下面提到），至于浏览器为什么能够解析，因为浏览器有非常强的鲁棒性

    基本结构

    ！+ 回车能自动生成预设的代码

    ctrl + / 就是注释

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>我是一个标题title>
    7. head>
    8. <body>
    9.     我是页面内容
    10. body>
    11. html>

     

    基本标签 

    标题标签：

    h后面数字越大，标题越小

    段落标签

    代码里面加空格或者换行是不会生效的

    普通的文本要换行得加上

    段落标签，但是p标签表示的段落不会缩进

    加空格是无效的，需要结合CSS进行缩进

    换行标签:

    图片标签

    src称为标签的属性，一个标签可以有多个属性

    src后面跟的路径可以是相对路径，绝对路径和网络路径

    假如我把R-C.jpg删除掉，再执行代码

    网页左下角会出现一个破碎的图片，按下F12进行检查，控制台会告诉你答案

    相对路径：

    1.当前同级的直接写或者./

    2.当前目录的下一级，兄弟目录一级一级写

    3.当前目录的上一级 ../

    设置图像宽和高

    一般只需要设置一个就行，调整其中一个另一个会等比例缩放

    px是一个单位，表示像素。通常前端的长度单位px和em

    超链接：a

    百度

    href：表示点击后会跳转到哪个页面

    target: 打开方式. 默认是 _self. 如果是 _blank 则⽤新的标签页打开

    表格标签

    在VScode里面输入：table>tr*3>td*2  会自动生成一个表格框架

    • table 标签: 表⽰整个表格
    • tr: 表⽰表格的⼀⾏
    • td: 表⽰⼀个单元格
    • thead: 表格的头部区域
    • tbody: 表格的主体区域. 
    1.     <table border="1px">
    2.         <tr>
    3.             <td>111td>
    4.             <td>222td>
    5.         tr>
    6.         <tr>
    7.             <td>333td>
    8.             <td>444td>
    9.         tr>
    10.         <tr>
    11.             <td>555td>
    12.             <td>666td>
    13.         tr>
    14.     table>

    表单标签

    分成两个部分：

    表单域：包含表单元素的区域. 重点是 form 标签

    表单控件：输⼊框, 提交按钮等. 重点是 input 标签.

    form标签

    1. <form action="test.html">
    2.  ... [form 的内容]
    3. form>

    input标签

    快捷方式： input:你要写入的类型

    1.     <form action="hello.html">
    2.         <input type="button" value="我是一个按钮">
    3.         <input type="text" placeholder="请输入昵称" name="UserName">br>
    4.         <input type="radio" name="sex" value="1">女br>
    5.         <input type="radio" name="sex" value="2">男br>
    6.         <input type="radio" name="sex" value="0">保密br>
    7.         <input type="checkbox" name="" value="">篮球
    8.         <input type="checkbox" name="" value="">排球
    9.         <input type="checkbox" name="" value="">学习
    10.         <input type="password" name="password">
    11.         <input type="submit" value="提交">
    12.     form>

    提交到hello.html之后

    hello.html?后面跟着的就是我在前一个网站填的信息，是一个查询字符串，由多个key-value组成

    key：表单的name值

    value：对应表单输入的值

    无语义标签

    div 标签, division 的缩写, 含义是分割
    span 标签, 含义是跨度
    相当于两个盒⼦. ⽤于网页布局
    div 是独占⼀⾏的, 是⼀个大盒子.
    span 不独占⼀⾏, 是⼀个小盒子

    练习：根据下面的页面进行html代码编写

    1. <h1>⽤⼾注册h1>
    2. <table>
    3.  <tr>
    4.  <td>⽤⼾名td>
    5.  <td><input type="text" placeholder="请输⼊⽤⼾名">td>
    6.  tr>
    7.  <tr>
    8.  <td>⼿机号td>
    9.  <td><input type="text" placeholder="请输⼊⼿机号">td>
    10.  tr>
    11.  <tr>
    12.  <td>密码td>
    13.  <td><input type="text" placeholder="请输⼊密码">td>
    14.  tr>
    15. table>
    16. <div>
    17.  <input type="button" value="注册">
    18.  <span>已有账号? span><a href="#">登录a><br/>
    19. div>

    CSS：页面上元素的样式和布局排版

    一般建议卸载head里面，由包裹

    基本语法：选择器+{一条/N条声明}

    选择器决定针对谁修改，声明决定修改啥。声明是键值对，中间用 ：区分键和值

    比如这里的span就是选择器，下面大括号里的就是声明，决定如何修饰

    选择器分类

    1.标签选择器（html标签）

    2.类选择器（对元素进行分类，通过class标识类名）

    语法：.类名称

    1. <span class="center">已有账号? span>
    2. //对应的CSS
    3.         .center{
    4.             color:red;
    5.         }

    3.id选择器（对元素进行起名，通过id来标识，id不能重复）

    语法：#id名称

    1.  <span class="center" id="test">已有账号? span>      
    2.          #test{
    3.             color:red;
    4.         }

    4.复合选择器

    1. <div class="font32">我是⼀个div, class为font32div>
    2. <div class="font32">我是⼀个div, class为font32div>
    3. <div><a href="#">我是⼀个diva>div>
    4. <ul>
    5.  <li>aaali>
    6.  <li>bbbli>
    7.  <li><a href="#">ccca>li>
    8. ul>
    9. <ol>
    10.  <li>1111li>
    11.  <li>2222li>
    12.  <li>3333li>
    13. ol>
    14. <button id="submit">提交button>
    15.  
    1. /*只设置 ul标签下的 li标签下的 a标签, 颜⾊为红⾊*/
    2. ul li a {
    3.  color: blue;
    4. }

    复合选择器就是由多个单选择器组成

    如果有多个选择器，离body内容最近的执行

    5.通配符选择器

    1. /* 设置⻚⾯所有元素, 颜⾊为红⾊*/
    2. * {
    3.  color: red;
    4. }

    其他样式 

    颜色表示

    1.英文单词：red，blue，yellow，purple

    2.rgb

    3.十六进制表示法 如#ff0ff

    字体大小

    font-size: 设置字体大小 
    1. .text1{
    2.  font-size: 32px;
    3. }

     边框：border

    宽度和高度 width和height

    只有块级元素可以设置宽和高

    块级元素独占⼀⾏, 可以设置宽⾼
    ⾏内元素不独占⼀⾏, 不能设置宽⾼

    内边距：padding 和外边距：margin

    padding和margin都可以从top, bottom, left, right四个方向分开设置

    JavaScript：页面上元素的交互

    一般卸载body里面，由包裹

    1.     <script>
    2.         alert("你好");
    3.     script>

    JavaScript是动态的弱语言类型

    关键字：var声明变量，const声明常量

    1.         var a = 10;
    2.         a = "nihao";

    这行代码在Java中是不被允许的，但是在Javascript里面可以运行（弱语言）

    JavaScript里面你给变量设置的值是什么就是什么，不用考虑类型

    类型

    1.         var a = 10;
    2.         console.log(typeof a);
    3.         a = "nihao";
    4.         console.log(typeof a);

    按F12控制台可以看到打印类型 

     

    运算符

    1.         var a = 10;
    2.         var b ="10";
    3.         console.log(a == b);
    4.         console.log(a === b);

    为什么？两个等号会直接比较值，不考虑类型；三个等号会考虑类型

    对象

    数组

    第一种定义

    var arr = new Array();

    第二种：数组里面的类型可以不相同

    1. var arr = [];
    2. var arr2 = [1, 2, 'haha', false];

    增：arr1[0] = 1

    删：splice

    查：console.log(arr1[0]);

    改：arr1[0] = 2;直接改值

    JavaScript的数组下标还可以是字符，只是不会算入总数组长度而已

    函数

    对象

    JavaScript可以没有类，只有对象

    1.         //对象
    2.         var a = {}; //创建空对象
    3.         var student = {
    4.             name:"haha",
    5.             height: 170,
    6.             weight: 170,
    7.             sayHello: function(){
    8.                 console.log("hello");
    9.             }
    10.         }
    11.         //获取对象属性
    12.         console.log(student.height);
    13.         console.log(student['weight']);
    14.  
    15.         //添加属性
    16.         student.age = 18;
    17.         student['gender'] = "男";
    18.  
    19.         console.log(student);

    JQuery

    JQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 封装了JavaScript常用的功能

    代码, 提供了简洁⽽强⼤的选择器和DOM操作方法. 使⽤JQuery可以轻松地选择和操作HTML元素，从而减少了开发⼈员编写的代码量，提高了开发效率, 它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML文档遍历和操作、事件处理、动画和 Ajax 操作更加简单. JQuery对于事件的处理也进行了简化, 提供了⼀个简单的API来绑定、触发和处理事件，使开发⼈员能够更方便地处理各种交互行为

    引入依赖

    JQuery语法

    1.     
    2.     <script src="https://code.jquery.com/jquery-3.7.1.min.js">script>
    3.