前置知识
1.前后端分离的介绍
目前企业级的项目都是基于前后台分离的项目
java ssh ssm jsp(前端页面)
前端工程师：页面的重构(html css js) + 数据交互(使用工具和后台服务交互)
后端工程师：java => 接口
2.B/S架构
基于浏览器和服务器之间的交互
eg： 校园官网：浏览器访问学校服务器
学生管理系统：浏览器访问公司服务器
C/S架构
基于客户端和服务器之间的交互
eg： 桌面上的 QQ 微信 浏览器 ： 客户端 = 服务器端
3.http协议
超文本传输协议
基于请求和响应这种模式
常见请求：get put post delete options
get请求:请求参数放到地址栏
post请求：请求参数放到请求体
常见协议：https协议 ftp sftp file
http请求常见的状态码：
1xx：100 101
2xx：200 请求成功
3xx：304 重定向
4xx：404 找不到资源
403 权限不足
5xx: 500 服务器内部错误
4.URL(统一资源定位符)
唯一的去定位一个资源
http://47.100.226.238:8080/ndex.pngapp/i
http:协议(规定使用哪种协议)
47.100.226.238：ip地址(唯一确定一台主机) isp
8080：端口号(唯一确定一个进程(应用程序))
app/index.png：资源的路径
http://www.baidu.com 域名 (域名解析系统 => DNS )
前端三要素
html 搭建页面骨架
css 修饰页面
javascript 交互
HTML
1.开发环境搭建
编辑器(vscode) 编写代码的地方
sublime 体积小 运行速度快
文本编辑器 没有代码提示以及插件
浏览器(火狐) 代码执行的地方
谷歌 IE
部署环境(apache) 代码部署的地方
三拨人
w3c 制定规范和标准
浏览器厂商 火狐 谷歌 微软
程序员 使用者
2.介绍
作用：搭建页面的骨架
html：超文本标记语言 HyperText Markup Language
html文件后缀名： .html或者.htm
3.html文档结构`
<!-- 文档声明 html5 -->
<!DOCTYPE html>
<!-- html文档的根元素 -->
<html lang="en">
<!-- html文档的头部 定义一些文档的配置 -->
<head>
<!-- 定义文档的字符集 -->
<meta charset="UTF-8">
<!-- 定义IE浏览器的兼容 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 定义了响应式 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 定义了文档的标题 -->
<title>Document</title>
<!-- 定义样式、js -->
</head>
<!-- html文档的体部 -->
<body>
<div>
hello world!
</div>
<div>
你好 世界！
</div>
</body>
</html>
4.语法
1）注释:
快捷键 ctrl+/
注释内容不会被浏览器解析
作用：1.记录你的编程思路
2.便于后期代码的维护
2）元素
双标签元素：元素=开始标签+结束标签+内容+属性
单标签元素：元素=开始标签+属性
3）属性
属性写在开始标签中
属性=属性名+属性值
属性名和属性值之间使用 = 分割
属性值使用 引号(双引号或者单引号) 包起来
核心属性：每一个元素都可以拥有的属性
title：提示信息
id:元素的唯一值(js)
class：类名(css选择器)
style:定义一些样式
…
特有属性：某些元素特有的属性
charset：字符集
src:图片的路径
alt:当图片加载失败的时候，替代图片的文字
…
4）空白、实体
空格：无论有多少空格，浏览器都会按照一个空格来处理
实体：
空格： ；
<: <
>:>
&:&
5.块级元素(搭建页面的骨架)
特点：
1.独占一行空间
2.默认宽度为父元素的100%,高度由内容或者子元素来决定
3.块级元素可以设置宽高
div：无意义的块级元素(没有任何的默认样式)
p：段落 默认有一个margin-top magin-bottom
h1-h6 ：标题 默认有字体大小和字体宽度，外边距margin
ul：无序列表
子元素li
ol:有序列表
子元素li
dl：列表
dt 标题
dd 列表项
6.行内元素(装饰性)
特点：
1）共享一行空间，如果放不下则换行显示
2）默认宽高都由内容决定
3）默认不能设置宽高
span：无意义的行内元素
a：超链接
1.超链接(绝对路径 相对路径)
绝对路径： /
相对路径：./ 当前文档的文件
…/ 上一文档的文件
2.锚点
为目标元素定义一个id值，写一个a标签，给a标签的href属性写上目标元素的#id值
3.发送邮件
href：mailto:邮箱地址
strong：加粗强调
i ：斜体
img：图片
src：图片的路径
alt：当图片加载失败的时候，替代图片的文字
width：宽度
height：高度
7.元素的使用策略
使用块级元素搭建页面的骨架，使用行内元素去装饰
不知道使用什么块级元素的时候 就用div
不知道使用什么行内元素的时候 就用span
8.h5新增的语义化标签
作用：1.能够更好的阅读代码
2.有助于搜索引擎搜索
header
nav
aside
footer
address
details
summary
快捷写法：div.top = div class=“top” /div
div#top = div id=“top” /div
功能元素
9.表格
作用：用来展示数据
table 表格 border边框 width宽度 cellspacing单元格和单元格之间的距离 cellpadding单元格和内容之间的距离 bgcolor背景颜色
thead 表头
tr 行
th 单元格 colspan跨列数 rowspan跨行数
tbody 表内容 align排列方式
tr 行
td 单元格 colspan跨列数 rowspan跨行数
10.表单
作用：用来收集用户信息，与后台交互
http
超文本传输协议
基于请求和响应的这种模式
报文：请求报文、响应报文
请求报文：请求行 请求头 请求体
请求行：请求方式 请求的地址（URL） 协议的版本
请求头：一个一个的键值对
请求体：请求参数
get请求的请求参数不放在请求体中，拼接到URL上
post请求参数放在请求体中
响应报文：响应行 响应头 响应体
响应行：协议的版本 状态码
响应头:一个一个的键值对
响应体:响应的内容
请求参数类型：
http://172.100.1.0:8090/api?username=tom&password=123321
form（输入框 单选按钮 多选按钮 下拉菜单）
表单控件
Input表单控件
Input控件用于接受来自用户的数据
type属性，用于设定控件类型，取值如下：
text 单行文本框
password 密码框，输入的内容将会被遮挡。
checkbox 复选框，必须使用value属性来描述该组件所提交的值，使用checked属性默认选中。
radio 单选按钮，必须使用value属性来描述该控件所提交的值，使用checked属性默认选中。一个单选按钮组中所有控件都应该具有相同的name值，这 样，每次只能选中按钮组中的某一个控件。
submit 提交按钮
reset 重置按钮
file 文件按钮，该控件用于选中文件系统中的某个文件
hidden 隐藏域，该控件不显示在页面中，但是其值会被提交。
image 图像按钮，必须使用src来加载图片，使用alt来声明替换文本。
button 普通按钮
Input表单控件
Input控件用于接受来自用户的数据，其他可用属性如下
name 用于设定控件名和提交数据的属性名
value 用于控件值初始化，可选，涉及到用户输入时，当涉及到选择时，必须选
checked 单选框，复选框默认选中属性
disabled 表示禁用组件，禁用组件的值也不能被提交
size 当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text, password，这时宽度是整数值，表示字符的数目，默认为 20
maxlength 指定可以输入的字符的最大值。适用于控件类型为text,password。
select 下拉菜单
option 每一项
textarea 文本域
button 按钮
lable 用于表示某一表单控件的标题
常见请求
1.OPTIONS（预检请求，探路请求）
返回服务器针对特定资源所支持的HTTP请求方法，也可以利用向web服务器发送‘*’的请求来测试服务器的功能性
2.HEAD
向服务器索与GET请求相一致的响应，只不过响应体将不会被返回。这一方法可以再不必传输整个响应内容的情况下，就可以获取包含在响应小消息头中的元信息。
3.GET（请求参数有大小的限制）
向特定的资源发出请求。它本质就是发送一个请求来取得服务器上的某一资源。资源通过一组HTTP头和呈现数据（如HTML文本，或者图片或者视频等）返回给客户端。GET请求中，永远不会包含呈现数据。
4.POST（post没有对请求参数的限制）
向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。 Loadrunner中对应POST请求函数：web_submit_data,web_submit_form
5.PUT
向指定资源位置上传其最新内容
6.DELETE
请求服务器删除Request-URL所标识的资源
…
Client-IP：提供了运行客户端的机器的IP地址
From：提供了客户端用户的E-mail地址
Host：给出了接收请求的服务器的主机名和端口号
Referer：提供了包含当前请求URI的文档的URL
UA-Color：提供了与客户端显示器的显示颜色有关的信息
UA-CPU：给出了客户端CPU的类型或制造商
UA-OS：给出了运行在客户端机器上的操作系统名称及版本
User-Agent：将发起请求的应用程序名称告知服务器
Accept：告诉服务器能够发送哪些媒体类型
Accept-Charset：告诉服务器能够发送哪些字符集
Accept-Encoding：告诉服务器能够发送哪些编码方式
Accept-Language：告诉服务器能够发送哪些语言
TE：告诉服务器可以使用那些扩展传输编码
Expect：允许客户端列出某请求所要求的服务器行为
Range：如果服务器支持范围请求，就请求资源的指定范围
Cookie：客户端用它向服务器传送数据
Cookie2：用来说明请求端支持的cookie版本
http请求常见的状态码：
100：继续 客户端应当继续发送请求。客户端应当继续发送请求的剩余部分，或者如果请求已经完成，忽略这个响应。
101： 转换协议 在发送完这个响应最后的空行后，将会切换到在Upgrade 消息头中定义的那些协议。只有在切换新的协议更有好处的时候才应该采取类似措施。
102：继续处理 由WebDAV（RFC 2518）扩展的状态码，代表处理将被继续执行。
- 200：请求成功 处理方式：获得响应的内容，进行处理
201：请求完成，结果是创建了新资源。新创建资源的URI可在响应的实体中得到 处理方式：爬虫中不会遇到
202：请求被接受，但处理尚未完成 处理方式：阻塞等待
204：服务器端已经实现了请求，但是没有返回新的信 息。如果客户是用户，则无须为此更新自身的文档视图。 处理方式：丢弃
300：该状态码不被HTTP/1.0的应用程序直接使用， 只是作为3XX类型回应的默认解释。存在多个可用的被请求资源。 处理方式：若程序中能够处理，则进行进一步处理，如果程序中不能处理，则丢弃
301：请求到的资源都会分配一个永久的URL，这样就可以在将来通过该URL来访问此资源 处理方式：重定向到分配的URL
302：请求到的资源在一个不同的URL处临时保存 处理方式：重定向到临时的URL - 304：请求的资源未更新
- 400：非法请求
401：未授权 处理方式：丢弃
403：禁止 处理方式：丢弃 - 404：没有找到 处理方式：丢弃
- 500：服务器内部错误 服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在的源代码出现错误时出现。
501：服务器无法识别 服务器不支持当前请求所需要的某个功能。当服务器无法识别请求的方法，并且无法支持其对任何资源的请求。
502：错误网关 作为网关或者工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。
503：服务出错 由于临时的维护或者过载，服务器当前无法处理请求。这个状况是临时的，并且将在一段时间以后恢复。
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
