html+css+js基礎學習
阿新 • • 發佈：2019-01-02
首先我們先從最基本的前端知識入手html+css+JavaScript
很多人喜歡一上來，就從書本開始啃，例如JavaScript書隨便一本那麼厚，
等你啃完了，你的學習熱情就沒了，而且容易學了後面忘了前面
所以我們現在要做的就是從最基礎的知識開始，
先了解我們用他們能幹什麼？
再瞭解如何使用他們？
至於使用的他們好與壞，與開發經驗和熟練程度有關。
下面就開始基礎教程吧，自己看，自己學，自己理解！誰都幫不了你。
http://www.w3school.com.cn/html/index.asp
http://www.w3school.com.cn/css/index.asp
http://www.w3school.com.cn/js/index.asp
當我看完了html+css+JavaScript各自的手冊後，只是瞭解個大概，
想馬上就牛逼，想馬上就能很好地使用，你也別想了
僅僅是瞭解個大概！
想很好地使用他們，還是得練習，自己試著開始慢慢寫程式碼，不清楚就查手冊
要怎樣才能深入地學習呢？
那我們就挑選最重要的東西先學，基本的語法知識可以在寫程式碼的過程中來不斷強化。
HTML DOM的瞭解
訪問和操作 HTML 文件的標準。DOM 是 Document Object Model（文件物件模型）的縮寫。
不學習這個，你怎會知道html的結構和如何操作html中的元素呢
javaScript基本資料型別
字串、數字、布林、陣列、物件、Null、Undefined
var x // undefined表示變數不含有值
var person=null //將變數的值設定為 null 來清空變數。
var x=true //布林
var x = 6; // 數字
或者var x1=34.00; // 數字
var y=123e5; // 數字
var x = "Bill"; // 字串
var cars=["Audi","BMW","Volvo"];//陣列
var person={firstname:"Bill", lastname:"Gates", id:5566}; //物件
現在你最起碼得學會如何操作這些資料型別吧，以後寫程式碼不就是如何操作、使用這些資料結構嘛
我認為，你以前有程式設計經驗的，在學習一門新語言時，明白瞭如何使用和操作基本的資料型別，
就可以認為你基本上學會了這門語言了，只是你現在使用起來還不太熟悉，不能寫出複雜的要求的程式碼
但基本看懂別人寫的程式碼不會有問題
內部的JavaScript
HTML 中的指令碼必須位於 <script> 與 </script> 標籤之間。
指令碼可被放置在 HTML 頁面的 <body> </body>(一般在該標籤的最底部)和 <head> </head>部分中。
JavaScript 是所有現代瀏覽器以及 HTML5 中的預設指令碼語言。
也可以把指令碼儲存到外部檔案中。
例項
JavaScript：對事件作出反應
HTML 事件的例子：
首先當點選滑鼠按鈕時，會觸發 onmousedown 事件，
當釋放滑鼠按鈕時，會觸發 onmouseup 事件，
最後，當完成滑鼠點選時，會觸發 onclick 事件。
當網頁已載入時------------------onload 和 onunload 事件
當影象已載入時
當滑鼠移動到元素上時------------onmouseover 和 onmouseout 事件
當輸入欄位被改變時--------------onchange 事件
當提交 HTML 表單時-------------onsubmit事件
當用戶觸發按鍵時
onfocus當輸入欄位獲得焦點時，改變其背景色。
例項
<button type="button" onclick="alert('Welcome!')">點選這裡</button>
通過可程式設計的物件模型，JavaScript 獲得了足夠的能力來建立動態的 HTML。
JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應
JavaScript：改變 HTML 內容
使用 JavaScript 來處理 HTML 內容是非常強大的功能。
例項
x=document.getElementById("demo") //查詢元素
x.innerHTML="Hello JavaScript"; //改變內容
JavaScript：改變 HTML 樣式
改變 HTML 元素的樣式，屬於改變 HTML 屬性的變種。
例項
以上這些知識點，在基礎教程中都提到過的，我這裡只是把重要的提出來了
詳細清楚的學習，請移步基礎教程！！
你也可以挑選出你認為重要的知識點來加強學習，
因為每個人的知識結構是不一樣的。
對有過介面開發經驗的人來說，盒子模型概念早就大腦中了，例如做Android介面開發
是不是發現是一樣的，所以說，很多技術都相似的，相通的。
至於如何寫好css樣式，對初學者來說，你急不來，那是在實際開發中，多寫多練，熟練
了就會了。
很多人喜歡一上來，就從書本開始啃，例如JavaScript書隨便一本那麼厚，
等你啃完了，你的學習熱情就沒了，而且容易學了後面忘了前面
所以我們現在要做的就是從最基礎的知識開始，
先了解我們用他們能幹什麼？
再瞭解如何使用他們？
至於使用的他們好與壞，與開發經驗和熟練程度有關。
下面就開始基礎教程吧，自己看，自己學，自己理解！誰都幫不了你。
http://www.w3school.com.cn/html/index.asp
http://www.w3school.com.cn/css/index.asp
http://www.w3school.com.cn/js/index.asp
當我看完了html+css+JavaScript各自的手冊後，只是瞭解個大概，
想馬上就牛逼，想馬上就能很好地使用，你也別想了
僅僅是瞭解個大概！
想很好地使用他們，還是得練習，自己試著開始慢慢寫程式碼，不清楚就查手冊
要怎樣才能深入地學習呢？
那我們就挑選最重要的東西先學，基本的語法知識可以在寫程式碼的過程中來不斷強化。
HTML DOM的瞭解
訪問和操作 HTML 文件的標準。DOM 是 Document Object Model（文件物件模型）的縮寫。
不學習這個，你怎會知道html的結構和如何操作html中的元素呢
javaScript基本資料型別
字串、數字、布林、陣列、物件、Null、Undefined
var x // undefined表示變數不含有值
var person=null //將變數的值設定為 null 來清空變數。
var x=true //布林
var x = 6; // 數字
或者var x1=34.00; // 數字
var y=123e5; // 數字
var x = "Bill"; // 字串
var cars=["Audi","BMW","Volvo"];//陣列
var person={firstname:"Bill", lastname:"Gates", id:5566}; //物件
現在你最起碼得學會如何操作這些資料型別吧，以後寫程式碼不就是如何操作、使用這些資料結構嘛
我認為，你以前有程式設計經驗的，在學習一門新語言時，明白瞭如何使用和操作基本的資料型別，
就可以認為你基本上學會了這門語言了，只是你現在使用起來還不太熟悉，不能寫出複雜的要求的程式碼
但基本看懂別人寫的程式碼不會有問題
內部的JavaScript
HTML 中的指令碼必須位於 <script> 與 </script> 標籤之間。
指令碼可被放置在 HTML 頁面的 <body> </body>(一般在該標籤的最底部)和 <head> </head>部分中。
那些老舊的例項可能會在 <script> 標籤中使用 type="text/javascript"。現在已經不必這樣做了。<script> alert("My First JavaScript"); </script>
JavaScript 是所有現代瀏覽器以及 HTML5 中的預設指令碼語言。
外聯js
也可以把指令碼儲存到外部檔案中。
例項
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>JavaScript：對事件作出反應
HTML 事件的例子：
首先當點選滑鼠按鈕時，會觸發 onmousedown 事件，
當釋放滑鼠按鈕時，會觸發 onmouseup 事件，
最後，當完成滑鼠點選時，會觸發 onclick 事件。
當網頁已載入時------------------onload 和 onunload 事件
當影象已載入時
當滑鼠移動到元素上時------------onmouseover 和 onmouseout 事件
當輸入欄位被改變時--------------onchange 事件
當提交 HTML 表單時-------------onsubmit事件
當用戶觸發按鍵時
onfocus當輸入欄位獲得焦點時，改變其背景色。
例項
<button type="button" onclick="alert('Welcome!')">點選這裡</button>
通過可程式設計的物件模型，JavaScript 獲得了足夠的能力來建立動態的 HTML。
JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應
JavaScript：改變 HTML 內容
使用 JavaScript 來處理 HTML 內容是非常強大的功能。
例項
x=document.getElementById("demo") //查詢元素
x.innerHTML="Hello JavaScript"; //改變內容
JavaScript：改變 HTML 樣式
改變 HTML 元素的樣式，屬於改變 HTML 屬性的變種。
例項
x=document.getElementById("demo") //找到元素 x.style.color="#ff0000"; //改變樣式
以上這些知識點，在基礎教程中都提到過的，我這裡只是把重要的提出來了
詳細清楚的學習，請移步基礎教程！！
你也可以挑選出你認為重要的知識點來加強學習，
因為每個人的知識結構是不一樣的。
學習css樣式表時，我認為最重要的就是盒子模型
對有過介面開發經驗的人來說，盒子模型概念早就大腦中了，例如做Android介面開發
是不是發現是一樣的，所以說，很多技術都相似的，相通的。
至於如何寫好css樣式，對初學者來說，你急不來，那是在實際開發中，多寫多練，熟練
了就會了。