HTML網頁編程
前 言：
☆靜態頁面和動態頁面
網站頁面分爲靜態頁面和動態頁面兩種
• 靜態頁面：有一個html頁面文件保存在服務器上，瀏覽器要這個頁面的時候服務器就把這個頁面文件發給瀏覽器；
• 動態頁面：服務器上沒有瀏覽者要看的頁面，而是服務器動態生成的HTML頁面發給瀏覽器，動態語言的服務器端可以用C#、VB.Net、PHP、Java、C等編寫。
☆HTML學習要求
掌握手寫HTML實現一般難度的Web頁面的能力（如網站註冊表單），爲JavaWeb學習打基礎。堅持手寫HTML。
HTML是Hyper Text Markup Language的縮寫，意思是“超文本標識語言”，它實際上是專門用來編寫網頁的一種編程語言。大多數網頁的構成基礎就是HTML的語句。
所有頁面都應該至少包含這些部分，由於瀏覽器容錯性強，所以即使不包含也能正常顯示，但是最好還是寫完全了。
接下來進行一些基本標籤及語法的演示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML概述</title>
</head>
<body>
HTML Hello World!!! 湖南城市學院<br/>
一個網頁大多由以下要素構成：文字、圖片、表格、動畫及聲音。在這些元素中，文字是十分重要的。下面我們就逐一講述涉及文字的標記。
字體大小設置演示：<br/>
<small>小字體</small> <big>大字體</big>
<!-- 利用<font size=''></font>標籤指定字體的大小 -->
<font size=5>你是我的小丫小蘋果</font>
<basefont size="12"><br/>
<!-- 下標籤演示-->
5<sub>2</sub>
<!-- 上標籤演示 -->
5<sup>2</sup>
<hr/>
<!-- 粗體演示 -->
<b>粗體演示</b>
<!-- 下面的斜體演示好像已經被現在瀏覽器版本淘汰了，效果已經演示不出來了 -->
<l>斜體演示</l>
<u>加下劃線演示</u>
<strike>加刪除線演示</strike><hr/>
<!-- 特殊標記的演示 -->
小於號：<<br/>
大於號：><br/>
"&"號：&<br/>
單引號："<br/>
特殊R標籤：®<br/>
特殊c標籤：©<br/>
TM標籤：™
<hr color="red"/>
列表是一種條理化地排列信息的方法。它把內容一條條地水平排列顯示，直觀、清晰。而它也不同於表格，一般列表沒有表格複雜。
<dl>
<!-- 兩者的區別好像比沒有得到很明顯的區別！ -->
<dt>上層項目</dt>
<dd>下層項目</dd>
<dd>下層項目</dd>
<dt>上層項目</dt>
</dl>
<br/>
<!-- 下面兩個的作用好像並沒有得到很大的顯示！ -->
<dir>目錄</dir>
<menu>菜單</menu>
<br/>
下面演示兩個有用的標籤---有序列表和無序列表<br/>
無序列表<br/>
（注意：在沒有設置類型值得時候默認爲disc--實心圓圈）無序列表的幾個屬性值：1）disc：實心圓圈2）square實心矩形3）circle：空心圓圈<br/>
<ul type="circle">
<li>李白</li>
<li>王安石</li>
<li>杜甫</li>
<li>歐陽修</li>
</ul>
有序列表<br/>
類型值和上面的無序列表是一樣的只是改變了圖形的形狀！start="n"中的n是一個數字，此標記符表示重新定義的起始號。<br/>
期末考試成績排名前四名：
<ol type="i" start="1">
<li>張三</li>
<li>李四</li>
<li>王五</li>
<li>Rose玫瑰</li>
</ol>
</body>
</html>效果圖展示：
HTML創建表格代碼實現：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML概述</title>
</head>
<body text="#000000">
表格演示（創建複雜表格）：
<table border="1" width="300" height="150" cellspacing="0" cellpadding="10" bgcolor="gray" >
<!-- caption標籤用來指定表格的標題！自動默認居中（整個表格的中間），該標籤可以設置在表格中的位置：top，left，bottom，right，但是left和right好像被現在版本的瀏覽器淘汰了！效果演示不出來 -->
<caption align="top">表格標題</caption>
<tr> <th bgcolor="yellow">表頭1</th> <th colspan="2">表頭2~表頭3</th> </tr>
<!-- 使用nowrap標籤來進行激活自動換行的屏蔽功能！每行不論多長都不具備換行的效果 -->
<tr> <td nowrap="nowrap" width="100">1行1列</td> <td>1行2列</td> <td>1行3列</td> </tr>
<tr> <td rowspan="2">2行1列~3行1列</td> <td>2行2列</td> <td>2行3列</td> </tr>
<tr> <td bgcolor="blue">3行2列</td> <td>3行3列</td> </tr>
</table>
<hr/>
超鏈接演示：
<a href="file:///E:/MyEclipse10/Workspaces/newHtml/WebContent/Demo.html">HTML演示一超鏈接傳送門</a>
<br/>
<!-- font標籤中使用face屬性來設置字體的形狀：例如：face="黑體" -->
<font size="5" color="red" face="微軟雅黑">使用font標籤是字體顏色和大小發生變化</font>
<hr/>
圖片顯示演示：
<img alt="圖片路徑沒找到" src="../imgs/1.jpg" width="300" height="150" align="top">
<img alt="圖片路徑沒找到" src="../imgs/2.jpg" width="300" height="150" align="top">
<img alt="圖片路徑沒找到" src="../imgs/3.jpg" width="300" height="150" align="top">
<hr color="red"/>
畫中畫演示：
<iframe src="file:///E:/MyEclipse10/Workspaces/newHtml/WebContent/Demo.html">
畫中畫演示：這個很強的--之後和ajax演示一起使用很強！
</iframe>
</body>
</html>
