注：由于本文内含有大量html标簽，是以在排版上有些困難，是以排版有點難看，請大家見諒
一：首先看頁面标記
1. html檔案結構
<HTML>
<HEAD>
<title>, <base>, <link>, <isindex>, <meta>
</HEAD>
<BODY>
HTML 檔案的正文寫在這裡... ...
</BODY>
</HTML>
2. 語言字元集(Charsets)的資訊
<meta http-equiv="Content-Type"content="text/html;charset=#">
#可以是gbk，utf-8等
3. 背景色彩和文字色彩
<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">
4.連結(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>
5.标尺線
<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=#>
#=rrggbb 16 進制 RGB 數位，或者是下列預定義色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
<hr color="red">
二：然後來看一下字型的設定
1.标題字型(Header)
<h#> ... </h#> #=1, 2, 3, 4, 5, 6
<h1>今天天氣真好！</h1>今天天氣真好！
<h2>今天天氣真好！</h2>今天天氣真好！
<h3>今天天氣真好！</h3>今天天氣真好！
<h4>今天天氣真好！</h4>今天天氣真好！
<h5>今天天氣真好！</h5>今天天氣真好！
<h6>今天天氣真好！</h6>今天天氣真好！
· <hn>---</hn> 這些标記顯示黑體字。
· <hn>---</hn> 這些标記自動插入一個空行，不必用 <p> 标記再加空行。
是以在一行中無法使用不同大小的字型。
2.字型大小
<font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#, -#
<basefont size=#> #=1, 2, 3, 4, 5, 6, 7
<font size=4>今天天氣真好！</font>今天天氣真好！
<font size=3>今天天氣真好！</font>今天天氣真好！
<font size=2>今天天氣真好！</font>今天天氣真好！
<font size=1>今天天氣真好！</font>今天天氣真好！
3.實體字型(Physical Style)
<b>今天天氣真好！</b> 今天天氣真好！
<i>今天天氣真好！</i> 今天天氣真好！
<u>今天天氣真好！</u> 今天天氣真好！
<tt>今天天氣真好！</tt> 今天天氣真好！
<sup>今天天氣真好！</sup> 今天天氣真好！
<sub>今天天氣真好！</sub> 今天天氣真好！
<s>今天天氣真好！</s> 今天天氣真好！
<strike>今天天氣真好！</strike> 今天天氣真好！
4.邏輯字型(Logical Style)
<em>今天天氣真好！</em> 今天天氣真好！
<strong>今天天氣真好！</strong> 今天天氣真好！
<code>今天天氣真好！</code> 今天天氣真好！
<var>今天天氣真好！</var> 今天天氣真好！
<dfn>今天天氣真好！</dfn> 今天天氣真好！
<cite>今天天氣真好！</cite> 今天天氣真好！
<small>今天天氣真好！</small> 今天天氣真好！
<big>今天天氣真好！</big> 今天天氣真好！
5.指定“字型大小”的标記和“指定字型”的标記的組合使用
<i><font size=5>
<b>今天</b> 天氣<font size=6> 真好！</font>
</font></i>
今天 天氣真好！
6.字型顔色
指定顔色 <font color=#> ... </font>
#=rrggbb 16 進制數位，或者是下列預定義色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
<font color=ffffff>White</font> &
<font color=white>White</font>
7.用戶端字型(Font Face)
<font face="#, #, ..., #"> ... </font>
#=用戶端可獲得的字型（微軟雅黑，roman等）
<font face="Arial, Helvetica"> Hellow World!</font>
Hellow World!
8.字元實體(Entities)
&#; #=字元實體名稱 或者 ascii 值
HTML2.0 的字元集
& &
< <
> >
" "
HTML2.0 字元實體名稱清單
HTML3.2 字元實體名稱清單
ISO 字元實體名稱清單
三：在看一下文字布局
1.行的控制
段(Paragraph) (可以看作是空行)
你好嗎？<p>很好。
你好嗎？
很好。
換行 <br>
你好嗎？<br>很好。
你好嗎？
很好。
不換行<nobr>
<nobr>
請改變您浏覽器視窗的寬度， 使之小于這一行的寬度， 看看這個标記的作用！
</nobr>
請改變您浏覽器視窗的寬度，使之小于這一行的寬度，看看這個标記的作用！
2.文字的對齊(Alignment)
<hn align=#>...</hn>
<p align=#>...</p> #=left, center, right
<h3 align=center>Hello<\h3>
<h3 align=right>Hello<\h3>
Hello
Hello
<center>...</center>
<center>Hello</center>
Hello
3.文字的分區(Division)顯示
<div align=left> ... </div>
<div align=center> ... </div>
Can you feel happiness without unpleasant?
Please show me your smile.
4.清單
無序清單 <ul><li>...</ul>
<ul>
<li>Today
<li>Tommorow
</ul>
· Today
· Tommorow
有序清單 <ol><li>...</ol>
<ol>
<li>Today
<li>Tommorow
</ol>
1 Today
2 Tommorow
定義清單(Definition lists) <dl><dt>...<dd>...</dl>
<dl>
<dt>Today
<dd>Today is yesterday.
<dt>Tomorrow
<dd>Tomorrow is today.
</dl>
Today
Today will be yesterday.
Tomorrow
Tomorrow will be today.
5.預格式化文本(Preformatted Text)
<pre>...</pre>
<pre>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</pre>
Please use your card
VISA Master
Here is an order form.
· Fax
· Air Mail
<xmp>...</xmp>
<xmp>
Please use your card.
VISA Master
<b>Here is an order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
</xmp>
Please use your card.
VISA Master
<b>Here is order form.</b>
<ul><li>Fax
<li>Air Mail</ul>
閃爍 <blink>...</blink>
<BLINK> 閃爍！閃爍！ </BLINK>
四：下一個看一下圖象
1.鍊入圖象的基本文法
<img src=#> #=圖象的 URL
<img alt=#>
#=在浏覽器尚未完全讀入圖象時，在圖象位置顯示的文字。
<img src="f.gif" alt="MY FACE :-)">
2.圖象和文字的對齊
<img align=#> #=top, middle, bottom
<img src=URL align=bottom> My face!
My Face!
· 隻有一行文字才可以放在圖象的兩邊。（不知道翻譯的對不對？)
· Only one text line can be flown into the both side of Image.
3. 圖象在頁面中的對齊/布局(Floating Image)
<img align=left>
<img src=URL align=left>My Face!<br>
It is always<br>
smiling.<br>
Hahaha....<br>
My Face!
It is always
smiling.
Hahaha....
<br clear=all>
<img src=URL align=left>My Face!<br>
It is always
<br clear=all>
smiling.<br>
Hahaha....<br>
My Face!
It is always
smiling.
Hahaha....
<img vspace=# hspace=#> #=value
<img src=URL align=left vspace=10 hspace=20>My Face!<br>
It is always<br>
smiling.<br>
Hahaha....<br>
My Face!
It is always
smiling.
Hahaha....
4.邊框
<img border=#> #=value
<a href="URL">
<img src=URL border=15>
</a>
5.用戶端圖象映射圖
示例代碼：
<img src="mapimg.gif" usemap="#Face">
<map name="Face">
<!Text BOTTON>
<area shape="rect" href="page.html" coords="140,20,280,60">
<!Triangle BOTTON>
<area shape="poly" href="image.html" coords="100,100,180,80,200,140"> <!FACE>
<area shape="circle" href="new.html" coords="80,100,60"> </map>
五：下面看一下常用的表單
1.基本文法
<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
2.清單框(Selectable Menu)
基本文法
<select name=*>
<option> ...
</select>
<option selected>
<option value=**>
<select name=fruits>
<option>Banana
<option selected>Apple
<option value=My_Favorite>Orange
</select><p>
<option value=** size=3>
<select size=** multiple>
注意，是用 Ctrl 鍵配合滑鼠實作多選。
(和 MS-WINDOWS 的 File Manager 一樣)
3.文本域
<textarea name=* rows=** cols=**> ... <textarea>
對于很長的行是否進行換行的設定(Word Wrapping)
<textarea wrap=off> ... </textarea>
不換行，是預設設定。
<textarea wrap=soft> ... </textarea>
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)