前端通识

HTML 是超文本标记语言。之所以被称为“超文本”，是因为它不仅仅适用于纯文字，还可以对图片、音乐等超出文本的内容进行标记。

文件格式

HTML

CSS的全称是“层叠CSS文件”，用于定义如何显示HTML元素或XML元素，比如指定文字的颜色、大小、字体，以及按钮或输入框的样式等，然后将其插入到HTML 网页的&lt；style&gt；标签中，这样展示出来的就是 CSS 设置的风格了。

代码结构

CSS

是用来控制网页的行为效果的，即内容应该如何对事件做出反应。例如它可以设置鼠标悬停效果、在客户端验证表单、显示警告框、设置Cookie等。

通过嵌入 HTML 中来实现自身功能

JavaScript

前端语言构成

Java

PHP

...

后端数据的逻辑处理和规则运算工作

用户界面：即用户看到的界面，主要包括地址栏、前进和后退按钮、书签等，也就是浏览器上除了用来显示所请求页面的主窗口之外的其他部分

渲染引擎：用来解析并渲染所请求的内容，即在浏览器窗口中显示所请求的内容，比如使用PDF查看器插件就能显示PDF文档。渲染引擎是每一个浏览器的核心部分，所以渲染引擎也称为浏览器内核

浏览器引擎：用来查询及操作渲染引擎的接口，这也是一个核心功能，相当于浏览器的动力装置。

JavaScript解释器：用来解释并执行JavaScript代码的工具。

数据存储：浏览器需要在硬盘中保存类似Cookie、缓存的各种数据，其是一种客户端存储技术。

其他组件。

主要组件

主流浏览器：拥有独立内核的浏览器被称为主流浏览器。

壳浏览器：在某个浏览器内核之上增加相应的辅助功能，并改变其名称与外观的浏览器，比如360极速浏览器、UC浏览器、搜狗浏览器、猎豹浏览器、QQ浏览器、2345浏览器等。

主浏览器

浏览器

TCP/IP 协议，指传输控制协议/网际协议（Transmission ControlProtocol/Internet Protocol），是用于因特网（Internet）的通信协议，定义了电子设备（比如计算机）如何连入因特网，以及数据如何在它们之间传输的标准。

浏览器展示网页内容，需要从服务器获取网页数据，这时候就需要从浏览器（相当于客户端）发起HTTP请求到服务端，而该请求是基于TCP/IP协议才能生效的。

TCP/IP协议

HTTP协议，即超文本传输协议（HyperText Transfer Protocol），是互联网上应用最为广泛的一种网络协议。浏览器获得了服务器的数据信息之后，该数据信息可能是散乱无序的，如何规范地按照设计者的期望展示给用户呢？这就用到了HTTP协议。HTTP协议是在TCP/IP协议基础之上建立起来的，其初衷是为了提供一种发布和接收HTML页面的方法。

HTTP协议

工作过程

相关的协议和概念

如果把计算机比作房间，那么 IP 地址就是房间的地址。

IP地址

为对应的 IP 地址指定的一个容易记住的名字，就是域名，例如“google.com”“baidu.com”“163.com”等就是域名。注意，如果域名前面加上“www”，就不再是域名了，而是网站名。

域名

网站名是由“服务器名+域名”组成的，比如某网站的域名是“sitename.com”（此网站域名为虚构，与现实中的任何网站无关，下文同），因为想建立一个万维网的服务器，所以就有了网站名“www.sitename.com”。

网站名

URL即统一资源定位符，也就是我们平时说的网址。URL的构成为“IP或域名+端口号+资源位置+参数+其他”。

URL

IP地址、域名、网站名、URL、端口

缓存即数据交换的缓冲区，简单说就是临时存储数据的地方，其可以存储一些高频数据的副本。缓存无处不在，有浏览器端的缓存、服务器端的缓存、数据库的缓存等。

缓存

倘若我们在电脑上使用账号、密码登录过某网站，那么下次进入该网站时通常会自动登录。这其实就是浏览器的Cookie和Session在起作用。

比如用户登录一次，就会生成Session文件，保存到服务器中，并对应生成SessionID，保存到Cookie 文件中。Cookie文件是被保存在客户端中的，其可以在浏览器目录下被查询到。这样下次同一个用户在同一个用户端上登录时，就能够通过Cookie文件中的Session ID，将登录资料调用出来。需要注意的是，如果浏览器禁用了Cookie，那么同时Session也会失效。

Cookie和Session

缓存与 Cookie、Session 的主要差别在于：缓存的内容比后两者更广泛、数量更大，比如会话信息、秒杀商品、热点新闻、热门商品等需要频繁查询的信息，都会保存在缓存中。

缓存、Cookie和Session三者的对比

缓存、Cookie、Session

页面加载

前端