A. 前端页面由哪三层构成，分别是什么作用是什么
网页分成三个层次，即：结构层、表示层、行为层。结构层（structurallayer）由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”表示层（presentationlayer）由CSS负责创建。CSS对“如何显示有关内容”的问题做出了回答。行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是Javascript语言和DOM主宰的领域。
B. 前端页面由哪些页面构成，作用是什么
前端页面构成：
结构（HTML）、样式（CSS）、逻辑（JavaScript）
C. 前端的认识和理解
WEB前端是由网页设计与制作发展而来的，随着工作的细化，需要有人完成美工图到网页的制作，从而出现了WEB前端开发这个词。WEB前端开发主要是使用HTML、CSS、JavaScript技术，将美工提供的美工图转化为网页。同时，需要顾及SEO以及后台的数据。WEB前端，相当于是一个连接美工、后台以及用户的中间平台。
想入门web前端的伙伴都不太清楚关于web前端开发是什么意思，Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。WEB前端开发主要是使用HTML、CSS、JavaScript技术，将美工提供的美工图转化为网页。
我觉得前端开发就是给企业搭建门户类的网站，以后可以往设计或者更高级的开发师发展，也可以往技术类的管理发展，那么对于未来两年的计划你可以在边上班的时候利用空闲时间还可以多往更高层次的技术方面延伸，每天多学一点，因为技术是不断的更新。
D. 前端页面有哪三层构成，分别是什么作用是什么
最准确的网页设计思路是把网页分成三个层次，即：结构层、样式层、行为层。
HTML：结构层
网页的结构或内容层是该页面的基础HTML代码。正如房屋的框架为房屋的其他部分构建了一个坚实
的基础，HTML的坚实基础创建了一个可以在其上创建网站的平台。
结构层用于存储客户想要阅读或查看的所有内容。HTML结构可以包含文本和图像，它包括访问者用
于浏览网站的超链接。这是在符合标准的HTML5中编码的，可以包括文本，图像和多媒体（视频，音频等）。
网站内容的每个方面都应该在结构层中表示。这允许关闭JavaScript的客户或无法查看整个网站的
CSS访问权限的客户（如果不是所有功能）。
CSS：样式层
该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。这些文件包含有
关如何在Web浏览器中显示文档的样式说明。样式层通常包括基于屏幕大小和设备更改站点显示的
媒体查询。
网站的所有视觉样式都应位于外部样式表中。您可以使用多个样式表，但请记住，每个CSS文件都需
要HTTP请求才能获取它，从而影响站点性能。
JavaScript：行为层
行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改。JavaScript是行为层最
常用的语言，但CGI和PHP也经常被使用。
当开发人员引用行为层时，大多数都是指在Web浏览器中直接激活的层。您可以使用此图层直接与
DOM（文档对象模型）进行交互。在内容层中编写有效的HTML对于行为层中的DOM交互非常重
要。在构建行为层时，应该像使用CSS一样使用外部脚本文件来优化速度和性能。
(4)前端哪三层构成扩展阅读：
分层的一些好处是：
共享资源：当您编写外部CSS或JavaScript文件时，站点上的任何页面都可以使用该文件。如果
您需要对该文件进行更改，也许更新网站上的某些排版样式，则使用该样式表的每个页面都会得到
更改。没有必要单独编辑网站的每个页面，这对于大型网站来说可能是一项艰苦的任务。
下载速度更快：首次由客户下载脚本或样式表后，Web浏览器会对其进行缓存。由于这些共享
资源现在包含在浏览器的缓存中，因此浏览器中请求的其他页面加载速度更快，从而提高了整体页
面速度和性能。
多人团队：如果您有多个人同时在网站上工作，您可以使用允许文件签入和签出的系统，以确
保每个人都使用最新版本。如果样式和行为与结构文档交织在一起，那就更难了。
搜索引擎优化：一个明确分离风格和结构的网站可能会对搜索引擎有更好的表现，因为它们可以更有效地抓取内容并理解页面而不会陷入视觉风格和行为信息。
辅助功能：外部样式表和脚本文件更易于人们和浏览器访问。屏幕阅读器等软件可以更轻松地
处理结构层中的内容，而无需处理无论如何都无法使用的样式。
向后兼容性：使用单独的开发层设计的站点更可能向后兼容，因为无法使用某些CSS样式或禁
用了JavaScript的浏览器和设备仍然可以查看HTML。然后，您可以使用支持它们的浏览器的功能逐
步增强您的网站。
E. Web前端知识体系简介
今天小编要跟大家分享的文章是关于Web前端知识体系简介。Web前端技术由html、css和javascript三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。下面来和小编一起看一看吧！
一、JAVASCRIPT篇
0、基础语法
Javascript基础语法包括：变量定义、数据类型、循环、选择、内置对象等。
数据类型有string,number,boolean,null,undefined,object等。其中，string,number和boolean是基础类型,null和undefined是JS中的两个特殊类型,object是引用类型。
Javascript可以通过typeof来判断基础数据类型，但不能够准确判断引用类型,
因此需要用到另外一个方法，那就是Object的toString,关于数据类型及其判断可以参考以下博客：数据类型详解和判断JS数据类型的四种方法
JS常用的内置对象有Date、Array、RegExp等。一般来讲，Date和Array用的最频繁，正则表达式RegExp是处理字符串的利器。
关于数据和正则表达式的用法可以参考博客：ES5对数组增强的9个API和JS正则表达式精简
1、函数原型链
Javascript虽然没有继承概念，但Javascript在函数Function对象中建立了原型对象prototype，并以Function对象为主线，从上至下，在内部构建了一条原型链。
简单来说就是建立了变量查找机制，当访问一个对象的属性时，先查找对象本身是否存在，如果不存在就去该对象所在的原型连上去找，直到Object对象为止，如果都没有找到该属性才会返回undefined。因此我们经常会利用函数的原型机制来实现JS继承。关于函数原型链可参考博客：JS原型对象和原型链
2、函数作用域
函数作用域就是变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。在JS中没有会块级作用域，只有函数作用域，因此JS中还存在着另外一种怪异现象，那就是变量提升。关于作用域的介绍请参考博客：函数的作用域和作用域链
3、函数指针this
this存在于函数中，它指向的是该函数在运行时被调用的那个对象。在实际项目中，遇到this的坑比较多，因此需要对this作深入的理解。
Function对象还提供了call、apply和bind等方法来改变函数的this指向，其中call和apply主动执行函数，bind一般在事件回调中使用，而call和apply的区别只是参数的传递方式不同。关于call,apply和bind的用户请参考博客：详解JS的call,apply和bind
4、构造函数new
JS中的函数即可以是构造函数又可以当作普通函数来调用，当使用new来创建对象时，对应的函数就是构造函数，通过对象来调用时就是普通函数。
普通函数的创建有：显式声明、匿名定义、newFunction()等三种方式。
当通过new来创建一个新对象时，JS底层将新对象的原型链指向了构造函数的原型对象，于是就在新对象和函数对象之间建立了一条原型链，通过新对象可以访问到函数对象原型prototype中的方法和属性。new的详细介绍请参考博客：理解JS中的new运算符
5、闭包
闭包其实是一个主动执行的代码块，这个代码块的特殊之处是可以永久保存局部变量，但又不污染全局变量，可以形成一个独立的执行过程，因此我们经常用闭包来定义组件。
关于闭包的介绍请参考：干货分享：让你分分钟学会JS闭包
6、单线程和异步队列
setTimeout和setInterval是JS内置的两个定时器，使用很简单，但这两个方法背后的原理却不简单。
我们知道，JS是单线程语言，在浏览器中，当JS代码被加载时，浏览器会为其分配一个主线程来执行任务(函数)，主线程会形成一个全局执行环境，执行环境采用栈的方式将待执行任务按顺序依次来执行。
但在浏览器中有一些任务是非常耗时的，比如http请求、定时器、事件回调等，为了保证其他任务的执行效率不被影响，JS在执行环境中维护了一个异步队列(也叫工作线程)，并将这些任务放入队列中进行等待，这些任务的执行时机并不确定，只有当主线程的任务执行完成以后，才会去检查异步队列中的任务是否需要开始执行。
这就是为什么setTimeout(fn,0)始终要等到最后执行的原因。关于单线程和异步队列问题请参考：setTimeout(0)
7、异步通讯Ajax技术
Ajax是浏览器专门用来和服务器进行交互的异步通讯技术，其核心对象是XMLHttpRequest,通过该对象可以创建一个Ajax请求。为了防止XSS攻击，浏览器对Ajax做了限制，不允许Ajax跨域请求服务器,就是只能访问当前域名下的url。
当然，如果确信你的站点不存在跨域的风险，可以在服务端主动开启跨域请求，也可以通过CORS或JSONP来实现。
JSONP是利用脚本(script)跨域能力来模拟Ajax请求。
CORS是一个W3C标准，全称是"跨域资源共享"(Cross-originresource
sharing)。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。关于CORS的介绍请参考：跨域资源共享
CORS详解
8、DOM对象document
document对象里保存着整个Web页面dom结构，在页面上所有的元素最终都会映射为一个dom对象。
document也提供了很多api来查找特定的dom对象，比如getElementById,querySelector等等。
9、事件系统Event
事件是用户与页面交互的基础，到目前为止，DOM事件从PC端的鼠标事件(mouse)发展到移动端的触摸事件(touch)
和手势事件(guesture)
由于DOM结构可能会多层嵌套，因此也衍生出了两种事件流：事件捕获和事件冒泡，后者最常用。利用事件冒泡机制可以实现很多功能，比如页面点击统计。关于两种事件流的介绍请参考：事件冒泡和捕获
除此之外，在页面初始化、滚动、隐藏、返回等操作时分别内置了onload/onDOMContentLoaded、onscroll、onvisibility和onhashchange等事件，如果想要捕获这些事件，需要通过addEventLisener/attachEvent来进行绑定。
10、全局对象window
在JS中，当一段JS代码在浏览器中被加载执行，JS引擎会在内容中构建一个全局执行环境，执行环境的作用是保证所有的函数能按照正确的顺序被执行，而window对象则是这个执行环境中的一个全局对象，window对象中内置了很多操作api和对象，document对象就是其中一个。关于JS执行环境的介绍请参考博客：深入理解JS执行细节
二、CSS篇
css是用来对html进行修饰的一门语言。
1、选择器
css的选择器有很多种，常用的有类选择器、标签选择器、ID选择器、后代选择器、群组选择器、伪类选择器(before/after)、兄弟选择器(+~)、属性选择器等等。
2、定位
定位一般有相对定位(relative)、绝对定位(absolute)、固定定位(fixed),
relative和absolute在移动端用的最多，fixed在移动端的兼容性有问题，因此不推荐使用，在移动端替代fixed的方案是
absolute+内部滚动。
3、浮动
设置float为left或right，就能使该元素脱离文档流，向左或向右浮动。一般在做宫格模式布局时会用到，如果子元素全部设置为浮动，则父元素是塌陷的，这时就需要清除浮动，清除浮动的方法也很多，常用的方法是在元素末尾加空元素设置clear:both,
更高级一点的就给父容器设置before/after来模拟一个空元素，还可以直接设置overflow:auto/hidden。除过浮动可以实现宫格模式，行内盒子(inline-block)和table也可以。
4、盒子模型
盒子模型是css最重要的一个概念，也是css布局的基石。
常见的盒子模型有块级盒子(block)和行内盒子(inline-block)，盒子最关键的几个属性包括margin、border、padding和content,这几个元素可以设置盒子和盒子之间的关系以及盒子和内容之间的关系。还有一个问题是计算盒子的大小，需要注意的是，box-sizing属性的设置会影响盒子的width和height。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
5、Flex布局
Flex布局的容器是一个伸缩容器，首先容器本身会更具容器中的元素动态设置自身大小;然后当Flex容器被应用一个大小时(width和height)，将会自动调整容器中的元素适应新大小。Flex容器也可以设置伸缩比例和固定宽度，还可以设置容器中元素的排列方向(横向和纵向)和是否支持元素的自动换行。有了这个神器，做页面布局的可以方便很多了。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
6、transition(过渡)和transform(旋转)
应用transform可以对元素进行平移(translate)、旋转(rotate)、放大缩小(scale)、倾斜(skew)等处理，而transition使css属性值(包括transform)在一段时间内平滑的过渡。使用transition和transform就可以实现页面的滑动切换效果。
7、动画Animation
Animation首先需要设置一个动画函数，然后以这个动画的方式来改变元素的css属性之的变化，动画可以被设置为永久循环演示。
和transition相比，animation设置动画效果更灵活更丰富，二者还有一个区别是：transition只能通过主动改变元素的css值才能触发动画效果，而animation一旦被应用，就开始执行动画。
8、Sprite图
对于大型站点，为了减少http请求的次数，一般会将常用的小图标排到一个大图中，页面加载时只需请求一次网络，然后在css中通过设置background-position来控制显示所需要的小图标。
9、字体图标iconfont
所谓字体图标就是将常用的图标转化为字体资源存在文件中，通过在CSS中引用该字体文件，然后可以直接通过控制字体的css属性来设置图标的样式。
三、HTML篇
1、Web语义化和SEO
html
常规标签有html,head,body,div,span,table,ul,ol,dl,p,b,h1~h6,strong,form,input,img,em,i
等等，另外html5还新增了很多语义化的标签，比如header,acticle,aside,section,footer,audio,radio
等等。
Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。
SEO是指在了解搜索引擎自然排名机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目标。
搜索引擎通过爬虫技术获取的页面就是由一堆html标签组成的代码,，人可以通过可视化的方式来判断页面上哪些内容是重点，而机器做不到。但搜索引擎会根据标签的含义来判断内容的权重，因此，在合适的位置使用恰当的标签，使整个页面的语义明确，结构清晰，搜索引擎才能正确识别页面中的重要内容，并予以较高的权值。比如h1~h6这几个标签在SEO中的权值非常高，用它们作页面的标题就是一个简单的SEO优化。
2、本地存储
本地存储最原始的方式就是cookie,cookie是存放在本地浏览器的一段文本，数据以键值对的形式保存，可以设置过期时间。但是cookie
不适合大量数据的存储，因为每次请求一次页面，cookie都会发送给服务器，这使得cookie
速度很慢而且效率也不高。因此cookie的大小被限制为4k左右(不同浏览器可能不同,分HOST)，如下所示：
·Firefox和Safari允许cookie多达4097个字节，包括名(name)、值(value)和等号。
·Opera允许cookie多达4096个字节，包括：名(name)、值(value)和等号。
·InternetExplorer允许cookie多达4095个字节，包括：名(name)、值(value)和等号。
在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。
html5提供了两种在客户端存储数据的新方法：localStorage和sessionStorage,它们都是以key/value
的形式来存储数据，前者是永久存储，后者的存储期限仅限于浏览器会话(session),即当浏览器窗口关闭后，sessionStorage中的数据被清除。
localStorage的存储空间大约5M左右(不同浏览器可能不同，分
HOST)，这个相当于一个5M大小的前端页面的数据库，相比于cookie可以节约带宽，但localStorage在浏览器隐私模式下是不可读取的，当存储数据超过了localStorage的存储空间后会抛出异常。
此外，H5还提供了逆天的Websql和indexedDB,允许前端以关系型数据库的方式来存储本地数据，相对来说，这个功能目前应用的场景比较少，此处不作介绍。
3、浏览器缓存机制
浏览器缓存机制是指通过HTTP协议头里的Cache-Control(或Expires)和Last-Modified(或
Etag)等字段来控制文件缓存的机制。
Cache-Control用于控制文件在本地缓存有效时长。最常见的，比如服务器回包：Cache-Control:max-age=600
表示文件在本地应该缓存，且有效时长是600秒(从发出请求算起)。在接下来600秒内，如果有请求这个资源，浏览器不会发出HTTP
请求，而是直接使用本地缓存的文件。
Last-Modified是标识文件在服务器上的最新更新时间。下次请求时，如果文件缓存过期，浏览器通过If-Modified-Since
字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改。如果没有修改，服务器返回304告诉浏览器继续使用缓存;如果有修改，则返回200，同时返回最新的文件。
Cache-Control通常与Last-Modified一起使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。
Cache-Control还有一个同功能的字段：Expires。Expires的值一个绝对的时间点，如：Expires:Thu,10Nov
201508:45:11GMT，表示在这个时间点之前，缓存都是有效的。
Expires是HTTP1.0标准中的字段，Cache-Control是HTTP1.1
标准中新加的字段，功能一样，都是控制缓存的有效时间。当这两个字段同时出现时，Cache-Control是高优化级的。
Etag也是和Last-Modified一样，对文件进行标识的字段。不同的是，Etag
的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时，浏览器通过If-None-Match
字段把特征字串发送给服务器，由服务器和文件最新特征字串进行匹配，来判断文件是否有更新。没有更新回包304，有更新回包200。Etag和
Last-Modified可根据需求使用一个或两个同时使用。两个同时使用时，只要满足基中一个条件，就认为文件没有更新。
另外有两种特殊的情况：
·
手动刷新页面(F5)，浏览器会直接认为缓存已经过期(可能缓存还没有过期)，在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。
·
强制刷新页面(Ctrl+F5)，浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存)，在请求中加上字段：Cache-Control:no-cache(或
Pragma:no-cache)，发包向服务重新拉取文件。
4、HTML5离线缓存
HTML5离线缓存又叫Application
Cache，是从浏览器的缓存中分出来的一块缓存区，如果要在这个缓存中保存数据，可以使用一个描述文件(manifest
file)，列出要下载和缓存的资源。
manifest文件是简单的文本文件，它告知浏览器被缓存的内容(以及不缓存的内容)。manifest文件可分为三个部分：
-CACHEMANIFEST-在此标题下列出的文件将在首次下载后进行缓存
-NETWORK-在此标题下列出的文件需要与服务器的连接，且不会被缓存
-FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)
离线缓存为应用带来三个优势：
·离线浏览-用户可在应用离线时使用它们
·速度-已缓存资源加载得更快
·减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源。
5、Canvas和SVG
Canvas通过Javascript来绘制2D图形。Canvas是逐像素进行渲染的。在Canvas
中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG是一种使用XML描述2D图形的语言。SVG基于XML，这意味着SVGDOM中的每个元素都是可用的。你可以为某个元素附加
JavaScript事件处理器。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas和SVG相比，canvas更依赖于分辨率，不支持事件处理器，文本渲染能力弱，比较适合密集型游戏，其中的许多对象会被频繁绘制，而svg则比较适用于类似谷歌地图带有大型渲染区域的应用程序。
以上就是小编今天为大家分享的Web前端知识体系简介的文章，希望本篇文章能够对正在从事Web工作和学习Web前端知识的小伙伴们有所帮助。想要了解更多Web前端知识记得关注北大青鸟Web培训官网。最后祝愿小伙伴们工作顺利！
原文地址：#/onepixel/p/7021506.html
F. Web前端技术有哪些部分组成
今天小编要跟大家分享的文章是关于Web前端技术有哪些部分组成?Web前端技术由html、css和javascript三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。今天小编就来跟大家一起看一看Web前端技术有哪些部分组成，知识体系是什么样的。
一、JAVASCRIPT篇
0、基础语法
Javascript基础语法包括：变量定义、数据类型、循环、选择、内置对象等。
数据类型有string,number,boolean,null,undefined,object等。其中，string,number和boolean是基础类型,null和undefined是JS中的两个特殊类型,object是引用类型。
Javascript可以通过typeof来判断基础数据类型，但不能够准确判断引用类型,
因此需要用到另外一个方法，那就是Object的toString,关于数据类型及其判断可以参考以下博客：数据类型详解和判断JS数据类型的四种方法
JS常用的内置对象有Date、Array、RegExp等。一般来讲，Date和Array用的最频繁，正则表达式RegExp是处理字符串的利器。
关于数据和正则表达式的用法可以参考博客：ES5对数组增强的9个API和JS正则表达式精简
1、函数原型链
Javascript虽然没有继承概念，但Javascript在函数Function对象中建立了原型对象prototype，并以Function对象为主线，从上至下，在内部构建了一条原型链。
简单来说就是建立了变量查找机制，当访问一个对象的属性时，先查找对象本身是否存在，如果不存在就去该对象所在的原型连上去找，直到Object对象为止，如果都没有找到该属性才会返回undefined。因此我们经常会利用函数的原型机制来实现JS继承。关于函数原型链可参考博客：JS原型对象和原型链
2、函数作用域
函数作用域就是变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。在JS中没有会块级作用域，只有函数作用域，因此JS中还存在着另外一种怪异现象，那就是变量提升。关于作用域的介绍请参考博客：函数的作用域和作用域链
3、函数指针this
this存在于函数中，它指向的是该函数在运行时被调用的那个对象。在实际项目中，遇到this的坑比较多，因此需要对this作深入的理解。
Function对象还提供了call、apply和bind等方法来改变函数的this指向，其中call和apply主动执行函数，bind一般在事件回调中使用，而call和apply的区别只是参数的传递方式不同。关于call,apply和bind的用户请参考博客：详解JS的call,apply和bind
4、构造函数new
JS中的函数即可以是构造函数又可以当作普通函数来调用，当使用new来创建对象时，对应的函数就是构造函数，通过对象来调用时就是普通函数。
普通函数的创建有：显式声明、匿名定义、newFunction()等三种方式。
当通过new来创建一个新对象时，JS底层将新对象的原型链指向了构造函数的原型对象，于是就在新对象和函数对象之间建立了一条原型链，通过新对象可以访问到函数对象原型prototype中的方法和属性。new的详细介绍请参考博客：理解JS中的new运算符
5、闭包
闭包其实是一个主动执行的代码块，这个代码块的特殊之处是可以永久保存局部变量，但又不污染全局变量，可以形成一个独立的执行过程，因此我们经常用闭包来定义组件。
关于闭包的介绍请参考：干货分享：让你分分钟学会JS闭包
6、单线程和异步队列
setTimeout和setInterval是JS内置的两个定时器，使用很简单，但这两个方法背后的原理却不简单。
我们知道，JS是单线程语言，在浏览器中，当JS代码被加载时，浏览器会为其分配一个主线程来执行任务(函数)，主线程会形成一个全局执行环境，执行环境采用栈的方式将待执行任务按顺序依次来执行。
但在浏览器中有一些任务是非常耗时的，比如http请求、定时器、事件回调等，为了保证其他任务的执行效率不被影响，JS在执行环境中维护了一个异步队列(也叫工作线程)，并将这些任务放入队列中进行等待，这些任务的执行时机并不确定，只有当主线程的任务执行完成以后，才会去检查异步队列中的任务是否需要开始执行。
这就是为什么setTimeout(fn,0)始终要等到最后执行的原因。关于单线程和异步队列问题请参考：setTimeout(0)
7、异步通讯Ajax技术
Ajax是浏览器专门用来和服务器进行交互的异步通讯技术，其核心对象是XMLHttpRequest,通过该对象可以创建一个Ajax请求。为了防止XSS攻击，浏览器对Ajax做了限制，不允许Ajax跨域请求服务器,就是只能访问当前域名下的url。
当然，如果确信你的站点不存在跨域的风险，可以在服务端主动开启跨域请求，也可以通过CORS或JSONP来实现。
JSONP是利用脚本(script)跨域能力来模拟Ajax请求。
CORS是一个W3C标准，全称是"跨域资源共享"(Cross-originresource
sharing)。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。关于CORS的介绍请参考：跨域资源共享
CORS详解
8、DOM对象document
document对象里保存着整个web页面dom结构，在页面上所有的元素最终都会映射为一个dom对象。
document也提供了很多api来查找特定的dom对象，比如getElementById,querySelector等等。
9、事件系统Event
事件是用户与页面交互的基础，到目前为止，DOM事件从PC端的鼠标事件(mouse)发展到移动端的触摸事件(touch)
和手势事件(guesture)
由于DOM结构可能会多层嵌套，因此也衍生出了两种事件流：事件捕获和事件冒泡，后者最常用。利用事件冒泡机制可以实现很多功能，比如页面点击统计。关于两种事件流的介绍请参考：事件冒泡和捕获
除此之外，在页面初始化、滚动、隐藏、返回等操作时分别内置了onload/onDOMContentLoaded、onscroll、onvisibility和onhashchange等事件，如果想要捕获这些事件，需要通过addEventLisener/attachEvent来进行绑定。
10、全局对象window
在JS中，当一段JS代码在浏览器中被加载执行，JS引擎会在内容中构建一个全局执行环境，执行环境的作用是保证所有的函数能按照正确的顺序被执行，而window对象则是这个执行环境中的一个全局对象，window对象中内置了很多操作api和对象，document对象就是其中一个。关于JS执行环境的介绍请参考博客：深入理解JS执行细节
二、CSS篇
css是用来对html进行修饰的一门语言。
1、选择器
css的选择器有很多种，常用的有类选择器、标签选择器、ID选择器、后代选择器、群组选择器、伪类选择器(before/after)、兄弟选择器(+~)、属性选择器等等。
2、定位
定位一般有相对定位(relative)、绝对定位(absolute)、固定定位(fixed),
relative和absolute在移动端用的最多，fixed在移动端的兼容性有问题，因此不推荐使用，在移动端替代fixed的方案是
absolute+内部滚动。
3、浮动
设置float为left或right，就能使该元素脱离文档流，向左或向右浮动。一般在做宫格模式布局时会用到，如果子元素全部设置为浮动，则父元素是塌陷的，这时就需要清除浮动，清除浮动的方法也很多，常用的方法是在元素末尾加空元素设置clear:both,
更高级一点的就给父容器设置before/after来模拟一个空元素，还可以直接设置overflow:auto/hidden。除过浮动可以实现宫格模式，行内盒子(inline-block)和table也可以。
4、盒子模型
盒子模型是css最重要的一个概念，也是css布局的基石。
常见的盒子模型有块级盒子(block)和行内盒子(inline-block)，盒子最关键的几个属性包括margin、border、padding和content,这几个元素可以设置盒子和盒子之间的关系以及盒子和内容之间的关系。还有一个问题是计算盒子的大小，需要注意的是，box-sizing属性的设置会影响盒子的width和height。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
5、Flex布局
Flex布局的容器是一个伸缩容器，首先容器本身会更具容器中的元素动态设置自身大小;然后当Flex容器被应用一个大小时(width和height)，将会自动调整容器中的元素适应新大小。Flex容器也可以设置伸缩比例和固定宽度，还可以设置容器中元素的排列方向(横向和纵向)和是否支持元素的自动换行。有了这个神器，做页面布局的可以方便很多了。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
6、transition(过渡)和transform(旋转)
应用transform可以对元素进行平移(translate)、旋转(rotate)、放大缩小(scale)、倾斜(skew)等处理，而transition使css属性值(包括transform)在一段时间内平滑的过渡。使用transition和transform就可以实现页面的滑动切换效果。
7、动画Animation
Animation首先需要设置一个动画函数，然后以这个动画的方式来改变元素的css属性之的变化，动画可以被设置为永久循环演示。
和transition相比，animation设置动画效果更灵活更丰富，二者还有一个区别是：transition只能通过主动改变元素的css值才能触发动画效果，而animation一旦被应用，就开始执行动画。
8、Sprite图
对于大型站点，为了减少http请求的次数，一般会将常用的小图标排到一个大图中，页面加载时只需请求一次网络，然后在css中通过设置background-position来控制显示所需要的小图标。
9、字体图标iconfont
所谓字体图标就是将常用的图标转化为字体资源存在文件中，通过在CSS中引用该字体文件，然后可以直接通过控制字体的css属性来设置图标的样式。
三、HTML篇
1、Web语义化和SEO
html
常规标签有html,head,body,div,span,table,ul,ol,dl,p,b,h1~h6,strong,form,input,img,em,i
等等，另外html5还新增了很多语义化的标签，比如header,acticle,aside,section,footer,audio,radio
等等。
Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。
SEO是指在了解搜索引擎自然排名机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目标。
搜索引擎通过爬虫技术获取的页面就是由一堆html标签组成的代码,，人可以通过可视化的方式来判断页面上哪些内容是重点，而机器做不到。但搜索引擎会根据标签的含义来判断内容的权重，因此，在合适的位置使用恰当的标签，使整个页面的语义明确，结构清晰，搜索引擎才能正确识别页面中的重要内容，并予以较高的权值。比如h1~h6这几个标签在SEO中的权值非常高，用它们作页面的标题就是一个简单的SEO优化。
2、本地存储
本地存储最原始的方式就是cookie,cookie是存放在本地浏览器的一段文本，数据以键值对的形式保存，可以设置过期时间。但是cookie
不适合大量数据的存储，因为每次请求一次页面，cookie都会发送给服务器，这使得cookie
速度很慢而且效率也不高。因此cookie的大小被限制为4k左右(不同浏览器可能不同,分HOST)，如下所示：
·Firefox和Safari允许cookie多达4097个字节，包括名(name)、值(value)和等号。
·Opera允许cookie多达4096个字节，包括：名(name)、值(value)和等号。
·InternetExplorer允许cookie多达4095个字节，包括：名(name)、值(value)和等号。
在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。
html5提供了两种在客户端存储数据的新方法：localStorage和sessionStorage,它们都是以key/value
的形式来存储数据，前者是永久存储，后者的存储期限仅限于浏览器会话(session),即当浏览器窗口关闭后，sessionStorage中的数据被清除。
localStorage的存储空间大约5M左右(不同浏览器可能不同，分
HOST)，这个相当于一个5M大小的前端页面的数据库，相比于cookie可以节约带宽，但localStorage在浏览器隐私模式下是不可读取的，当存储数据超过了localStorage的存储空间后会抛出异常。
此外，H5还提供了逆天的websql和indexedDB,允许前端以关系型数据库的方式来存储本地数据，相对来说，这个功能目前应用的场景比较少，此处不作介绍。
3、浏览器缓存机制
浏览器缓存机制是指通过HTTP协议头里的Cache-Control(或Expires)和Last-Modified(或
Etag)等字段来控制文件缓存的机制。
Cache-Control用于控制文件在本地缓存有效时长。最常见的，比如服务器回包：Cache-Control:max-age=600
表示文件在本地应该缓存，且有效时长是600秒(从发出请求算起)。在接下来600秒内，如果有请求这个资源，浏览器不会发出HTTP
请求，而是直接使用本地缓存的文件。
Last-Modified是标识文件在服务器上的最新更新时间。下次请求时，如果文件缓存过期，浏览器通过If-Modified-Since
字段带上这个时间，发送给服务器，由服务器比较时间戳来判断文件是否有修改。如果没有修改，服务器返回304告诉浏览器继续使用缓存;如果有修改，则返回200，同时返回最新的文件。
Cache-Control通常与Last-Modified一起使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。
Cache-Control还有一个同功能的字段：Expires。Expires的值一个绝对的时间点，如：Expires:Thu,10Nov
201508:45:11GMT，表示在这个时间点之前，缓存都是有效的。
Expires是HTTP1.0标准中的字段，Cache-Control是HTTP1.1
标准中新加的字段，功能一样，都是控制缓存的有效时间。当这两个字段同时出现时，Cache-Control是高优化级的。
Etag也是和Last-Modified一样，对文件进行标识的字段。不同的是，Etag
的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时，浏览器通过If-None-Match
字段把特征字串发送给服务器，由服务器和文件最新特征字串进行匹配，来判断文件是否有更新。没有更新回包304，有更新回包200。Etag和
Last-Modified可根据需求使用一个或两个同时使用。两个同时使用时，只要满足基中一个条件，就认为文件没有更新。
另外有两种特殊的情况：
·
手动刷新页面(F5)，浏览器会直接认为缓存已经过期(可能缓存还没有过期)，在请求中加上字段：Cache-Control:max-age=0，发包向服务器查询是否有文件是否有更新。
·
强制刷新页面(Ctrl+F5)，浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存)，在请求中加上字段：Cache-Control:no-cache(或
Pragma:no-cache)，发包向服务重新拉取文件。
4、HTML5离线缓存
HTML5离线缓存又叫Application
Cache，是从浏览器的缓存中分出来的一块缓存区，如果要在这个缓存中保存数据，可以使用一个描述文件(manifest
file)，列出要下载和缓存的资源。
manifest文件是简单的文本文件，它告知浏览器被缓存的内容(以及不缓存的内容)。manifest文件可分为三个部分：
-CACHEMANIFEST-在此标题下列出的文件将在首次下载后进行缓存
-NETWORK-在此标题下列出的文件需要与服务器的连接，且不会被缓存
-FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)
离线缓存为应用带来三个优势：
·离线浏览-用户可在应用离线时使用它们
·速度-已缓存资源加载得更快
·减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源。
5、Canvas和SVG
Canvas通过Javascript来绘制2D图形。Canvas是逐像素进行渲染的。在Canvas
中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG是一种使用XML描述2D图形的语言。SVG基于XML，这意味着SVGDOM中的每个元素都是可用的。你可以为某个元素附加
JavaScript事件处理器。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas和SVG相比，canvas更依赖于分辨率，不支持事件处理器，文本渲染能力弱，比较适合密集型游戏，其中的许多对象会被频繁绘制，而svg则比较适用于类似谷歌地图带有大型渲染区域的应用程序。
以上就是小编今天为大家分享的关于Web前端技术有哪些部分组成的文章，希望本篇文章能够对正在从事web前端工作或者学习的小伙伴们有所帮助。想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利！
原文地址：#/onepixel/p/7021506.html
G. web前端页面有哪三层构成，分别是什么作用是什么
最准确的网页设计思路是把网页分成三个层次，即：结构层、样式层、行为层。
HTML：结构层
网页的结构或内容层是该页面的基础HTML代码。
CSS：样式层
该层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。
JavaScript：行为层
行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改
H. web前端开发工程师能够细分为哪几种
我了解的有那种，只写HTML和CSS的，但是我感觉作为一个web前端工程师如果不了解JAVASCRIPT的话，是不完整的
I. 前端框架有哪些
1. Twitter BootStrap （Apache v2.0；响应式）
时髦、直观并且强大的前端框架，让Web开发变得更加容易。
2. Foundation （MIT；响应式）
最先进的响应式前端框架。
3. 960gs（GPL&MIT；响应式）
960gs提供了一个简单的网格系统，适合快速开发。
4. Skeleton（MIT；响应式）
非常漂亮的Web模板，适合响应式、移动友好的开发。
5. 99lime HTML KickStart（Free）
适合网站快速开发的极简HTML构建模块。
6. Kube（Free；响应式）
面向专业人员的CSS框架。
7. Less Framework（MIT；响应式）
自适应的CSS网格系统。
8. Flameinwork（Free）
适合懒人开发者的前端微框架。
9. G5 Framework（Free）
(x)HTML5、CSS、PHP前端开发框架。
10. Easy Framework（Free）
Easy Framework是一个一体化前端解决方案，分structural、 presentational、interactive三层。
11. Blueprint（Free）
一个旨在减少开发时间的前端框架。
12. YAML（Creative Commons）
(x)HTML+CSS框架，适合开发现代化浮动布局。
13. BlueTrip（Free）
一个功能全面、并且美丽的CSS框架，适合于Blueprint搭配使用。
14. YUI3:Grids CSS（BSD）
YUI Grids CSS是最着名的CSS框架之一，是由Yahoo开发小组开发而成。 YUI Grids CSS为开发者提供了预先设置的四种不同页面宽度，六种不同的模板。
15. 52framework（Creative Commons）
对HTML5支持非常好，简单易用。
16. elastiCSS（MIT）
一个基于Web接口和印刷布局的简单CSS框架。
17. Emastic（Free）
一个与众不同的CSS框架。
18. Fluid 960 Gride System（GPL/MIT）
Fluid 960 Grid System的模版是根据Nathan Smith之前的作品而创建的。即960 Grid System：传承了MooTools和jQuery JavaScript libraries的效果。
19. xCSS（MIT）
一个面向对象的CSS框架，能让你的工作流更加简洁。xCSS基于CSS，可以在开发复杂样式时，提供面向对象的工作流。
20. EM CSS Framework（MIT/GPL）
EM CSS Framework提供了一个960px宽 + 12 列网格系统 + CSS的通用样式。