HTML超文字標記語言標記解析（大全）
使用HTML製作一個頁面很方便，怎麼來理解這些語言標記？從頁面建立的角度來講，標記按照一定順序組成了頁面的各個部分，並且向頁面提供內容。從控制元件的角度來講，每一個標記可以看做一個控制元件或者叫做一個控制元件的標記，就是一個標記而已，控制元件可以擁有自己的屬性和內容，這一點和Android介面開發很像，尤其是表單、表格等標記，與Android的不同點在於HTML中屬相需要指定，但內容直接放置在標籤中即可。
可以將一個HTML檔案理解成一個帶有修飾成分和標記的資料結構。
一 HTML介面的基本標記元素：<html>，<head>，<title>，<body>。使用這四種標記建立的一個基本HTML文件如下：
<html>
<head>
<title>HTML頁面</title>
</head>
<body>
<b>Hello world!</b>
</body>
</html>在瀏覽器中開啟之後顯示的介面截圖：
<html>標記是HTML檔案的開頭，不可缺少。
<head>標記是HTML頁面的頭標記，用於放置HTML檔案的資訊。比如定義的CSS樣式程式碼可放置在<head>與</head>標記之間。
<title>是標題標記，用於定義網頁的標題，如瀏覽器截圖中紅色下劃線顯示的內容，<title>標記放置在<head>標記中。
<body>標記是HTML頁面的主體標記。頁面中的所有內容都定義在<body>標記中。<body>標記還可以控制頁面的一些特性，比如頁面的背景圖片和顏色等。
注：1）HTML的所有標記都以</標記名>結尾，而不僅僅是上述四個標籤。例如<html>以</html>結尾。
2）如果瀏覽器對中文顯示為亂碼，一般是文字編碼不正確。可以通過Windows記事本開啟檔案，另存為ANSI或者Unicode編碼格式。或者使用Notepad++轉換檔案編碼方式，然後儲存。
二 HTML超文字標記語言的其他標記
HTML中的標記可以設計頁面中的文字，圖片，定義超連結等。
1）<br>換行標記
該標記並不是和</br>成對出現，該標記告訴瀏覽器在哪裡換行。例如下面的程式碼：
<!--演示換行標記-->
<html>
<head>
<title>應用換行標記實現頁面文字換行</title>
</head>
<body>
<b>
黃鶴樓送孟浩然之廣陵
</b><br>
故人西辭黃鶴樓，煙花三月下揚州。<br>
孤帆遠影碧空盡，唯見長江天際流。
</body>
</html>瀏覽器開啟的效果截圖：
2）<p>段落標記
段落標記在段前和段後各新增一個空行，而定義在段落標記中的內容不受該影響。
3）<h1>，<h2>， <h3>， <h4>， <h5>，<h6>六個標題標籤
標題標籤用於在HTML頁面中實現不同層次的標題。從左到右依次表示第一級標題，第二級標題，...，第六級標題。級數越小，級別越高，字型越大。
展示<p>標籤和<hx>標籤使用的一段程式碼：
<!--演示段落標記和標題標記，目前這個是靜態網頁-->
<html>
<head>
<title>設定標題標記和段落標記</title>
</head>
<body>
<h1>java開發的3個方向</h1> <!--每一個標題標記就是一行，不需要換行-->
<h2>Java SE</h2>
<p>
主要用於桌面程式的開發。它是學習Java EE和Java ME的基礎，也是本書的重點內容。
</p>
<h2>Java EE</h2> <!--相同的標題標記並列-->
<p> 主要用於網頁程式的開發。隨著網際網路的發展，越來越多的企業使用Java語言來開發自己的官方網站，其中不乏世界500強企業。
</p>
<h2>Java ME</h2>
<p>
主要用於嵌入式系統程式的開發
</p>
</body>
</html>在瀏覽器中的效果截圖：
4）<center>居中標記
HTML頁面內容預設的佈局方式從左到右。<center>標記內容為居中顯示。<center>標記作用域標記區域內的每一段內容，每一個標記。如下面一段演示程式碼：
<!--演示居中標記-->
<html>
<head>
<title>設定標題標記</title>
</head>
<body>
<center>
<h1>java開發的3個方向</h1>
<h2>Java SE</h2>
<p>主要用於桌面程式的開發。它是學習Java EE和Java ME的基礎，也是本書的重點內容。</p>
<h2>Java EE</h2>
<p>主要用於網頁程式的開發。隨著網際網路的發展，越來越多的企業使用java語言來用Java語言來開發自己的官方網站，其中不乏世界500強企業。</p>
<h2>Java ME</h2>
<p>主要用於嵌入式系統程式的開發</p>
</center>
<body>
</html>
<!--在center標籤中的每一個標籤顯示的內容都是居中顯示。會作用域每一個行，每一個標記的內容-->在瀏覽器中開啟檔案顯示內容如下：
5）文字列表標記
<ul>是無序列表標記，<ol>是有序列表標記。有序列表和無序列表的不同在於無序列表的每一個列表項前面新增一個點號，有序列表的列表項前面新增一個序號，序號從1開始。
每一個列表項用<li>標記，這標記不需要結尾，並且一個表項自動佔據一行。
如下面無序列表標記程式碼：
<!--演示無序標記-->
<head>
<head>
<title>無需列表標記</title>
</head>
<body>
程式設計詞典有以下幾個品種<p>
<ul>
<li>Java程式設計詞典 <!--每一個列表項用一個單標記<li>-->
<li>VB程式設計詞典 <!--每一個表項自動佔據一行，不需要<p>-->
<li>VC程式設計詞典
<li>.net程式設計詞典
<li>C#程式設計詞典
</ul>
</body>
</head>無序列表執行結果截圖：
有序列表標記程式碼：
<!--演示有序列表-->
<html>
<head>
<title>有序列表標記</title>
</head>
<body>
<center>
程式設計詞典有以下幾個品種<p>
<ol>
<li>Java程式設計詞典
<li>VB程式設計詞典
<li>VC程式設計詞典
<li>.net程式設計詞典
<li>C#程式設計詞典
</ol>
</center>
</body>
</html>瀏覽器開啟檔案顯示如下(<center>)：
（非<center版本>截圖）：
6）<span>，<div>區域標記
怎麼來理解標記？從控制元件的角度來看，麼一個標記是一個頁面的控制元件，是一個實體。從頁面內容的建立來看，標記就是依照次序規定了頁面顯示的內容和每一部分內容的含義，並以此來構建網頁。
<span>標記用來組合文件中的行內元素，對它引用樣式時，它將會對劃分的區域進行渲染。
<div>標籤功能和<span>類似，但是<div>是組合塊元素。
區域標記程式碼演示：
<!--演示區域標記：為-->
<html>
<head>
<title>區域標記</title>
</head>
<style>
#right {
float:right;
color:blue;
}
#center {
font-family:宋體;
font-size:24px;
color:red;
}
</style>
<body>
<a><span id="right">span效果</span></a><br> <!--組合行內元素-->
<div id="center"> <!--組合塊內元素-->
<a>div效果1</a><br>
<a>div效果2</a>
</div>
</body>
</html>瀏覽器開啟檔案截圖：
7）<table>表格標記
表格用來儲存資料的。表格由標題，表頭，行和單元格組成，每一個組成元素都對應於一個標記，有這些標記指定表格的內容和構成。
<table>表格標記，table的屬性包括width，length，border（設定表格邊框），align（設定表格對齊方式），bgcolor（設定表格的背景色）等。
<caption>標題標記，屬性有align，valign等
<th>表頭標記，屬性有align，background，colspan，valign等。
<tr>表格行標記，屬性有align，background等。
<td>單元格標記，屬性有align，background，valign等。
表格使用小技巧：因為標記是可以巢狀的，所以靈活巢狀會實現很多不同的結構。表格也可以用來設計頁面。在頁面中建立一個表格，並設定沒有邊框，之後通過該表格將頁面劃分成幾個區域，分別對幾個區域進行設計。
表格標籤演示程式碼如下：
<!--演示表格標記-->
<html>
<head>
<title>演示表格標記</title>
</head>
<body>
<table width="318" height="167" border="1" align="center">
<caption>學生考試成績單</caption>
<tr>
<td align="center" valign="middle">姓名</td> <!--標記的屬性需要制定，標記的內容寫出來即可-->
<td align="center" valign="middle">語文</td>
<td align="center" valign="middle">數學</td>
<td align="center" valign="middle">英語</td>
</tr>
<tr>
<td align="center" valign="middle">張三一</td>
<td align="center" valign="middle">89</td>
<td align="center" valign="middle">92</td>
<td align="center" valign="middle">87</td>
</tr>
<tr>
<td align="center" valign="middle">李四</td>
<td align="center" valign="middle">93</td>
<td align="center" valign="middle">86</td>
<td align="center" valign="middle">80</td>
</tr>
<tr>
<td align="center" valign="middle">王五</td>
<td align="center" valign="middle">85</td>
<td align="center" valign="middle">86</td>
<td align="center" valign="middle">90</td>
</tr>
<tr>
<td align="center" valign="middle">西門吹雪</td>
<td align="center" valign="middle">100</td>
<td align="center" valign="middle">100</td>
<td align="center" valign="middle">100</td>
</tr>
</table>
</body>
</html>瀏覽器開啟檔案截圖如下：
8）<form>表單標記
表單是使用者與網頁交換資料的重要手段，如下面截圖，就是一個表單（雖然格式不是很美觀），表單中有各種表單元素，比如文字輸入框，單選框（radix），複選框（CheckBox）等。
使用表單標記的基本語法如下：
<form action="" method="get"|"post" name="" onSubmit="" target="" >
<!--新增表單元素-->
</form><form>標記個屬性說明如下：
action：指定處理表單資料程式的URL地址。比如將更新後的密碼從網頁儲存到伺服器上，就需要指定儲存密碼的業務邏輯程式，URL就是這段程式在伺服器上的地址。
method：指定資料傳送到伺服器的方式。get表示將輸入的資料追加在action指定的地址後面，並傳送到伺服器。post表示會將輸入的資料按照HTTP協議中post傳輸方式傳送到伺服器。
name：指定表單的名稱，可自定義。
onSubmit：當用戶點選提交按鈕是觸發的事件。
target：指定輸入資料結果顯示在哪個視窗中。
9）<input>表單輸入標記
<input>標記不成對出現，即不需要</input>結束。表單中的賬戶輸入框，密碼輸入框，複選框等都是一個<input>標記，具體的種類由<input>的type屬性指定。比如type="radio"表示單選按鈕，type="text"表示文字框。
type屬性的值如下：
text（文字框），password（密碼域）， file（檔案域）， radio（單選按鈕）， checkbox（複選按鈕）， submit（提交按鈕）， reset（重置按鈕）， button（不同按鈕）， hidden（隱藏域）， image（圖片域）
<input>使用語法如下：
<input type="" name="" id="" disabled="disabled" checked="checked" width="digit"
height="digit" maxlength="digit" readonly="" size="digit" src="uri" usemap="uri"
alt="" value="checkbox">各屬性值的含義：
type，name，id分別是輸入欄位的類別，輸入欄位的名稱和輸入欄位的標識id。
disabled：表示輸入欄位不可用，顯示為灰色。其值可以是disabled，也可以是空，即不指定
checked：當型別是radio或者checkbox時，表示輸入欄位是否處於選中狀態。值可為空，也可是checked
width和height：當輸入是圖片時，指定寬和高。
size：指定輸入欄位的寬度。當type是text和password時，以文字個數為單位。其他型別則以畫素為單位。
maxlength：當type是text和password時指定可輸入文字個數，預設下沒有限制。
readonly：輸入欄位是否為只讀。屬性值可以是readonly，也可以為空。
src：用於指定圖片來源。
usemap：
alt：當圖片無法顯示時顯示的文字。
value：指定按鈕上顯示的文字。當型別為radio和checkbox時，指定資料項選中時的值（輸入欄位預設資料值）。
演示<form和<input>的程式碼如下：
<!--演示表單標記-->
<html>
<head>
<title>演示表單標記</title>
</head>
<body>
<form action="" method="post" name="myform">
用 戶 名:<input name="username" type="text" id="UserName4" maxlength="20"> <!--HTML不會在意這些空格-->
<br>
密 碼:<input name="pwd1" type="password" id="PWD14" size="20" maxlength="20">
<br>
確認密碼:<input name="pwd2" type="password" id="PWD25" size="20" maxlength="20">
<br>
性 別:<input name="sex" type="radio" class="noborder" value="男" checked>
男
<input name="sex" type="radio" class="noborder" value="女">
女
<br>
愛 好:<input name="like" type="checkbox" id="like" value="體育">
體育
<input name="like" type="checkbox" id="like" value="旅遊">
旅遊
<input name="like" type="checkbox" id="like" value="聽音樂">
聽音樂
<input name="like" type="checkbox" id="like" value="看書">
看書
<br>
E-mail:<input name="email" type="text" id="PWD224" size="50"><br>
<input name="Submit" type="submit" class="btn_grey" value="確認儲存">
<input name="Reset" type="reset" class "btn_grey" id="Reset" value="重新填寫">
<input type="image" name="imageField" src="images/btn_bg.jpb">
</form>
</body>
</html>瀏覽器中開啟文字截圖如下：
10）<select>下拉選單標記
11)<textarea>多行文字標記
12)