开发好的Web前端需要哪些技术_Web前端开发有什么技术

　　Web前端技术是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。下面由学习啦小编为大家整理的Web前端开发技术，希望大家喜欢!

　　Web前端开发技术

　　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属性来设置图标的样式。

　　Web前端开发知识技术

　　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、页面渲染机制

　　页面渲染就是浏览器的渲染引擎将html代码根据CSS定义的规则显示在浏览器窗口中的过程。大致工作原理如下：

　　用户输入网址，浏览器向服务器发出请求，服务器返回html文件;

　　渲染引擎开始载入html代码，并将HTML中的标签转化为DOM节点，生成DOM树;

　　如果中引用了外部css文件，则发出css文件请求，服务器返回该文件;

　　如果中引用了外部js文件，则发出js文件请求，服务器返回该文件后开始运行;

　　渲染引擎继续载入html中的部分的代码，并开始解析前面返回的css文件，然后根据css选择器计算出节点的样式，创建渲染树;

　　3、重绘和回流

　　当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。比如上面的img文件加载完成后就会引起回流，每个页面至少需要一次回流，就是在页面第一次加载的时候。

　　当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

　　从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。

　　会引起重绘和回流的操作

　　添加、删除元素(回流+重绘)

　　隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)

　　移动元素，比如改变top,left,transform的值，或者移动元素到另外一个父元素中。(重绘+回流)

　　对style的操作(对不同的属性操作，影响不一样)

　　还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)

　　4、本地存储

　　本地存储最原始的方式就是 cookie,cookie 是存放在本地浏览器的一段文本，数据以键值对的形式保存，可以设置过期时间。 但是 cookie 不适合大量数据的存储，因为每请求一次页面，cookie 都会发送给服务器，这使得 cookie 速度很慢而且效率也不高。因此cookie的大小被限制为4k左右(不同浏览器可能不同,分HOST)，如下所示：

　　Firefox和Safari允许cookie多达4097个字节，包括名(name)、值(value)和等号。

　　Opera允许cookie多达4096个字节，包括：名(name)、值(value)和等号。

　　Internet Explorer允许cookie多达4095个字节，包括：名(name)、值(value)和等号。

　　在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。

　　html5提供了两种在客户端存储数据的新方法：localStorage 和 sessionStorage, 它们都是以key/value 的形式来存储数据，前者是永久存储，后者的存储期限仅限于浏览器会话(session),即当浏览器窗口关闭后，sessionStorage中的数据被清除。

　　localStorage的存储空间大约5M左右(不同浏览器可能不同，分 HOST)，这个相当于一个5M大小的前端页面的数据库，相比于cookie可以节约带宽，但localStorage在浏览器隐私模式下是不可读取的，当存储数据超过了localStorage的存储空间后会抛出异常。

　　此外，H5还提供了逆天的websql和indexedDB,允许前端以关系型数据库的方式来存储本地数据，相对来说，这个功能目前应用的场景比较少，此处不作介绍。

　　5、浏览器缓存机制

　　浏览器缓存机制是指通过 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, 10 Nov 2015 08:45:11 GMT，表示在这个时间点之前，缓存都是有效的。

　　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)，发包向服务重新拉取文件。

　　6、History路由机制

　　用户访问网页的历史记录通常会被保存在一个类似于栈对象中，即history对象，点击返回就出栈，跳下一页就入栈。 它提供了一些方法来操作页面的前进和后退：

　　window.history.back() 返回到上一个页面

　　window.history.forward() 进入到下一个页面

　　window.history.go([delta]) 跳转到指定页面

　　HTML5 对History Api 进行了增强，新增了两个Api和一个事件，分别是pushState、replaceState 和 onpopstate

　　pushState是往history对象里添加一个新的历史记录，即压栈。

　　replaceState 是替换history对象中的当前历史。

　　当点击浏览器后退按钮或js调用history.back都会触发onpopstate事件, 与其类似的还有一个事件: onhashchange 。

　　onhashchange是老API, 浏览器支持度高, 本来是用来监听hash变化的, 但可以被利用来做客户端前进和后退事件的监听，onpopstate是专门用来监听浏览器前进后退的, 不仅可以支持hash, 非hash的同源url也支持。

　　7、HTML5离线缓存

　　HTML5离线缓存又叫Application Cache，是从浏览器的缓存中分出来的一块缓存区，如果要在这个缓存中保存数据，可以使用一个描述文件(manifest file)，列出要下载和缓存的资源。

　　manifest 文件是简单的文本文件，它告知浏览器被缓存的内容(以及不缓存的内容)。manifest 文件可分为三个部分：

　　– CACHE MANIFEST – 在此标题下列出的文件将在首次下载后进行缓存

　　– NETWORK – 在此标题下列出的文件需要与服务器的连接，且不会被缓存

　　– FALLBACK – 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

　　离线缓存为应用带来三个优势：

　　离线浏览 – 用户可在应用离线时使用它们

　　速度 – 已缓存资源加载得更快

　　减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。

　　8、Canvas和SVG

　　Canvas 通过Javascript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

　　SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。你可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

　　web前端需要掌握的知识

　　掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。

　　学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。

　　学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。

　　了解Unix和Linux的基本知识虽然这两点很基础，但是开发人员了解Unix和Linux的基本知识是有益无害的。

　　了解Web服务器当你对Apache的基本配置，htaccess配置技巧有一些掌握的话，将来必定受益，而且这方面的知识学起来也相对容易。

　　1.需要熟练掌握的技能

　　熟悉版本控制系统的用法熟悉使用一种优秀的版本控制系统，你在实际工作中就会发现精通一种版本控制系统是很幸福的事情。

　　学好Web框架当你掌握了HTML，服务器端脚本语言，CSS和JavaScript后，就应该找一个Web框架加快你的Web开发速度，使用框架可以节约你很多时间，如果你使用PHP，可选的框架有CakePHP，CodeIgniter，Zend等，Python程序员喜欢使用Django和 webpy，Ruby程序员喜欢使用RoR。

　　对于初学开发人员来说，以上知识是不是看起来很复杂，其实，当你一步步学习并为企业开发成功案例时，你会发现一切都是有意义的付出。

　　2.较强的视觉设计

　　前端技术包括4个部分：前端美工、浏览器兼容、CSS、HTML“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等等.

　　根据该词可以做这样的理解,用互联网来做比喻,凡是通过浏览器到用户端计算机的统称为前端技术.相反存贮于服务器端的统称为后端技术.