HTML 段落

標簽


 

<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      menu_id(要打開的 <menu> 元素的 id。) 規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。

<p contextmenu="supermenu">本段落擁有一個名為 "supermenu" 的上下文菜單。這個菜單會在用戶右鍵單擊該段落時出現。</p>

<menu id="supermenu">
<command label="Step 1: Write Tutorial" onclick="doSomething()">
<command label="Step 2: Edit Tutorial" onclick="doSomethingElse()">
</menu>

目前只有 Firefox 支持 contextmenu 屬性。
data-*              somevalue  (規定屬性的值(以字符串)。)

data-* 屬性用於存儲頁面或應用程序的私有自定義數據。

data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。

存儲的(自定義)數據能夠被頁面的 JavaScript 中利用,以創建更好的用戶體驗(不進行 Ajax 調用或服務器端數據庫查詢)。

data-* 屬性包括兩部分:

  • 屬性名不應該包含任何大寫字母,並且在前綴 "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 draggable="true">這是一個可拖動的段落。</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="fr">Ceci est un paragraphe.</p>
所有瀏覽器均支持 lang 屬性。
spellcheck         5 

true  (對元素進行拼寫和語法檢查.)

false  (不檢查元素。)

spellcheck 屬性規定是否對元素進行拼寫和語法檢查。

可以對以下內容進行拼寫檢查:

  • input 元素中的文本值(非密碼)
  • <textarea> 元素中的文本
  • 可編輯元素中的文本

實例

進行拼寫檢查的可編輯段落:

<p contenteditable="true" spellcheck="true">這是一個段落。</p>
 

Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 支持 spellcheck 屬性。

注釋:Internet Explorer 9 以及更早的版本不支持 spellcheck 屬性。

 style  style_definition   (一個或多個由分號分隔的 CSS 屬性和值。)  

style 屬性規定元素的行內樣式(inline style)

style 屬性將覆蓋任何全局的樣式設定,例如在 <style> 標簽或在外部樣式表中規定的樣式。

 

實例

在 HTML 文檔中使用 style 屬性:

<p style="color:red">This is a paragraph.</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          

 yes  (規定應該翻譯元素內容。)

  no   (規定不應翻譯元素內容。)

 

translate 規定是否應該翻譯元素內容。

提示:請使用 class="notranslate" 替代。

 

實例

規定不應翻譯某些元素:

<p translate="no">請勿翻譯本段。</p>
<p>本段可被譯為任意語言。</p>
 所有主流瀏覽器都無法正確地支持 translate 屬性。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM