---------------------- ASP.Net+Android+IOS開發、.Net培訓、期待與您交流！ ----------------------
一、 什麼是HTML
HTML（Hyper Text Mark-up Language）超文本標記語言。它不是一種編程語言，而是一種描述性的標記語言，用於網頁中內容的顯示樣式。標記就是用來描述網頁內容的一些特殊符號。
二、 網頁的分類
網頁大體可以分爲兩大類：靜態頁面和動態頁面。
靜態頁面：有一個HTML頁面文件保存在網站服務器上，當瀏覽器請求要這個頁面時服務器就把這個頁面文件發給瀏覽器，這樣瀏覽器就可以顯示用戶想要的頁面了。
動態頁面：瀏覽器上沒有用戶想要瀏覽的頁面，而是服務器動態的從數據庫中提取數據來動態生成的HTML頁面發送給瀏覽器。
三、 HTML頁面結構
在Visual Studio是新建Web項目的方法：新建WebèASP.Net Web應用程序；
新建HTML頁面的方法：右擊項目名稱==>添加==>新建項==>Web==>HTML頁。
HTML頁面基本結構：
<html>
<head>
<title>頁面標題</title>
</head>
<body>
頁面主體
</body>
</html>
結構說明：
1、所有內容都寫在<html></html>標籤內；
2、<head></head>內放的是頁面的頭部信息，是對頁面的描述信息，不會直接顯示在頁面中；<title></title>中設置頁面標題，<title>只能放在<head>中；
3、<body></body>中放的是頁面的主體內容，網頁的大部分內容都定義在這個標籤中，<body>標籤的bgcolor屬性可以設置網頁背景色。
4、所有頁面都應該至少包含這些標籤。
四、 HTML和XML的聯繫和區別
1、 格式標籤：在HTML中有一些標籤是可以不關閉的，<br>就是一個，而在XML中要求所有的標籤都必須關閉，開始即關閉的標籤可以簡寫爲：<br />。在HTML中爲了遵循XHTML規範，推薦像XML一樣嚴格關閉。
2、 屬性：在HTML中屬性的值既可以用單引號括起來，也可以用雙引號括起來，甚至可以不用引號（不推薦），但在XML中要求屬性值必須用雙引號括起來。引號要成對出現。
3、 相同點：HTML和XML中使用註釋的方法相同，<!—註釋內容-->。
特殊字符：HTML中<和>是有特殊含義的，像這種有特殊含義的字符需要有特定表示方法，如：“< ”：表示小於號，“> ”：表示大於號，“ ”：表示一個空格，表達式中的分號千萬不能丟。
五、 HTML常用標籤（標記）
1、 文本格式標籤
<br />：回車換行
<hr />：水平線，
<hr width="80%" align="left" />
<b>：字體加粗
<font>：字體樣式標籤，
<font size="7" color="red">黑馬程序員</font>
<center>：居中對齊
h 標籤：HTML中定義了<h1><h2>……<h6>六個h標籤，分別表示不同的字體大不，h1最大，h6最小。
<pre>：以用戶定義的格式來顯示，當輸入多個空格時會全部顯示出來。
2、 超鏈接標籤
URL：統一資源定位器，表示資源在網絡中的地址。
<a>：超鏈接
<a href="http://www.rupeng.com"><img src="http://www.rupeng.com/logo.gif" /></a>將<a>的target屬性設定爲”_blank”就可以在新窗口中打開超鏈接了。
實現站內跳轉：用name屬性爲<a>起名字，<a name=”Top”>這裏是頂部</a> ，這樣可以通過<a href=”#Top”>跳轉到頂部</a> 來實現站內跳轉的效果。
3、 圖片標籤
<img>：<img src="a.jpg" />注意圖片是鏈接進來的，不是插入的，所以如果src指向的圖片不存在了，網頁內也就看不到該圖片了。
alt屬性：圖片無法顯示時顯示的說明文本。
border屬性：指定邊框大小，border=”0” 不顯示邊框。
width,height：表示圖片的寬度和高度，需要在style屬性中指定，
<img src=”a.jpg” style=”width:50px;height:50px” ></img>注意：最好手動指定圖片的width和height，哪怕是原始尺寸，這樣做的好處是，加載網頁時就算圖片沒有加載完成，也會先把圖片的空間占上，當網頁加載完成後不會使網頁總局亂掉。
4、 列表標籤
<ul>：無序列表(unordered list)
語法：
<ul style="list-style-type:disc">
<li style="list-style-type:square;color:Red">111</li>
<li style="list-style-type:none">222</li>
<li>333</li>
</ul><ol>：有序列表
<ol>
<li style="color:Red">aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>輸出：1. aaa
2. bbb
3. ccc
5、 表格標籤<table>
<tr>：創建行
<td>：在<tr>中創建單元格，colspan、rowspan用於合併單元格
border屬性：表格邊框，
表頭的<td>可以用<th>代替，這樣表頭爲粗體，居中對齊方式
如：
<table border="2" style="width:200px;height:150px;border-color:Orange" >
<tr style="background-color:Gray"><th>姓名</th><th>年齡</th><th>性別</th></tr>
<tr><td align="right">john</td><td>36</td><td>男</td></tr>
<tr style="background-color:Olive"><td>lily</td><td align="center">25</td><td>女</td></tr>
<tr><td>tom</td><td>20</td><td><font style="color:Red">保密</font></td></tr>
<tr><td colspan="2" align="center">合併單元格</td> <td>一個</td></tr>
</table>
輸出：
|
姓名 |
年齡 |
性別 |
|
john |
36 |
男 |
|
lily |
25 |
女 |
|
tom |
20 |
保密 |
|
合併單元格 |
一個 |
|
6、 表單標籤<form>
<form action="Default.aspx" method="get/post" accept-charset="utf-8">
<input type="button" value="按鈕" />
<a href="http://www.itcast.com">黑馬</a>
<input type="submit" />
<input type="text" value="123" />
<input type="password" value="1111" />
<input type="file" />
<input type="checkbox" checked="checked" />
</form>
說明：
action：表示把表單提交給誰
method：是指提交的方式，有兩種：get和post，post方法允許傳送大量信息，get只接受低於1K的信息。
<input>是主要的表單元素，其type屬性的可選值有：submit(提交按鈕)，button(普通按鈕)，checkbox(複選框)，file(文件選擇框)，hidden(隱藏字段)，image(圖片按鈕)，password(密碼框)，radio(單選按鈕)，reset(重置按鈕)，text(文本框)。
<input>表單元素詳解
<submit>：點擊submit按鈕表單會被提交到action屬性指向的服務器，可以設置value屬性修改按鈕顯示的文本。
<text>：普通文本框，size屬性爲文本框的寬度，value爲顯示的文本內容，maxlength爲可以輸入的最大長度，readonly只讀。
<checkbox>：複選框，checked屬性表示複選框是否被選中。
<radio>：單選按鈕，使用name屬性對radio進行分組，相同name的爲一個組，不同的radio設定不同的value值，這樣通過取指定name的值就可以知道誰被選中了，不用單獨判斷，可以實現組內互斥。
<file>：文件選擇框，使用file則<form>的enctype屬性設爲" multipart/form-data"， method屬性設爲"post"。
<image>：圖片按鈕，使用src屬性指定圖片的地址，它是一個按鈕。
7、 select標籤
用來創建類似於winform中的ListBox或ComboBox，創建的到底是ListBox還是ComboBox是由select標籤的size屬性來決定的，size是指列表框顯示列表項的條數，如果size屬性的值大於1創建的就是ListBox，否則就是ComboBox。
selected屬性：默認選定某一項
<option>：select中的數據項
<select id="province">
<option selected="selected">請選擇</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>山東</option>
</select>輸出：
<optgroup>：對option項進行分組，使用label=""屬性設置組名。
如：
<select size="1" name="province">
<optgroup label="山東省"></optgroup>
<option>濟南</option>
<option>煙臺</option>
<option>青島</option>
<optgroup label="江蘇省"></optgroup>
<option>南京</option>
<option>蘇州</option>
<optgroup label="河北省"></optgroup>
<option>天津</option>
<option>唐山</option>
</select>輸出：
8、 label標籤
在<input type=”text” />前可以寫普通的文本修飾，但是單擊修飾文本的時候input元素不會獲得焦點，而使用<label>可以實現此效果，<label>標籤中有一個for屬性，用來指定該label爲哪個控件做標籤，此時需要爲控件的id屬性設置一個值，用<label>的for屬性指向控件的id即可。
如：
<label for="username">用戶名：</label><input type="text" id="username" />此時點擊“用戶名：”修飾文本時，文本框就可以得到輸入焦點。
9、 textarea標籤
多行文本框，cols屬性：列數，rows屬性：行數
如：
<textarea cols="80" rows="10" style="background-color:Gray">
正則表達式的“祖先”可以一直上溯至對人類神經系統如何工作的早期研究。Warren McCulloch 和 Walter Pitts 這兩位神經生理學家研究出一種數學方式來描述這些神經網絡。
1956 年, 一位叫 Stephen Kleene 的數學家在 McCulloch 和 Pitts 早期工作的基礎上，發表了一篇標題爲“神經網事件的表示法”的論文，引入了正則表達式的概念。正則表達式就是用來描述他稱爲“正則集的代數”的表達式，因此採用“正則表達式”這個術語。
</textarea>
輸出：
10、 fieldset標籤
將多個控件放到一個區域裏，效果類似於wimform中的GroupBox。
<fieldset style="width:40% border-width:medium; border-color:Red; background-color:Silver">
<legend>愛好：</legend>
<input type="checkbox" id="basketball" /><label for="basketball">籃球</label>
<input type="checkbox" id="soccer" /><label for="soccer">足球</label>
<input type="checkbox" id="pingpball" /><label for="pingpball">乒乓球</label>
<input type="checkbox" id="running" /><label for="running">跑步</label>
<input type="checkbox" id="reading" /><label for="reading">讀書</label>
</fieldset>輸出：
六、 CSS（層疊樣式表）
CSS是用來美化頁面用的，可以對頁面元素進行更精細的設置，樣式主要描述元素的字體顏色、背景色、邊框樣式等。簡單的可以理解爲組網頁換皮膚。
CSS的使用方式有三種：元素內聯，頁面嵌入，外部引用。
1、 元素內聯
元素內聯就是直接將樣式寫入元素的style屬性中。如：
<input type="text" value="這是個普通文本框"style="background-color:Gray;border-color:Red;color:Blue"/>輸出：
2、 頁面嵌入
將CSS樣式寫在<head></head>中，這樣頁面內所有指定的元素均顯示爲定義的樣式。適用於樣式利用，減小頁面空間
<style type="text/css">
input{ background-color:Gray;border-color:Green;color:Blue}
</style>
表示頁面中所有的input標籤都採用這個樣式。
3、 外部引用
把CSS樣式寫入.css的樣式表中，然後在頁面中引用.css樣式表文件。
如：新建一個.css文件，並起名爲css1.css，向樣式表文件中添加如下樣式：
input
{
background-color:Gray;
border-color:Yellow;
color:Blue
}
p
{
color:Red;
font-size:xx-large
}
定義完樣式表後，在頁面中引用樣式表，在<head></head>中加入如下代碼：
<link type="text/css" rel="Stylesheet" href="css1.css" />這樣就把樣式表定義的樣式鏈接到了頁面中。
通過這種方法可以實現頁面換膚的效果。
---------------------- ASP.Net+Android+IOS開發、.Net培訓、期待與您交流！ ----------------------
詳細請查看：http://edu.csdn.net