Html和CSS的關(guān)系
HTML是網(wǎng)頁內(nèi)容的載體挑辆。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息例朱，可以包含文字、圖片鱼蝉、視頻等洒嗤。
CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣蚀乔。比如烁竭，標(biāo)題字體、顏色變化吉挣，或?yàn)闃?biāo)題加入背景圖片、邊框等婉弹。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)
JavaScript是用來實(shí)現(xiàn)網(wǎng)頁上的特效效果睬魂。如：鼠標(biāo)滑過彈出下拉菜單《贫模或鼠標(biāo)滑過表格的背景顏色改變氯哮。還有焦點(diǎn)新聞（新聞圖片）的輪換∩谭穑可以這么理解喉钢，有動(dòng)畫的，有交互的一般都是用JavaScript來實(shí)現(xiàn)的良姆。
(用個(gè)面向?qū)ο蟮乃枷肜斫狻?/p>
好比一個(gè)人肠虽，HTML（就是人的四肢眼睛骨頭這種實(shí)質(zhì)性的）
CSS (就是衣服，膚色玛追，妝扮)
javaScript(就是人的行為動(dòng)作,比如吃飯税课，走路闲延，說話))
http://img.mukewang.com/5289ba5a0001609806280246.jpg
“勇氣”是網(wǎng)頁內(nèi)容文章的標(biāo)題，<h1></h1>就是標(biāo)題標(biāo)簽韩玩，它在網(wǎng)頁上的代碼寫成<h1>勇氣</h1>垒玲。
“三年級(jí)時(shí)...我也沒勇氣參加≌彝牵” 是網(wǎng)頁中文章的段落合愈，<p></p>是段落標(biāo)簽。它在網(wǎng)頁上的代碼寫成 <p>三年級(jí)時(shí)...我也沒勇氣參加击狮。</p>
網(wǎng)頁上那張小女生的圖片想暗，由img標(biāo)簽來完成的，它在網(wǎng)頁上的代碼寫成<img src="1.jpg">
標(biāo)簽的語法
標(biāo)簽由英文尖括號(hào)<和>括起來帘不，如<html>就是一個(gè)標(biāo)簽说莫。
html中的標(biāo)簽一般都是成對(duì)出現(xiàn)的，分開始標(biāo)簽和結(jié)束標(biāo)簽寞焙。結(jié)束標(biāo)簽比開始標(biāo)簽多了一個(gè)/储狭。
（1） <p></p>
（2） <div></div>
（3） <span></span>
3. 標(biāo)簽與標(biāo)簽之間是可以嵌套的，但先后順序必須保持一致捣郊，
如：<div>里嵌套<p>辽狈，那么</p>必須放在</div>的前面。如下圖所示呛牲。
http://img.mukewang.com/5289611a0001469c05510206.jpg
4. HTML標(biāo)簽不區(qū)分大小寫刮萌，<h1>和<H1>是一樣的，
但建議小寫娘扩，因?yàn)榇蟛糠殖绦騿T都以小寫為準(zhǔn)着茸。
http-equiv="Content-Type" 表示描述文檔類型
content="text/HTML; 文檔類型mime類型，這里為html,如果JS就是text/javascript琐旁，
charset=utf-8 頁面字符集涮阔，編碼，eg:gb2312,iso-8859-1,utf-8
meta是html中的元標(biāo)簽灰殴，其中包含了對(duì)應(yīng)html的相關(guān)信息敬特，客戶端瀏覽器或服務(wù)器端的程序會(huì)根據(jù)這些信息進(jìn)行處理。
HTTP-EQUIV類似于HTTP的頭部協(xié)議牺陶，它回應(yīng)給瀏覽器一些有用的信息伟阔，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容。
認(rèn)識(shí)html文件基本結(jié)構(gòu)
<html>
<head>...</head>
<body>...</body>
</html>
代碼講解：
1. <html></html>稱為根標(biāo)簽掰伸，所有的網(wǎng)頁標(biāo)簽都在<html></html>中皱炉。
2. <head> 標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器碱工。頭部元素有<title>娃承、<script>奏夫、 <style>、<link>历筝、 <meta>等標(biāo)簽酗昼，頭部標(biāo)簽在下一小節(jié)中會(huì)有詳細(xì)介紹。
3. 在<body>和</body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容梳猪，如<h1>麻削、<p>、<a>春弥、<img>等網(wǎng)頁內(nèi)容標(biāo)簽呛哟，在這里的標(biāo)簽中的內(nèi)容會(huì)在瀏覽器中顯示出來。
認(rèn)識(shí)head標(biāo)簽
下面這些標(biāo)簽可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>標(biāo)簽：在<title>和</title>標(biāo)簽之間的文字內(nèi)容是網(wǎng)頁的標(biāo)題信息匿沛，
它會(huì)出現(xiàn)在瀏覽器的標(biāo)題欄中扫责。網(wǎng)頁的title標(biāo)簽用于告訴用戶和搜索引擎這個(gè)網(wǎng)頁的主要內(nèi)容是什么
，搜索引擎可以通過網(wǎng)頁標(biāo)題逃呼，迅速的判斷出網(wǎng)頁的主題鳖孤。
每個(gè)網(wǎng)頁的內(nèi)容都是不同的，每個(gè)網(wǎng)頁都應(yīng)該有一個(gè)獨(dú)一無二的title抡笼。
標(biāo)簽的用途：我們學(xué)習(xí)網(wǎng)頁制作時(shí)苏揣，常常會(huì)聽到一個(gè)詞，語義化推姻。那么什么叫做語義化呢平匈，說的通俗點(diǎn)就是：明白每個(gè)標(biāo)簽的用途（在什么情況下使用此標(biāo)簽合理）比如，網(wǎng)頁上的文章的標(biāo)題就可以用標(biāo)題標(biāo)簽藏古，網(wǎng)頁上的各個(gè)欄目的欄目名稱也可以使用標(biāo)題標(biāo)簽增炭。文章中內(nèi)容的段落就得放在段落標(biāo)簽中，在文章中有想強(qiáng)調(diào)的文本校翔，就可以使用 em 標(biāo)簽表示強(qiáng)調(diào)等等弟跑。
講了這么多語義化，但是語義化可以給我們帶來什么樣的好處呢防症？
更容易被搜索引擎收錄。
更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容哎甲。
加入強(qiáng)調(diào)語氣蔫敲，使用<strong>和<em>標(biāo)簽
但兩者在強(qiáng)調(diào)的語氣上有區(qū)別:<em> 表示強(qiáng)調(diào)，<strong> 表示更強(qiáng)烈的強(qiáng)調(diào)炭玫。并且在瀏覽器中<em> 默認(rèn)用斜體表示奈嘿，<strong> 用粗體表示。兩個(gè)標(biāo)簽相比吞加，目前國內(nèi)前端程序員更喜歡使用<strong>表示強(qiáng)調(diào)裙犹。
語法：
<em>需要強(qiáng)調(diào)的文本</em>
<strong>需要強(qiáng)調(diào)的文本</strong>
使用<span>標(biāo)簽為文字設(shè)置單獨(dú)樣式
<style>
span{
color:blue;
}
</style>
<span>美國夢(mèng)</span>
<q>標(biāo)簽 短文本引用標(biāo)簽
<q>文本</q>
會(huì)自動(dòng)加入雙引號(hào)
< blockquote >長文本引用標(biāo)簽
<blockquote>引用文本</blockquote>
使用<br>標(biāo)簽分行顯示文本
那就可以用到<br />標(biāo)簽了尽狠，在需要加回車換行的地方加入<br />，<br />標(biāo)簽作用相當(dāng)于word文檔中的回車叶圃。
要想輸入空格袄膏，必須寫入
horizontal hr 水平線
<code>代碼語言</code><pre>語言代碼段</pre>
無序標(biāo)簽
<ul><li>我的第一個(gè)列表信息</li></ul> 無序標(biāo)簽
li 在英文里代表 List
ol 在英文里代表 ordered list
ul 在英文里代表 unordered list
有序標(biāo)簽
<ol>
<li>我的第一個(gè)列表信息掺冠。</li>
<li>我的第一個(gè)列表信息沉馆。</li>
</ol>
<div>標(biāo)簽
給div命名，使邏輯更加清晰
命名方式<div id = "名稱">```</div>
table標(biāo)簽德崭，認(rèn)識(shí)網(wǎng)頁上的表格
創(chuàng)建表格的四個(gè)元素：
tr是“table row（表格行）”的縮寫斥黑，用于表示一行的開始和結(jié)束。這也容易理解眉厨。
td是“table data（表格數(shù)據(jù)）”的縮寫锌奴，用于表示行中各個(gè)單元格（cell）的開始和結(jié)束。
table憾股、tbody鹿蜀、tr、th荔燎、td
1耻姥、<table>…</table>：整個(gè)表格以<table>標(biāo)記開始、</table>標(biāo)記結(jié)束有咨。
2琐簇、<tbody>…</tbody>：當(dāng)表格內(nèi)容非常多時(shí)，表格會(huì)下載一點(diǎn)顯示一點(diǎn)座享，但如果加上<tbody>標(biāo)簽后婉商，這個(gè)表格就要等表格內(nèi)容全部下載完才會(huì)顯示。如右側(cè)代碼編輯器中的代碼渣叛。
3丈秩、<tr>…</tr>：表格的一行，所以有幾對(duì)tr 表格就有幾行淳衙。
4蘑秽、<td>…</td>：表格的一個(gè)單元格，一行中包含幾對(duì)<td>...</td>箫攀，說明一行中就有幾列肠牲。
5、<th>…</th>：表格的頭部的一個(gè)單元格靴跛，表格表頭缀雳。
6、表格中列的個(gè)數(shù)梢睛，取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)肥印。
caption標(biāo)簽识椰，為表格添加標(biāo)題和摘要
用以描述表格內(nèi)容，標(biāo)題的顯示位置：表格上方深碱。
語法：
<table>
<caption>標(biāo)題文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
</table>table summary="表格簡介文本">//這個(gè)是表的備注 不會(huì)展現(xiàn)出來
使用<a>標(biāo)簽腹鹉，鏈接到另一個(gè)頁面
使用<a>標(biāo)簽可實(shí)現(xiàn)超鏈接，
語法：
<a href="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過顯示的文本">鏈接顯示的文本</a>
在新的頁面中打開連接
_blank -- 在新窗口中打開鏈接
_parent -- 在父窗體中打開鏈接
_self -- 在當(dāng)前窗體打開鏈接,此為默認(rèn)值
_top -- 在當(dāng)前窗體打開鏈接莹痢，并替換當(dāng)前的整個(gè)窗體(框架頁)
一個(gè)對(duì)應(yīng)的框架頁的名稱 -- 在對(duì)應(yīng)框架頁中打開
http://img.mukewang.com/52da4f2a000150b714280550.jpg
認(rèn)識(shí)<img>標(biāo)簽种蘸，為網(wǎng)頁插入圖片
語法：
<img src="圖片地址" alt="下載失敗時(shí)的替換文本" title = "鼠標(biāo)放置提示文本">
1、src：標(biāo)識(shí)圖像的位置竞膳；
2航瞭、alt：指定圖像的描述性文本，當(dāng)圖像不可見時(shí)（下載不成功時(shí)）坦辟，可看到該屬性指定的文本刊侯；
3、title：提供在圖像可見時(shí)對(duì)圖像的描述(鼠標(biāo)滑過圖片時(shí)顯示的文本)锉走；
4滨彻、圖像可以是GIF，PNG挪蹭，JPEG格式的圖像文件亭饵。
使用表單標(biāo)簽，與用戶交互
網(wǎng)站怎樣與用戶進(jìn)行交互梁厉？答案是使用HTML表單(form)辜羊。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)词顾。
語法：
<form method="傳送方式" action="服務(wù)器文件">
講解：
1.<form> ：<form>標(biāo)簽是成對(duì)出現(xiàn)的八秃，以<form>開始，以</form>結(jié)束肉盹。
2.action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁面(save.php)昔驱。
3.method ： 數(shù)據(jù)傳送的方式（get/post）。
<form method="post" action="save.php">
<label for="username">用戶名:</label>
<input type="text" name="username" />
<label for="pass">密碼:</label>
<input type="password" name="pass" />
</form>
注意:
1上忍、所有表單控件（文本框骤肛、文本域、按鈕窍蓝、單選框萌衬、復(fù)選框等）都必須放在 <form></form> 標(biāo)簽之間（否則用戶輸入的信息可提交不到服務(wù)器上哦！）它抱。
2、method : post/get 的區(qū)別這一部分內(nèi)容屬于后端程序員考慮的問題朴艰。感興趣的小伙伴可以查看本小節(jié)的 wiki观蓄，里面有詳細(xì)介紹混移。
文本輸入框
文本輸入框、密碼輸入框
當(dāng)用戶要在表單中鍵入字母侮穿、數(shù)字等內(nèi)容時(shí)歌径，就會(huì)用到文本輸入框。文本框也可以轉(zhuǎn)化為密碼輸入框亲茅。
語法：
<form>
<input type="text/password" name="名稱" value="文本" />
</form>
1回铛、type：
當(dāng)type="text"時(shí)，輸入框?yàn)槲谋据斎肟?
當(dāng)type="password"時(shí), 輸入框?yàn)槊艽a輸入框克锣。
2茵肃、name：為文本框命名，以備后臺(tái)程序ASP 袭祟、PHP使用验残。
3、value：為文本輸入框設(shè)置默認(rèn)值巾乳。(一般起到提示作用)
舉例：
<form>
姓名：
<input type="text" name="myName">
<br/>
密碼：
<input type="password" name="pass">
</form>
多行顯示
當(dāng)用戶需要在表單中輸入大段文字時(shí)您没，需要用到文本輸入域。
語法：
<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
1胆绊、<textarea>標(biāo)簽是成對(duì)出現(xiàn)的氨鹏，以<textarea>開始，以</textarea>結(jié)束压状。
2仆抵、cols ：多行輸入域的列數(shù)。
3何缓、rows ：多行輸入域的行數(shù)肢础。
4、在<textarea></textarea>標(biāo)簽之間可以輸入默認(rèn)值碌廓。
舉例：
<form method="post" action="save.php">
<label>聯(lián)系我們</label>
<textarea cols="50" rows="10" >在這里輸入內(nèi)容...</textarea>
</form>
使用單選框传轰、復(fù)選框，讓用戶選擇
語法：
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1谷婆、type:
當(dāng) type="radio" 時(shí)慨蛙，控件為單選框
當(dāng) type="checkbox" 時(shí)，控件為復(fù)選框
2纪挎、value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序PHP使用）
3期贫、name：為控件命名，以備后臺(tái)程序 ASP异袄、PHP 使用
4通砍、checked：當(dāng)設(shè)置 checked="checked" 時(shí)，該選項(xiàng)被默認(rèn)選中
注意:同一組的單選按鈕，name 取值一定要一致封孙，比如上面例子為同一個(gè)名稱“radioLove”迹冤，這樣同一組的單選按鈕才可以起到單選的作用。
http://img.mukewang.com/52e5f7c60001a23f07360267.jpg
下拉列表框虎忌，節(jié)省空間
2泡徙、selected="selected"：
設(shè)置selected="selected"屬性，則該選項(xiàng)就被默認(rèn)選中
http://img.mukewang.com/52e6037300015a9905030165.jpg
下拉列表框進(jìn)行多選
下拉列表也可以進(jìn)行多選操作膜蠢，在<select>標(biāo)簽中設(shè)置multiple="multiple"屬性堪藐，就可以實(shí)現(xiàn)多選功能，在 windows 操作系統(tǒng)下挑围，進(jìn)行多選時(shí)按下Ctrl鍵同時(shí)進(jìn)行單擊（在 Mac下使用 Command +單擊）礁竞，可以選擇多個(gè)選項(xiàng)。如下代碼：
http://img.mukewang.com/52e60c020001b7f805000178.jpg
使用提交按鈕贪惹，提交數(shù)據(jù)
在表單中有兩種按鈕可以使用苏章，分別為：提交按鈕、重置奏瞬。這一小節(jié)講解提交按鈕：當(dāng)用戶需要提交表單信息到服務(wù)器時(shí)枫绅，需要用到提交按鈕。
語法：
<input type="submit" value="提交">
type：只有當(dāng)type值設(shè)置為submit時(shí)硼端，按鈕才有提交作用
value：按鈕上顯示的文字
http://img.mukewang.com/52e613350001461604820109.jpg
使用重置按鈕并淋，重置表單信息
當(dāng)用戶需要重置表單信息到初始時(shí)的狀態(tài)時(shí)，比如用戶輸入“用戶名”后珍昨，發(fā)現(xiàn)書寫有誤县耽，可以使用重置按鈕使輸入框恢復(fù)到初始狀態(tài)。只需要把type設(shè)置為"reset"就可以镣典。
語法：
<input type="reset" value="重置">
type：只有當(dāng)type值設(shè)置為reset時(shí)兔毙，按鈕才有重置作用
value：按鈕上顯示的文字
舉例：
http://img.mukewang.com/52e618680001a6b204570101.jpg
form表單中的label標(biāo)簽
<label for="控件id名稱">
注意：標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性值一定要相同。
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<label for="email">輸入你的郵箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
