2015第6周一网摘

网站开发开发大体分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通讯，完成业务逻辑。其核心价值在于对用户体验的追求。能够按以下思路学习系统学习：
基础知识 ：
1. html + css 这部分建议在  w3school 在线教程  上学习，边学边练，每章后还有小测试。 以后能够模仿一些网站作些页面。在实践中积累了一些经验后，能够系统的读一两本书，推荐《head first html 与 css 中文版》，这本书讲的太细了，我没能拿出耐心细读。你能够根据状况斟酌。 
2. javascript 要学的内容实在不少，若是没有其余编程语言的基础的话，学起来可能要费些力，仍是建议先在 w3school上学习。以后建议立刻看《javascript语言精粹》，js是一门很混乱的语言，这本书可以帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深刻学习。糟粕部分能看懂别人写的代码就行，本身就不用尝试了。
进阶 ：
有了以上基础，就能够进行通常的静态网页设计，不过对于复杂的页面还须要进一步学习。
1. css。必看《精通css》，看完这本书你应该对：盒子模型，流动，block，inline，层叠，样式优先级，等概念很是了解了。做为练习能够看下《css艺门之匠》这本书，它对标题，背景，圆角，导航条，table，表单等主题都有详细的介绍。
2. javascript。上面提到内容还不足以让你胜任js编程。在有了基础以后，进一步学习内容包括：
a) 框架。推荐jQuery，简单易用，个人第一web项目就是在w3school简单学习后，直接上手jQuery完成的，真的很难简单，很好用。jQuery适用环境有限，对于那些对性能要求很高的页面没法胜任。推荐了解一下 YUI 或百度的 tangram ，都很好用，学习方法也很简单，照着产品文档作几个页面就好了，不用面面俱到，之后遇到问题查文档就好了。框架能够帮你屏蔽浏览器的差别性，让你能更专一与web开发学习的精髓部分。补充： 可使用  codecademy  学习 javascript，jQuery，用户体验真的很好（感谢  TonyOuyang  ）。 
b) javascript 语言范式 。这个名字可能并不恰当，只是我找不到能够描述“面向对象”，“函数式”这个两个概念的概念。javascript不彻底是一个面向对象的语言，它的不少设计理念都有函数编程语言的影子，甚至说若是你不用面向对象，彻底能够把它理解成一门函数式编程语言。javascript的不少语言特性，都是由于他具备函数式语言的特色才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基百科，百度百科会是你的帮手，另外推荐《object oriented javascript》，应该有中文版。对与函数式编程我了解的也不系统，很差多说，能够本身百度一下。
c) javascript 语言内部机制。必须弄清以下概念：js中变量的做用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（通常函数，对象的方法，apply，call），以及四种调用方式下，‘this'指向的是谁。这部份内容你会在《javascript语言精粹》中详细了解。另外，你必须理解json。
d) dom编程，这个web前端工程师的核心技能之一。必读《dom编程艺术》，另外《高性能javascript》这本书中关于dom编程的部分讲的也很好。
e) ajax编程，这是另外一核心技术。ajax建议在网上查些资料，了解这个概念的前因后果，百度百科，维基百科上的内容就足够了。真正编程是很容易的，现在几乎全部框架都对ajax有良好的封装，编程并不复杂。
f) 了解浏览器差别性。这部分包括css和js两部分，浏览器差别内容不少，建议在实践中多多积累。另外对于浏览器的渲染模式，DOCTYPE等内容应该系统学习。
再进一阶 ：
有了以上知识，对于大多数小型网站，你应该已经能够写出可以工做的代码了。但写出能够运行的代码，只是编程的最初级阶段。更高要求大概还有三方面：1易维护，2可测试，3高性能，若是页面流量有要求，那第四个就是，4低流量。
1. 易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的固然就是css,html,js。对于js代码，你最好了解设计模式，重构，MVC等内容。
2. 可测性。js代码可测性的主题，我正在研究，欢迎感兴趣的同窗联系我，共同窗习
3. 高性能。必读《高性能javascript》
4. 低流量。技巧性太强，非一朝一夕之功，很少说

来源： <http://www.zhihu.com/question/19834302>

  HTML5定义：能向后兼容目前UA处理内容的方式。为了让语言更简单，一些老的元素和Attribute会被舍弃。好比一些纯粹用于展示的元素（如big）或Attribute被舍弃，由于他们更适合用CSS来处理。
但UA依然能够支持老旧的属性和元素。这就是为何HTML5标准清楚地划分了给开发的要求和给UA的要求。好比，开发者不该当使用plaintext元素，但UA须要兼容plaintext元素。
既然HTML5已区分对UA和对开发者的要求，不再需将一些特性标记为deprecated了。

举个例子：
div+css必定会学习块状元素和行内元素，但这两个HTML元素概念从字面上却和CSS样式有着很深的联系，这种联系有悖于Web规范中一直倡导的表现和样式分离这种核心理念。
HTML5新规范中，已经淡化了元素的这两种分类，取而代之的方案是更具备语义的HTML元素分类方式，以下：

• 元数据式内容（Metadata content）：<base>、<command>、<link>、<meta>...
  
• 流式内容（Flow content）：<span>、<div>...[注：1]
  
• 章节式内容：<article>、<aside>、<nav>以及<section>
  
• 标题式内容：<h1>~<h6>、<hgroup>
  
• 段落式内容：<span>、<img>...[注：2]
  
• 嵌入式内容：<img>、<iframe>、<svg>、<audio>、<video>、<canvas>...
  
• 交互式内容：<a>、<button>、<select>、<input>...
  
  结论：
  

  前端开发者在HTML5的开发中还继续使用css进行布局，可是更应该结合实际的页面的设计有意识的使用HTML5规范中的内容模型，并经过这些更具备语义的内容模型进行页面的normal flow设计。

  详细的内容请看这里HTML5 Differences from HTML4

  另外w3c上这篇文章也很好《HTML5 Differences from HTML4》 链接-->HTML5 Differences from HTML4

  inline-block和float的区别

  虽然设置浮动跟设置inline-block有些特征相似，但二者的区别仍是很是明显的:

  1.  文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。所以设置inline-block不须要清除浮动。固然，周围元素不会环绕这个元素，你也不可能经过清除inline-block就让一个元素跑到下面去。
  2.  水平位置（Horizontal position）：很明显你不能经过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。可是父元素内元素若是设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这仍是由于浮动元素脱离文档流的关系）。
  3.  垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你能够经过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要缘由。
  4.  空白（Whitespace）：inline-block包含html空白节点。若是你的html中一系列元素每一个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴
  5.  IE6和IE7：Ie67对此属性部分支持。若是你要兼容这些浏览器，必须解决这个问题。这不是个大问题，但值得留意一下。
     
     来源： <http://www.w3cplus.com/css/inline-blocks.html>
      
   

来自为知笔记(Wiz)