基礎 HTML 標籤

jianyi · 發表於 2007-1-2 20:46:58

在HTML裡非常重要的標籤是那些定義標題, 段落和斷行的標籤而學習HTML最好的方法就是從許多範例裡學習簡單的HTML範例編輯下例簡單的HTML程式碼, 並在瀏覽器裡開啟範例觀看結果, 並試著了解HTML標籤的作用
簡單的HTML文件
<html>
<body>
在<body>元素裡的內容將會顯示在你的瀏覽器裡.
</body>
</html>簡單的段落範例
<html>
<body>
<p>這是一個段落</p>
<p>這是一個段落</p>
<p>這是一個段落</p>

<p>段落元素是由標籤 p 來定義</p>

</body>
</html>標題標題是由<h1>到<h6>標籤來定義的, <h1>定義最大的題, 而<h6>定義最小的標題, HTML會自動在標題的前後自動加入額外的空白行, 例如:
<html>
<body>
<h1>這是一個標題</h1>
<h2>這是一個標題</h2>
<h3>這是一個標題</h3>
<h4>這是一個標題</h4>
<h5>這是一個標題</h5>
<h6>這是一個標題</h6>
</body>
</html>段落段落是由標籤<p>來定義的,HTML也會自動在段落的前後自動加入額外的空白行, 例如:
<html>
<body>
<p>這是一個段落</p>
<p>這是另外一個段落</p>
</body>
</html>斷行標籤<br>是用來強迫瀏覽器斷行用的, 但是不像段落,HTML在段落會前後會加入額外的空白行, 但斷行並不會, 而標籤<br>是一個空標籤, 它並沒有所謂關閉標籤標籤</br>, 例如:
<html>
<body>
<p>這<br>是一個有斷<br>行的段落</p>
</body>
</html>HTML裡的註解註解標籤是用來在你的HTML程式碼裡插入註解, 而瀏覽器會將註解忽略, 你可以使用註解來說明你的HTML程式碼, 註解在你以後修改HTML程式碼時會有很大的幫助, 例如:
<html>
<body>

</body>
</html>小技巧在你撰寫HTML程式碼時, 你永遠不能確定你的程式碼在其它的瀏覽器是如何顯示的, 有些人的顯示器較, 而有些人的顯示器則較小, 而當其它使用者改變他的視窗大小時, 你的HTML程式碼將會被重新載入一次, 所以, 千萬不要在你的HTML程式碼裡加入空白行或空白來排版(format)你的HTML程式碼
HTML會忽略你HTML程式碼裡的空白, 不論是多少個空白HTML都只會當成只有一個空白, 而在HTML程式碼裡新的一行也會被當成一個空白
使用空段落<p>去插入一個空白行是一個很不好的習慣, 正確的作法應該是使用<br>標籤來插入一個空白行, 但是不要利用<br>標籤來製作你的列表或清單
你可能察覺到段落標籤<p>不需要結束標籤</p>也可以, 如果可以, 不要這麼使用也不要太依靠它, 因為在下一版的HTML(也就是XHTML)裡將不會允許你忽略任何的結束標籤.
HTML會自動的在一些元素的前後加入空白行, 像是段落和標題
範例將以下範例輸入到HTML程式碼裡, 並以瀏覽器開啟, 試著了解每個標籤的作用及特性
段落:這個範例說明了在HTML裡段落元素的預設行為
<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>
Baby won't you tell me why there is sadness in your eyes
   I don't wanna say goodbye to you
         Love is one big illusion I should try to forget
                  but there is something left in my head
</p>
<p>瀏覽器會忽略你在HTML程式碼裡的格式</p>
</body>
</html>標題:這個範例說明了在HTML裡顯示標題的標籤
<html>
<body>
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
<p>只有在標題時才使用標題標籤, 不要利用標題標籤來顯示粗體字, 應該利用其它標籤來顯示粗體字</p>
</body>
</html>置中:這個範例說明了在HTML程式碼如何使用置中標題
<html>
<body>
<h1 align="center">這是標題 1</h1>
<p>上面的標題將對齊中間</p>
</body>
</html>水平線:這個範例說明了如何在HTML裡插入水平線
<html>
<body>
<p>標籤hr定義水平線</p>
<hr>
<p>這是一個段落</p>
<hr>
<p>這是一個段落</p>
<hr>
<p>這是一個段落</p>
</body>
</html>註解:這個範例說明了如何在HTML程式碼裡插入註解
<html>
<body>

<p>這是一個段落</p>
</body>
</html>屬性:這個範例說明了如何在HTML網頁裡加入背景顏色的屬性
<html>
<body bgcolor="yellow">
<h2>看, 背景顏色被改了</h2>
</body>
</html>基礎的 HTML 標籤

標籤	說明
<!DOCTYPE>	定義文件的種類
<html>	定義一個html文件
<body>	定義文件的主體元素
<h1> 至 <h6>	定義標題1至標題6
<p>	定義一個段落
<br>	插入斷行
<hr>	插入水平線
<!--...-->	定義註解

基礎 HTML 標籤

相關帖子