|
|
Web前端技术由HTML、CSS三大部分组成。它是一个庞大而复杂的技术系统，其复杂程度不亚于任何后端语言。我们在学习的时候，往往会先从某一点开始，然后不断的接触和学习新的知识点。因此，初学者很难理解整个系统的脉络和结构。本文将简单梳理一下Web前端知识体系，在各个对应的知识点就停下来，不再详细介绍。目的是帮助大家回顾一下自己的知识结构是否完整。如有遗漏或错误，希望大家多多交流。
章
0. 基础语法
基本语法包括：变量定义、数据类型、循环、选择、内置对象等。
数据类型包括,,,null,,等。其中 、 、 是基本类型，null 和 是JS中的两种特殊类型，是引用类型。基本数据类型可以判断，但是引用类型无法准确判断，所以需要使用另一种方法，即数据类型及其判断，可以参考以下博客：数据类型及其四种详解JS判断数据类型的方法
JS中常用的内置对象有Date、Array等，一般来说Date和Array使用频率最高，而正则表达式是处理字符串的利器。关于数据和正则表达式的使用，请参考博客：ES5的9个数组增强API和JS正则表达式简化
1. 函数原型链
虽然没有继承的概念，但是在函数对象中建立了原型对象，内部以对象为主线从上到下构建了一条原型链。
简单来说，就是建立了一个变量搜索机制。当访问一个对象的属性时，首先检查该对象本身是否存在。如果不存在，则去该对象所在的原型中查找，直至找到该对象。如果找不到该财产，将返回。因此，我们经常使用函数的原型机制来实现JS继承。关于函数原型链的信息可以参考博客：JS and Chain
2、功能范围
函数作用域意味着变量在声明它们的函数体中以及在该函数体嵌套的任何函数体中定义。 JS中没有块级作用域，只有函数作用域，所以JS中还有一个奇怪的现象，就是变量提升。关于作用域的介绍可以参考博客：函数作用域和作用域链
3.函数指针this
this 存在于函数中，并指向运行时调用该函数的对象。在实际项目中，遇到这个的陷阱有很多，所以需要对此有深入的了解。
该对象还提供了call、apply、bind等方法来改变函数的this点。调用并apply主动执行该函数。 Bind一般用在事件回调中。 call 和 apply 的区别只是参数传递的方式不同。关于call、apply、bind的用户可以参考博客：JS call、apply、bind详解
4.新建构造函数
JS 中的函数可以是构造函数，也可以作为普通函数调用。使用new创建对象时，对应的函数是构造函数，通过对象调用时，则是普通函数。
创建普通函数有三种方式：显式声明、匿名定义、new()。
当通过new创建新对象时，JS底层将新对象的原型链指向构造函数的原型对象，这样新对象和函数对象之间就建立了原型链，函数对象可以可以通过新对象来访问。原型中的方法和属性。 new的详细介绍可以参考博客：理解JS中的new运算符
5. 关闭
闭包实际上是一个主动执行的代码块。该代码块的特殊之处在于它可以永久保存局部变量而不污染全局变量，并且可以形成独立的执行过程。因此，我们经常使用闭包来定义组件。
关于闭包的介绍可以参考：分享有用的资料：让你分分钟学会JS闭包
6. 单线程和异步队列
和 是 JS 内置的两个定时器。它们使用起来非常简单，但这两种方法背后的原理并不简单。
我们知道JS是单线程语言。在浏览器中，当JS代码加载时，浏览器会分配一个主线程来执行任务（函数）。主线程会形成一个全局的执行环境，执行环境使用了栈。待执行的任务按顺序执行。
然而浏览器中有一些任务是非常耗时的，比如http请求、定时器、事件回调等，为了保证其他任务的执行效率不受影响，JS维护了一个异步队列（也称为工作队列）在执行环境中。线程）并将这些任务放入队列中等待。这些任务的执行时间尚未确定。只有当主线程的任务执行完成后，才会检查异步队列中的任务是否需要开始执行。
这就是为什么(fn,0)总是等到结束才执行。关于单线程和异步队列问题，请参考：（0）
7.异步通信Ajax技术
Ajax是一种异步通信技术，专门用于浏览器与服务器交互。它的核心对象是通过它可以创建 Ajax 请求。为了防止XSS攻击，浏览器对Ajax进行了限制，不允许跨域的Ajax请求到服务器。即只能访问当前域名下的URL。
当然，如果你确定你的网站不存在跨域风险，你可以在服务器上主动启用跨域请求，也可以通过CORS或JSONP来实现。
JSONP利用()跨域能力来模拟Ajax请求。
CORS是W3C标准，全称是“跨域资源共享”（Cross-）。它允许浏览器向跨域服务器发出请求，从而克服了AJAX只能从同源使用的限制。 CORS的介绍请参考：跨域资源共享CORS详解
8.DOM对象
该对象存储了整个网页的dom结构，页面上的所有元素最终都会映射到一个dom对象。它还提供了许多API来查找特定的DOM对象，例如等等。
9. 事件系统事件
事件是用户与页面交互的基础。到目前为止，DOM事件已经从PC端的鼠标事件（mouse）发展到移动端的触摸事件（touch）和手势事件（）。
由于DOM结构可能多层嵌套，因此衍生出两种事件流：事件捕获和事件冒泡，其中后者最为常用。利用事件冒泡机制可以实现很多功能，比如页面点击统计等。两种事件流的介绍请参考：事件冒泡与捕获
另外，页面初始化、滚动、隐藏、返回等操作时，内置了 /、 、 等事件。如果想要捕获这些事件，需要通过/进行绑定。
10. 全局对象
在JS中，当一段JS代码在浏览器中加载并执行时，JS引擎会在内容中构建一个全局的执行环境。执行环境的作用是保证所有的函数能够按照正确的顺序执行，而对象就是这个执行环境中的一个全局对象。对象内置了很多操作API和对象，对象就是其中之一。 JS执行环境介绍请参考博客：深入理解JS执行细节
CSS 文章
css是一种用来修改html的语言。
1. 选择器
CSS 中有多种类型的选择器。常用的有类选择器、标签选择器、ID选择器、后代选择器、组选择器、伪类选择器（/after）、兄弟选择器（+~）和属性。选择器等等。
2、定位
定位一般包括相对定位（）、绝对定位（）、固定定位（固定），最常用在移动端。修复了移动端的兼容性问题，不建议使用。移动端固定的替代方案是+内部滚动。
3. 浮动
将浮动设置为向左或向右将导致元素脱离文档流并向左或向右浮动。一般在制作网格图案布局时使用。如果所有子元素都设置为浮动，则父元素将折叠。这时需要清除浮子。清除浮动的方法有很多种。常见的方法是在元素末尾添加一个空格。在元素上设置clear:both。更高级的方法是给父容器设置 /after 来模拟空元素。也可以直接设置：auto/。除了可以实现网格模式的浮动之外，还可以使用行内框（-block）和表格。
4. 盒子模型
盒模型是CSS中最重要的概念，也是CSS布局的基石。常见的盒子模型包括块级盒子（block）和行内盒子（-block）。盒子最关键的属性包括、、和。这些元素可以设置框之间的关系以及框与内容之间的关系。关系。另一个问题是计算盒子的大小。需要注意的是，box-属性的设置会影响box的宽度和宽度。边距合并仅发生在正常文档流中块框的垂直边距。内联框、浮动框或绝对定位框之间的边距不会合并。
5. 弹性布局
Flex布局的容器是一个可伸缩的容器。首先，容器本身会根据容器内的元素动态设置自己的大小；那么当Flex容器被应用一个尺寸（宽度和）时，容器中的元素将自动调整以适应新的尺寸。 Flex容器还可以设置缩放比例和固定宽度。您还可以设置容器中元素的排列方向（水平和垂直）以及是否支持元素自动换行。有了这个神器，做页面布局就会容易很多。注意，设置为Flex布局后，子元素的float、clear、-align属性将失效。
6.（过渡）和（旋转）
应用程序可以对元素进行平移()、旋转()、缩放(scale)、倾斜(skew)等，从而使CSS属性值(包括)在一段时间内平滑过渡。使用 和 来实现页面的滑动切换效果。
7. 动画
首先，你需要设置一个动画功能，然后使用这个动画来改变元素的CSS属性。动画可以设置为永久循环演示。相比之下，设置动画效果更加灵活、丰富。两者之间的另一个区别是，动画效果只能通过主动改变元素的CSS值来触发，并且一旦应用，动画就开始执行。
8. 图
对于大型网站，为了减少http请求的数量，一般会将常用的小图标排列成大图。页面加载时，只需要请求一次网络，然后通过css中的设置--来控制需要的小图标。
9. 字体图标
所谓字体图标，就是将常用的图标转换成字体资源，存储在文件中。通过在CSS中引用字体文件，可以直接通过控制字体的css属性来设置图标样式。
超文本标记语言
1. Web语义和SEO
常规的html标签包括html、head、body、div、span、table、ul、ol、dl、p、b、h1~h6、form、input、img、em、i等。此外，html5还增加了很多新的标签那些。语义标签，如,,aside,,,audio,radio等。
Web语义是指使用语义上适当的标签，使页面具有良好的结构，页面元素有意义，并且易于人类和搜索引擎理解。
SEO是指在了解搜索引擎自然排名机制的基础上，对网站进行内部和外部的调整和优化，提高网站关键词在搜索引擎中的自然排名，获得更多的曝光度，吸引更多的目标客户点击。访问网站以实现网络营销和品牌建设的目标。
搜索引擎通过爬虫技术获取的页面是由一堆HTML标签组成的代码。人可以直观地确定页面上的哪些内容是关键点，但机器不能。然而，搜索引擎会根据标签的含义来判断内容的权重。因此，在适当的位置使用适当的标签，使得整个页面语义清晰、结构清晰。只有这样，搜索引擎才能正确识别页面中的重要内容并给予其较高的排名。重量值。例如，标签h1~h6在SEO中的权重非常高。使用它们作为页面标题是一个简单的 SEO 优化。
2、本地存储
本地存储最原始的方式就是将一段文本存储在本地浏览器中。数据以键值对的形式保存，并且可以设置过期时间。但它不适合存储大量数据，因为每次请求一个页面时，都会将其发送到服务器，这使得速度非常慢且效率低下。因此大小限制在4k左右（不同浏览器可能不同，分为HOST），如下图：
在所有浏览器中，任何超过限制的大小都会被忽略并且永远不会设置。
HTML5 提供了两种在客户端存储数据的新方法： 浏览器窗口关闭后，其中的数据被清除。
存储空间约5M（不同浏览器可能不同，分为HOST）。这相当于一个5M前端页面的数据库。与数据库相比，可以节省带宽，但在浏览器隐私模式下不可读。当存储的数据超过存储空间时会抛出异常。
此外，H5还提供了令人难以置信的总和，允许前端将本地数据存储在关系数据库中。相对而言，该功能目前使用场景还比较少，这里不再介绍。
3.浏览器缓存机制
浏览器缓存机制是指通过HTTP协议头中的Cache-（或）和Last-（或Etag）字段来控制文件缓存的机制。
缓存 - 用于控制文件在本地缓存中的有效时间。最常见的，比如服务器的返回包：Cache-:max-age=600，表示该文件应该缓存在本地，有效期为600秒（从发出请求的时间算起）。在接下来的600秒内，如果请求该资源，浏览器将不会发出HTTP请求，而是直接使用本地缓存的文件。
Last-标识服务器上文件的最新更新时间。在下一次请求时，如果文件缓存过期，浏览器将通过 If--Since 字段携带此时间并将其发送到服务器。服务器会比较时间戳来判断文件是否被修改。如果没有修改，服务器返回304告诉浏览器继续使用缓存；如果有修改则返回200并返回最新的文件。
Cache-通常与Last-一起使用。一是用来控制缓存有效时间，二是缓存过期后向服务查询更新。
Cache-还有一个具有相同功能的字段： 。该值为绝对时间点，如：Thu, 10 Nov 2015 08:45:11 GMT，表示该时间点之前缓存有效。 |
|
