<p> 標簽定義段落。
p 元素會自動在其前后創建一些空白。瀏覽器會自動添加這些空間,您也可以在樣式表中規定。
段間距
IE默認為19px,通過p的margin-top屬性設置
FF默認為1.12em,通過p的margin-bottom屬性設置
p默認為塊狀顯示,要清除段間距,一般可以設置
p {
margin-top:0;
margin-bottom:0;
}
延伸閱讀:允許的段落用法
可以只在塊(block)內指定段落,也可以把段落和其他段落、列表、表單和預定義格式的文本一起使用。總的來講,這意味着段落可以在任何有合適的文本流的地方出現,例如文檔的主體中、列表的元素里,等等。
從技術角度將,段落不可以出現在頭部、錨或者其他嚴格要求內容必須只能是文本的地方。實際上,多數瀏覽器都忽略了這個限制,它們會把段落作為所含元素的內容一起格式化。
<html> <body> <p>這是段落。</p> <p>這是段落。</p> <p>這是段落。</p> <p>段落元素由 p 標簽定義。</p> </body> </html>
HTML中P標簽內不可包含DIV標簽
深究:
我們先來認識in-line內聯元素和block-line塊元素,因為HTML里幾乎所有元素都屬於內聯元素或者塊元素中的一種。
in-line這個詞有很多種解釋:內嵌、內聯、行內、線級等,但是,它們都是表示相同的意思,在這里我們選擇習慣的叫法-內聯。
先看下面的例子你就能明白兩者的差別:
<p>測試一下塊元素與<span>內聯元素</span>的差別</p>
<p>測試一下<div>塊元素</div>與內聯元素的差別</p>
效果如下圖:
在上面的例子中,<div>會自己產生一個新的行,而<span>並沒有換行,這是在沒有CSS渲染的情況下才這樣,同樣,我們也可以通過CSS把div定義成內聯元素,把span定義成塊元素,但是,我們卻不能在HTML里任意轉化它們,塊元素可以包含內聯元素或某些塊元素(上面的例子其實是錯誤的使用--->我把<div>放在<p>里面了) ,但內聯元素卻不能包含塊元素,它只能包含其他的內聯元素,再看看這個:
<h2>我喜歡在<a href="http://bbs.blueidea.com/ " >經典論壇</a>討論Web標准的原因。</h2>
其中<h2>是屬於塊元素,而<a>是屬於內聯元素,<h2>包含<a>是沒有錯誤的,同樣,<div>可以包含<p>,<p>包含<a>也是對的,但是如果是下面這樣的話,就是錯誤的,因為內聯元素不應該包含塊元素:
<a href="#"> <h2>這樣是錯誤的用法!</h2></a>
還有一些情況就是一些塊元素不可以包含另一些塊元素。例如這樣:
<p>測試文字
< ul>
<li>現階段是不能這樣用的,要等到XHTML 2.0才可以這樣用。</li>
</ul>
測試文字
</p>
而這樣又是可以的。
<ul>
<li><p>這樣是可以的</p></li>
</ul>
為什么呢?因為我們使用的DTD中規定了塊級元素是不能放在<p>里面的,再加上一些瀏覽器縱容這樣的寫法:
<p>這是一個段落的開始
<p>這是另一個段落的開始
當一個<p>簽還沒結束時,遇到下一個塊元素就會把自己結束掉,其實瀏覽器是把它們處理成這樣:
<p>這是一個段落的開始</p>
<p>這是另一個段落的開始</p>
所以剛才那樣的寫法會變成這樣:
<p>測試文字</p>
<ul>
<li>現階段是不能這樣用的,要等到XHTML 2.0才可以這樣用。</li>
</ul>
測試文字<p></p>
這也是跟剛才說第一個例子中<p>里面放<div>不合理是同一個道理。
那哪些塊元素里面不能放哪些塊元素呢?我知道你有這個疑問,也知道我僅僅列一張清單你不好記住它們。我們可以先把所有的塊元素再次划分成幾個級別的,我們已經知道<html>是在最外層,<html>下一級里面只會有<head>、<body>、<frameset>、<noframes>,而我們已經知道了可視的元素只會出現在<body>里,所以我們把<body>划在第一個級里面,接着,把不可以自由嵌套的元素划在第三個級,其他的就歸進第二個級。
所謂的不可自由嵌套的元素就是里面只能放內聯元素的,它們包括有:標題標記的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>;段落標記的<p>;分隔線<hr>和一個特別的元素<dt>(它只存在於列表元素<dl>的子一級)。
為什么說第二級的元素可以自由嵌套呢?我們可以把它們看成是一些容器(或者說是盒子), 這些容器的大小可以自由變化,例如我們可以把<ul>嵌在<div>里面,也可以把<div>嵌在<li>里面。
在HTML里有幾個元素是比較特別的:<ul>、<ol>、<dl>、<table>,它們的子一層必須是指定元素,<ul>、<ol>的子一級必須是<li>;<dl>的子一級必須是<dt>或者<dd>;<table>的子一層必須是<caption> 或<thead>、<tfoot>、<tbody>等,而再子一層必須是<tr> (<tr>只存在於<thead>、<tfoot>、<tbody>中),之后才是可放內容的<td>或者<th>。
很多人在W3C校驗無法通過也是這個原因-->錯誤的元素嵌套,然而把提示錯誤的標簽改成<div>或者<span>就可以通過,但是我們不能這樣盲目的為了校驗而校驗,<div>也不是神,<div>代替不了語義化的標簽。
下面有一張關於(X)HTML Strict下嵌套規則的圖,可以參考:
其實在內聯元素中,還是可以再區分一下的,有幾個元素(<img>、<input>等)比較特別,它們可以定義寬高。雖然在IE 瀏覽器里,所有的元素都可以定義寬高,但這是IE自己的標准,並非所有瀏覽器都支持,W3C稱它們為replaced元素,我也找不到適合翻譯的詞,它們在屬於in-line的情況下同樣具有block-line的一些特性,在"dasplay:inline-block的應用"中所說的inline-block其實就是讓其他元素也模擬成replaced元素,你暫時也不用過多了解,等到后面再學習它。
<p> 標簽支持 HTML 中的全局屬性。
5 = HTML5 中添加的屬性。
屬性 | 值 | 描述 | 例子 | 瀏覽器支持 |
class | classname | 規定元素的一個或多個類名(引用樣式表中的類) | <p class="ab"></p> | 所有瀏覽器都支持。 |
contenteditable 5 | true(可編輯) false(不可編輯) |
規定元素內容是否可編輯 | <p contenteditable="true">這是一個可編輯的段落。</p> | 所有主流瀏覽器都支持。 |
contextmenu 5 | menu_id(要打開的 <menu> 元素的 id。) | 規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。 | <p contextmenu="supermenu">本段落擁有一個名為 "supermenu" 的上下文菜單。這個菜單會在用戶右鍵單擊該段落時出現。</p> <menu id="supermenu"> |
目前只有 Firefox 支持 contextmenu 屬性。 |
data-* 5 | somevalue (規定屬性的值(以字符串)。) | data-* 屬性用於存儲頁面或應用程序的私有自定義數據。 data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。 存儲的(自定義)數據能夠被頁面的 JavaScript 中利用,以創建更好的用戶體驗(不進行 Ajax 調用或服務器端數據庫查詢)。 data-* 屬性包括兩部分:
注釋:用戶代理會完全忽略前綴為 "data-" 的自定義屬性。 |
<p id="test" data-age="24">
Click Here
</p> |
所有主流瀏覽器都支持 data-* 屬性。 |
dir | ltr (默認。從左向右 的文本方向。 rtl (從右到左的文本方向。) |
規定元素中內容的文本方向。 | <p dir="rtl">Write this text right-to-left!</p> | 所有瀏覽器均支持 dir 屬性。 |
draggable 5 | true (規定元素的可拖動的。) false (規定元素不可拖動。) auto (使用瀏覽器的默認行為。) |
draggable 屬性規定元素是否可拖動。 提示:鏈接和圖像默認是可拖動的。 |
<p |
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 屬性。 注釋:Internet Explorer 8 以及更早的版本,不支持 draggable 屬性。 |
dropzone 5 | copy (拖動數據會產生被拖動數據的副本。) move (拖動數據會導致被拖動數據被移動到新位置。) link (拖動數據會產生指向原始數據的鏈接。) |
dropzone 屬性規定在元素上拖動數據時,是否拷貝、移動或鏈接被拖動數據。 | <p dropzone="copy"></p> |
目前所有主流瀏覽器都不支持 contenteditable 屬性。 |
hidden 5 | hidden 屬性是布爾屬性。 如果設置該屬性,它規定元素仍未或不再相關。 瀏覽器不應顯示已規定 hidden 屬性的元素。 hidden 屬性也可用於防止用戶查看元素,直到匹配某些條件(比如選擇了某個復選框)。然后,JavaScript 可以刪除 hidden 屬性,以使此元素可見。 |
<p hidden="hidden">這是一段隱藏的段落。</p> | 所有主流瀏覽器都支持 hidden 屬性,除了 Internet Explorer。 | |
id | idname | id 屬性規定 HTML 元素的唯一的 id。 id 在 HTML 文檔中必須是唯一的。 id 屬性可用作鏈接錨(link anchor),通過 JavaScript(HTML DOM)或通過 CSS 為帶有指定 id 的元素改變或添加樣式。 |
<p id="ab"></p> | 所有瀏覽器都支持。 |
lang | language_code (規定元素內容的語言代碼。) | lang 屬性規定元素內容的語言。 | <p |
所有瀏覽器均支持 lang 屬性。 |
spellcheck 5 | true (對元素進行拼寫和語法檢查.) false (不檢查元素。) |
spellcheck 屬性規定是否對元素進行拼寫和語法檢查。 可以對以下內容進行拼寫檢查:
|
實例進行拼寫檢查的可編輯段落: <p contenteditable="true" |
Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 支持 spellcheck 屬性。 注釋:Internet Explorer 9 以及更早的版本不支持 spellcheck 屬性。 |
style | style_definition (一個或多個由分號分隔的 CSS 屬性和值。) | style 屬性規定元素的行內樣式(inline style) style 屬性將覆蓋任何全局的樣式設定,例如在 <style> 標簽或在外部樣式表中規定的樣式。 |
實例在 HTML 文檔中使用 style 屬性: <p |
所有瀏覽器都支持。 |
title | text (規定元素的工具提示文本(tooltip text)。) | title 屬性規定關於元素的額外信息。 這些信息通常會在鼠標移到元素上時顯示一段工具提示文本(tooltip text)。 提示:title 屬性常與 form 以及 a 元素一同使用,以提供關於輸入格式和鏈接目標的信息。同時它也是 abbr 和 acronym 元素的必需屬性。 |
實例在 HTML 文檔中使用 title 屬性: <p title="Free Web tutorials">W3School.com.cn</p> |
所有瀏覽器都支持。 |
translate 5 | yes (規定應該翻譯元素內容。) no (規定不應翻譯元素內容。) |
translate 規定是否應該翻譯元素內容。 提示:請使用 class="notranslate" 替代。 |
實例規定不應翻譯某些元素: <p translate="no">請勿翻譯本段。</p>
<p>本段可被譯為任意語言。</p> |
所有主流瀏覽器都無法正確地支持 translate 屬性。 |