復習HTML CSS JavaScript
HTML
cellspacing與cellpadding：
1 <table width="400px" cellpadding="0px" border = "1" cellspacing="0px" style="border-collapse:collapse"> 2 <caption>信息統計表</caption> 3 <thead> 4 <tr> 5 <th>編號</th><th>姓名</th><th>性別</th><表格th><th>年齡</th> 6 </tr> 7 </thead> 8 <tbody> 9 <tr> 10 <th>1</th><th>蛋蛋</th><th>男</th><th><th>25</th> 11 </tr> 12 <tr> 13 <th>2</th><th>建國</th><th>男</th><th><th>16</th> 14 </tr> 15 <tbody> 16 <tfood> 17 <tr> 18 <td colspan="4">合計：4人</td> 19 </tr> 20 </tfood>
form表單
1 <form action="index.html"> 2 <label for="account">form賬號：</label><input id="account" type="text" name="account"/><br/> 3 <label for="password">密碼：<label><input id="password" type="password" name = "password"><br/> 4 <label>性別：</label> 5 <input type="radio" name = "gender" checked="checked" value="男"/>男 6 <input type="radio" name = "gender" valu"女"/>女<br/> 7 <label>愛好：</label> 8 <input type="checkbox" name="hobbies" value="讀書"/>讀書 9 <input type="checkbox" name="hobbies" value="音樂"/>音樂 10 <input type="checkbox" name="hobbies" value="跑步"/>跑步 11 <input type="checkbox" name="hobbies" value="旅行"/>旅行 12 <label>學歷：</label> 13 <select> 14 <option value="本科">本科</option> 15 <option value="中學">中學</option> 16 <option value="大專">大專</option> 17 <option value="研究生">研究生</option> 18 </select> 19 <input type="reset" value="重置"/> 20 <input type="submit" value="註冊"/> 21 </form>
CSS
CSS的基本單位是樣式聲明：properyName:value;
CSS的使用方式：
1、把CSS樣式聲明為HTML標簽的style屬性值
<p style="font-size:10px;color:#FFFFFF;"> </p>
2、使用CSS選擇器
選擇器類型：標簽選擇器（tipName）,id選擇器（#tipId）,類選擇器（.tipClass）,屬性選擇器，為類選擇器
選擇器可書寫在HTML的<style>標簽內，語法格式為：
<style type="text/css"> 選擇器1{樣式聲明列表} 選擇器2{樣式聲明列表} </style>
標簽選擇器：標簽名{}
Id選擇器：#Id{樣式}，Id名要以字母或下劃線開頭，Id選擇器優先高於標簽選擇器
類選擇器：.class名{屬性值}，class名要以字母或下劃線開頭，class名可重復，但Id名是惟一的
選擇器優先級：行內樣式>ID選擇器 > 類選擇器 > 標簽
盒子模型
第一、一個盒子在頁面中占據的範圍大小由外邊距、內邊距、邊框、內容的總面積決定
第二、內邊距和外邊距只能指定寬度樣式
第三、盒子的背景會對內邊距和內容起作用
第四、外邊距、邊框、內邊距可對上下左右部分分別進行樣式控制
第五、設置盒子高度或寬度時只對內容起作用
相對定位：元素在顯示時，相對自己本來的位置向下或者向右偏移指定數值，但候命的元素會還認為此元素在原來的位置，所以會排列在此元素原本位置的後面（但會造成覆蓋）
1 <style type="text/css"> 2 #div02{ 3 position:relative; 4 top:50px; 5 left:50px; 6 } 7 </style> 8 <div id="div01" style="width:100px;height:50px;border-color:red;"></div> 9 <div id="div02" style="width:100px;height:50px;border-color:green;"></div> 10 <div id="div03" style="width:100px;height:500px;border-color:yellow;"></div>相對定位
絕對定位：以最近的已經定位的祖先元素為基準進行偏移（如果沒有這樣的祖先元素則以瀏覽器窗口為基準），後面的元素認為此元素不存在，所以會占據此元素原來的位置（但會造成覆蓋，脫離文檔流後就不具有塊級元素獨占一行性質了）
1 <style type="text/css"> 2 #div02{ 3 position:absolute; 4 top:50px; 5 left:50px; 6 } 7 </style> 8 <div id="div01" style="width:100px;height:50px;border-color:red;"></div> 9 <div id="div02" style="width:100px;height:50px;border-color:green;"></div> 10 <div id="div03" style="width:100px;height:500px;border-color:yellow;"></div>絕對定位
固定定位：和絕對定位類似也會脫離文檔流，但總是以瀏覽器窗口為基準，而且位置不會隨著滾動條移動
1 <style type="text/css"> 2 #div02{ 3 position:fixed; 4 top:50px; 5 left:50px; 6 } 7 </style> 8 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 9 <div id="#div02" style="width:100px;height:50px;border-color:green;"></div> 10 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>固定定位
z-index層疊樣式屬性
第一、z-index只能取整數，默認為0，可正可負
第二、z-index值大的元素會覆蓋值小的元素
第三、z-index只對進行了定位的元素有效
JavaScriptjs數據類型：js定義了6種數據類型，其中有5種原始類型：Boolean,Number,String,Null,Undefined,和一種Object類型，原始類型的值是不可改變的，Object類型的值是可以改變的，比如var obj = new Object();我們可以通過obj.name="蛋蛋"這種語法往對象中添加數據，也就是說對象內部的數據是可以改變的。
1 <script type="text/javascript"> 2 window.onload=function(){ 3 var obj = new Object(); 4 var result = new Object(); 5 alert(result); 6 for(var key in obj) 7 { 8 alert(obj[key]); 9 } 10 } 11 </script>Object類
Json語法
創建一個json對象（object對象創建的另一種方法）
var obj = {};
var obj2 = {"name":"蛋蛋","age":24}；
函數聲明方式1
1 function sum(n1,n2){ 2 var sum = n1+n2; 3 return sum; 4 }//這種聲明方式可以在函數聲明之前調用，
因為瀏覽器中的js引擎在執行js代碼前會解析並管理使用這種方式聲明的函數,
後聲明的函數會覆蓋先聲名的。 5 6 sum();//函數調用
函數聲明方式2
1 var sum = function(n1,n2){ 2 var sum = n1+n2; 3 return sum; 4 }//這種方式也稱為匿名函數，js不會事先解析匿名函數，所以不可提前調用,也不存在覆蓋的情況 5 6 sum(1,2);
函數聲明方式3（最原始的聲明方式）
1 //參數列表和函數體都需要是字符串 2 var sum = new Function("n1","n2","var sum=n1+n2;return sum;");
JavaScript調試：F12=>Sources=>點擊要調試的頁面=>刷新頁面=>（添加斷點刷新頁面）
Dom
js+Dom編程思路：由js基本語法控制程序的執行邏輯，由DOM API進行元素的查找獲取，進而再對元素進行增刪改等操作
復習HTML CSS JavaScript