一、 HTML
1、Html HyperText Markup Language
2、html標籤就是用來封裝的
3、規範中要求所有標籤都要結束
4、操作思想：
爲了操作數據，都需要對數據進行不同標籤的封裝，通過標籤中的屬性對封裝的數據進行操作。
標籤就相當於一個容器。對容器中的數據進行操作，就是在再不斷的改變容器的屬性值。
5、雙引和單引相互嵌套
6、轉義字符&；
7、GET和POST提交的區別？
GET提交會將提交的數據信息顯示在地址欄中；
POST提交的數據不會顯示在地址欄中。
GET提交對於敏感信息不安全；
POST提交對於敏感信息安全。
GET提交對於大體積數據不合適；
POST提交對於大體積數據是可以的。
GET提交將提交的信息封裝到了請求信息的可以請求行中；
POST提交將提交信息封裝到了請求體中。
如果你在客戶端提交中文。
GET提交中文，服務端如果是Tomcat器，收到中文後，會用ISO8859-1解碼，出現亂碼，必須在服務器端用IOS8859-1將收到的數據編碼，再用指定的中文碼錶解碼。
POST提交中文，可以使用get的方式解決亂碼，也可以使用服務器端的一個對象request的一個方法setCharacterEncoding(中文碼錶)直接繼續解碼並獲取中文。因爲該方法只能解碼請求體重的數據。
綜上所述：建議表單提交用POST提交。
和服務端交互：
1.地址欄中輸入。GET提交
2.超鏈接。GET提交
3.表單。GET、POST提交
8、 校驗：
如果在註冊頁面假如增強型校驗。只要有一項填寫錯誤，就無法提交。只有全部填寫正確纔可以提交。
服務端收到數據需要校驗，爲了數據的安全性。
註冊頁面也需要校驗，爲了提高用戶體驗效果。減輕服務端的壓力。
9、 注意畫中畫標籤<iframe></iframe>
網頁分塊標籤<frameset><frame /></frameset>
表單<form></form>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<frameset rows="30%,*">
<frame src="htmlDemo.html" name="top" />
<frameset cols="40%,*">
<frame src="htmlDemo.html" name="left" target="right" />
<frame src="htmlDemo.html" name="right" />
</frameset>
</frameset>
<body>
</body>
</html>
------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
用戶姓名：<input type="text" value="請輸入姓名" /><br />
輸入密碼：<input type="password" value="" /><br />
選擇性別：<input type="radio" name="sex" value="man" checked="checked" />男<input type="radio" name="sex" value="woman" />女<br />
選擇技術：<input type="checkbox" value="Java" />Java<input type="checkbox" value="HTML" />HTML<br />
<input type="button" name="uploadifile" value="button" οnclick="alert('啊，真的有一個按鈕！')" /><br />
<!-- input標籤中的type屬性定義爲image的時候，具有提交按鈕的功能 -->
<input type="image" src="" /><br />
<!-- 隱藏框 ,不需要用戶看到，需要服務器看到-->
<input type="hidden" name="id" value="007" /> <select name="country">
<option>--選擇國家--</option>
<option value="cn">中國</option>
<option value="en">英國</option>
<option value="usa">美國</option>
</select> <br />
<textarea rows="6" cols="20"></textarea>
<br /> <input type="submit" name="提交" /><input type="reset" name="重置" /><br />
</form>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------
表單演示
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<fieldset>
<legend>
註冊區域
</legend>
<form action="http://127.0.0.1 : 9090" method="get">
<table border="1" bordercolor="blue" cellpadding="10px" cellspacing="0px" width="600px">
<tr>
<td colspan="2" margion="center" align="center">註冊頁面</td>
</tr>
<tr>
<td align="center">用戶名(U):</td>
<td align="center">
<input type="text" name="user" />
</td>
</tr>
<tr>
<td align="center">輸入密碼(P):</td>
<td align="center">
<input type="password" name="psw" />
</td>
</tr>
<tr>
<td align="center">確認密碼:</td>
<td align="center">
<input type="password" name="repsw" />
</td>
</tr>
<tr>
<td align="center">選擇性別:</td>
<td align="center">
<input type="radio" name="sex" value="man" />
男
<input type="radio" name="sex" value="woman" />
女 </td>
</tr>
<tr>
<td align="center">選擇技術:</td>
<td align="center">
<input type="checkbox" name="tech" value="Java" />
Java
<input type="checkbox" name="tech" value="Html" />
text
<input type="checkbox" name="tech" value="CSS" />
CSS </td>
</tr>
<tr>
<td align="center">選擇國家:</td>
<td align="center">
<select>
<option value="none">---選擇國家---</option>
<option value="cn">---中國---</option>
<option value="en">---英國---</option>
<option value="sua">---美國---</option>
</select></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交數據">
</input>
<input type="reset" value="重置數據">
</input></td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
二、 CSS
1、html標籤分兩種：
行內標籤：用於封裝行中一部分。結束後沒有換行 <font> a <input>
塊級標籤：標籤結束後，有換行。table dt dd
css註釋只有一種---多行註釋/**/
2、css與html結合有四種方式：
(1)style屬性方式
<body>
<div style="color: red; background-color: olive;">div區域演示一</div>
</body>
(2)style標籤
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
color: green;
background-color: blue;
}
</style>
</head>
<body>
<div style="color: red; font-size: 30px;">div區域演示一</div>
<div>div區域演示二</div>
<span>span區域演示一</span>
<span>span區域演示二</span>
</body>
(3)import導入
<head>
<title>Insert title here</title>
<style type="text/css">
@import url("css.css");/*導入css文件目錄*/
</style>
</head>
(4)使用html的link標籤導入css樣式
<head>
<title>Insert title here</title>
<link rel="stylesheet" href="css文件目錄" />
</head>分爲三種：
a. 可以通過標籤名來確定。
b. 可以對標籤進行分類，通過標籤中的屬性class完成。
c. 可以對標籤進行唯一性標識，通過標籤中的屬性id完成。
每一個標籤都定義了class屬性和id屬性。用於對標籤進行標識，方便對標籤進行操作。
在定義的中，多個標籤的class屬性值可以相同，而id值要唯一，因爲JavaScript中經常用。
4、樣式優先級：
由上到下，由外到內。優先級由低到高。
5、class選擇器：
在標籤中定義class屬性並賦值。通過 標籤名.class值 對該標籤進行樣式設置。
例：
相同標籤設置不同樣式的時候，用class進行區分。
p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}
<p class=”pclass_1”>P標籤樣式</p>
<p class=”pclass_2”>P標籤樣式</p>
不同標籤進行相同設置的時候，用class進行統一定義。
.classname {color:#00FF00;}
<p class=”classname”>P標籤樣式</p>
<div class=”classname”>DIV標籤樣式</div>
6、id選擇器：
與class選擇器類似，但格式不同，選擇器的名稱爲：#id值。
例：
#pid { color:#0000FF;}
<p id=”pid”>P標籤樣式</p>
注：多個標籤同樣可以定義相同的id值，但是對於JavaScript對標籤元素的獲取就會出錯。所以形成習慣，確保id值的唯一性對於以後的數據庫設計也很有好處。
7、選擇器優先級：標籤選擇器 < class選擇器 < id選擇器 < 標籤中style屬性
8、 擴展選擇器：
a. 關聯選擇器
標籤是可以嵌套的，要讓相同標籤中的不同標籤顯示不同樣式，就可以用此選擇器。
例：
p { color:#00FF00;}
p b { color:#FF000;}
<p>P標籤<b>劉德華</b>段落樣式</p>
<p>P標籤段落</p>
b. 組合選擇器
對多個不同選擇器進行相同樣式設置的時候應用此選擇器。
p,div { color:#FF0000;}
<p>P標籤顯示段落。</p>
<div>DIV標籤顯示段落</div>
注：多個不同選擇器要用逗號分隔開。
c. 僞元素選擇器
其實就在html中預先定義好的一些選擇器。稱爲僞元素。是因爲CSS的術語。
格式：標籤名：僞元素。類名 標籤名。類名：僞元素。都可以。
a:link 超鏈接未點擊狀態。
a:visited 被訪問後的狀態。
a:hover 光標移到超鏈接上的狀態（未點擊）。
a:active 點擊超鏈接時的狀態。
使用順序 L – V – H - A
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一個字母。
:focus 具有焦點的元素。IE6瀏覽器不支持，在FireFox中可以看到效果。
9、僞元素選擇器： 執行順序記憶： L V H A
:link 未點擊前。
:visited 訪問後。
:hover 懸停狀態。
:active 活動狀態。
三、 JavaScript
1、 JavaScript 概述
JavaScript是基於對象和事件驅動的腳本語言，主要應用在客戶端。
特點：
a. 交互性（它可以做的就是信息的動態交互）
b. 安全性（不允許直接訪問本地硬盤）
c. 跨平臺性（只要是可以解釋Js的瀏覽器都可以執行，和平臺無關）
2、 JavaScript與Java不同
a. JS是Netscape公司的產品，前身是LiveScript;Java是Sun公司的產品，現在是Oracle公司的產品。
b. JS是基於對象，Java是面向對象。
c. JS只需解釋就可以執行，Java需要先編譯成字節碼文件，再執行。
d. JS是弱類型，Java是強類型。
3、 如果使用了script標籤中的src屬性，那麼就不執行標籤內封裝的js代碼了。
所以引入js文件和封裝js代碼的標籤要分開。
4、 JavaScript與Html的結合方式
想要將其他代碼融入到Html中，都是以標籤的形式。
a. JS代碼存放在標籤對<script> js code．．．</script>中。
b. 當有多個html頁面使用到相同的JS腳本時，可以將js代碼封裝到一個文件中，只要在script標籤的src屬性引入一個js文件。（方便後期維護，擴展）
注意：如果在script標籤中定義了src屬性，那麼標籤中的內容不會被執行。
例：<script src=”test.js” type=”text/javascript”></script>
注：規範中script標籤早期有一個屬性language,而現在使用type屬性。
5、 演示函數：
格式：
function 函數名(參數列表)
{
函數體；
return 返回值；
}
函數中其實有一個數組，專門用於存儲接收的實際參數。arguments
6、函數中的變量都是局部變量
7、動態函數。
使用到了js中的一個對象 Function.
var add = new Function("x,y","var sum; sum = x+y; return sum;");
8、匿名函數。
簡化了函數的書寫，通常用於事件的處理。
9、特有語句：
with(對象){
可以直接使用對象的屬性和行爲。
}
for in語句。遍歷對象。
for(變量 in 對象){}
var personObject = new Person("wangcai",21);
//personObject.setName("wangwangcai");
//personObject.getName();
//personObject.show();
with(personObject){
setName("wangwang");
getName();
show();
}
for(x in personObject){
alert(x+":"+personObject[x]);
}
四、DOM
1、DOM：document object model 文檔對象模型
是一個用於解析標記型文檔的技術。可以將標記型文檔封裝成對象，並將文檔中的所有內容封裝成對象。
變成對象的好處就是在於可以對標記對象進行屬性和行爲定義。
方便於操作該對象的內容。
2、DHTML：動態html。 注意：動態html不是動態網頁而是動態的效果，動態網頁是和服務器端交互的網頁。
html：提供了標籤，負責對數據進行封裝。
css：提供了豐富的樣式，負責的是頁面的樣式體現。
dom：提供的文檔解析，負責將文檔以及文檔中的所有內容解析成對象。
javascript：提供的程序設計語言，負責將這些對象的使用，進行關聯，讓其具備邏輯性。
Dhtml+XMLhttpRequest=AJAX.
3、通過document對象演示如何獲取頁面中的標籤節點。
getElementById 獲取對ID標籤屬性爲指定值得第一個對象的引用。
getElementsByName 根據NAME標籤屬性的值獲取對象的集合。
getElementByTagName 獲取基於指定元素名稱的對象集合。
4、第二種獲取節點的方式：
通過節點的層次關係獲取。
父節點：parentNode
子節點：childNodes對應是一個集合。
兄弟節點：
上一個兄弟：previousSibling
下一個兄弟：nextSibling
5、取消超鏈接默認點擊效果：javascript:void(0)