12. 做一个自己的网页

我的源代码见：https://github.com/bhu619/myWebserver

我的这篇博客原文地址：https://www.yuque.com/u39624144/zvaea9/lcwhlfvr8t37m32c?singleDoc#

项目的完整原文地址：https://www.yuque.com/u39624144/zvaea9/aqktb26g923rsiv5

---

虽然前端网页并不是这个项目的重点内容，但是既然做了，我还是想能够做一个比较美观的网页，这样也便于之后为这个项目添加更多的功能。首先介绍一些实用的工具，具体 html 语言就不做介绍了，这方面我并不是很了解。我的网页源码也放在了项目中，感兴趣的请访问：https://github.com/bhu619/myWebserver

先来看看我做的页面最终效果：

同时也对移动端网页访问做了适配，效果如下：

Live Preview 插件

Live Preview 是 Visual Studio Code 官方提供的扩展，可以直接在编辑器内部预览 HTML 文件。

安装好以后，右键.html 文件就可以通过：Show Preview 在 VS Code 内部预览了。

HTTP 请求查看

在浏览器中按 F12 打开开发人员工具，找到 网络，就可以查看一个具体的 http 请求的详细信息了：

比如我的某次 http 请求如下，针对 GET /welcome.html 请求了服务器上的页面。以下是对该请求的分析和关键字段解释：

GET /welcome.html HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
DNT: 1
Host: 106.15.36.158:9006
Proxy-Connection: keep-alive
Referer: http://106.15.36.158:9006/7
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 Edg/130.0.0.0

请求方法：GET，表示客户端请求服务器获取资源，在此例中是 /welcome.html 页面。

请求路径： /welcome.html， 表明客户端希望获取服务器上名为 welcome.html 的资源。

HTTP协议版本：HTTP/1.1，表示使用的是 HTTP/1.1 协议。

请求头：

• Accept：告诉服务器，客户端可以接受的资源类型（内容协商）。q 表示优先级，越大越优先。

text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7

• Accept-Encoding：表明客户端支持的压缩格式，以便减少传输内容的大小。gzip 和 deflate 是常用的压缩算法。
• Accept-Language：表示客户端的语言偏好
• DNT：“Do Not Track” 意思是不希望被追踪，1 表示开启了此选项。
• Host：请求的目标服务器和端口号
• Proxy-Connection：指定是否希望通过代理服务器保持连接长时间打开。
• Referer：表明当前请求是从哪个页面跳转过来的。
• Upgrade-Insecure-Requests：表示客户端愿意从非安全 HTTP 跳转到 HTTPS。
• User-Agent：客户端的浏览器和操作系统信息。

实用工具

1. 配色工具：Color Hunt - Color Palettes for Designers and Artists
2. 壁纸：https://wallhaven.cc/