Web、网页、浏览器

Web

Web（World Wide Web）即全球广域网，也称为万维网。

我们常说的Web端就是网页端。

网页

网页是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。

我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页。

浏览器

浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。

Web标准

W3C组织

W3C：World Wide Web Consortium，万维网联盟组织，用来制定web标准的机构（组织）。

W3C 万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。

W3C 组织就类似于现实世界中的联合国。

为什么要遵循WEB标准呢？因为很多浏览器的浏览器内核不同，导致页面解析出来的效果可能会有差异，给开发者增加无谓的工作量。因此需要指定统一的标准。

Web 标准

Web标准：制作网页要遵循的规范。
Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。
1、Web标准包括三个方面：

结构标准（HTML）：用于对网页元素进行整理和分类。
表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。
行为标准（JS）：用于定义网页的交互和行为。
根据上面的Web标准，可以将 Web前端分为三层，如下。
2、Web前端分三层：
HTML（HyperText Markup Language）：超文本标记语言。从语义的角度描述页面的结构。相当于人的身体组织结构。
CSS（Cascading Style Sheets）：层叠样式表。从审美的角度美化页面的样式。相当于人的衣服和打扮。
JS：JavaScript。从交互的角度描述页面的行为。相当于人的动作，让人有生命力。

3、打个比方：（拿黄渤举例）

HTML 相当于人的身体组织结构：

CSS 相当于人的衣服和打扮：

JS 相当于人的行为：

常见的浏览器

浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。如下图所示：

我们重点需要学习的是 Chrome 浏览器。

浏览器的组成

浏览器分成两部分：

1、渲染引擎（即：浏览器内核）
2、JS 引擎

1、渲染引擎（浏览器内核）

浏览器所采用的「渲染引擎」也称之为「浏览器内核」，用来解析 HTML与CSS。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

渲染引擎是浏览器兼容性问题出现的根本原因。

渲染引擎的英文叫做 Rendering Engine。通俗来说，它的作用就是：读取网页内容，计算网页的显示方式并显示在页面上。

常见浏览器的内核如下：

浏览器	内核
chrome	Blink
欧鹏	Blink
360安全浏览器	Blink
360极速浏览器	Blink
Safari	Webkit
Firefox 火狐	Gecko
IE	Trident

备注：360的浏览器，以前使用的IE浏览器的Trident内核，但是现在已经改为使用 chrome 浏览器的 Blink内核。

另外，移动端的浏览器内核是什么？大家可以自行查阅资料。

2、JS 引擎

也称为 JS 解释器。用来解析网页中的JavaScript代码，对其处理后再运行。

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码。JS 引擎执行代码时会逐行解释每一句源码（转换为机器语言），然后由计算机去执行。所以 JavaScript 语言归为脚本语言，会逐行解释执行。

常见浏览器的 JS 引擎如下：

浏览器	JS 引擎
chrome / 欧鹏	V8
Safari	Nitro
Firefox 火狐	SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-）
Opera	Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-）
IE	Trident

参考链接：主流浏览器内核及JS引擎

浏览器工作原理

浏览器主要由下面这个七个部分组成：

1、User Interface（UI界面）：包括地址栏、前进/后退按钮、书签菜单等。也就是浏览器主窗口之外的其他部分。

2、Browser engine （浏览器引擎）：用来查询和操作渲染引擎。是UI界面和渲染引擎之间的桥梁。

3、Rendering engine（渲染引擎）：用于解析HTML和CSS，并将解析后的内容显示在浏览器上。

4、Networking （网络模块）：用于发送网络请求。

5、JavaScript Interpreter（JavaScript解析器）：用于解析和执行 JavaScript 代码。

6、UI Backend（UI后端）：用于绘制组合框、弹窗等窗口小组件。它会调用操作系统的UI方法。

7、Data Persistence（数据存储模块）：比如数据存储 cookie、HTML5中的localStorage、sessionStorage。

参考链接：（关于浏览器的工作管理，下面这篇文章，是精品中的精品，是必须要知道的）

英文版：How Browsers Work: Behind the scenes of modern web browsers
中文版：中文版：浏览器的工作原理：新式网络浏览器幕后揭秘

认识web和web标准相关推荐

web接口响应时间标准_从零搭建Web应用（二）
1 Java Web 本文将从最基础的HTTP协议开始讲起,介绍如何徒手搭建Web应用,内容如果比较多的话,后面会分成多篇逐步介绍. 2 皇冠上的明珠-Apache 不知道Apache的研发不是好的研 ...
Web 服务系列标准和规范
Web 服务系列标准是一组新兴标准,支持异类信息技术流程和系统间的互操作集成.可以将其视为一种新的具有自包含性和自描述性的 Web 应用程序,能提供从最基本的到最复杂的业务和科学流程的功能和互操作机制 ...
Web 和 Web标准
Web 背景知识--它是如何产生的,什么是 Web 标准技术,它们是如何协同工作的,为什么" Web 开发人员"是一个很好的职业选择,以及您将在本课程中学习哪些最佳做法. Web ...
基于HT for Web的Web SCADA工控移动应用
在电力.油田燃气.供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex.Silverlight甚至Applet这样的重客户端方案,在 ...
python前端用什么架构_Python web世界观——web架构概览（适合传统软件工程师）...
Python web世界观--web架构概览(适合传统程序员) 传统web server面临的问题我们知道传统的web server,一个进程打开socket,监听,来了请求生成新的进程(或线程.或 ...
什么是Web？Web Service、Web API傻傻分不清楚？
前言分享一篇我在edx课程中看到的一篇英文文章,这篇文章详细阐述了Web.Web Server的含义,然后进一步介绍什么是Web API.Web Server.SOAP以及RESTFUL Web A ...
1 网站压力测试工具 WEB性能测试 Web Bench
Web Bench (网站压力测试工具) Web Bench是有名的网站压力测试工具,它是由 Lionbridge公司开发. Web Bench最多可以模拟3万个并发连接去测试网站的负载能力. We ...
asp.net MVC3 无法打开项目文件“E:\我们的项目\Project\HeatingMIS.Web\HeatingMIS.Web.csproj”。此安装不支持该项目类型。...
在vs中打开mvc3项目,虽然装了mvc3,但是还是会遇到莫名其妙的错误,这是我在做开发的时候遇到的一个问题,附带解决方案,和大家分享一下问题描述:无法打开项目文件"E:\我们的项目\Pr ...
jsp到java xml配置,JSP中web配置:web.xml
# re: JSP中web配置:web.xml 2007-07-02 12:24 和田雨 - http://java.sun.com/xml/ns/j2ee" xmlns:j2ee=&quo ...
网页从web服务器受到的威胁,[多选] Web从web服务器方面和浏览器方面受到的威胁主要来自（）。...
[多选] Web从web服务器方面和浏览器方面受到的威胁主要来自(). 更多相关问题 [多选] 多天线技术中,主要的增益包括:() [多选] 关于LTETDD帧结构,哪些说法是正确的() [多选] 参 ...

认识web和web标准