- 客户端(浏览器)
- DNS服务器 域名解析服务器
- www.baidu.com->61.135.169.121
网站如何发布?
1.租一台服务器(阿里云服务器:主机/虚拟服务器) 给这个主机/服务器连接网络(连个网线),联网之后就会有个外网ip地址 (就是别人通过外网的ip可以找到我们的服务器,一般公司都会禁止外网IP访问)
例如,通过本地webstore打开本地的文件地址是
http://localhost:63342/webstore%E5%AD%A6%E4%B9%A0%E6%96%87%E4%BB%B6/JS%E6%AD%A3%E5%BC%8F%E8%AF%BE/%E5%91%A8%E5%95%B8%E5%A4%A9%E8%AF%BE%E4%BB%B6/JavaScript201602-master/20160512_CSS3%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/PPT/%E9%99%84%E4%BB%B6/2%E3%80%81%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7/1%E3%80%81%E4%BD%BF%E7%94%A8border-color%E5%88%B6%E4%BD%9C%E4%B8%89%E8%A7%92%E7%AC%A6%E5%8F%B7.html?_ijt=214ukq11e5l4bismdevhkenfhm
- localhost:本地文件地址
百度的服务器的外网IP:61.135.169.121
2.买一个域名(域名备案)
- 域名有哪些?
- .cn / .com / .net / .org / .wang /.gov……
3.将自己的项目放到服务器上 上传到服务器指定的磁盘上–>FTP上传(上传工具FileZilla)
4.发布项目(网站)一个服务区可以发布多个项目,每个项目各自占一个端口,每一个端口都有对应的端口号(每一个端口号都是唯一的,不能重复的),用端口号来进行区分项目
–>0~65535之间的任意一个数
- 1)发布网站的工具 IIS Apache nginx node
5.域名解析(DNS解析) 把购买的域名和服务器的IP地址关联到一起 以后只要提到域名 就关联的是这个服务器
- DNS服务器:他是一台服务器 是属于全世界的万维网联盟,只要是地球上的域名解析都在他这里进行
www.baidu.com
61.135.169.121www.jd.com
111.206.231.1
HTTP事物
- 请求Request阶段:
- 1.客户端通过域名访问,到DNS服务器上找到对应的外网IP地址
- 2.通过外网IP找到对应的项目服务器
- 3.通过端口号找到服务器上对应的项目,因为在发布项目的时候,就已经将项目文件和端口号对应了
- 响应response阶段:
- 4.服务器将客户端请求的资源文件的 源代码 返回给客户端
- 5.客户端(浏览器)进行解析文件 渲染页面
- 这两步组成了前后交互的模型/过程 “HTTP事物”–>只有请求Request阶段 响应response阶段 都完成 才叫做HTTP事物
URI
- URI:统一资源标识符
- URI=URL+URN
- URL:统一资源定位符
- URN:统一资源名称
一个完整的URL –> https://www.baidu.com:443/xxx/xxx.html?name=hh&age=10#video
- https 传输协议
- 传输协议:HTTP / HTTPS / FTP
- 他是内容传输的媒介(快递公司)
- 客户端通过传输协议把一些信息传给服务器
- 同样 服务端也可以把一些信息返回给客户端
- HTTP:超文本传输协议 除了传输文本之外 还可以传输其他的东西 比如图片 音频 视频(二进制流/base64)
- HTTPS:更安全的HTTP,因为他的传输通道加密了(SSL加密)(一般跟金钱 用户重要信息的网站都会采用HTTPS传输)
- FTP:一般都是将我们的项目文件传到服务器上,采用一些工具 例如上传工具FileZilla
- https 传输协议
www.baidu.com
域名- 一级域名
www.qq.com
一级域名 需要购买 ,二级域名、三级域名自己分配即可 - 二级域名 sport.qq.com
- 三级域名 kbs.sports.qq.com
- 一级域名
- 443 端口号
- 取值范围 0-65535之间的一个数
- HTTP的端口号:80
- HTTPS的端口号:443
- FTP的端口号:21
- webstore 默认的端口号:63342
- 443 端口号
- xxx/xxx.html 文件的目录–请求文件的路径和名称
- 表示的是在当前项目下xxx文件夹下的xxx.html
- /index.html 表示的是当前项目根目录下的index.html文件
- ../index.html 表示的是当前项目上一级目录下的index.html文件
- 在不指定文件目录的时候 默认进入的是index.html(因为一般在发布项目的时候,会指定一个默认的入口文件 一般是index.html或者deflut.html)
- xxx/xxx.html 文件的目录–请求文件的路径和名称
- ?name=hh&age=10 ?+参数
- 1)客户端可以通过 ?+参数 的方式给服务器传递一些信息
- 2)服务器不进行处理,例如之前做H5的时候 根据page=n,展示不同的区域
- 3)处理缓存的问题 传某个参数,但是这个参数服务器不需要 我们用它来做缓存处理 保证每次的URL都不一样 防止缓存 (例如ajax获取数据的拼接)
- #video 哈希值HASH
- 1) 客户端也可以通过这种方式给服务器传数据 (一般不用了)
- 2) 锚点定位
- 3) 通过哈希值HASH 实现页面路由的切换
- #video 哈希值HASH
6.客户端 浏览器 代码解析和页面的渲染
- 开发标准由W3C
- W3C:一个非盈利机构,他就是用来制定编程规范和标准的地方
- 按照浏览器的开发标准和规范开发出来的浏览器 都有一个东西叫引擎 也就是内核
- 我们前端工程师也要按照标准和规范去写代码
- 把符合标准的代码放到标准的浏览器中 通过引擎来渲染
- IE内核(Trident引擎):IE5-11,IE Edge,360,猎豹,百度
- Gecko:火狐
- webkit(V8引擎) 最快的 :谷歌、Safari、QQ
- Presto引擎:欧朋Opera