什么是浏览器

浏览器是安装在电脑里面的一个软件, 能够将网页内容呈现给用户查看,并让用户与网页交互的一种软件。 就好比QQ一样都是安装在电脑里面的一个软件, 只不过功能不同而已

常见主流的浏览器如下图:

HTML基础-基本概念_html



​不同的浏览器​​​ 有 ​​不同的浏览器内核​​,浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容,从而导致了浏览器的兼容性问题出现

浏览器

内核

IE

Trident

谷歌

WebKit / Blink

火狐

Gecko

Safarri

WebKit

欧朋

Presto

什么是服务器


  • ​服务器也是电脑​​​,只不过是比我们的电脑​​配置更高​​​ 的电脑,并且​​24小时​​​ 不断电,​​不关机​​ 的计算机
  • 服务器是​​专门用于存储数据​​​ 的电脑,访问者可以​​访问服务器​获得​服务器上存储的资源​
  • 服务器​​一旦关机​​​,访问者就​​无法访问​​,也无法访问服务器中存储的内容


HTML基础-基本概念_服务器_02

访问网页的原理

浏览器请求数据的原理

也就是我们是如何通过浏览器查看网页上的内容的?打开 IE 缓存文件夹,我的文件夹地址如下

C:\Users\Jonathan_Lee\AppData\Local\Microsoft\Windows\Temporary Internet Files

​Jonathan_Lee​​ 为个人电脑的用户名名称,打开之后清空该文件夹的内容

HTML基础-基本概念_HTML5_03

然后在用 IE 打开网页,发现结果如下

HTML基础-基本概念_HTML5_04

发现文件夹下多了很多文件(​​.html​​​、​​.css​​​、​​.js​​​、​​.png​​ 等)仔细观察,不难发现其实这些文件都是被访问在网页上的内容

结论

  • 访问网页其实是有​​真实的、物理文件进行传输的​
  • 网页​​不是一个文件​​​,而是​​一堆文件​​ 组成的
  • 我们之所以平常感觉第二次访问比第一次访问快的原因就是,第一次访问时已经将所有文件​​缓存​​ 到了本地

浏览器请求数据的过程

  1. 按下回车时浏览器根据输入的URL地址发送​​请求报文​
  2. 服务器接收到请求报文,会对​​请求报文​​ 进行处理
  3. 服务器将处理完的结果通过​​响应报文​​ 返回给浏览器
  4. 浏览器​​解析服务器返回的结果​​,将结果显示出来

HTML基础-基本概念_HTML5_05

请求过程验证

  1. 利用chrome浏览器打开一个网页
  2. 打开开发人员工具
  3. 打开 Network 查看请求报文和响应报文

请求报文

一个HTTP请求报文由请求行(request line)、请求头部(header)、空行和请求数据4个部分

HTML基础-基本概念_html_06

响应报文

一个HTTP响应报文由响应行、响应头、响应体组成

HTML基础-基本概念_html_07

HTML基础-基本概念_HTML5_08

什么是URL

我们在浏览器的地址栏中输入的地址其实就是URL

URL格式

URL拆分

  • 网络协议类型 http://
  • 服务器IP地址 127.0.0.1
  • 服务器端口号 80
  • 资源路径 网页在服务器上的路径
  • 资源名称 index.html

URL拆分后每一部分的作用

​服务器IP地址​​​ 和 ​​服务器端口号​​ 它们两的作用

  • 告诉浏览器要去什么地方才能找到对应的服务器,也就是告诉浏览器服务器的详细地址
  • 服务器IP地址相当于现实生活中的地址;例如:湖南省永州市祁阳县
  • 服务器端口号相当于现实生活中的门牌号码;例如:9栋909室
  • 那么如果将地址和门牌号码结合在一起,就是我的详细地址

HTML基础-基本概念_服务器_09

资源名称它的作用

  • 告诉服务器我需要获取哪一个文件

资源名称

  • 需要访问的文件名称

HTML基础-基本概念_服务器_10

HTML基础-基本概念_ip地址_11

补充

  • URL全称 Uniform Resource Locator(统一资源定位符),互联网上的每一个资源都有一个唯一的URL地址
  • 由于IP地址全都是数字,没有任何的含义,比较难以记忆。所以在访问网页时最常见的不是IP地址而是 “域名”(一串有含义的字母 OR 数字)
  • 好比:​​http://www.baidu.com​​​ AND​​http://111.13.100.92:80/​

什么是HTTP协议

HTTP是 Hypertext Transfer Protocol 的缩写, 超文本传输协议

什么是协议

  • 在现实生活中有很多的协议,例如租房协议 / 买卖协议 / 离婚协议
  • 无论是什么协议他们都是一个共同点,就是用来规范 / 约束某一类事物

沟通问题

  • 沟通最常见的问题就是语言不通,例如中国人和美国人沟通,一个人说中文,一个人说英文,如果两个人都不懂中文或者英文,那么就会出现沟通问题
  • 如果要想解决沟通文件,是不是需要先拟定规定,两个人都说中文,或者两个人都说英文,或者请一个既懂中文又懂英文的翻译

HTTP协议是用来规范/约束哪一类事物

  • 浏览器访问网页其实就是去服务器请求数据,所以浏览器需要和服务器沟通,所以也会存在沟通问题
  • HTTP协议就相当于我们让两个人都说中文或者都说英文一样,就是提前规范两个人之间如何沟通,也就是规范 / 约束浏览器和服务器之间如何沟通

其它知识

在Windows系统中如何查看文件的扩展名

  • 默认情况下Windows系统是不显示文件的扩展名的,但是作为一个开发者而言,查看文件的扩展名是我们的必备技能
  • win10:随便打开一个文件夹 -> 点击查看 -> 将文件扩展名的选项勾选上

HTML基础-基本概念_服务器_12

电脑上的一个文件是可以 “同时” 被多个软件打开的,不同的软件打开可能会有不同的效果

  • 例如:同一个 index.html 文件可以被多个浏览器和记事本一起打开
  • 例如:.html 文件通过浏览器打开不可以编辑,通过记事本打开可以编辑

什么是纯文本文件

  • 我们 Windows 电脑上有一款默认安装好的软件叫做记事本这款软件就是专门用来打开纯文本文件的,所以只要​​能够被记事本打开,并且能够正常显示​​​ 的文件都是​​纯文本文件​
  • .html 的文件可以被记事本打开,​​并且能够正常显示​​ 所以 .html 文件是一个纯文本文件