DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML入門知識 >> 4.3 段落標簽<p>
4.3 段落標簽<p>
編輯:HTML入門知識     

一、段落標簽<p>

在HTML中,使用p標簽來標記一段文字。

語法:

<p>段落內容</p>

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>愛蓮說</title>
</head>
<body>
    <h3>愛蓮說</h3>
    <p>水陸草木之花,可愛者甚蕃。晉陶淵明獨愛菊。自李唐來,世人甚愛牡丹。予獨愛蓮之出淤泥而不染,濯清漣而不妖,中通外直,不蔓不枝,香遠益清,亭亭淨植,可遠觀而不可亵玩焉。</p>
    <p>予謂菊,花之隱逸者也;牡丹,花之富貴者也;蓮,花之君子者也。噫!菊之愛,陶後鮮有聞;蓮之愛,同予者何人? 牡丹之愛,宜乎眾矣。</p>
</body>
</html>

在浏覽器預覽效果如下:

說明:

段落標簽會自動換行,並且段落與段落之間有一定的空隙,大家看上圖就很清楚了。

有人現在就會問,怎麼改變文字的顏色和大小呀?同學,要記住,這個問題的內容是在CSS入門教程中,我們會詳細給你介紹。在HTML入門階段,現在你只管什麼情況下用什麼標簽就行了。

二、換行標簽<br/>

我們知道,段落標簽可以自動換行,那如果我們想隨意地進行換行,那怎麼辦呢?大家先看一段代碼:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>換行標簽</title>
</head>
<body>
    <h3>靜夜思</h3>                  
    <p>床前明月光,疑是地上霜。舉頭望明月,低頭思故鄉。</p>
</body>
</html>

這段代碼在浏覽器預覽效果如下:

如果我們想對上面的詩句換行,有2種辦法:一是采用兩個<p>標簽;二是采用換行標簽<br/>

方法一:采用兩個<p>標簽

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>換行標簽</title>
</head>
<body>
    <h3>靜夜思</h3>                  
    <p>床前明月光,疑是地上霜。</p>
    <p>舉頭望明月,低頭思故鄉。</p>
</body>
</html>

這段代碼在浏覽器預覽效果如下:

方法二:采用換行標簽<br/>

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>換行標簽</title>
</head>
<body>
    <h3>靜夜思</h3>                  
    <p>床前明月光,疑是地上霜。<br/>舉頭望明月,低頭思故鄉。</p>
</body>
</html>

這段代碼在浏覽器預覽效果如下:

大家很明顯得看到,用<p>標簽會導致兩文字段落之間有一定空隙,而換行標簽<br/>則不會。

說明:

<br>用來給文字換行,而<p>標簽用來給文字分段。如果你的內容是兩段內容,你別那麼無聊使用<br/>換行那麼麻煩,使用兩個<p>標簽即可。

換行標簽是自閉合標簽 ,其中br指的是“break(換行)”。

總結

1、段落標簽:<p></p>

2、換行標簽:<br/>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved