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)