码迷,mamicode.com
首页 > 其他好文 > 详细

2015第6周一网摘

时间:2015-02-03 00:27:08      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:

网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习:
基础知识
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. 低流量。技巧性太强,非一朝一夕之功,不多说
 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对此属性部分支持。如果你要兼容这些浏览器,必须解决这个问题。这不是个大问题,但值得留意一下。
       
     




2015第6周一网摘

标签:

原文地址:http://www.cnblogs.com/doit8791/p/4268891.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!