章摘要：這篇文章將給大家展現一個大致的html的世界，讓大家心里對一個大致的方向以及格式有一個較為大概的了解，內容中可能會出現較為深入的代碼知識，不必驚慌，這些代碼知識以后都會持續在文中講解，想要學習請持續關注我的文章。

html初識：首先，推薦大家2個比較好用的寫html頁面的軟件，editplus和sublime ,在這里，我將使用sublime作為html開發軟件來給大家進行代碼的展示。特別提醒一下，不要使用一些非常強大的專業工具來幫助實現html代碼，不要依賴自動提示，這樣對初期沒有基礎的人來講是一種災難！

在這里，有些同學可能會想找前端的工作，或者說剛接觸這行不久對方向有比較大的一個迷茫的區域，那么，如果想要找到前端的工作。以下這些知識必須要學到一個比較精通的程度：

1.html + div + css:

這是基礎，不必多說。

2.Html5 + css3:

目前最流行的前端頁面技術，除了IE6、7、8以外，IE9及很多瀏覽器已經對h5+css3 有很好的技術支持，css3的出現替代了很多的圖片以及特效，許多效果是JS所難以實現的，我舉個例子：

這是一段普通的一個按鈕的代碼，加了一些普通的css樣式，最后結果如下：

那么，我們如果加上一些css3和h5的樣式呢？話不多，具體代碼貼上：

這一段加上了h5和css3的樣式，最后效果如下：

這樣給客戶的感覺是不是要比第一種普通的好很多呢？自己看著也舒服。

H5給我們增加了很多語義化的標簽，包括selection,nav,article,foot,head等，還對媒體標簽進行了擴增，最重要的是增入了畫布（canvas），svg等效果非常酷炫的一套代碼。但是canvas和svg對JS的要求非常高，甚至會應用到很多的設計模式以及算法。回復java獲取更多相關知識內容。

HP是世界上最好的語言，這是一個老梗。

有不少學習PHP的程序員后來去做了前端開發，畢竟近些年前端開發還是蠻吃香的。

學習PHP不僅僅要學習html，而且還要學習CSS。

CSS是萬維網聯盟在 HTML 4.0 之外提出，目的是為了讓CSS完成樣式與內容的分離。

那么，CSS如何入門呢?w3cschool在這里分享幾個方法：

0、研究w3cschool CSS教程

w3cschool官方本身就有CSS教程，我們看教程的目的主要還是要了解CSS到底是干什么用的。

其實，用一句簡單的話來說，改變我們看的網頁的樣子.。

1、CSS微課游戲化編程體驗

w3cschool新開發了CSS微課，這可能是很多程序員小伙伴所需要的。

CSS直接抓住了CSS教程中比較核心的一些概念和語法，并且有實戰的訓練習題。

其內容包括了CSS基礎、CSS文本樣式、CSS屬性、CSS定位和布局，讓你系統、立體地全面認識CSS。

CSS微課實現了游戲化的編程體驗，關卡是循序漸進的，這迫使你不能跳躍而忽略一些重要的編程知識。

其中，習題類型包含了判斷題、選擇題、實戰訓練題。

理論離不開實戰，CSS微課做到了例子多，概括技術全面。

當你可以通關的時候，你已經對CSS算是有一個比較深刻的認識，也掌握了一定的CSS編程技能。

2、CSS看什么書呢?

學編程一定要讓編程本身變得有趣，所以大可以先玩編程。

用CSS微課學習是一種有趣化的方法。

另外，閱讀《css禪意花園》，就當成一本故事書看，隨便翻翻你會發現css確實很好玩的。

過了解JavaScript的構建塊以及它們是如何工作的，將能夠編寫更好的代碼和應用程序。據 GitHut 統計 數據所示，在GitHub中的活動存儲庫和總推送方面，JavaScript處于頂部。它也不落后于其他類別。

如果項目越來越依賴于 JavaScript，這意味著開發人員必須利用語言和生態系統提供的所有內容，對內部進行更深入的了解，以便構建出色的軟件。事實證明，有很多開發人員每天都在使用JavaScript，但卻不知道背后發生了什么。

概述

幾乎每個人都已經聽說過 V8 引擎，大多數人都知道 JavaScript 是單線程的，或者它使用的是回調隊列。本文詳細介紹這些概念，并解釋 JavaScrip 實際如何運行。通過了解這些細節，你將能夠適當地利用所提供的 API 來編寫更好的、非阻塞的應用程序。

JavaScript引擎

JavaScript引擎的一個流行示例是Google的V8引擎。例如，在Chrome和Node.js中使用V8引擎，下面是一個非常簡化的視圖：

V8引擎由兩個主要部件組成:

• Memory Heap(內存堆)?—?內存分配地址的地方
• Call Stack(調用堆棧) — 代碼執行的地方

Runtime(運行時)

有些瀏覽器的 API 經常被使用到(比如說：setTimeout)，但是，這些 API 卻不是引擎提供的。那么，他們是從哪兒來的呢？事實上這里面實際情況有點復雜。

所以說還有很多引擎之外的 API，我們把這些稱為瀏覽器提供 API 稱為 Web API，比如說 DOM、AJAX、setTimeout等等。

然后我們還擁有如此流行的事件循環和回調隊列。

調用棧

JavaScript是一種單線程編程語言，這意味著它只有一個調用堆棧。因此，它一次只能做一件事。

調用棧是一種數據結構，它記錄了當前程序中的位置。如果運行到一個函數，它就會將其放置到棧頂，當從這個函數返回的時候，就會將這個函數從棧頂彈出，這就是調用棧做的事情。

來個例子：

當程序開始執行的時候，調用棧是空的，然后，步驟如下：

每一個進入調用棧的都稱為調用幀。

這能清楚的知道當異常發生的時候堆棧追蹤是怎么被構造的，堆棧的狀態是如何的，讓我們看一下下面的代碼：

如果這發生在 Chrome 里(假設這段代碼是在一個名為 foo.js 的文件中)，那么將會生成以下的堆棧追蹤：

"堆棧溢出"，當你達到調用棧最大的大小的時候就會發生這種情況，而且這相當容易發生，特別是在你寫遞歸的時候卻沒有全方位的測試它。我們來看看下面的代碼：

當引擎開始執行這段代碼時，它首先調用函數“foo”。然而，這個函數是遞歸的，并且在沒有任何終止條件的情況下開始調用自己。因此，在執行的每一步中，相同的函數都會被一次又一次地添加到調用堆棧中，如下所示：

然而，在某些時候，調用堆棧中的函數調用數量超過了調用堆棧的實際大小，瀏覽器決定采取行動，拋出一個錯誤，它可能是這樣的:

在單個線程上運行代碼很容易，因為你不必處理在多線程環境中出現的復雜場景——例如死鎖。

但是在一個線程上運行也非常有限制，由于 JavaScript 只有一個調用堆棧，當某段代碼運行變慢時會發生什么?

并發與事件循環

當調用堆棧中的函數調用需要花費大量時間來處理時會發生什么情況? 例如，假設你希望在瀏覽器中使用JavaScript進行一些復雜的圖像轉換。

你可能會問-為什么這是一個問題?問題是，當調用堆棧有函數要執行時，瀏覽器實際上不能做任何其他事情——它被阻塞了，這意味著瀏覽器不能呈現，它不能運行任何其他代碼，它只是卡住了，如果你想在應用中使用流暢的頁面效果，這就會產生問題。

那么，怎樣才能在不阻塞UI和不使瀏覽器失去響應的情況下執行大量代碼呢?解決方案是異步回調。