說明：本文檔是由本人多年前剪切整理的，已不知主要來源是甚，如有冒犯，知會一聲哈
一、HTML 基本樣式
<html>
<head>
<title>頁面標題</title>
</head>
<body>
頁面內容
</body>
</html>
二、HTML 常用標籤
2.1 HTML 常見的基本標籤
<!-- .... -->：註釋
<html>：HTML文檔的根標籤
<head>：HTML頁面的頭部標籤
<title>：HTML頁面標題，放置於<head></head>之間
<body>：HTML頁面主體部分
<meta>：定義文件信息，對網頁進行說明，便於搜索引擎查找，放置於<head></head>之間
設置關鍵字：<meta name = "keywords" content="zzq"/>
設置描述：<meta name = "description" content="小僑"/>
設置作者：<meta name = "author" content="小僑"/>
設置字符集：<meta http-equiv ="content-type" content="text/html;charset=utf-8"/>
設置頁面定時跳轉：<meta http-equiv = "refresh" content="時間秒數;url=網頁地址"/>
<style>：用於引入CSS文件，一般放於<head></head>之間
<script>：用於引入JavaScript文件，一般放於<head></head>之間
<h1>到<h6>：定義標題一到標題六，和world一致
<p>：定義段落
<div>：定義文檔中的結構，爲HTML提供結構和背景
<span>：和<div>基本相似，區別是<span>定義的默認不換行
<br/>：單標籤，插入一個換行
<hr/>：單標籤，定義一條水平線
<center>：網頁的內容默認是居左顯示，而<center></center>之間的內容居中
<font>：用於設置字體顏色、大小、字體
<p>,<div>,<span>的區別：
<span>...</span> 標籤不會導致換行
<div>...</div> 會換行
<p>...</p> 會產生一個段落，段落和段落之間默認有很大的間距
2.2 文本格式化標籤
<b>：定義粗體文本
<i>：定義斜體文本
<em>：定義強調文本，效果和<i>差不多
<strong>：定義粗體文本，和<b>效果差不多
<sup>：定義上標文本，主要做數學上的次方表達式 X2 + Y2 = Z2
<sub>：定義下標文本，主要做化學上的分子式 O2 +2H2 = 2H2O
<bdo>：定義文本顯示方向，屬性dir值有ltr(左到右)和rtl(右到左)
<del>：定義刪除體文本，即文本有中線
2.3 語義相關標籤
<address>：表示一個地址，瀏覽器默認以斜體顯示其包含文本
<pre>：該標籤表示的文本可 "預格式化"，即該標籤能保留文本中的空格、回車、製表符等字符【prestrain】
<blink>：可定義閃爍文本，但是有瀏覽器不兼容問題
2.4 超鏈接和錨點
<a>：可定義錨(anchor)，錨有兩種用法
通過使用 href 屬性，創建指向另外一個文檔的鏈接（或超鏈接）
通過使用 name 或 id 屬性，創建一個文檔內部的書籤（也就是說，可以創建指向文檔片段的鏈接）
<a href =”#A1”>第一章</a>
<a href =”#A2”>第二章</a>
<a name =”A1”>第一章內容</a>
<a name =”A2”>第二章內容</a>
<a> 標籤的兩個重要屬性
href：它指鏈接的目標，也就是超鏈接關聯的另一個資源
target：指定使用框架集中的哪個框架來裝載另一個資源
屬性值有：
_slef：表示自身，默認
_blank：新窗口
_top：頂層框架
_parent：父框架
"name"：指定框架
<base>：標籤爲頁面上的所有鏈接指定默認地址或默認目標
<base> 必須位於<head></head>標籤之間
<a> 標籤還可以發送郵件
<a href="mailto:收件人郵箱?cc=抄送郵箱&subject=主題&body=內容">聯繫我</a>
2.5 列表相關標籤
Unorder list<ul>：定義無序列表，該元素只能包含 list item<li>子標籤
type屬性：可指定列表項目符號類型，屬性值有
disc：表示實心圓點 ●
square：表示實現方塊 ■
circle：表示空心圓圈 ○
Order list<ol>：定義有序列表，該元素只能包含<li>子標籤
type屬性：可指定列表項目序號類型，屬性值有：
A：表示使用大寫英文字母作爲序號，如A、B、C 等
a：表示使用小寫英文字母作爲序號，如a、b、c 等
I：表示使用大寫羅馬數字作爲序號，如I、II、III 等
i：表示使用小寫羅馬數字作爲序號，如i、ii、iii 等
1：表示使用阿拉伯數字作爲序號，如1、2、3 等
start屬性：可表示列表的起始序號
<ol type="A" start=3>
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
</ol>
C.蘋果
D.香蕉
E.檸檬
<li>：定義列表項目，該標籤可以包含多種子元素
<dl>：用於定義列表，該標籤只能有<dt>，<dd>兩種子標籤
<dt>：定義列表項的標題
<dd>：定義普通列表項
2.6 圖像相關標籤
<img>：用於向網頁中嵌入一張圖片，請注意，從技術上講<img> 標籤並不會在網頁中插入圖像，而是從網頁上鍊接圖像
<img>：標籤有兩個必需的屬性：src 和 alt
src：該屬性指定顯示圖片文件所在位置
alt：該屬性指定一段文本，可用於當圖片不能顯示時顯示的提示信息
height：指定圖片高度，可是像素值或百分比
width：指定圖片寬度，可是像素值或百分比
<map>：創建圖像地圖，指帶有可點擊區域的一幅圖像
<area>：定義圖像地圖中的可點擊區域
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
<img>：做圖片超鏈接
<a href="xxx.html">
<img border="0" src="xxx.gif" />
</a>
三、表格相關標籤
<table>：用於定義表格
<table> 由0或1個<caption>子標籤，0到1個<thead>子標籤，0到1個<tfoot>子標籤，多個<tbody>子標籤，多個<tr>子標籤組成
---------------------------------------------------
<table>常用的屬性如下：
border：指定表格邊框的寬度，默認是 0
cellpadding：指定單元格內容和單元格邊框的間距，值可是像素或百分比
cellspacing：指定單元格之間的間距，值可是像素或百分比
width：指定表格的寬度，值可是像素或百分比
---------------------------------------------------
<caption>：用於定義表格的標題，必須放在<table></table>之間
---------------------------------------------------
<tr>：定義表格行,該標籤只能有<td>或<th>子標籤
<td>：定義單元格【列】,放在<tr>中，表示把一行分成N個單元格(N取決於N對<td>)
---------------------------------------------------
<td>常見屬性如下：
colspan：指定該單元格跨多少列，屬性值是數字
rowspan：指定該單元格橫跨的行數
height：指定單元格的高度
width：指定單元格的寬度
---------------------------------------------------
<th>：定義表格頁眉的單元格;用法和<td>標籤一直,只是顯示效果有差別
<tbody>：定義表格的主體，該標籤只能包含<tr>子元素，使用<tbody>標籤可以將一個表格分成幾個獨立的部分<tbody>可以講表格裏的一行或多行合併成一組，以後使用Ajax編程的時候常常需要動態修改表格的某幾行，此時就得使用<tbody>標籤
<thead>：定義表格頭,用法和<tbody>一致，功能有點差別
<tfoot>：定義表格腳,用法和<tbody>一致，功能有點差別
---------------------------------------------------
<thead><tbody><tfoot>標籤可以對錶格的行進行分組，每對<tbody>就是一組。
除此之外，當創建某個表格時，希望擁有一個標題行，以及底部的一個統計行，當打印表格時，表格頭和表格腳的數據也會包含在數據的頁面上。
無論<thead><tbody><tfoot>三者的先後順序如何，頁面上總會是最上面顯示錶格頭，中間是顯示錶格體，最下面顯示錶格腳數據，一般開發中建議從上到下的順序是<thead>、<tfoot>、<tbody>，好處是即使網速慢沒有加載出表格體的數據，但是表格頭和表格腳的信息會先顯示出來。
四、表單標籤
4.1 form 標籤
<form>：用於生成輸入表單，該標籤不可見
在 HTML5 之前，表單控件，如單行文本框、密碼框、單選框等都必須放在<form></form>之間
常見屬性如下：
action：必填屬性，表示當點擊 “提交” 按鈕時，表單數據提交到哪個地址 <!-- # 表示當前頁面 -->
method：指定表單提交時的請求類型，該屬性值有get或post，分別用於GET或POST請求，默認是get方式，開發建議使用post方式
enctype：指定表單數據的編碼方式，屬性有3個值
application/x-www-form-urlencoded：默認，只處理表單控件裏的value屬性值
multipart/form-data：以二進制流的方式處理表單數據，文件上傳時必須使用該屬性值
text/plain：不對特殊字符編碼，適合於表單的屬性值爲mailto”URL形式，也就是說該方式適用於表單郵件的發送
get 和 post 這兩種最常用的提交方式的區別：
1、get 提交數據會顯示在地址欄，對於敏感信息不安全，post 提交不顯示在地址欄
2、地址欄中存放的數據是有限，所以 get 方式對提交的數據體積有限制，post 可以提交大體積數據
3、對提交數據的封裝方式不同：
get： 將提交數據封裝到了消息的前，請求行中
post：將提交的數據封裝到消息頭後，數據體中
注意：通常表單使用post提交，因爲編碼方便。
對於Tomcat服務器端，默認的解碼方式是ISO8859-1，那麼中文會出現亂碼。
通過 post 提交，可以使用request.setCharacterEncoding(“GBK”)，來解決亂碼問題，該方法只對數據體有效。
如果是 get 提交，request.setCharacterEncoding(“GBK”)該方法解決不了亂碼問題，必須先進行ISO8859-1編碼，然後再進行GBK的解碼。
這種方式雖然對post提交的亂碼也通用，但是麻煩，建議表單提交使用post。
4.2 input 標籤
<input>：表單控件標籤裏功能最豐富的，用於接收用戶輸入的信息
其中的type屬性指定輸入標籤的類型：
單行文本框 ：type = text，輸入的文本信息直接顯示在框中
密碼輸入框 ：type = password，輸入的文本以圓點形式顯示
單選框 ：type = radio，如：性別選擇
複選框 ：type = checkbox，如：多個興趣選擇
隱藏域 ：type = hidden，在頁面上不可見，但在提交的時候會一起提交數據，用於隱式向後臺傳輸一個數據
提交按鈕 ：type = submit，用於提交表單中的數據內容
重置按鈕 ：type = reset，將表單中填寫的內容均設置爲初始值
無動作按鈕 ：type = button，可使用javascript爲其自定義事件
文件上傳域 ：type = file，會生成一個文本框和一個瀏覽按鈕
圖像域 ：type = image，它可以替代submit按鈕，即圖像提交按鈕
<input> 標籤其他常見屬性：
name ：指定input標籤的名字，沒有設置name屬性的標籤不能提交數據
value ：指定input標籤的初始值
checked ：設置單選框，複選框的初始狀態是否選中
disable ：設置input標籤加載時禁用此標籤
maxlength ：文本框輸入最大字符數，屬性值是數字
readonly ：指定文本框內值不允許直接修改
required="required"：將表單內容設置爲必填
4.3 label 標籤
<label>： 用於在表單標籤中定義標籤，可對錶單控件進行提示說明
使用<label>的作用是：當用戶點擊<label>所包含的文本時，該標籤關聯的表單控件就會獲得焦點
讓標籤和表單控件相關聯的兩種方式：
1、隱式使用for屬性：指定<lable>標籤的for屬性值爲所關聯表單控件的id屬性值
2、顯示關聯：將表單控件放在<lable></label>之間(IE支持不好，不推薦)
<form action="">
<!-- 隱式關聯 -->
<label for="username">用戶名:</label>
<input id="username" name="username" type="text"/><br/>
<!-- 顯式關聯 -->
<label>密 碼:<input name="pwd" type="password"/><br/></label>
</form>
<label> 標籤爲 input 元素定義標註（標記）
label 元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。
如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。
4.4 select 標籤
<seclet>和<option>一般同時使用：
<select name="country" >
<option value="">---請選擇---</option>
<option value="zh" selected="selected">中國</option>
<option value="en">英國---</option>
</select>
multiple="multiple" 表示可以選中多個
size="2" 表示顯示幾個，（瀏覽器之間有差異）
4.5 textarea 標籤
文本域標籤
<textarea cols="50" rows="5">
要顯示的內容
</textarea>
五、框架
我們在瀏覽網頁的時候，常常會看到類似如下的頁面佈局，就是把整個網頁分成了好些模塊，在這裏我們可以使用框架集和框架來完成該樣式，其實框架集中每一個框架中顯示的內容就是映射到的一個html頁面。
<frameset>標籤【框架設置】【用框架<frameset>b標籤，就不需要用<body>】
屬性 rows 表示要分成幾行,一般用”,”隔開，其中“*”表示佔據剩下所有的區域
屬性 clos 表示要分成幾列,一般用”,”隔開，其中“*”表示佔據剩下所有的區域
<frame>標籤
屬性 scrolling="yes" 表示是否要顯示滾動條，滾動條是豎着的
屬性 noresize="noresize" 表示不能拖動和縮小
< html>
< head>
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title> Insert title here </title >
</ head>
< frameset rows ="10%,*,5%" > 【分成3行】
< frame src ="top.html" > 【第1行】
< frameset cols ="20%,*" > 【第2行】
< frame src ="left.html" > 【分成2列】
< frame src ="right.html" name= "main" > 【id，此處用於指定主視窗】
</ frameset>
< frame src ="bottom.html" > 【第3行】
</ frameset>
< html>
< head>
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title> Insert title here </title >
</ head>
< body>
功能區域:
< br />
< ul>
< li>< a href = "Java.html" target ="main" > Java</ a >【指定本頁面在哪個id打開】
< li>< a href = "Android.html" target ="main" > Android</ a >
< li>< a href = "iOS.html" target ="main" > iOS</ a >
</ ul>
</ body>
</ html>
<noframes>標籤
注意位置：
<noframes>
<body>
很抱歉，閣下使用的瀏覽器不支持框架功能，請轉用新的瀏覽器。
</body>
</noframe>