【前端开发】HTTP+CCS

超文本传输协议（HTTP）

HTTP (HyperText Transfer Protocol) 是一种应用层协议，用于在分布式、协作式和超媒体信息系统中交换数据。它是万维网（WWW）的核心通信协议，允许客户端（通常是Web浏览器）与服务器之间进行通信以获取网页内容和其他网络资源。以下是HTTP的几个关键特点：

• 请求/响应模型：HTTP是一个基于请求和响应的工作机制。客户端发起一个HTTP请求到服务器，请求可能包括URL、方法（GET, POST, PUT, DELETE等）、报头信息和可选的请求主体；服务器则会返回一个HTTP响应，响应包含状态码（如200表示成功，404表示未找到资源等）、响应头部信息以及通常情况下的响应主体（例如HTML页面或JSON数据）。 HTTP状态码（HTTP Status Code）是服务器在响应客户端请求时返回的标准三数字代码，用以表示请求处理的状态。以下是HTTP状态码的分类和一些常见状态码的详解：

HTTP状态码类别

1. 信息性响应（1xx）
   • 100 Continue：表明客户端可以继续发送请求主体部分。
   • 101 Switching Protocols：服务器已理解并同意切换到另外一种协议。
2. 成功响应（2xx）
   • 200 OK：请求已经成功，请求的数据或文件等资源都正常返回。
   • 201 Created：请求已经被接受，并且一个新资源已被创建。
   • 204 No Content：请求已成功处理，但没有返回任何内容（如执行DELETE操作后）。
3. 重定向（3xx）
   • 301 Moved Permanently：永久性重定向，请求的资源已移动到新的URI，未来的所有请求应使用新的URL。
   • 302 Found：临时重定向，当前请求的资源临时存在于不同的URI下，但也可能被307 Temporary Redirect或308 Permanent Redirect替代。
   • 304 Not Modified：如果客户端有缓存的资源，此响应表明该资源未发生更改，可以直接使用缓存版本。
4. 客户端错误（4xx）
   • 400 Bad Request：请求语法错误，服务器无法理解客户端的请求。
   • 401 Unauthorized：需要用户身份验证，请求未经授权。
   • 403 Forbidden：服务器理解请求，但是拒绝提供服务，通常由于权限问题。
   • 404 Not Found：服务器找不到与请求URI匹配的资源。
   • 405 Method Not Allowed：服务器不支持客户端用于请求的方法（GET、POST等）。
5. 服务器错误（5xx）
   • 500 Internal Server Error：服务器遇到了意外情况，无法完成请求。
   • 501 Not Implemented：服务器不支持请求的功能，无法完成请求。
   • 502 Bad Gateway：作为网关或代理服务器，接收到了无效响应。
   • 503 Service Unavailable：服务器暂时无法处理请求，可能是过载或维护中。
   • 504 Gateway Timeout：作为网关或代理服务器，在等待上游服务器响应时超时。

• 无状态：HTTP是无状态协议，意味着服务器不保留任何关于客户端会话的信息。然而，在实际应用中，通过使用cookies或者HTTP Session等技术可以实现有状态交互。
• 版本：HTTP已经发展了多个版本，如HTTP/1.1（广泛使用），HTTP/2（优化性能，支持多路复用和头部压缩），以及最新的HTTP/3（基于QUIC协议，提供更快更安全的数据传输）。
• 缓存机制：HTTP定义了多种缓存策略来提高性能，减少网络延迟，比如通过Last-Modified、ETag、Cache-Control等头部字段指示资源是否可以被缓存及缓存的有效期。

层叠样式表（CSS）

CSS (Cascading Style Sheets) 是一种样式表语言，用于描述HTML文档或其他XML格式文件的内容呈现方式。CSS的作用在于分离内容和表现，使开发人员能够控制网页布局、颜色、字体、间距等视觉效果，同时保持内容结构清晰且易于维护。

• 选择器：CSS通过各种类型的选择器来定位HTML元素，比如标签选择器、类选择器、ID选择器、属性选择器、伪类选择器等，以指定样式规则应该应用于哪些元素。
• 样式声明：每个CSS规则集由一个或多个选择器加上花括号内的一系列属性声明组成，如 div { color: red; background-color: blue; } 会将所有div元素的文字颜色设为红色，背景色设为蓝色。
• 层叠与继承：CSS遵循“层叠”原则，当多个样式规则应用于同一元素时，按照特定的优先级顺序合并这些规则。此外，子元素可以继承父元素的一些非继承性属性值，如字体、颜色等。
• 布局与定位：CSS提供了盒模型、浮动、Flexbox和Grid布局系统等工具来组织页面布局，以及position属性相关的定位机制来精确控制元素在页面上的位置。
• 响应式设计：CSS3引入了媒体查询功能，使得开发者可以根据设备特性（如屏幕宽度、分辨率、方向等）来调整布局和样式，从而实现响应式Web设计。

综上所述，HTTP确保了Web内容在网络中的正确传输和接收，而CSS则负责内容在用户端的可视化展示。两者共同构建了现代Web体验的基础架构。