一：認識HTML：
網頁一般又稱HTML（Hyper Text Mark-up Language ）文件，即超文本標記語言（
用於描述網頁文檔的一種標記語言。）。是一種在www上傳輸、能被瀏覽器認識和翻譯成頁面並顯示出來的文件。文字與圖片是構成一個網頁的兩個最基本的元素，除此之外還包括動畫、音樂、程序等。網頁是構成網站的基本元素，是承載各種網站應用的平臺，網頁文件一般以：HTM、HTML、CGI、ASP、PHP、和JSP後綴結尾。目前網頁根據生成方式，大致可以分爲靜態網頁與動態網頁兩種。
1.什麼是靜態網頁?
網站建設者把內容設計成靜態網頁，訪問者只能被動地瀏覽網站建設者提供的網頁內容，其特點如下：
（1）網頁內容不會發生變化，除非網頁設計者修改了網頁的內容。
（2）不能實現和瀏覽網頁的用戶之間的交互。信息流向是單向的。
2.什麼是動態網頁?
動態網頁是建立在B/S架構上的服務器端腳本程序。其特點如下：
（1）以數據庫技術爲基礎，大大降低網站維護的工作量。
（2）採用動態網頁技術的網站可以實現更多的功能，如：用戶登錄註冊、搜索查詢等。
（3）動態網頁並不是獨立存在於服務器上的網頁文件，只有當用戶請求時服務器才返回一個完整的網頁。
（4）搜索引擎一般不可能從一個網站的數據庫中訪問全部網頁，因此採用動態網頁的網站在進行搜索引擎推廣時需要做一定的技術處理才能適應搜索引擎的要求。
3.靜態網頁和動態網頁的區別？
**--web服務器對它們的處理方式不同。
（1）當web服務器接收到對靜態網頁的請求時，服務器直接直接將該頁發送給客戶瀏覽器，不進行任何處理。無交互，信息單向流動。
（2）當web服務器接收到對動態網頁的請求時，從web服務器中找到該文件，並將它傳遞給一個稱爲應用程序服務器的特殊軟件擴展，由它負責解釋和執行網頁，將執行後的結果傳遞給客戶瀏覽器。實現交互，信息雙向流動。
二：HTML特性：
HTML文本是由 HTML命令組成的描述性文本，HTML 命令可以說明文字、 圖形、動畫、聲音、表格、鏈接等。 HTML的結構包括頭部 (Head)、主體 (Body) 兩大部分。頭部描述瀏覽器所需的信息，主體包含所要說明的具體內容。（概括）主要特點如下：
（1）HTML 指的是超文本標記語言: HyperText Markup Language
（2）HTML 不是一種編程語言，而是一種標記語言
（3）標記語言是一套標記標籤 (markup tag)，通常被稱爲 HTML 標籤 (HTML tag)
（4）HTML 使用標記標籤來描述網頁
（5）HTML 文檔包含了HTML 標籤及文本內容
（6）HTML文檔也叫做 web 頁面
（7）HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>
（8）HTML 標籤通常是成對出現的，比如 <b> 和 </b>
（9）標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
（10）開始和結束標籤也被稱爲開放標籤和閉合標籤
（11）HTML標籤又稱HTML元素，其又分爲父元素（網頁固定元素）和子元素（其他元素）
三：HTML文件結構如下：
<html>
<head>
<title>這裏是頁面標題</title>
</head>
<body>這裏插入文字等其他子元素標籤，爲可視化網頁內容</body>
</html>
四：開發平臺
（1）Adobe Edge
（2）Adobe Dreamweaver CS6（主流）
（3）JetBrains WebStorm 4.0
五：可支持瀏覽器
（1）IE
（2）Firefox
（3）Opera
（4）Chrome （開發者多用，主流，推薦）
（5）Safari
六：標籤
<!--...--> 定義註釋。
<!DOCTYPE> 定義文檔類型。
<a> 定義超鏈接。
<abbr> 定義縮寫。
<acronym> HTML 5 中不支持。定義首字母縮 寫。
<address> 定義地址元素。
<applet> HTML 5 中不支持。定義 applet。
<area> 定義圖像映射中的區域。
<article> 定義 article。
<aside> 定義頁面內容之外的內容。
<audio> 定義聲音內容。
<b> 定義粗體文本。
<base> 定義頁面中所有鏈接的基準 URL。
<basefont> HTML 5 中不支持。請使用 CSS 代替。
<bdo> 定義文本顯示的方向。
<big> HTML 5 中不支持。定義大號文本。
<blockquote> 定義長的引用。
<body> 定義 body 元素。
<br> 插入換行符。
<button> 定義按鈕。
<canvas> 定義圖形。
<caption> 定義表格標題。
<center> HTML 5 中不支持。定義居中的文本。
<cite> 定義引用。
<code> 定義計算機代碼文本。
<col> 定義表格列的屬性。
<colgroup> 定義表格列的分組。
<command> 定義命令按鈕。
<datalist> 定義下拉列表。
<dd> 定義定義的描述。
<del> 定義刪除文本。
<details> 定義元素的細節。
<dfn> 定義定義項目。
<dir> HTML 5 中不支持。定義目錄列表。
<div> 定義文檔中的一個部分。
<dl> 定義定義列表。
<dt> 定義定義的項目。
<em> 定義強調文本。
<embed> 定義外部交互內容或插件。
<fieldset> 定義 fieldset。
<figcaption> 定義 figure 元素的標題。
<figure> 定義媒介內容的分組，以及它們的標題。
<font> HTML 5 中不支持。
<footer> 定義 section 或 page 的頁腳。
<form> 定義表單。
<frame> HTML 5 中不支持。定義子窗口（框架）。
<frameset> HTML 5 中不支持。定義框架的集。
<h1> to <h6> 定義標題 1 到標題 6。
<head> 定義關於文檔的信息。
<header> 定義 section 或 page 的頁眉。
<hgroup> 定義有關文檔中的 section 的信息。
<hr> 定義水平線。
<html> 定義 html 文檔。
<i> 定義斜體文本。
<iframe> 定義行內的子窗口（框架）。
<img> 定義圖像。
<input> 定義輸入域。
<ins> 定義插入文本。
<keygen> 定義生成密鑰。
<isindex> HTML 5 中不支持。定義單行的輸入域。
<kbd> 定義鍵盤文本。
<label> 定義表單控件的標註。
<legend> 定義 fieldset 中的標題。
<li> 定義列表的項目。
<link> 定義資源引用。
<map> 定義圖像映射。
<mark> 定義有記號的文本。
<menu> 定義菜單列表。
<meta> 定義元信息。
<meter> 定義預定義範圍內的度量。
<nav> 定義導航鏈接。
<noframes> HTML 5 中不支持。定義 noframe 部分。
<noscript> 定義 noscript 部分。
<object> 定義嵌入對象。
<ol> 定義有序列表。
<optgroup> 定義選項組。
<option> 定義下拉列表中的選項。
<output> 定義輸出的一些類型。
<p> 定義段落。
<param> 爲對象定義參數。
<pre> 定義預格式化文本。
<progress> 定義任何類型的任務的進度。
<q> 定義短的引用。
<rp> 定義若瀏覽器不支持 ruby 元素顯示的內容。
<rt> 定義 ruby 註釋的解釋。
<ruby> 定義 ruby 註釋。
<s> HTML 5 中不支持。定義加刪除線的文本。
<samp> 定義樣本計算機代碼。
<script> 定義腳本。
<section> 定義 section。
<select> 定義可選列表。
<small> 定義小號文本。
<source> 定義媒介源。
<span> 定義文檔中的 section。
<strike> HTML 5 中不支持。定義加刪除線的文本。
<strong> 定義強調文本。
<style> 定義樣式定義。
<sub> 定義下標文本。
<summary> 定義 details 元素的標題。
<sup> 定義上標文本。
<table> 定義表格。
<tbody> 定義表格的主體。
<td> 定義表格列。
<tr> 定義表格行。
<textarea> 定義 textarea。
<tfoot> 定義表格的腳註。
<th> 定義表頭。
<thead> 定義表頭。
<time> 定義日期/時間。
<title> 定義文檔的標題。
<tt> HTML 5 中不支持。定義打字機文本。
<u> HTML 5 中不支持。定義下劃線文本。
<ul> 定義無序列表。
<var> 定義變量。
<video> 定義視頻。
<xmp> HTML 5 中不支持。定義預格式文本。
***----部分常用屬性----***：
（1）表格（table）中：
colspan:跨列，例：colspan="2"
rowspan：跨行,例：rowspan="2"
cellspacing：單元格與單元格之間的間距,例：cellspacing="0";
cellpadding：單元格內部文字與單元格之間的空隙,例:cellpadding="0";
align：表格對其方式 ，用在table標籤裏面,屬性值有:center、left、right
（2）音頻（audio）--視頻（video）中：
autoplay ：是否自動播放autoplay="autoplay"，<"true"爲音樂文件讀取完後立即播放，"false"則不立即播放，默認值爲"false" >
loop：循環次數loop="2";<設置爲"true"爲永遠循環，"false"爲僅播放一次，若設爲任意一正整數，則循環所輸入的次數。>
controls ：設置音樂播放控制面板的外觀；control屬性供添加播放、暫停和音量控件。
console：爲通常面板,smallconsole爲小型面板。Console="console";
（3）表單--form中
表單是一個包含表單元素的區域，表單元素是允許用戶在表單中（比如：文本域、單選按鈕、複選框 等等）輸入信息的元素。
placeholder ：提供一種提示（hint），描述輸入域所期待的值。 提示（hint） 會在輸入域爲空時顯示出現，會在輸入域獲得焦點時消失。例：
<input type="text" name="user_name" placeholder="必填項" />
required ：規定必須在提交之前填寫輸入域（不能爲空）。例：
Name: <input type="text" name="usr_name" required="required" />
七：一般的應用示例
（1）音頻（audio）--視頻（video）
| <html> | |
| <head> | |
| <title></title> | |
| </head> | |
| <body background="7.jpg"> | |
| <audio controls="controls" console="console" loop="2" autoplay="autoplay"> | |
| <source src="熊出沒.mp3" type="audio/mp3"> | |
| </audio> | |
| <video controls="controls" console="console" height="600" width="800"> | |
| <source src="至少要知道這個 舞蹈版 中韓字幕--音悅Tai.mp4" type="video/mp4"> | |
| </video> | |
| </body> | |
| </html> |
（2）文字修飾--表格（table）
| <html> | |
| <head> | |
| <title>你們都是套路</title> | |
| </head> | |
| <body background="7.jpg"> | |
| 城市套路深，我要回農村。<br/> | |
| 農村路也滑，人心更復雜。<br/> | |
| 靜夜思<br/> | |
| <p><font color="black" size="50" face="DFkai-SB"><center>靜夜思</center></font></p> | |
| <p><strong> 牀前 明月 光牀 前明 月光，</strong></p> | |
| <p><b>疑是地上霜。</b></p> | |
| <p>舉頭望明月，</p> | |
| <p>低頭思故鄉。</p> | |
| <h1>靜夜思</h1> | |
| <h2>靜夜思</h2> | |
| <h3>靜夜思</h3> | |
| <h4>靜夜思</h4> | |
| <h5>靜夜思</h5> | |
| <h6>靜夜思</h6> | |
| <ol type="Z"> | |
| <li>靜夜思</li> | |
| <li>靜夜思</li> | |
| </ol> | |
| <ul> | |
| <li>靜夜思</li> | |
| <li>靜夜思</li> | |
| </ul> | |
| <a href="http://www.baidu.com">度娘都知道</a> | |
| <img src="6.jpg" height="500" width="500" /> | |
| <table background="6.jpg" border="1" height="500" width="1000" cellspacing="0"> | |
| <caption>這是示例</caption> | |
| <tr> | |
| <td>1這是列 </td> | |
| <td>1這是列</td> | |
| </tr> | |
| <tr> | |
| <td>1</td> | |
| <td>2</td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> |
（3）表單（form）--跳轉
-----------index.html
| <html> | |
| <head> | |
| <title></title> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| <form> | |
| <p><h1 align="center">This is example</h1></p> | |
| user:<input type="text" name="user"><br/><br/> | |
| pw.d:<input type="text" name="pwd"><br/><br/> | |
| <a href="success.html"><input type="button" value="login"></a> | |
| <a href="regist.html"><input type="button" value="regist"></a> | |
| </form> | |
| </body> | |
| </html> |
----------success.html
| <html> | |
| <head> | |
| <title></title> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| <p align="center">登錄成功<p> | |
| </body> | |
| </html> |
------------------regist.html
| <html> | |
| <head> | |
| <title></title> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| <form> | |
| <p><h1 align="center">welcome regist</h1></p> | |
| <p>name:<input type="text" required="required"><font color="red">*not null</font></p><br/> | |
| <p>sex: <input type="radio" name="sex">boy <input type="radio" name="sex">girl <font color="red">*singel choice</font></p> | |
| <p>My hobby : <font color="red">*multi choice</font> | |
| <p><input type="checkbox">I like Swimming</p> | |
| <p><input type="checkbox">I like sing</p> | |
| <p><input type="checkbox">I like read</p> | |
| </p> | |
| <p>I`m from : | |
| <select> | |
| <option value="chengdu">chengdu</option> | |
| <option value="china">china</option> | |
| <option value="english">english</option> | |
| <option value="nanchong">nanchong</option> | |
| </select> | |
| <font color="red">*singel choice</font> | |
| </p> | |
| <p>Email:<input type="email" name="user_email" placeholder="[email protected]"><font color="red">*please input true number</font></p> | |
| <p>my-burn:<input type="date" name="user_date"><font color="red">*must choice</font></p> | |
| <p>Pwd:<input type="pwd" name="points" min="6" max="12"/><font color="red">*please input 6-12 between number</font></p> | |
| <p><a href="1.html"><input type="button" value="submit"></a> | |
| <a href="1.html"><input type="button" value="back"></a> | |
| </p> | |
| </form> | |
| </body> | |
| </html> |
八：關於XHTM
1.XHTML的特點：
（1）XHTML 指可擴展超文本標籤語言（EXtensible HyperText Markup Language）。
（2）XHTML 的目標是取代 HTML。
（3）XHTML 與 HTML 4.01 幾乎是相同的。
（4）XHTML 是更嚴格更純淨的 HTML 版本。
（5）XHTML 是作爲一種 XML 應用被重新定義的 HTML。
（6）XHTML 是一個 W3C 標準。
注：XHTML 是更嚴格更純淨的 HTML 代碼。XHTML 是一個 W3C 標準 。
2.XHTML的演變：
（1）XML 是一種標記化語言
（2）XML 用來描述數據，而 HTML 則用來顯示數據
（3）HTML沒有能力和手段來解釋糟糕的標記語言
（4）XHTML擁有良好結構的文檔，這些文檔可以很好地工作於所有的瀏覽器，並且 可以向後兼容。
3.XHTML 與 HTML 之間的差異：
最主要的不同：
（1）XHTML 元素必須被正確地嵌套。
（2）XHTML 元素必須被關閉。
（3）標籤名必須用小寫字母。
（4）XHTML 文檔必須擁有根元素。
（5）XHTML 元素必須被關閉
非空標籤必須使用結束標籤。
空標籤也必須被關閉
空標籤也必須使用結束標籤，或者其開始標籤必須使用/>結尾。
更多的 XHTML 語法規則：
（1）屬性名稱必須小寫
（2）屬性值必須加引號
（3）屬性不能簡寫
（4）用Id 屬性代替 name 屬性
（5）XHTML DTD 定義了強制使用的 HTML 元素
（6）屬性名稱必須小寫
（7）強制使用的XHTML元素：文件類型聲明（DOCTYPE declaration），它並不是 XHTML元素，也沒有關閉標籤
4.三種XHTML文檔類型：
（1）XHTML 1.0 Strict（嚴格類型）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
在此情況下使用：需要乾淨的標記，避免表現上的混亂。請與層疊樣式表配合使用。
（2）XHTML 1.0 Transitional（過渡類型）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在此情況下使用：當需要利用 HTML 在表現上的特性時，並且當需要爲那些不支持層疊樣式表的瀏覽器編寫 XHTML 時。
（3）XHTML 1.0 Frameset（框架類型）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
在此的情況下使用：需要使用HTML框架將瀏覽器窗口分割爲兩部分或更多框架時。
注：（1）使用最普遍的是 XHTML Transitional。
（2）文件類型聲明添加至每頁的首行，
（3）如果你希望將頁面驗證爲正確的XHTML，那麼頁面中必須含有文件類型聲
明。
5.XHTML文檔驗證：
（1） 根據文檔類型聲明進行驗證的
（2）通過 DTD 驗證 XHTML：
XHTML 文檔是根據文檔類型聲明（DTD）進行驗證的。只有將正確的 DTD 添加到文件的首行，XHTML 文件纔會被正確地驗證
6.XHTM—空標籤：
<hr> 、 <br> 、<img>
（1）在 XHTML 中是不允許使用空標籤（Empty tags）的。<hr> 和 <br> 標籤應該被替換爲 <hr /> 和 <br />。
使用方式：
（2）不要使用閉合標籤來關閉 <img>，而是要在標籤的末端添加 / >。