目录
一、Wed基础
1.wed基础概念
web的本意是蜘蛛网和网的意思，在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本（hypertext）、超媒体（超文本，图片，视频）（hypermedia）、超文本传输协议（HTTP）等，简单的讲就是把各种类型的信息和服务无缝连接，提供生动的图形用户界面。
WEB技术指的是开发互联网应用的技术总称，一般包括WEB服务端技术和WEB客户端技术。
2.基础技术架构构成
-
HTML（Hypertext Markup Language）：HTML是一种标记语言，用于创建网页的结构和内容。它使用标签来定义页面上的各个元素，如标题、段落、图像等。
实例如一下：
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>你可以在这里添加更多的内容。</p>
<a href="https://www.******.com">点击这里访问示例网站</a>
<img src="图片路径./**/" type="">
</body>
</html>
-
CSS（Cascading Style Sheets）：CSS用于描述网页的样式和布局。通过CSS，您可以设置网页的字体、颜色、间距、背景等外观属性。
示例如下：
//设置文本颜色：
css
p {
color: red;
}
//设置背景颜色和边框：
css
div {
background-color: #f1f1f1;
border: 1px solid black;
}
//设置字体样式和大小：
css
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: bold;
}
//设置元素居中对齐：
css
div {
text-align: center;
}
//设置元素的阴影效果：
css
img {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
//设置元素的动画效果：
css
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
img {
animation: spin 2s linear infinite;
}
//设置响应式布局：
css
@media screen and (max-width: 600px) {
div {
width: 100%;
float: none;
}
}-
JavaScript：JavaScript是一种脚本语言，用于实现网页的交互和动态效果。它可以处理用户输入、操作DOM元素、发送网络请求等。
以下是一些代表性的JavaScript简单实例代码：
//获取当前日期和时间：
var today = new Date();
var date = today.getDate()+'/'+(today.getMonth()+1)+'/'+today.getFullYear();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+' '+time;
console.log(dateTime);
//实现弹出框：
function showAlert() {
alert("Hello world!");
}
<button onclick="showAlert()">Click me</button>
//动态添加元素：
var para = document.createElement("p");
var node = document.createTextNode("This is a new paragraph.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
//表单验证：
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
<form name="myForm" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
//数组遍历和操作：
var fruits = ["apple", "banana", "orange"];
for (var i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
fruits.push("grape");
console.log(fruits);
//Ajax请求：
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
};
xhttp.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
xhttp.send();-
DOM（Document Object Model）：DOM是一种将HTML文档表示为对象的方式。它允许开发者使用JavaScript来访问和操作网页上的元素和内容。
-
响应式设计：响应式设计是一种使网页能够自适应不同设备和屏幕尺寸的技术。通过使用媒体查询、弹性布局和移动优先设计等技术，可以使网页在不同终端上以最佳方式显示。
-
前端框架和库：除了上述基础技术外，还有许多流行的前端框架和库，如React、Vue.js和Angular等。这些框架提供了一种更高级、更有效的方式来构建交互性和复杂的前端应用程序
3.工作原理
-
客户端发送请求： 当用户在浏览器中输入URL或点击链接时，客户端（通常是浏览器）会向服务器发送HTTP请求。该请求包含了要访问的资源的信息，例如网页、图像或数据等。
-
服务器接收请求： 服务器接收到客户端发送的请求后，开始处理请求。服务器可以是一个物理服务器或者是部署在云上的虚拟服务器。
-
处理请求： 服务器根据请求的类型和目标资源的路径来处理请求。这可能涉及到以下几个步骤：
- 静态资源处理：如果请求的是静态资源（如HTML文件、图像、CSS和JavaScript文件等），服务器直接返回相应的文件给客户端。
- 动态资源处理：如果请求需要动态生成内容（如数据库查询、用户认证等），服务器会将请求发送给后端应用程序进行处理。
-
应用程序处理： 后端应用程序接收到请求后，根据业务逻辑进行处理。它可能会与数据库进行交互、执行计算、验证用户身份等操作。应用程序会生成响应数据。
-
生成响应： 应用程序生成响应数据，通常是HTML、JSON或XML等格式的数据。这些数据包含了要返回给客户端的内容，例如渲染好的网页、API数据等。
-
响应发送给客户端： 服务器将生成的响应数据发送回客户端。响应数据通过HTTP协议传输，并包含响应状态码、响应头部和响应体等信息。
-
客户端渲染和展示： 客户端接收到服务器的响应后，根据响应的内容进行渲染和展示。对于HTML网页，浏览器会解析HTML、CSS和JavaScript，并将其呈现为可视化的页面。
-
交互与更新： 用户在浏览器中与页面进行交互，可能会触发新的请求，从而重新开始上述流程。这可以是用户点击链接、填写表单、发送AJAX请求等。
二、HTTP基础
2.HTTP是什么？
- HTTP定义及由来
- HTTP请求和响应的基本过程
- HTTP版本
- HTTP状态码
2.HTTP请求方法
- GET方法
- POST方法
- PUT方法
- DELETE方法
- HEAD方法
- OPTIONS方法
- CONNECT方法
- TRACE方法
3.HTTP请求消息结构
请求结构分为请求行、请求头、请求体。
4.HTTP响应消息结构
- 状态行
- 响应头
- 响应体
5.HTTP请求头部信息
- Accept
- Accept-Encoding
- Cookie
- User-Agent
- Referer
- Host
6.HTTP响应头部信息
- Host：指定目标服务器的主机名和端口号。
- User-Agent：标识发起请求的用户代理（通常是浏览器）的类型和版本。
- Accept：指定客户端能够接受的响应内容类型。可以是MIME类型或者通配符。
- Accept-Language：指定客户端优先接受的自然语言。
- Accept-Encoding：指定客户端能够接受的内容编码方式，如gzip、deflate等。
- Connection：指定客户端与服务器之间连接的类型，如"keep-alive"表示持久连接。
- Referer：指定发起当前请求的URL，用于告知服务器请求的来源。
- Cookie：包含之前由服务器通过Set-Cookie头部设置的Cookie信息。
- Content-Type：指定请求体的媒体类型，如application/json、multipart/form-data等。
- Content-Length：指定请求体的长度，以字节为单位。
- Authorization：用于在进行身份验证时发送凭证，如基本认证的用户名和密码。
- If-Modified-Since：用于条件GET请求，指定如果资源自指定日期后未被修改，则返回304状态码。
- Origin：用于跨域请求，指定请求的源地址。
- X-Requested-With：标识请求是通过Ajax发送的。
- Cache-Control：指定缓存机制，如max-age、no-cache等。
7.HTTP状态码
- 1xx：信息性状态码
- 2xx：成功状态码
- 3xx：重定向状态码
- 4xx：客户端错误状态码
- 5xx：服务器错误状态码
200 ok,请求已成功，请求所希望的响应头或数据体将随此响应返回。出现此状态码是表示正常状态。
304 Not Modified,如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。
403 Forbidden 服务器已经理解请求，但是拒绝执行它。
404 Not Found 请求失败，请求所希望得到的资源未被在服务器上发现。
500 Internal Server Error 服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。
501 Not Implemented 服务器不支持当前请求所需要的某个功能。当服务器无法识别请求的方法，并且无法支持其对任何资源的请求。
502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。
503 Service Unavailable 由于临时的服务器维护或者过载，服务器当前无法处理请求。这个状况是临时的，并且将在一段时间以后恢复。
301 Moved Permanently 被请求的资源已永久移动到新位置
302 Move Temporarily 请求的资源临时从不同的 URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。
8.HTTP协议的安全机制
- HTTPS工作原理
- SSL证书
- TLS/SSL加密
4822
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
