一、HTML的基本結構
<html>
<head> </head>//內含：<title><meta><link><style><script><base>等結構
<body></body>//內含：段落與文字、列表、表格、圖像、超鏈接、表單、多媒體、框架等結構
</html>
二、文本標籤
1、結構化標記
<h1>~<h6>標題、<p>段落、<br />換行符、<hr />水平線
<b>粗體、<i>斜體、<sup>上標、<sub>下標、<big>大字號標籤、<small>小字號標籤、特殊符號等
2、語義化標記
<strong>加粗、<em>強調、<blockquote>長引用、<q>短引用、<abbr>縮寫字、<acronym>首字母縮寫詞
<cite>引用、<dfn>定義術語、<address>設計者聯繫詳情、<ins>用來顯示已經插入到文檔中的內容（有下劃線）
<del>帶有刪除線（已經應該刪除的文本、詞語）、<s>帶有刪除線（價格）、<u>下劃線標籤
三、列表
有序列表：<ol type="a">、<li> //type屬性：1,a,A,i,I
無序列表：<ul>、<li> //type屬性：disc、circle、square
定義列表：<dl>、<dt>術語、<dd>定義
應用：可嵌套列表
四、鏈接
常用：<a href="目標地址">text</a> //目標地址可爲url（不同網站）、html文件（同一網站內部）
Email鏈接：<a href="mailto:[email protected]">text</a>
target屬性：target="_black" // 作用：在新窗口打開鏈接
鏈接到頁面某個位置：href="#top"
五、圖像
<img src="images/quokka.jpg" alt="A family of quokka" width="600" height="450">
src：圖像路徑；alt：對圖像的文本說明；title：圖像的附加信息；width、height:圖像的寬度和高度
舊代碼中：align：left圖像置左；right：圖像置右；top\middle\bottom：將圖像與它周圍文本的對齊方式
圖像格式：JPEG、GIF動畫、PNG
HTML5中的圖像：<figure>圖像標籤、<figcaption>圖像說明
exp：<figure><img src="*.jpg" ><figcaption>說明</figcaption></figure>
六、表格
1、表格
<table>
<caption>表格標題</caption>
<tr><th>標題1</th><th>標題2</th></tr>
<tr><td>內容1</td><td>內容2</td></tr>
</table>
跨列：<td colspan="2" rowspan="2">內容1</td>
2、長表格
<table>
<thead>
<tr>
<th>列標題</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th>行標題</th>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
寬度和間隔：<table width="400px" cellpadding="10" cellspacing="5" ></table>
邊框和背景：<table border="2" bgcolor="#efefef" ></table>
七、表單
1、表單的結構
<form action="URL" method="get/post"></form>
action屬性：服務器上一個頁面的URL。method：表單的提交方法。
常用控件：
單行文本框：<input type="text" name="username" size="15" maxlength="30"/>
size在舊錶單中使用，用於制定文本寬度（可見字符數量）、maxlength限制用戶在文本區域輸入字符的數量
密碼框：<input type="password" name="password" size="15" maxlength="30">
文本域：<textarea name="comments" cols="20" rows="4"></textarea>
cols用於指定文本域有多寬，rows指定文本域在縱向上佔據的行數
單選按鈕：<input type="radio" name="genre" value="rock" checked="checked"/>
複選框：<input type="checkbox" name="service" value="itunes" checked="checked" />
下拉列表：<select name="devices">
<option value="ipad">ipad</option>
<option value="radio">radio</option>
</select>
下拉列表也有selected選項
多選框：<select name="instruments" size="3" multiple="multiple">
<option value="guitar" selected="selected">Guitar</option>
<option value="drums">Drums</option>
</select>
multiple可允許用戶從列表中方選擇多個選項
文件上傳域：<input type="file" name="user-song" />
<input type="submit" value="Upload" />
表單按鈕：<input type="button" value="普通按鈕的取值" onclick="JavaScript腳本程序"/>
提交按鈕：<input type="submit" name="subscribe" value="Subscribe"/>
圖像作爲提交按鈕：<input type="image" src="images/subscribe.jpg" width="100" height="20">
按鈕：<button><img src="" alt="" width="" height=""/></button>//可以將圖像作爲按鈕
隱藏控件：<input type="hidden" name="bookmark" value="lyrics"/>
標籤表單控件：<label>Age：<input type="text" name="age" /></label><br/>
Gender:<input id="female" type="radio" name="gender" value="f">
<label for="female">Female</label>
<label id="male" type="radio" name="gender" value="m">
<label for="male">Male</label>
for屬性用來說明標籤控件用來標註的是哪個表單控件
組合表單元素：<fieldset>
<legend></legend>
<label></label>
</fieldset>
HTML5表單驗證：required屬性值
<input type="text" name="username" required="required"/>
HTML5日期控件：type="date"
<input type="date" name="depart"/>
HTML5電子郵件和URL控件：type="email"，type="url"
<input type="url" name="website"/>
<input type="email" name="email">
HTML5搜索輸入控件：type="search"，placeholder
<input type="search" name="search" placeholder="Enter keyword"/>
其他標記：<div><span>
內聯框架：<iframe width="450" height="350" src=""></iframe>
html4：scrolling、frameborder
html5：seamless應用在不需要滾動條的地方
頁面信息 <meta name="description/keywords/robots" content="a text words">
<meta http-equiv="author/robots/pragma/expries" content="Fri,04 Apr...">
description:頁面描述信息，keywords：關鍵詞，robots：是否將頁面加入搜索引擎的搜索結果
author:定義網頁設計者，pragma：防止瀏覽器對頁面的緩存，expries：制定頁面過期時間
八、Flash、視頻和音頻
1、音頻：<embed src="media/青花瓷.mp3" width="400px" height="80px"/>
2、視頻：<embed src="media/小蘋果.wmv" width="400px" height="80px"/>
3、flash動畫：<embed src="App_images/lesson/hj/helloworld.swf"/>
九、浮動框架iframe
<iframe src="浮動框架的源文件" width="浮動框架的寬" height="浮動框架的高"></iframe>