因为DOM构造可能会独裁嵌套，是以也衍生出了两种事宜流：事宜捕获和事宜冒泡，后者最常用。应用事宜冒泡机制可以实现很多功能，比如页面点击统计。关于两种事宜流的介绍请参考：事宜冒泡和捕获

除此之外，在页面初始化、滚动、隐蔽、返回等操作时分别内置了onload/onDOMContentLoaded、onscroll、onvisibility和onhashchange等事宜，如不雅想要捕获这些事宜，须要经由过程addEventLisener/attachEvent来进行绑定。

在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+内部滚动。

JS常用的内置对象有Date、Array、JSON,RegExp等。 一般来讲，Date和Array用的最频繁，JSON可以对对象和数组进行序列豢?状序列化，还有一个感化就是实现对象的深拷贝。

3、浮动

设置float为left或right，就能使该元素离开文档流，向左或向右浮动。一般在做宫格模式构造时会用到，如不雅子元素全部设置为浮动，则父元素是塌陷的，这时就须要清除浮动，清除浮动的办法也很多，常用的办法是在元素末尾加空元素设置clear:both, 更高等一点的就给父容器设置before/after来模仿一?空元素，还可以直接设置overflow:auto/hidden。除过浮动可以实现宫格模式，行内盒子(inline-block)和table也可以。

4、盒子模型

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语义化 和 搜刮引擎优化

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语义化是指应用语义恰当的标签，使页面有优胜的构造，页面元素有含义，可以或许让人和搜刮引擎都轻易懂得。

搜刮引擎优化是指在懂得搜刮引擎天然排名机制的基本之上，对网站进行内部及外部的调剂优化，改进网站在搜刮引擎中关键词典天然排名，获得更多的┞饭现量，吸引更多目标客户点击拜访网站，大年夜而达到互联网营销及品牌扶植的目标。

搜刮引擎经由过程爬虫技巧获取的页面就是由一堆html标签构成的代码,，人可以经由过程可视化的方法来断定页面上哪些内容是重点，而机械做不到。 但搜刮引擎会根据标签的含义来断定内容的权重，是以，在合适的地位应用恰当的标签，使全部页面的语义明白，构造清楚，搜刮引擎才能精确辨认页面中的重要内容，并予以较高的权值。比如h1~h6这几个标签在搜刮引擎优化中的权值异常高，用它们作页面的标题就是一个简单的搜刮引擎优化优化。

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

2、页面衬着机制

Canvas和SVG比拟，canvas更依附于分辨率，不支撑事宜处理器，文本衬着才能弱，比较合适密集型游戏，个中典范多对象会被频繁绘制，而svg则比较实用于类似谷歌地图带有大年夜型衬着区域的应用法度榜样。

页面衬着就是浏览器的衬着引擎将html代码根据CSS定义的规矩显示在浏览器窗口中的过程。大年夜致工作道理如下：

• 用户输入网址，浏览器向办事器发出请求，办事器返回html文件;
• 衬着引擎开端载入html代码，并将HTML中的标签转化为DOM节点，生成DOM树;
• 如不雅中引用了外部css文件，则发出css文件请求，办事器返回该文件;
• 如不雅中引用了外部js文件，则发出js文件请求，办事器返回该文件后开端运行;
   2/4   首页 上一页 1 2 3 4 下一页 尾页
  
  

  　　推荐阅读

  　　Top 10 JavaScript编辑器，你在用哪个？

  编辑器和IDE之间的本质差别在于：IDE不只可声调试，并且可以对代码进行概要分析，IDE还支撑应用法度榜样的生命周期治理(ALM)体系。我们在这里评论辩论典范多编辑器至少支撑一个版本控制体>>>详细阅读

  
  

  本文标题：Web前端知识体系精简

  地址：http://www.17bianji.com/lsqh/35870.html

   1/2    1