○HTML基本標籤篇○
HTML最重要的標籤是定義標題、段落和斷行的標籤。
學習HTML的最佳方式是範例練習。
○動手寫HTML範例
非常簡單的HTML文件
這個範例是非常簡單的HTML文件，只有最少的HTML標籤。示範內容元件裡的文字如何呈現在瀏覽器上。
<html>
<body>
內容元件裡的內文將會呈現在瀏覽器上。
</body>
</html>
簡單段落
這個範例示範段落元件裡的文字如何呈現在瀏覽器上。
<html>
<body>
<p>這是一個段落。</p>
<p>這是一個段落。</p>
<p>這是一個段落。</p>
<p>段落元件由p標籤定義。</p>
</body>
</html>
○標題〈Headings〉
標題由<h1>到<h6>標籤定義。<h1>定義最大的標題。<h6>定義最小的標題。
<h1>這是一個標題</h1>
<h2>這是一個標題</h2>
<h3>這是一個標題</h3>
<h4>這是一個標題</h4>
<h5>這是一個標題</h5>
<h6>這是一個標題</h6>
HTML會自動在標題的前後添加一行空行。
○段落〈Paragraphs〉
段落由<p>標籤定義。
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
HTML會自動在段落的前後添加一行空行。
○斷行〈Line Breaks〉
<br>標籤用於當你想結束一行，卻不想開始另外一段時。<br>會強迫斷行，無論你把它放在哪裡。
<p>這是<br>一個斷行<br>的段落。</p>
<br>標籤是個空標籤。它沒有結束標籤。
○HTML裡的註解〈Comments〉
註解標籤是用於在HTML的原始碼中插入註解。瀏覽器不會讀取註解。你可以使用註解來說明你的原始碼，有助於你日後編輯原始碼時需要。
<!--這是一個註解-->
注意在開始的括號後必須有個驚嘆號，但結束括號前就不需要。
○基本附註─實用的小秘方
當你在寫作HTML文件時，你永遠無法確認它在另一個瀏覽器上將會如何呈現。有些人的電腦呈現得較大，有些人則較小。每當使用者重設視窗大小時，文件就會被重設格式一次。不必嘗試在編輯器裡設定文件的格式，如在文件中添加空行或空格。
HTML會改變文件中的空格。不管幾個空格都只算一個。在HTML裡，新的一行算作一個空格。
使用空段落<p>標籤來插入斷行是個壞習慣。請使用<br>。〈不要使用<br>來製作列表。等到你學會HTML列表標籤後再使用。〉
你可能注意到分段落時也可以不寫結束標籤</p>。這樣做不可靠。新的HTML版本不允許如此做。
HTML會自動在某些元件的前後添加空行，如段落的前後，和標題的前後。
有時我們會使用水平線〈horizontal rule, <hr>〉標籤，將文件做些區隔。
○更多的範例
更多的段落
這個範例示範段落元件的某些預設行為。
<html>
<body>
<p>
這一段
在原始碼中
分成很多行，
但瀏覽器
不會理會它們。
</p>
<p>
這一段
在原始 碼中
有 很 多 空 格，
但 瀏 覽 器
也不會理會它們。
</p>
<p>
一個段落的行數是依據瀏覽器視窗大小而定。如果你重設瀏覽器視窗大小，段落裡的行數就會改變。
</p>
</body>
</html>
斷行
這個範例示範在HTML的文件裡使用斷行標籤。
<html>
<body>
<p>
要在<br>段落中<br>斷行，<br>請使用br標籤。
</p>
</body>
</html>
詩的問題
這個範例示範HTML格式的一些問題。
<html>
<body>
<p>
床前明月光，
疑似地上霜。
舉頭望明月，
低頭思故鄉。
</p>
<p>注意瀏覽器根本就不理會你的格式！</p>
</body>
</html>
標題
這個範例示範在HTML文件裡呈現標題。
<html>
<body>
<h1>這是一個標題</h1>
<h2>這是一個標題</h2>
<h3>這是一個標題</h3>
<h4>這是一個標題</h4>
<h5>這是一個標題</h5>
<h6>這是一個標題</h6>
<p>只在標題的地方使用標題標籤。不要使用它們將某些文字變大。有別的標籤可以達到那個目的。</p>
</body>
</html>
置中對齊的標題
這個範例示範置中對齊的標題。
<html>
<body>
<h1 align="center">這是標題一</h1>
<p>上面的標題對齊網頁的中間。上面的標題對齊網頁的中間。上面的標題對齊網頁的中間。</p>
</body>
</html>
水平線
這個範例示範如何插入一條水平線。
<html>
<body>
<p>水平線標籤定義一條水平線：</p>
<hr>
<p>這是一個段落。</p>
<hr>
<p>這是一個段落。</p>
<hr>
<p>這是一個段落。</p>
</body>
</html>
隱藏的註解
這個範例示範如何在HTML原始碼中插入一個隱藏的註解。
<html>
<body>
<!--這個註解不會被呈現-->
<p>這是一個普通的段落。</p>
</body>
</html>
背景顏色
這個範例示範如何在HTML網頁上添加背景顏色。
<html>
<body bgcolor="yellow">
<h3>看啊！有顏色的背景耶！</h3>
</body>
</html>
○基本的HTML標籤
NN代表Netscape、 IE代表Internet Explorer、 W3C代表網路標準
| 開始標籤 |
NN |
IE |
W3C |
目的 |
| <html> |
3.0 |
3.0 |
3.2 |
定義HTML文件 |
| <body> |
3.0 |
3.0 |
3.2 |
定義文件的內容 |
| <h1>-<h6> |
3.0 |
3.0 |
3.2 |
定義標題1到標題6 |
| <p> |
3.0 |
3.0 |
3.2 |
定義段落 |
| <br> |
3.0 |
3.0 |
3.2 |
插入單一斷行 |
| <hr> |
3.0 |
3.0 |
3.2 |
定義一條水平線 |
| <!--> |
3.0 |
3.0 |
3.2 |
定義HTML原始碼中的註解 |
|