蘇州IT之家羣：46213669，技術交流，招聘就業，職業發展，歡迎蘇州IT人士加入。
第一部分：html
表單標籤：
1、 form
<form action=www.loready.cn/mothd.aspxmethod=POST> //把表單中的內容提交到服務器中www.loready.cn/mothd.aspx文件。
</form>
2、Input
Text:文本輸入框，可以定義文本框長短，字符輸入最大數等。
姓名：<inputtype="text"name="name"/></br>
Password:密碼輸入框，輸進去的都變成星號。
密碼：<inputtype="password"name="password"/>
Radio:單選框
性別：<inputtype="radio"name="sex"value="male"/>male
<inputtype="radio"name="sex"value="female "/>female
Checkbox:多選框
愛好：<inputtype="checkbox"name="hobby"value="tour"/>旅遊
<inputtype="checkbox"name="hobby"value="book"/>看書
<inputtype="checkbox"name="hobby"value="sports"/>運動
Range:範圍選擇
<inputtype="range"value="high" min="1" max="10"/>
Image：圖像，將圖像作爲提交按鈕，必須有alt屬性。
<input type="p_w_picpath" src="img_submit.gif" alt="Submit" />
Button：按鈕，僅僅只是一個按鈕而以，要使按鈕有作用，需要爲按鈕定義事件觸發。
<inputtype="button"value="button1"/>
Submit：把表單數據通過get或post提交到服務器。
<inputtype="submit"value="提交"/>
Reset：重新填寫表單中的內容。
<inputtype="reset"value="重置"/>
Hidden:隱藏表單
<inputtype=hidden name=add [email protected]>
3、textarea：文本區域，即多行多列文本框。
<textarea name="show"rows="5"cols="60"></textarea>
4、select：下拉列表
城市：
<selectname="city"size="3">
<optionselected="selected"value="suzhou">蘇州</option> //默認選擇誰，可以多選
<optionvalue="najin">南京</option>
<optionvalue="wuxi">無錫</option>
<optionvalue="changzhou">常州</option>
</select>
文字列表：
ulli:無序列表
<ul>
<li>coffe</li>
<li>tea</li>
<ul>
顯示結果
。coffe //前面帶標號，標號類型可以改，有方型，圓型等。
。tea
ul ol有序列表
<ul>
<ol>coffe</ol>
<ol>tea</ol>
<ul>
顯示結果
1.coffe //前面帶序號，序號可以改，不僅僅是數字，可以改成字母等。
2.tea
自定義列表
<dl>
<dt>coffe</dt> //定義列表內容
<dd>一種來自國外的黑色的飲料</dd> //描述列表內容
<dt>tea</dt>
<dd>中國的傳統飲品</dd>
</dl>
顯示結果：
Coffe
一種來自國外的黑色的飲料
Tea
中國的傳統飲品
第二部分：CSS
一、CSS選擇器
1、元素選擇器
如：
html {color:black;}
p {color:gray;}
h2 {color:silver;}
2、選擇器分組
body, h2, p, table, th, td, pre, strong, em{color:gray;}
所有的元素顏色都是灰色
3、類選擇器
（1）基本格式
.important {color:red;} //擁用important類的所有標籤字體都變成紅色。
<h1>Thisheading is very important.</h1>
<p>Thisparagraph is very important.</p>
（2）結合元素選擇器
p.important {color:red;} //所有擁有important類的段落字體變成紅色。
<p>Thisparagraph is very important.</p> //會變紅色
<h1>Thisheading is very important.</h1> //不會變，因爲標籤不是p.
（3）派生類選擇器
.fancy td {
color:#f60;
background:#666;
}
擁有fancy 類的標籤下面的表格顏色背景改變。
（4）多類選擇器
.important {font-weight:bold;} //擁有important類的標籤字體變粗。
.warning {font-style:italic;} //擁有warning類的標籤變斜體
.important.warning {background:silver;}//同時擁有important和warning類的標籤字體變粗，變斜體的同時，還加上底紋。
<p>This paragraph is a very important warning.</p> // 兩個類之間用空格分開
4、ID選擇器
#intro {font-weight:bold;} //ID選擇器是唯一的,文檔中能且只能使用一次。id屬性只能在每個 HTML 文檔中出現一次
二、CSS定位
1、static(靜止定位)
不脫離文本流。無特殊定位，它是html元素默認的定位方式，即我們不設定元素的position屬性時默認的position值就是static，它遵循正常的文檔流對象，對象佔用文檔空間，該定位方式下，top、right、bottom、left、z-index等屬性是無效的。
2、relative(相對定位）
不脫離文本流。相對定位相對的是它原本在文檔流中的位置而進行的偏移。隨父級標籤縮放，相對位置不變。可經由過程z-index進行層次分級.
3、absolute（絕對定位）
脫離文本流。相對於父級進行定位。但父級只能是以relative或absolute定位的父層，不能是以static定位的。如果父層是static 定位的，就向父層的父層進行查找，直到找到有以relative或absolute定位的層，如果找不到就以body原點爲定位點。可以通過z-index進行層次分級
4、fixed
fixed是特殊的absolute，即fixed總是以body爲定位對象的，按照瀏覽器的窗口進行定位。
5、float
Html頁面中分爲塊元素和行內元素。塊元素是要佔據整行，如h1~h6、p、div、ul、table。行內元素不佔用整行，如span、a、input、select。
應用float屬性後的元素會脫離文本流。當float元素脫離文本流後，後邊如是塊元素，會佔用float元素的文本流位置。如果float元素與塊元素髮生重疊，那麼float元素會覆蓋塊元素。而行內元素不會，只會緊挨在float元素前邊或後邊。
Float的屬性：
Left:元素向左浮動，直到碰到父元素的邊框，默認是body邊框，或其他float元素。
Right:元素向右浮動，直到碰到父元素的邊框，默認是body邊框，或其他float元素。
Inherit：從父元系繼承float屬性。大多數瀏覽器不支持此值。
None:默認值。不浮動。
Clear屬性：
Left: 在左側不允許浮動元素，即清空浮動元素的左側的浮動元素，但文本流內的塊元素和行內元素是可以出現的。只是如果是塊元素有可能發生重疊。
Right: 在右側不允許浮動元素，清空浮動元素的右側的浮動元素。
Both: 在兩側不允許浮動元素，清空浮動元素的兩側浮動元素。
None:默認值，允許浮動元素出現在兩側。
三、框模型概述
從外到內分別爲：
Margin:外邊距
Border：邊框
Padding：內邊距
Element：元素
即元素到父元素或上一元素間會有內邊距，邊框，外邊距三層內容可以設置。
設置順序爲：上，右，下，左。如只設兩個值，則上下，和左右一樣，只設一個值，則上下左右一樣。
.input{
Margin:10px 5px 3px 3px; //內邊距分別爲上10像素，右5像素，下3像素，左3像素。
}
.input{
Margin:10px 5px; //內邊距分別爲上下爲10像素，左右5像素
}
.input{
Margin: 5px; //內邊距分別爲上下左右5像素
}
蘇州IT之家羣：46213669，技術交流，招聘就業，職業發展，歡迎蘇州IT人士加入。