实用篇 | 的可极快搭建的个人网站方式和工作原理

<head>
<meta charset="utf-8">
<title>LINA Show Page</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<div class="header">
<h1>张利娜/ZHANG LINA/장이나 Show Page </h1>
<p>You just need to believe you are a hero </p>
</div>
<div class="navbar">
<a href="#">LINA相关链接:</a>
<a href="https://blog.csdn.net/weixin_44649780?spm=1010.2135.3001.5343">CSDN</a>
<a href="#">Wechart</a>
<a href="#">LinkedIn</a>
<a href="">Github</a>
<a href="https://www.instagram.com/tasteofsummer9/">Instagram</a>
<a href="#" class="right">联系我</a>
</div>
<div class="row">
<div class="side">
<h2>个人介绍 Introduction</h2>
<h5>我的照片 Photo:</h5>
<div>
<img src=lina.jpg width="400" height="500">
</div>
<p> NAME:LINA</p>
<p> Motto：Everything I do is to become a better Lina</p>
<h3>联系方式：</h3>
<p> Phone:(82)01085900063</p>
<p> Email:initializezln@naver.com</p>
<h2>详情介绍：</h2>
<div class="img1" style="height:60px;">
<a href="https://zhanglina94.github.io/background.html">背景资料</a>
</div><br>
<div class="img1" style="height:60px;">
<a href="https://zhanglina94.github.io/professional.html">专业技能</a>
</div><br>
<div class="img1" style="height:60px;">
<a href="https://zhanglina94.github.io/hobby.html">兴趣爱好</a>
</div>
</div>
<div class="main">
<h2><a href="https://zhanglina94.github.io/researchareas.html">研究领域 Research Areas </a></h2>
<h5>致力于人工智能，计算机视觉，自然语言处理，多模态模型算法的研究.</h5>
<h5> Research on Artificial Intelligence, Computer Vision(CV), Natural Language Processing(NLP), and Multimodal modeling algorithms.</h5>
<div class="ai" style="height:500px;">
<a href="https://zhanglina94.github.io/researchareas.html">
<img src="image/ai.png" height="500"/></a>
</div>
<p> <br> </p>
<p> <br> </p>
<br>
<h2>
<a href="https://zhanglina94.github.io/hobby.html">兴趣爱好 Hobbies and Interests</a>
</h2>
<h5>勇于做自己！Be brave and be yourself!</h5>
<div class="keai" style="height:500px;">
<a href="https://zhanglina94.github.io/hobby.html">
<img src="keai.png"/></a>
</div>
</div>
</div>
<div class="footer">
<h2>Copyright©2022 lina 版权所有</h2>
</div>

上传成功之后，就可以直接打开页面啦。

我的页面如图

学新通

手机上也可以查看。

学新通

Github的运行流程：

学新通

二、使用Google site搭建（不用写代码）

2.1.注册Google账号

2.2.打开Google site登录

登录后有很多模板

学新通

选中喜欢的页面。

2.3.可根据自己喜欢的改变页面布局

学新通

可插入想要的类型，增加页面

学新通

改变页面风格

学新通

不光如此，还可以添加自己想要添加的链接照片，自定义模块等等。

编辑完后点击发布

学新通

可自定义域名，我的linatravelphotograph

发布后可在

https://sites.谷歌.com/view/linatravalphotograph/作品

查看！！

三、使用nicepage搭建（不用写代码）

nicepage的优点就是有模板，如果实在不知道要做什么类型的可以多参考。是我喜欢的做的个人网页，对于小白很OK的。

网址：Free Website Builder Software | 10,000 Free Templates

我下载的是客户端

学新通

可以根据自己的喜好随意增加页面

缺点是对于图片上传不能超过5M

学新通

最关键的是想要自己写html或php,css也可以！

❤网页的工作原理

1.静态网页的工作原理

用户在浏览器的地址栏输入要访问的地址并回车，触发这个浏览请求；浏览器将请求发送到Web服务器；Web服务器接受这个请求，并根据请求文件的后缀名判定是否为HTML文件；Web服务器从服务器硬盘的指定位置或内存中读取正确的HTML文件然后将它发送给请求浏览器；用户的浏览器解析这些HTML代码并将它显示出来。

假如从浏览器打开静态网站https://zhanglina94.github.io,具体过程如下：

客户端通过http协议，下载服务器上的html文件，然后去读这个文件
根据html页面中的链接，自上而下的请求，每一个请求是一个链接
图片的话，下载边渲染
访问网站流程框架
通过DNS解析域名，解析为IP地址
tcp/ip三次握手原理
http协议原理（www服务的请求过程）请求报文细节！
实现大规模网站集群架构细节
http协议原理（www服务的响应过程）响应报文细节！
tcp/ip四次挥手过程原理

2.动态网页的工作原理

当用户请求的是一个动态网页时，服务器要做更多的工作才能把用户请求的信息发送回去，服务器一般按照以下步骤进行工作：　

服务器端接受请求。
Web服务器从服务器硬盘指定的位置或内存中读取动态网页文件。
执行网页文件的程序代码，将含有程序代码的动态网页转化为标准的静态页面（HTML）。
Web服务器将生成的静态页面代码发送给请求浏览器。

3. 网页出错

4.关于网站的疑问及答案

3.4.1.有www和没有www网页之间的区别？

区别在于一个是顶级域名，而WWW是二级域名。利用github添加www后，则会出现错误。学新通

这和域名解析有关，详情如4.1。有www和没有www的网站解析的是不同的IP.

☆、关键知识点

1.DNS解析DNS Resolution

如图，参考【1】

DNS（域名服务器）解析是将 IP 地址转换为域名的过程。当配置文件配置为查找所有数字 IP 地址时，Webtrends 会调用网络的 DNS 服务器来解析 DNS 条目。每台计算机都有自己的 IP 地址。IP 地址用四组最多三位数字（称为八位字节）来标识该计算机，每组数字之间用句点分隔。IP 地址记录在日志文件中。在大多数情况下，IP 地址可以翻译成域名。例如，63.88.213.170 转换为 www.webtrends.com。用户可以配置 Webtrends 以查找所有数字 IP 地址。选择该功能后，Webtrends 会调用网络 DNS 服务器以将 IP 地址解析为 DNS 条目。注意：并非所有 IP 地址都可以解析。DNS 服务器有一个层次结构。如果第一台 DNS 服务器无法解析 IP 地址，Webtrends 会调用另一台 DNS 服务器来查找它。它会继续这个过程，直到超时。默认情况下，Webtrends 会在 25 秒后放弃该过程，然后继续下一条记录。

2.tcp/ip三次握手原理 Three-Way Handshake

学新通

三次握手的三个步骤

Step1：建立服务器和客户端之间的连接

首先，建立服务器和客户端之间的连接，因此目标服务器必须具有可以接受和发起新连接的开放端口。客户端节点通过 IP 网络将 SYN（同步序列号）数据包发送到同一网络或外部网络上的服务器。

此 SYN 数据包是客户端希望用于通信的随机序列号（例如，X）。此数据包的目的是询问/推断服务器是否为新连接打开。

Step2：服务端接收到客户端节点的SYN包

当服务器收到来自客户端节点的 SYN 数据包时，它会做出响应并返回一个确认回执——ACK（确认序列号）数据包或 SYN/ACK 数据包。该数据包包括两个序列号。

第一个是ACK one，它由服务器设置为比它从客户端接收到的序列号多一个（例如X 1）。

第二个是服务器发送的SYN，是另一个随机序列号（例如，Y）。

该序列表明服务器正确地确认了客户端的数据包，并且也发送了自己的数据包以进行确认。

Step3：客户端节点接收到来自服务器的 SYN/ACK 并以 ACK 数据包进行响应

客户端节点接收来自服务器的 SYN/ACK 并以 ACK 数据包进行响应。再一次，每一方都必须通过将接收到的序列号加一来确认接收到的序列号。

所以现在轮到客户端通过在序列号（在本例中为 Y 1）上加一来确认服务器的数据包，并将其重新发送到服务器。

完成此过程后，将创建连接并且主机和服务器可以通信。

所有这些步骤都是验证双方发起的序列号所必需的，从而保证连接的稳定性。

由于两台主机都必须确认对方的连接参数，因此可以在启动实际数据传输过程之前快速检测到丢失或乱序的段。

3.HTTP协议的工作原理Hypertext Transfer Protocol (HTTP)

3.1超文本传输协议（HTTP）的含义

超文本传输协议是分布式、协作、超媒体信息系统的应用协议，允许用户在万维网上交流数据。

3.2.HTTP的目的是什么？

HTTP 与 HTML 一起被发明，以创建第一个基于文本的交互式 Web 浏览器：最初的万维网。今天，该协议仍然是使用 Internet 的主要手段之一。

3.3.HTTP 是如何工作的？

作为一种请求-响应协议，HTTP 通过在客户端和服务器之间传输超文本消息，为用户提供了一种与 HTML 文件等 Web 资源进行交互的方式。HTTP 客户端通常使用传输控制协议 (TCP)连接与服务器进行通信。

HTTP 利用特定的请求方法来执行各种任务。所有 HTTP 服务器都使用 GET 和 HEAD 方法，但并非全部都支持这些请求方法的其余部分：

GET 请求完整的特定资源
HEAD 请求没有正文内容的特定资源
POST 将内容、消息或数据添加到现有 Web 资源下的新页面
PUT 直接修改现有的 Web 资源或根据需要创建新的 URI
DELETE 删除指定的资源
TRACE 向用户显示对 Web 资源所做的任何更改或添加
OPTIONS 向用户显示可用于特定 URL 的 HTTP 方法
CONNECT 将请求连接转换为透明 TCP/IP 隧道
PATCH 部分修改了 Web 资源

整体流程如图所示：

学新通

参考文献：

【1】KnowledgeBase - What is DNS Resolution?

这篇好文章是转载于：学新通技术网

实用篇 | 的可极快搭建的个人网站方式和工作原理

一：使用GitHub搭建

Step1：github上新建一个仓库

Step2:上传index.html文件到项目首页

二、使用Google site搭建（不用写代码）

2.1.注册Google账号

2.2.打开Google site登录

2.3.可根据自己喜欢的改变页面布局

三、使用nicepage搭建（不用写代码）

❤网页的工作原理

1.静态网页的工作原理

2.动态网页的工作原理

3. 网页出错

4.关于网站的疑问及答案

☆、关键知识点

1.DNS解析DNS Resolution

2.tcp/ip三次握手原理 Three-Way Handshake

三次握手的三个步骤

Step1：建立服务器和客户端之间的连接

Step2：服务端接收到客户端节点的SYN包

Step3：客户端节点接收到来自服务器的 SYN/ACK 并以 ACK 数据包进行响应

3.HTTP协议的工作原理Hypertext Transfer Protocol (HTTP)

3.1超文本传输协议（HTTP）的含义

3.2.HTTP的目的是什么？

3.3.HTTP 是如何工作的？

参考文献：

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开