一、前置知识
1.前后端分离的介绍
目前企业级的项目都是基于前后台分离的项目
java、ssh、ssm jsp（前端页面）
前端工程师：页面的重构（html、css、js）+数据交互（使用工具和后台服务交互）
后端工程师：java => 接口
2.B/S架构
基于：浏览器（Brower）=服务器(Server) 进行架构
校园官网=学校服务器
学生管理系统：浏览器=公司服务器
C/S：客户端=服务器
桌面上的qq、微信、浏览器（桌面应用程序）：客户端=服务器端
3.http协议 常见的其他协议：https、file
超文本传输协议 基于请求和响应这种模式
http协议如何进行工作？
浏览器-->请求（get\post\delete\options\put…）-->服务器（解读在数据库查询返回服务器）-->响应-->浏览器
http常见的7种请求
1）get请求：请求参数放到地址栏里（地址栏？之后的位置）
发送请求来获得服务器上的资源，请求体中不会包含请求数据，请求数据放在协议头中。另外get支持快取、缓存、可保留书签等
2）post请求：请求参数放到请求体（更安全）
向服务器提交资源让服务器处理，比如提交表单、上传文件等，可能导致建立新的资源或者对、原有资源的修改。提交的资源放在
请求体中。不支持快取。
3）head请求：本质和get一样，但是响应中没有呈现数据，而是http的头信息，主要用来检查资源或超链接的有效性或是否可以可达、检查
网页是否被串改或更新，获取头信息等，特别适用在有限的速度和带宽下。
4）put请求：和post类似，html表单不支持，发送资源与服务器，并存储在服务器指定位置，要求客户端事先知道该位置；比如post是在一个
集合上（/province），而put是具体某一个资源上（/province/123）。所以put是安全的，无论请求多少次，都是在123上更改，而post
可能请求几次创建了几次资源。
5）delete请求：请求服务器删除某资源。和put都具有破坏性，可能被防火墙拦截。如果是https协议，则无需担心。
6）connect请求：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。就是把服务器作为跳板，去访问其他网页然后把数据返回回
来，连接成功后，就可以正常的get、post了。
7）options请求：获取http服务器支持的http请求方法，允许客户端查看服务器的性能，比如ajax跨域时的预检等。
http请求常见的状态码
1xx（不常用）：100、101
2xx（常用）：200 成功
3xx（304）：304 重定向
4xx：404 找不到资源
403 权限不足
5xx：500 服务器内部错误
4.URL(统一资源定位服务)
唯一的去定位一个资源
模板： 协议://ip:port/path
例子： http：//47.100.226.238:8080/app/index.png
释意：
http:协议（规定使用哪种协议）
47.100.226.238：IP地址（唯一确定一台主机）
8080：端口号（唯一确定一个 进程（应用程序））
/app/index.png:资源的路径
http://www.baidu.com 域名 （域名解析系统 =>DNS）
二、前端三要素
HTML：搭建页面骨架
CSS：美化修饰页面
js：交互
HTML
1.开发环境搭建
1）编辑器：vscode 编写代码的地方
sublime 体积小、运行速度快
文本编辑器 没有代码提示以及插件
2）浏览器：火狐 代码执行的地方
coogle、ie、
3）部署环境：apache 代码部署的地方
三部分人
w3c 制定规范（标准）
<div></div>=>box
浏览器厂商 火狐、coogle、safiri、微软
程序员 使用者
2.介绍
作用：搭建页面的骨架
HTML：超文本标记语言，是标记语言而非编程语言
html文件后缀名：.htm、.html
3.html文档结构
<!-- 文档声明 html5文档 (ctrl+/)-->
<!DOCTYPE html>
<!-- html文档的根元素 -->
<html >
<!-- html文档的头部 定义一些文档的配置 -->
<head>
<!-- 定义文档的字符集 -->
<meta charset="UTF-8">
<!--定义ie浏览器的兼容 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 定义了响应式 -->
<meta name="viewport" content="width=, initial-scale=1.0">
<!-- 定义文档标题 -->
<title>Document</title>
<!-- 定义样式、js文件 -->
</head>
<!-- 文档的体部 -->
<body>
hello world!
</body>
<body>
你好世界!
</body>
</html>
4.语法
1）注释
<!-- 注释内容 --> 注释内容不会被浏览器给解析
作用
1.记录你的编程思路
2.便于后期代码的维护
2）元素
双标签元素
元素=开始标签+结束标签+内容+属性
单标签元素
开始标签+属性
3）属性
属性写在开始标签中
属性=属性名+属性值
属性名和属性值之间使用=分隔，属性值使用引号（双引号/单引号）包起来
核心属性：每一个元素都可以拥有的属性
title:提示信息
id：元素的唯一值
class：类名（css选择器）
style：定义一些样式
特有属性：某些元素特有的属性
charset:字符集
src：路径
alt：当img通过src未被正确找到时提供提示
herf:超链接
路径
绝对路径 /
相对路径 ./ 当前目录下
../ 返回上一级
4.空白、实体
空格：无论有多少空格，浏览器都会按照一个空格来处理
实体： （空格）=
&= &
<= <
>= >
5.块级元素* ==>搭建页面的骨架
1）特点:a.独占一行空间
b.默认宽度为父元素的100%,高度由内容或子元素决定
c.可以设置宽高
div：无意义的块级元素（没有任何的默认样式）
p:段落 默认有一个margin-top margin-bottom
h1~h6：标题 默认有字体大小和字体宽度，外边距
ul ：无序列表
子元素：li
ol:有序列表
子元素：li
dl:自定义列表
子元素dt:标题
dd:内容
6.行内元素（装饰性）
特点
1）共享一行空间；如果一行放不下则换行现实
2）默认宽高都由内容决定
3）默认不能设置宽高
span ：无意义的行内元素
a:超链接
1)超链接（绝对路径、相对路径）
2）锚点(例：返回顶部)
为目标元素定义一个id值，写一个a标签，给a标签的herf属性写上 #目标元素的id值
3）发送邮件
herf: mailto:+邮箱地址
<a href="mailto:[email protected]" target="_blank" rel="external nofollow" >发邮件给curry</a>
strong 加粗
i 斜体
img 图片
src： 图片的路径
alt：当图片加载失败的时候，替代图片的文字
width 宽度
height 高度
……
7.元素的使用策略
使用块级元素搭建页面的骨架，使用行内元素装饰
不知道使用什么元素的时候 就用div
不知道用什么行内元素的时候就用span
![APP强制更新(uni-app)项目要求：解决思路：效果图：具体代码：总结[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)