diff --git a/01-html/01-认识Web.md b/01-html/01-认识Web.md new file mode 100644 index 0000000..6f4e3ea --- /dev/null +++ b/01-html/01-认识Web.md @@ -0,0 +1,22 @@ + + +## Web和网页 + +### Web + +Web（World Wide Web）即全球广域网，也称为万维网。 + +我们常说的`Web端`就是网页端。 + +### 网页 + +**网页是构成网站的基本元素**。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。 + +我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页。 + +### 浏览器 +浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。 + +关于浏览器的详细介绍，可以看下一篇文章。 + + diff --git a/01-html/02-浏览器的介绍.md b/01-html/02-浏览器的介绍.md new file mode 100644 index 0000000..f014866 --- /dev/null +++ b/01-html/02-浏览器的介绍.md @@ -0,0 +1,104 @@ + + +## 常见的浏览器 + +浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。如下图所示： + +![](http://img.smyhvae.com/20191204_1900.png) + +我们重点需要学习的是 Chrome 浏览器。 + +## 浏览器的市场占有份额 + +浏览器的市场占有份额： + +![](http://img.smyhvae.com/20200322_1058.png) + +上面这张图的统计时间是2020年2月。 + +## 浏览器的组成 + +浏览器分成两部分： + +- 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 引擎执行时会逐行解释源码（转换为机器语言），然后由计算机去执行。 + +浏览器本身并不会执行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引擎](https://juejin.im/post/5ada727c518825670b33a584) + +## 浏览器工作原理 + +![](http://img.smyhvae.com/20180124_1700.png) + +1、User Interface 用户界面，我们所看到的浏览器 + +2、Browser engine 浏览器引擎，用来查询和操作渲染引擎 + +3、Rendering engine 用来显示请求的内容，负责解析HTML、CSS + +4、Networking 网络，负责发送网络请求 + +5、JavaScript Interpreter(解析者) JavaScript解析器，负责执行JavaScript的代码 + +6、UI Backend UI后端，用来绘制类似组合框和弹出窗口 + +7、Data Persistence(持久化) 数据持久化，数据存储 cookie、HTML5中的sessionStorage + +参考链接： + +- + + +## 我的公众号 + +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/20200101.png) diff --git a/01-html/01-html标签图文详解（一）.md b/01-html/03-html标签图文详解（一）.md similarity index 100% rename from 01-html/01-html标签图文详解（一）.md rename to 01-html/03-html标签图文详解（一）.md diff --git a/01-html/02-html标签图文详解（二）.md b/01-html/06-html标签图文详解（二）.md similarity index 100% rename from 01-html/02-html标签图文详解（二）.md rename to 01-html/06-html标签图文详解（二）.md diff --git a/01-html/03-HTML5详解.md b/01-html/07-HTML5详解.md similarity index 100% rename from 01-html/03-HTML5详解.md rename to 01-html/07-HTML5详解.md diff --git a/01-html/04-HTML5举例：简单的视频播放器.md b/01-html/08-HTML5举例：简单的视频播放器.md similarity index 100% rename from 01-html/04-HTML5举例：简单的视频播放器.md rename to 01-html/08-HTML5举例：简单的视频播放器.md diff --git a/01-html/05-HTML5详解（二）.md b/01-html/09-HTML5详解（二）.md similarity index 99% rename from 01-html/05-HTML5详解（二）.md rename to 01-html/09-HTML5详解（二）.md index 9bdcb24..957a693 100644 --- a/01-html/05-HTML5详解（二）.md +++ b/01-html/09-HTML5详解（二）.md @@ -95,7 +95,7 @@ console.log('拖拽开始.'); } - // 拖拽离开：鼠标拖拽时离开被拖拽的元素是触发 + // 拖拽离开：鼠标拖拽时离开被拖拽的元素时触发 box.ondragleave = function () { console.log('拖拽离开..'); } @@ -178,7 +178,7 @@ //目标元素的拖拽事件 - // 当被拖拽元素进入是触发 + // 当被拖拽元素进入时触发 two.ondragenter = function () { console.log("来了."); } diff --git a/01-html/06-HTML5详解（三）.md b/01-html/10-HTML5详解（三）.md similarity index 100% rename from 01-html/06-HTML5详解（三）.md rename to 01-html/10-HTML5详解（三）.md diff --git a/01-html/07-HTML基础回顾.md b/01-html/11-HTML基础回顾.md similarity index 100% rename from 01-html/07-HTML基础回顾.md rename to 01-html/11-HTML基础回顾.md diff --git a/04-JavaScript基础/01-JS简介.md b/04-JavaScript基础/01-JS简介.md index 34a5a4f..6a944ec 100644 --- a/04-JavaScript基础/01-JS简介.md +++ b/04-JavaScript基础/01-JS简介.md @@ -40,77 +40,6 @@ JavaScript是世界上用的最多的**脚本语言**。 虽然目前WebApp（Web应用）在功能和性能上的体验远不如Native App（原生应用），但是“在原生App中内嵌一部分H5页面”已经是一种趋势。 -## 浏览器的介绍 - -浏览器是网页运行的平台，常用的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。如下图所示： - -![](http://img.smyhvae.com/20191204_1900.png) - - -### 浏览器的组成 - -浏览器分成两部分： - -- 渲染引擎 - -- JS 引擎 - -1、**渲染引擎**：（浏览器内核） - -浏览器所采用的「渲染引擎」也称之为「浏览器内核」，用来解析 HTML与CSS。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。**渲染引擎是兼容性问题出现的根本原因。** - -常见浏览器的内核如下： - -|浏览器 | 内核| -|:-------------:|:-------------:| -|chrome / 欧鹏 |Blink | -|Safari|Webkit| -|Firefox 火狐|Gecko| -|IE|Trident | - -2、**JS 引擎**： - -也称为 JS 解释器。 用来解析网页中的JavaScript代码，对其处理后再运行。 - -浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行时会逐行解释源码（转换为机器语言），然后由计算机去执行。 - -浏览器本身并不会执行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引擎](https://juejin.im/post/5ada727c518825670b33a584) - -### 浏览器工作原理 - -![](http://img.smyhvae.com/20180124_1700.png) - -1、User Interface 用户界面，我们所看到的浏览器 - -2、Browser engine 浏览器引擎，用来查询和操作渲染引擎 - -3、Rendering engine 用来显示请求的内容，负责解析HTML、CSS - -4、Networking 网络，负责发送网络请求 - -5、JavaScript Interpreter(解析者) JavaScript解析器，负责执行JavaScript的代码 - -6、UI Backend UI后端，用来绘制类似组合框和弹出窗口 - -7、Data Persistence(持久化) 数据持久化，数据存储 cookie、HTML5中的sessionStorage - -参考链接： - - ## JavaScript介绍 ### JavaScript入门易学性 @@ -490,7 +419,7 @@ console.log(a); ## 我的公众号 -想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**。 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： diff --git a/README.md b/README.md index b2ae13b..af0f4e6 100644 --- a/README.md +++ b/README.md @@ -6,11 +6,11 @@ 前端入门和进阶学习笔记。从零开始学前端，做一名精致的前端工程师。持续更新中。本项目的主要作用有： -- 网上的大部分入门教程，都不太适合初学者，本项目争取照顾到每一位入门者的同理心。 +- 1、网上的大部分入门教程，都不太适合初学者，本项目争取照顾到每一位前端入门者的同理心。即使你完全不懂前端，甚至不懂编程，通过这个教程，也能让小白入门。 -- 帮助前端同学提供一个精品学习路线和资源，提高学习效率，少走很多弯路。 +- 2、帮助前端同学提供一个精品学习资源和路线，提高学习效率，少走很多弯路。 -- 可以当做前端字典，随时翻阅，查漏补缺。 +- 3、可以当做前端字典，随时翻阅，查漏补缺。 维护这个项目的初衷，可以看这篇文章：[《裸辞两个月，海投一个月，从Android转战Web前端的求职之路》](https://www.cnblogs.com/qianguyihao/p/8732781.html) @@ -19,13 +19,15 @@ ## 项目指引 -如果你发现文中的部分图片加载不出来，不妨[看这里](https://github.com/qianguyihao/Web/issues/20#issue-390074432)。当然，您也可以直接「下载项目到本地」，通过 markdown 软件（比如 [Typora](https://typora.io/)）打开项目文件，以便正常展示图片。 +由于 GitHub 是国外的网站，访问较慢，如果你发现文中的部分图片加载不出来，不妨[看这里](https://github.com/qianguyihao/Web/issues/20#issue-390074432)。当然，您也可以直接「下载项目到本地」，通过 markdown 软件（比如 [Typora](https://typora.io/)）打开项目文件，在本地查看，以便正常展示图片。 如果你发现本项目有内容上的错误，欢迎提交 issues 进行指正。 ## 学习交流 -关注微信公众号「**千古壹号**」，学习代码之外的技能。扫一扫，你将发现一个全新的世界，而这将是一场美丽的意外： +如果你还想学习**代码之外的技能**，不妨关注我的微信公众号：**千古壹号**。 + +扫一扫，你将发现一个全新的世界，而这将是一场美丽的意外： ![](http://img.smyhvae.com/20190101.png)