Web前端

B/S架构

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

HTML

概念

Hyper Text Markup Language 超文本标记语言
- 超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织再一起的网状文本。
- 标记语言：由标签构成的语言，标记语言不是编程语言

基础语法

html文档后缀：.html或.htm
标签分类
- 围堵标签：有开始标签和结束标签，如<html></html>
- 自闭合标签：开始标签和结束标签在一起，如<br/>
在开始标签中可以定义属性。属性是由键值对构成，值需要用引号引起来（单引双引都可）
html的表情不区分大小写，建议使用小写。

常用标签

文件标签
- <html></html>：html文档的根标签
- <head></head>：头标签，用于指定html文档的一些属性。引入外部资源
- <title></title>：标题标签
- <body></body>：体标签
- <!DOCTYPE html>：定义文档类型，html5中定义该文档是html文档
- <meta charset="UTF-8">：指定字符集
文本标签
- 注释：
- <h1>to<h6>：标题标签（h1~h6字体大小逐渐递减）
- <p></p>：段落标签
- <br/>：换行标签
- <hr>：展示一条水平线
  - 属性：
    - color：颜色
    - width：宽度
    - size：高度
    - align：对齐方式（center/left/right）
- <b></b>：字体加粗
- <i></i>：字体斜体
- <font></font>：字体标签
- <center>：文本居中,相对于父元素
  - 属性：
    - color：颜色
    - size：大小
    - face：字体
- 属性定义
  - color：
    - 英文单词
    - rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
    - #值1值2值3：值的范围：00~FF之间。如： #FF00FF
  - width：
    - 数值，单位默认px像素
    - 数值%：占比相对于父元素的比例

> 特殊字符表：空格：`&nbsp;`

图片标签
- <img/>：展示图片
  - 属性：
    - src：指定图片的位置
    - alt：规定在图像无法显示时的替代文本
  - <img src="图片地址" alt="图片名称">
  相对路径：以.开头的路径
  - ./：代表当前目录
  - ../：代表上一级目录
列表标签
- 有序列表
  - <ol>:定义有序列表。
  - <li>:定义列表的项目。
- 无序列表
  - <ul>:定义无序列表。
  - <li>:定义列表的项目。
链接标签
- <a>:定义一个超链接
  - 属性：
    - href:指定访问资源的url(统一资源定位符)
    - target:指定打开资源的方式
      - _self:默认值，在当前页面打开
      - _blank:在空白页打开
样式/节
- <div></div>:可以把文档分割为独立的、不同的部分。每一个div占满一整行。块级标签
- <span></span>:用来组合文档中的行内元素。文本信息在一行展示，行内标签内联标签
- <header></header>:定义文档的页眉（介绍信息）。
- <footer></footer>:定义文档或节的页脚。
表格标签
- <table></table>
  - width：宽度
  - border：边框
  - cellpadding：定义内容和单元格的距离
  - cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
  - bgcolor：背景色
  - align：对齐方式
- <tr></tr>：定义行
  - bgcolor：背景色
  - align：对齐方式
- <td></td>：定义单元格
  - colspan：合并列
  - rowspan：合并行
- <th></th>：定义表头单元格
- <caption></caption>：表格标题
- <thead></thead>：表示表格的头部分
- <tbody></tbody>：表示表格的体部分
- <tfoot></tfoot>：表示表格的脚部分

表单标签

概念：用于采集用户输入的数据。用于和服务器进行交互。
<form>：用于定义表单，可以定义一个范围，范围内代表采集用户数据的范围
属性：
- action；指定提交数据的URL
- method：指定提交方式（一共7种，常用2种）
  - get
    - 请求参数会在地址栏显示。数据被封装到请求行中
    - 请求参数大小有限制
    - 不太安全
  - post
    - 请求参数不会显示在地址栏。数据被封装到请求体中
    - 请求参数大小没有限制
    - 比较安全
- 表单项中的数据想要被提交，必须指定其name属性
表单项标签
- input：可以勇敢type属性值，改变元素展示的样式
  - type属性：
    - text：文本输入框，默认值
    - password：密码输入框
    - radio：单选框
      - 要想多个单选框实现单选的效果，则多个单选框的name属性必须一样
      - 一般会给每一个单选框提供value属性，指定其被选中后提交的值
      - checked属性：可以指定默认值cheecked="checked"，可以简写checked
    - checkbox：复选框
      - 一般会给每一个单选框提供value属性，指定其被选中后提交的值
      - checked属性：可以指定默认值
    - file：文件选择框
    - hidden：隐藏域，用于提交一些信息
    - 按钮：
      - submit：提交按钮，可以提交表单
      - button：普通按钮
      - image：图片提交按钮（src属性指定图片的路径）
    - date：定义 date 控件（包括年、月、日，不包括时间）。
    - email：定义用于 e-mail 地址的字段。
    - color：定义拾色器
    - number：定义用于输入数字的字段。
  - placeholder：指定输入框的提示信息，当输入框的内容发生改变，会自动清空提示信息
- select：下拉列表
  - 子元素：option，指定列表项
- textarea：文本域
  - cols：指定列数，每一行有多少个字符
  - rows：默认多少行。

- `label`：指定输入项的文字描述信息
    - label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。`<label for="username"></label>`

CSS

概念：Cascading Style Sheets 层叠样式表
- 层叠：多个样式可以作用在同一个html的元素上，同时生效
优点：
- 功能强大
- 将内容展示和样式控制分离
  - 降低耦合度。解耦
  - 让分工协作更容易
  - 提高开发效率

使用

内联样式
- 在标签内使用style属性指定css代码
- 如：<div style="color:red;">hello css</div>

内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码

如

<style>
    div{
        color:blue;
    }
    
</style>
<div>hello css</div>

外部样式

定义css资源文件

在head标签内，定义link标签，引入外部的资源文件

<!-- a.css:
div{
    color:green;
} -->
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>

注意：
- 三种方式，css作用域越来越大
- 3种格式可以写为：
  1
  2
  3
  <style>
  @import "css/a.css";
  </style>

语法

格式：

选择器{
    属性名1:属性值1;
    属性名2:属性值2;
    ...
}

注意：每一对属性需要使用分号;隔开，最后一对属性可以不加

选择器

选择器：筛选具有相似特征的元素
分类：
1. 基础选择器
  - id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一
    - 语法：#id属性值{}
  - 元素选择器：选择具有相同标签名称的元素
    - 语法：标签名称{}
    - 注意：id选择器优先级高于元素选择器
  - 类选择器：选择具有相同class属性值的元素
    - 语法：.class属性值{}
    - 注意：类选择器优先级高于元素选择器
2. 扩展选择器
  - 选择所有元素
    - 语法：*{}
  - 并集选择器
    - 语法：选择器1,选择器2{}
  - 子选择器：筛选选择器1元素下的选择器2元素
    - 语法：选择器1 选择器2{}
  - 父选择器：筛选选择器2的父选择器1
    - 语法：选择器1 > 选择器2{}
  - 属性选择器：选择元素名称，属性名=属性值的元素
    - 语法：元素名称[属性名="属性值"]{}
  - 伪类选择器：选择一些元素具有的状态
    - 语法：元素:状态{}
    - 如： <a>标签
      - link：初始化的状态
      - visited：被访问过的状态
      - active：正在访问状态
      - hover：鼠标悬浮状态

属性

字体
- font-size：字体大小
- color：文本颜色
- text-align：对其方式
- line-height：行高
背景
- background:background: url("图片地址") no-repeat right top;
边框
- border：设置边框，符合属性
尺寸
- width：宽度
- height：高度
盒子模型：控制布局
- margin：外边距
- padding：内边距
  - 默认情况下内边距会影响整个盒子的大小
  - box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
- float：浮动
  - left
  - right

Javascript

概念：客户端脚本语言
- 运行再客户端浏览器中，每一个浏览器都有JavaScript的解析引擎
- 脚本语言：不需要编译，直接就可以被浏览器解析执行
功能：可以增强用户和html页面的交互过程，可以来控制html元素，让页面增加动态效果，增强用户体验
JavaScript的发展史
- 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。
- 1995年，NetScape公司，开发了一门客户端脚本语言：LiveScript。后来SUN公司的专家，修改LiveScript，命名为JavaScript
- 1996年，微软模仿JavaScript开发出JScript语言
- 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式
- JavaScript = ECMAScript + JavaScript特有东西(DOM+BOM)

ECMAScript：客户端脚本语言标准

基本语法

与html结合方式
1. 内部JS：定义<script>，标签体内容就是js代码
2. 外部JS：定义<script>，通过src属性引入外部的js文件
- 注意：
  - <script>可以定义在html页面的任何地方。但定义的位置会影响执行顺序
  - <script>可以定义多个
注释
1. 单行注释：//注释内容
2. 多行注释：/*注释内容*/
数据类型
1. 基本数据类型
  - number：数字。整数/小数/NaN（not a number一个不是数字的数字类型）
  - string：字符串。
  - boolean：true/false
  - null：一个对象为空的占位符
  - undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
2. 引用数据类型
  - 对象
变量
- 变量：一小块存储数据的内存空间
- Java语言是强类型语言，而JavaScript是弱类型语言
  - 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
  - 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据
- 语法: var 变量名 = 初始化值;
- typeof运算符：获取变量的类型。(null运算后得到Object类型)
运算符
1. 一元运算符：只有一个运算数的运算符
  - ++，-- ， +(正号)
  - 在JS中，如果运算数不是运算符所要求的类型，那么JS引擎会自动地将运算数进行类型转换。
  - String转number:按照字面值转换，如果字面值不是数字，则转为NaN
2. 算数运算符
  - + - * / % ...
3. 赋值运算符
  - = += -+....
4. 比较运算符
  - > < >= <= == ===(全等于)
  - 比较方式
    - 类型相同：直接比较
      - 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止
    - 类型不同：先进行类型转换，再比较(“123”==123)
      - ===全等于 在比较之前，先判断类型，如果类型不一致，则直接会返回false
5. 逻辑运算符
  - && || !
  - 其他类型转boolean
    - number：0或NaN为false，其他为true
    - string：除了空字符串，其他都是true
    - null/undefined：false
    - 对象：所有对象都为true
6. 三元运算符
  - 表达式? 值1:值2;
  - 判断表达式的值，如果是true则取值1，如果是false则取值2
流程控制语句
1. if…else…
2. switch
  - 在Java中，switch语句可以接受地数据类型：byte int shor char,枚举(jdk1.5) ,String(jdk1.7)
  - 在JS中,switch语句可以接受任意的原始数据类型
3. while
4. do…while
5. for
JS特殊语法
1. 语句以分号;结尾，如果一行只有一条语句，分号可以省略
2. 变量地定义使用var关键字，也可以不使用
  - 使用：定义的变量是局部变量
  - 不使用：定义的变量是全局变量（不建议）

基本对象

Function函数(方法)对象
- 创建：
  1
  2
  3
  4
  5
  6
  7
  8
  // 常用
  function 方法名称(形参列表){
  方法体
  }
  // 常用2
  var 方法名 = function(形参列表){
  方法体
  }
- 属性：
  - length:返回形参的个数
- 特点：
  - 方法定义是，形参的类型不用写，返回值类型也不用写
  - 方法是一个对象，如果定义名称相同的方法，会覆盖
  - JS中，方法的调用只与方法的名称有关，和参数列表无关(无法重载，可以通过arguments.length进行模拟重载)
  - 在方法声明中有一个隐藏的内置对象（数组），arguments封装所有的实际参数
- 调用：方法名称(实际参数列表);
Array数组对象
- 创建
  1
  2
  3
  4
  5
  6
  // 1
  var arr = new Array(元素列表);
  // 2
  var arr = new Array(默认长度);
  // 3
  var arr = [元素列表];
- 方法
  - join(分隔符)：将数组中的元素按照指定的分隔符拼接为字符串
  - push()：项数组的末尾添加一个或更多元素，并返回新的长度
- 属性
  - length：数组的长度
- 特点
  - 在JS中，数组元素的类型是可变的
  - 在JS中，数组的长度是可变的
Boolean
Date日期对象
- 创建：
  1
  var date = new Date();
- 方法：
  - toLocaleString()；返回当前date对象对应的时间本地字符串格式
  - getTime()：获取毫秒值。返回当前日期对象描述的时间到1970年1月1日0点的毫秒值差
Math对象
- 创建：Math对象不用创建，直接使用。Math.方法名();
- 方法
  - random()：返回 0 ~ 1 之间的随机数。含0不含1
  - ceil()：对数进行上舍入。
  - floor()：对数进行下舍入。
  - round()：把数四舍五入为最接近的整数。
- 属性
  - PI
Number
String
RegExp正则表达式对象
- 正则表达式：定义字符串的组成规则
  - 单个字符：[]
    如：[a] [ab] [a-zA-Z0-9_]
    - 特殊符号代表特殊含义的单个字符:
      
      \d:单个数字字符 [0-9]
      
      \w:单个单词字符[a-zA-Z0-9_]
  - 量词符号
    - ?：表示出现0次或1次
    - *：表示出现0次或多次
    - +：出现1次或多次
    - {m,n}:表示 m<= 数量 <= n
      
      m如果缺省： {,n}:最多n次
      
      n如果缺省：{m,} 最少m次
  - 开始结束符号
    
    ^:开始
    $:结束
- 正则对象
  - 创建
    1
    2
    3
    4
    5
    var reg = new RegExp("正则表达式")//引号里面的字符串需要转义符\
    var reg = /正则表达式/;
    //eg
    var reg1 = new RegExp("^\\w{6,12}$");
    var reg2 = /^\w{6,12}$/;
  - 方法
    - test(参数)：验证指定的字符串是否符合正则定义的规范

Global全局对象

特点：Global中封装的方法不需要对象就可以直接调用。方法名();

方法：

encodeURI()：url编码

decodeURI()：url解码

var str1 = "乃木坂";
var encode = encodeURI(str1);//编码
document.write(encode+'<br>');//%E4%B9%83%E6%9C%A8%E5%9D%82
var str2 = decodeURI(encode)//解码
document.write(str2+'<br>');

- `encodeURIComponent()`：url编码,编码的字符更多
- `decodeURIComponent()`：url解码
- `parseInt()`：将字符串转为数字
    > 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number

- `isNaN()`：判断一个值是否是NaN
    > NaN六亲不认，连自己都不认。NaN参与的==比较全部问false

- `eval()`：将JavaScript 字符串，并把它作为脚本代码来执行。

BOM

概念：Browser Object Model 浏览器对象模型。将浏览器的各个组成部分封装成对象
组成：
- Window：窗口对象
- Navigator：浏览器对象
- Screen：显示器屏幕对象
- History：历史记录对象
- Location：地址栏对象
Window窗口对象
1. 创建
2. 方法
  - 与弹出框有关的方法
    - alert()：显示带有一段消息和一个确认按钮的警告框。
    - confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
      - 确定：返回true
      - 取消：返回false
    - prompt()：显示可提示用户输入的对话框。
      - 返回值：获取用户输入的值
  - 与打开关闭有关的方法
    - close()：关闭浏览器窗口。谁调用，谁被关闭
    - open()：打开一个新的浏览器窗口。返回新的Window对象
  - 与定时器有关的方法
    - setTimeout(方法对象,毫秒值)：在指定的毫秒数后调用函数或计算表达式
      - 参数：js代码或者方法对象，毫秒值
      - 返回值：唯一标识，用于取消定时器
    - clearTimeout(id)：取消由setTimeout()方法设置的timeout
    - setInterval(方法对象,毫秒值)：按照指定的周期（以毫秒计）来调用函数或计算表达式。
    - clearInterval(id)：取消由 setInterval() 设置的 timeout。
3. 属性
  - 获取其他BOM对象
    - history
    - location
    - Navigator
    - Screen
  - 获取DOM对象
    - documet:window.document可简写document
4. 特点
  - Window对象不需要创建可以直接使用。window.方法名()
  - window引用可以省略。方法名()
Location地址栏对象
1. 创建
  - window.location
  - location
2. 方法
  - reload()：重新加载当前文档。刷新
3. 属性
  - href：设置或返回完整的 URL。
History历史记录对象
1. 创建
  - window.history
  - history
2. 方法
  - back()：加载 history 列表中的前一个 URL。
  - forward()：加载 history 列表中的下一个 URL。
  - go(参数)：加载 history 列表中的某个具体页面。
    - 正数：前进几个历史记录
    - 负数：后退几个历史记录
3. 属性
  - length：返回当前窗口历史列表中的 URL 数量。

DOM

概念：Document Object Model文档对象模型。将标记语言文档的各个组成部分，封装成对象，可以使用这些对象，对标记语言文档进行CRUD动态操作（文档->dom树）
功能：控制html文档的内容
W3C DOM标准被分为3个不同的部分
- 核心DOM：正对任何结构化文档的标准模型
  - Document：文档对象
  - ElementL：元素对象
  - Attribute：属性对象
  - Text：文本对象
  - Comment：注释对象
  - Node：节点对象，上述5个对象的父对象
- XML DOM：针对XML文档的标准模型
- HTML DOM：针对HTML文档的标准模型

核心DOM

Document：文档对象
1. 创建(获取)：在html DOM模型中可以使用window对象来获取
  - window.document
  - document
2. 方法
  - 获取Element对象
    - getElementById()：根据id属性值获取元素对象。id属性值一般唯一。
    - getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
    - getElementsByClassName()：根据class属性值获取元素对象们。返回值是一个数组。
    - getElementsByName()：根据name属性值获取元素对象们。返回值是一个数组
  - 创建其他DOM对象
    - createAttribute(name)
    - createComment()
    - createElement()
    - createTextNode()
3. 属性

Element：元素对象

获取：通过document对象来获取
- window.document.getElementById()
- document.getElementById()

方法

removeAttribute()：删除属性
setAttribute()：设置属性

<a>点我进入百度</a>
<input type="button" id="btn1" value="快点我一下">
<input type="button" id="btn2" value="点我删除">

<script>
    /*设置Element对象属性*/
    var btn1 = document.getElementById("btn1");
    btn1.onclick = function(){
        var ele_a = document.getElementsByTagName("a")[0];
        ele_a.setAttribute("href","https://www.baidu.com");
    }
    /*删除Element对象属性*/
    var btn2 = document.getElementById("btn2");
    btn2.onclick = function(){
        var ele_a = document.getElementsByTagName("a")[0];
        ele_a.removeAttribute("href");
    }
</script>

Node：节点对象，其他5个对象的父对象

特点：所有DOM对象都可以被认为是一个节点

方法：

CRUD DOM树
- appendChild()：向节点的子节点列表的结尾添加新的子节点
- removeChild()：删除（并返回）当前节点的指定子节点
- replaceChild()：用新节点替换一个子节点
属性
- parantNode：返回节点的父亲节点

<script>
    /*删除子节点*/
var ele_a = document.getElementById("del");
ele_a.onclick = function(){
    var div1 = document.getElementById("div1");
    div1.removeChild(div2);
};
/*添加子节点*/
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
var ele_b = document.getElementById("add");
ele_b.onclick = function(){
    var div1 = document.getElementById("div1");
    div1.append(div3);
}
</script>

HTML DOM

标签体的设置和获取：innerHTML
使用html元素对象的属性
控制元素样式
- 使用元素的style属性来设置
  1
  2
  3
  4
  5
  //修改样式方式1
  div1.style.border = "1px solid red";
  div1.style.width = "200px";
  //font-size--> fontSize
  div1.style.fontSize = "20px";
- 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值

事件监听机制

概念：某些组件被执行了某些操作后，会触发某些代码的执行
- 事件：某些操作。如：单击、双击
- 事件源：组件。如：按钮、文本输入框
- 监听器：代码
- 注册监听：将事件、事件源、监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。
常见事件：
- 点击事件
  - onclick：单击事件
  - ondbclick：双击事件
- 焦点事件
  - onblur：失去焦点
  - onfocus：元素获得焦点
- 加载事件
  - onload：一张页面或一幅图像完成加载
- 鼠标事件
  - onmousedown：鼠标按键被按下
  - onmouseup：鼠标按键被松开
  - onmousemove：鼠标被移动
  - onmouseover：鼠标移到某元素之上
  - onmouseout：鼠标从某元素移开
- 键盘事件
  - onkeydown：某个键盘按键被按下
  - onkeyup：某个键盘按键被松开
  - onkeypress：某个键盘按键被按下并松开
- 选择和改变
  - onchange：域的内容被改变
  - onselect：文本被选中
- 表单事件
  - onsubmit：提交按钮被点击(可以阻止表单的提交。方法返回false则表单被阻止提交)
  - onreset：重置按钮被点击
绑定事件：
1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
  - onclick：单击事件
2. 通过js获取元素对象，指定事件属性，设置一个函数