发布网站
获取主机服务和域名
主机服务——在主机服务提供商的Web服务器上租用文件空间,服务器会提供Web用户需求的内容。
域名——一个可以让人们访问的独一无二的地址,可以从域名注册商租界域名。
一个文件传输协议程序——用主机服务商提供的信息登录web服务器,然后就可以看到本地文件和服务器文件,并且可以进行传输。
寻找主机服务和域名的建议
需要主机服务和域名购买的操作,只需要在网上搜索“主机服务”和“域名”就可以了。
有的公司会同时提供这两种服务
一些免费的服务提供商:Neocities、Blogspot、Wordpress。
使用在线工具Github或Google App Engine在线发布网站的两个工具。免费,但是使用的功能有所限制。
使用CodePen这样基于Web的集成开发环境仿真一个网页的开发环境和视觉效果,对于学习很有帮助。
通过Github发布1.注册github账号
2.新建一个仓库(repository)
3.给自己的仓库取名4.将网站文件夹内容拖拽到资源库(repository),再点击Commit changes。
5.将浏览器转到自己定义的仓库名在线查看自己的网站。
(注:这一步在我实际操作过程中发现网页并没有按照预想的形式呈现出来,具体原因正在排查。)出错的原因找到了,在将代码上传到github仓库时,index.html文件不能包含在文件夹中,否则的话无法正常显示,然后index.html文件中对css和js样式的路径引用也需要修改,否则的话也会导致样式设置不成功。简单来说就是本地写好的路径在上传到github上的时候不统一,导致自己的网页无法正常显示,所以只要修改路径,问题就解决了。
万维网是如何工作的?
客户端和服务器
连接到互联网的计算机被称为客户端和服务器。
客户端是典型的Web用户入网设备,如链接了wifi的电脑和设备上可联网的软件。
服务器是存储网页,站点和引用的计算机。当客户端设备想要获取一个网页时,一份网页的拷贝将从服务器上下载到客户端上以供显示。
其他部分
仅有客户端和服务器并不能完成全部工作,还有其他部分。
网络链接:允许在互联网上发送和接收的数据。
TCP/IP协议:传输控制协议和因特网互联协议是定义数据如何传输的通信协议。类似于去商店购物所使用的交通方式,比如汽车和自行车。
DNS:域名系统服务器。域名系统服务器像是一本网站通讯录,当在网站中输入一个网址,浏览器获取网页前会查看域名系统。浏览器需要找到存放你想要的网页服务器,才能发送HTTP请求到正确的地方。
HTTP:超文本传输协议是一个定义客户端和服务器交流语言的协议。
组成文件:一个网页有许多文件组成,这些文件有两种类型
代码:网页大体由HTML、CSS、Javascript组成,不过也包含其他技术。
资源:其他组成网页的东西,如音乐、图像、视频等。
到底发生了什么
当在浏览器中输入一个网址的时候:
1.浏览器在域名系统(DNS)服务器上找出存放网页服务器的实际地址。2.浏览器发送HTTP请求到服务器拷贝一份网页到客户端,消息以及客户端和服务器之间的数据传输都是用TCP/IP协议传输的。3.服务器同意客户端的请求之后,会返回一个“200 OK”信息,并将网页文件以数据包的形式传输到浏览器,这意味着可以查看这个网页。4.浏览器将接收到的数据包聚集成完整的网页并呈现出来。
解析组成文件的顺序
当浏览器想服务器发送请求获取HTML文件时,HTML文件通常包含<link>和<script>元素,这些元素分别指向了外部的CSS样式表和JavaScript脚本文件。了解这些文件被浏览器解析的顺序是很重要的:
浏览器首先解析HTML文件,并从中识别出所有的<link>和<script>元素,获取他们指向的外部文件的链接。
继续解析HTML文件的同时,浏览器根据外部的链接向服务器发送请求获取并解析CSS文件和JavaScript脚本文件。
接着浏览器会给解析后的 HTML 文件生成一个 DOM树(在内存中),会给解析后的 CSS 文件生成一个 CSSOM树(在内存中),并且会编译和执行解析后的 JavaScript 脚本文件。
DOM树(文档对象模型树):
DOM树是一种用于表示HTML或XML文档结构的树状数据结构。每个HTML或XML文档都由元素(如标签、文本、属性等)组成,这些元素按照它们在文档中的层次结构排列。DOM树将这些元素以及它们之间的关系表示为树状结构。每个HTML或XML标签都在DOM树中表示为一个节点(Node),这些节点之间的父子关系反映了它们在文档中的嵌套关系。开发者可以使用JavaScript来操作DOM树,以便动态地更新和改变网页的内容和结构。
CSSOM树(CSS对象模型树):
CSSOM树是一种用于表示CSS样式的树状数据结构。它包含了网页中所有的CSS规则、选择器和样式属性。与DOM树类似,CSSOM树也是树状结构,其中每个CSS规则被表示为一个节点,这些节点之间的关系反映了CSS规则的嵌套和继承关系。浏览器使用CSSOM树来计算每个元素的最终样式,以便正确呈现网页。
伴随着构建 DOM 树、应用 CSSOM 树的样式、以及执行 JavaScript 脚本文件,浏览器会在屏幕上绘制出网页的界面;用户看到网页界面也就可以跟网页进行交互了。