p元素 (paragraph),為「區塊」特性元素,定義文章的段落構造。段落的左右沒有余白,上下會各插入1行空白,做為段落區隔。
- 語法:
- <p 屬性 = "屬性值">標籤內容</p>
- 版本:
- HTML4.01(S,T,F)、XHTML1.0(S,T,F)、XHTML1.1 *1)
- 內含元素:
- 「線內」元素、Text
- 屬性:
align屬性*2)、事件屬性、通用屬性(class、dir、id、lang、style、title、xml:lang)
sample code
<p style="text-indent:1em;text-align:left;" >
段落的第一行欲縮排一個字元時,只要在style屬性中加入"text-indent:1em"的屬性值。
如此段落的第一行自然就會縮進1個字元。。
</p>
output
段落的第一行欲縮排一個字元時,在style屬性中加入"text-indent:1em"的屬性值。如此段落的第一行自然就會縮進1個字元。
*1)S → Strict DTD ,T → Transitional DTD,F → Frameset DTD。
*2)刪除線 → W3C非推薦屬性,建議是用CSS取代 ,粗體字 → 必要屬性,不可省略。
div元素 (division),為「區塊」特性元素。沒有特別意義,功用在於將一群元素集合起來,放入「區塊」元素中,利用CSS定義其文書構造。
- 語法:
- <div 屬性 = "屬性值">標籤內容</div>
- 版本:
- HTML4.01(S,T,F)、XHTML1.0(S,T,F)、XHTML1.1*1)
- 內含元素:
- 「線內」元素、「區塊」元素、Text
- 屬性:
align屬性*2)、事件屬性、通用屬性(class、dir、id、lang、style、title、xml:lang)
sample code
<head>
<style type="text/css">div#heading h2 {color:blue;font-size:16px;}</style>
</head>
<body>
<div id = "heading" >
<h2>IT綜合情報網</h2>
<p>網羅國內外的IT情報...</p>
</div>
</body>
Output
IT綜合情報網
網羅國內外的IT情報...
*1)S → Strict DTD ,T → Transitional DTD,F → Frameset DTD。
*2)刪除線 → W3C非推薦屬性,建議是用CSS取代 ,粗體字 → 必要屬性,不可省略。
span元素(text span),為「線內」特性元素。沒有特別意義,功用在於將行內一群元素集合起來,放入「線內」元素中,利用CSS定義其文書構造。
- 語法:
- <span屬性 = "屬性值">標籤內容</span>
- 版本:
- HTML4.01(S,T,F)、XHTML1.0(S,T,F)、XHTML1.1 *1)
- 內含元素:
- 「線內」元素、Text
- 屬性:
- 事件屬性、通用屬性(class、dir、id、lang、style、title、xml:lang)
Sample Code
<head>
<style type="text/css">span.heading {color:blue;}</style>
</head>
<body>
<p >
<span id = "heading">IT綜合情報網</span>-網羅國內外的IT情報...
</p>
</body>
Output
IT綜合情報網-網羅國內外的IT情報...
*1)S → Strict DTD ,T → Transitional DTD,F → Frameset DTD。
center元素(center alignment),為「區塊」特性元素。將元素內的內容置中對齊。center元素為W3C非推薦元素,建議以CSS樣式取代。
- 語法:
- <center 屬性 = "屬性值">標籤內容</center>
- 版本:
- HTML4.01(T,F)、XHTML1.0(T,F)*1)
- 內含元素:
- 「線內」元素、「區塊」元素、Text
- 屬性:
- 事件屬性、通用屬性(class、dir、id、lang、style、title、xml:lang)
Sample Code
<center >
<img src = "Chou-IT.jpg" />
<p>Chou-IT圖</p>
</center>
Output

Chou-IT圖
*1)S → Strict DTD ,T → Transitional DTD,F → Frameset DTD。
br元素(break)為「線內」特性元素。將文章或圖像強制改行。亦可用於段落途中改行,產生分段效果。
- 語法:
- <br 屬性 = "屬性值" / >
- 版本:
- HTML4.01(S,T,F)、XHTML1.0(S,T,F)、XHTML1.1 *1)
- 內含元素:
- -
- 屬性:
clear屬性、通用屬性(class、id 、style、title)
Sample Code
<p >
IT綜合情報網<br/>網羅國內外的IT情報...
</p>
Output
IT綜合情報網
網羅國內外的IT情報...
*1)S → Strict DTD ,T → Transitional DTD,F → Frameset DTD。
*2)刪除線 → W3C非推薦屬性,建議是用CSS取代 ,粗體字 → 必要屬性,不可省略。
nobr元素(no line break)設定元素內內容,不得任意進行自動換行。可以和wbr併用,指定強制改行位置。
- 語法:
- <nobr 屬性 = "屬性值" > 標籤內容 </nobr>
- 版本:
- Netscape Navigator獨自功能
- 內含元素:
- 「線內」元素、Text
- 屬性:
- 事件屬性、通用屬性(class、dir、id 、lang、style、title)*1)
sample code
<nobr >
W3C Note 「http://www.w3.org/TR/uri-clarification/」
</nobr >
Output
W3C Note 「http://www.w3.org/TR/uri-clarification/」
*1)規格不明,適不適用依UA而定。
wbr元素(word break)設定nobr元素內內容可以斷行的後補地方,視視窗版面而決定是否要換行。
- 語法:
- <wbr 屬性 = "屬性值" />
- 版本:
- Netscape Navigator獨自功能
- 內含元素:
- -
- 屬性:
- 通用屬性(class、dir、id 、lang、style、title) *1)
<nobr >
W3C Note <wbr/>「http://www.w3.org/TR/uri-clarification/」
</nobr >
*1)規格不明,適不適用依UA而定。
hr元素(horizontal rule),為「區塊」特性元素。設定水平分隔線。
- 語法:
- <hr 屬性 = "屬性值" />
- 版本:
- HTML4.01(S,T,F)、XHTML1.0(S,T,F)、XHTML1.1*1)
- 內含元素:
- -
- 屬性:
align、color、noshade、size、width屬性*1)、事件屬性、通用屬性(class、dir、id 、lang、style、title)
<div>
<h3>IT綜合情報網</h3>
<hr style="width:400px; text-align:left; margin-left:0px; color:red"/>
<p>網羅國內國內外IT情報的綜合情報網...<p>
</div>
Output
IT綜合情報網
網羅國內國內外IT情報的綜合情報網...
*1)S → Strict DTD ,T → Transitional DTD,F → Frameset DTD。
*2)刪除線 → W3C非推薦屬性,建議是用CSS取代 ,粗體字 → 必要屬性,不可省略。