HTML 文件結構(Document Structures)
<html>...</html>
<head>...</head>
<body>...</body>
<HTML>
<HEAD>
<title>, <base>, <link>, <isindex>, <meta>
</HEAD>
<BODY>
HTML 文件的正文寫在這里... ...
</BODY>
</HTML>
語言字符集(Charsets)的信息 
<meta http-equiv="Content-Type" content="text/html;charset=#">
- #=
- us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce,
iso-2022-jp, x-sjis, x-euc-jp,
euc-kr, iso-2022-kr,
gb2312, gb_2312-80,
x-euc-tw, x-cns11643-1, x-cns11643-2, big5
可在 HTML 文件中設置 MIME 字符集信息。
您在瀏覽主頁時，最好自己在瀏覽器的選項菜單內選擇相應的語言(language encoding)。
但是如果 HTML 文件里寫明了設置，瀏覽器就會自動設置語言選項。
尤其是主頁里用到了字符實體(entities)，則該主頁就應該寫明字符集信息。
否則，您在瀏覽該主頁時，若未正確設置語言選項，顯示將可能混亂。
背景色彩和文字色彩
<body bgcolor=# text=# link=# alink=# vlink=#>
- bgcolor --- 背景色彩
- text --- 非可鏈接文字的色彩
- link --- 可鏈接文字的色彩
- alink --- 正被點擊的可鏈接文字的色彩
- vlink --- 已經點擊(訪問)過的可鏈接文字的色彩
#=rrggbb
- 色彩是用 16 進制的 紅－綠－藍(red-green-blue, RGB) 值來表示。
16 進制的數碼有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
背景圖象 <body background="image-URL">
Non Scrolling Background <body bgproperties=FIXED> 
頁面空白(Margin)
頁面左邊的空白 <body leftmargin=#>
頁面上方的空白(天頭) <body topmargin=#> #=margin amount
鏈接(Link)
基本語法 <a href="URL"> ... </a>
-
這是一個
<a href="samp/link.html">鏈接的例子</a>。
點一下帶下劃線的文字!
這是一個鏈接的例子。 點一下帶下劃線的文字!
跳轉到頁面的另外一個地方
<a href="#name"> ... </a>
<a name="name"> ... </a>
-
<a href="#jump-test">跳轉到下一個"鏈接點"</a><P>
<a name="jump-test">下一個鏈接點</a>
下一個鏈接點
跳轉到另一個頁面的某個地方
<a href="URL#name"> ... </a>
<a name="name"> ... </a>
-
跳轉到另一個頁面的<a href="samp/link.html#jump-test">某個地方</a>。
跳轉到另一個頁面的某個地方。
開一個新的(瀏覽器)窗口 (Target Window)
<a href="URL" target="Window_Name"> ... </a>
-
<a href="samp/window.html" target="window_name">
開一個新窗口!
</a>
開一個新窗口!
標尺線
<hr>
<hr>
<hr size=#>
<hr size=10>
<hr width=#>
<hr width=50>
<hr width=50%>
<hr align=#> #=left, right
<hr width=50% align=left>
<hr width=50% align=right>
<hr noshade>
<hr noshade>
<hr color=#>
========
基本語法
表單的基本語法
<form action="url" method=*>
...
...
<input type=submit> <input type=reset>
</form>
*=GET, POST
表單中提供給用戶的輸入形式
<input type=* name=**>
*=text, password, checkbox, radio, image, hidden, submit, reset
**=Symbolic Name for CGI script
文字輸入和密碼輸入
*=text, password
<input type=*>
<input type=* value=**>
<form action=/cgi-bin/post-query method=POST>
您的姓名:
<input type=text name=姓名><br>
您的主頁的網址:
<input type=text name=網址 value=http://><br>
密碼:
<input type=password name=密碼><br>
<input type=submit value="發送"><input type=reset value="重設">
</form>
<input type=* size=**>
<input type=* maxlength=**>
<form action=/cgi-bin/post-query method=POST>
<input type=text name=a01 size=40><br>
<input type=text name=a02 maxlength=5><br>
<input type=submit><input type=reset>
</form>
復選框(Checkbox) 和 單選框(RadioButton)
<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>
<form action=/cgi-bin/post-query method=POST>
<input type=checkbox name=水果1>
Banana<p>
<input type=checkbox name=水果2 checked>
Apple<p>
<input type=checkbox name=水果3 value=橘子>
Orange<p>
<input type=submit><input type=reset>
</form>
<input type=radio value=**>
<input type=radio value=** checked>
<form action=/cgi-bin/post-query method=POST>
<input type=radio name=水果>
Banana<p>
<input type=radio name=水果 checked>
Apple<p>
<input type=radio name=水果 value=橘子>
Orange<p>
<input type=submit><input type=reset>
</form>
圖象坐標
在下面選則一個系數后，在圖象上點一下，就知道什么是圖象坐標了！
<input type=image src=url>
<form action=/cgi-bin/post-query method=POST>
<input type=image name=face src=f.gif><p>
<input type=radio name=zoom value=2 checked>x2
<input type=radio name=zoom value=4>x4
<input type=radio name=zoom value=6>x6<p>
<input type=reset>
</form>
隱藏表單的元素
<input type=hidden value=*>
<form action=/cgi-bin/post-query method=POST>
<input type=hidden name=add value=hoge@hoge.jp>
Here is a hidden element. <p>
<input type=submit><input type=reset>
</form>
列表框(Selectable Menu)
基本語法
<select name=*>
<option> ...
</select>
<option selected>
<option value=**>
<form action=/cgi-bin/post-query method=POST>
<select name=fruits>
<option>Banana
<option selected>Apple
<option value=My_Favorite>Orange
</select><p>
<input type=submit><input type=reset>
</form>
<select size=**>
<form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3>
<option>Banana
<option selected>Apple
<option value=My_Favorite>Orange
<option>Peach
</select><p>
<input type=submit><input type=reset>
</form>
<select size=** multiple>
注意，是用 Ctrl 鍵配合鼠標實現多選。
(和 MS-WINDOWS 的 File Manager 一樣)
<form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3 multiple>
<option selected>Banana
<option selected>Apple
<option value=My_Favorite>Orange
<option selected>Peach
</select><p>
<input type=submit><input type=reset>
</form>
文本區域
<textarea name=* rows=** cols=**> ... <textarea>
<form action=/cgi-bin/post-query method=POST>
<textarea name=comment rows=5 cols=60>
</textarea>
<P>
<input type=submit><input type=reset>
</form>
對于很長的行是否進行換行的設置(Word Wrapping)
<textarea wrap=off> ... </textarea>
- 不換行，是缺省設置。
<textarea wrap=soft> ... </textarea>
“軟換行”，好象 MS－WORD 里的“軟回車”。
- <form action=/cgi-bin/post-query method=POST>
<textarea wrap=soft name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>
<textarea wrap=hard> ... </textarea>
“硬換行”，好象 MS－WORD 里的“硬回車”。
- <form action=/cgi-bin/post-query method=POST>
<textarea wrap=hard name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>