前端三剑客

后端backend

从头开始：1.网络编程+HTTP实现

                   Web服务器（HTTP服务器） —— Tomcat

编程方程反转了，不再写main方法了（不是以我们为主）

我们的代码会被Tomcat加载来使用，意味着，我们需要遵守很多规则。

Servlet（早期，经典）

SpringWeb(使用较多）

---

Web开发的内容：

浏览器进程     解析（HTML骨架+CSS样式+JS灵魂）现在是让浏览器进程打开文件

                       以后 浏览器的进程 通过HTTP协议网络和服务器进程进行交互

为啥要找个服务器？

CSS和HTML这些资源并不是存在于每一个人的电脑上，所以我们需要打开百度的资源。让浏览器先与服务器进程进行通信，让服务器帮我们交互

资源resources     HTML文件 /CSS文件/图片资源

1.前端三剑客（HTML/css/JavaScript）      可以独立完成一个功能简单基本无样式的网页

用来结构化数据

2.HTTP协议（HTTPS协议）

3.基于Servlet的资源开发

4.环境搭建、软件使用

---

HTML

1.输出性标签

标题：<h1>...<h6>

段落：<p>

图片：<img src=" ">   这是单标签  src/height/width

超链接： <a> herf/target

2.表格系列

<table> <tr> <td>

<thead> <tbody><th>

列表：<ol> <ul> <li>

3.输入型元素

用于浏览器收集用户填写的信息，提交给服务器

1.表单标签

表单<form>   框出一块区域，作为整体提交到服务器

2.<input>标签

 type:text          普通的文本框（浏览器有回显）

type:password  密码（浏览器关闭回显***）

type: radio         单选框的其中一个选项

type: checkbox  复选框的一个选项

type: button        等同于<button>

3.<select>下拉选择框

<textarea>

4.无语义标签，专门用来换行分割

<div> <p>

---

CSS

1.引入CSS样式

1.内部样式（写在html中的，整体表述的样式）  <style>...</style>

2.外部样式(写在html外部，但建立连接关系) <link>

3.内联样式（写在html中的，针对某个具体的元素处理）

语法基本形式：

1.选择某个或某些元素，来应用规则

2.指定具体的的规则以及对应的值

2.选择器

1.元素选择器  p{...} 文档中所有P标签听令

                        a{...}

2.ID选择器   #some-value{...}   找到文档中，元素属性的id是some-value的元素听令

3.类class选择器  .someclass{...}   找到文档中，元素属性的class包含some-class的所有元素

4.全部选择器  *{...}  文档中的所有元素，听令

5.并列关系 p,h1{...}   p和h1标签都要修改

6.下级    #some-id p{...}    先找到#some-id,在它的所有子孙中，找到p标签

              #some-id >p{...}  先找到#some-id,在它的所有孩子中，找到p标签

3.背景

盒子（块级、行内）

margin外边距   Padding内边距    border边框  content内容      

弹性布局：加载父容器(  dispalyL flex;

                align-item: 纵轴;    justify-content: (横轴) )

---

JS

1.JS基础

1.引入JS的方式：

外部<script src="xxx.js"></script> 

内部<script>js 语法</script>

2.JS不需要写main 方法，所有的代码都会执行

 控制台最大的好处就是你可以边写边运行。

3.定义变量使用var,变量是无类型的，可以视为java中的Object引用

JS中的变量是无类型/都是引用类型（类似java中的Object类型）

var x =1;   x= 'Hello World';

Object x =new Integer(1);   x= 'xxx';

JS相对于JS（纯面向对象的语言： 1是对象，xxx是对象）

4.字符串：单引号or双引号+模板 ： 反引号，类似String.format(...)的用法

 模板字符串：String format(...)        

`Hello${x}`;      使用反引号`Hello ${变量名称}`

5.数据类型：数字、字符串、布尔、错误值undefined/null.所有变量都是引用类型，没有equals方法

true和false分别被当成1、0来计算

6.数字   parseInt(...)/isNaN(...)     正无穷、负无穷

7.java中没有的奇怪操作

比较：

（1）带类型转换的比较： 1== '1'     -> true

 （2）不带类型转换的比较 1==="1"    ->false

 java中进行运算时，类型要求非常严格。但JS中的类型不是很严格。

0和空字符串、""、undefined、null都可以视为false

 2.JS中的Array对象

1.JS中的数组长度不是固定的——JS中的数组类似java中的List对象

JS中的元素类型也是不固定的——List<Object>或者Object[ ]

JS中的元素不一定连续：这个角度，又不同于线性表，更类似于数组

var array = [];     //一开始长度为0

array[2] = 'Hello';   //设置下标为2的位置

                              //说明数组长度可变

[0] [1]位置没有添加过元素，[undefined,undefined,2]

2.JS中我们需要掌握的操作

（1）创建数组 

var arr = [ ];

（2）获取数组中的元素长度：arr.length

（3）我们如何根据下标获取元素/修改某个元素

    console.log(arr[index]);    arr[index] = e;

3.和java不同，下标越界（<0或者 >= arr.length）时，获取元素，得到的是Undefine。

4. 修改元素，就会把数组的长度扩大到这个下标。

5.数组的遍历

（1）根据下标遍历

for(var i = 0; i<arr.length; i++)

arr[i] = ... ;   console.log(arr[i]);}

 (2)也是下标的遍历方式——使用了特殊的for形式(类似java中的foreach写法）

for(var i in arr){

console.log(arr[i]); }

6.尾插尾删、头插头删

push() :将最后一个元素添加到数组末尾，并返回该数组的新长度

pop() :从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度

 unshift() ：将一个或多个元素添加到数组的开头，并返回该数组的新长度（该方法修改原有数组）

 shift() ：从数组中删除第一个元素，并且返回该元素的值。此方法更改数组的长度。

 7.根据给定下标，进行插入或删除——splice

splice() :通过删除或替换现有元素，或者原地添加新的元素来修改数组，并以数组形式返回别修改的内容。此方法会改变原数组。

 8.函数function

JS中的函数也是一等公民，是一种数据类型

(1）定义：没有返回值类型、形参无类型

function 函数名（形参列表）{//形参列表，var都不用写

//函数中要运行的语句

//如果需要返回，可以使用return 

}

 （2）函数调用

add(1,2);     //add(x,y);其中的x y需要提前定义

z = add(x,y)  //把函数返回值保存下来（把函数的返回值赋给变量z）

9.由于JS的函数是一等公民，所以JS中可以有匿名函数

var  add = function(a,b) {return a+b;}

等号的右边是一个没有名字（匿名）的函数对象

让add引用指向这个对象

这个匿名对象，也可以用在隐式赋值上。

JS中允许在函数中定义函数，或者在实参列表中定义函数

function f1(){

   function f2(){

       function f3(){

                 ...

                                     }

                          } 

                   }