html段落標籤的詳細介紹-html教學-PHP中文網

实例" >实例

首頁

web前端

html教學

html段落標籤的詳細介紹

黄舟

Jul 03, 2017 am 11:46 AM

html 介紹詳細

標籤定義段落。

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標籤內不可包含p標籤
深究：

我們先來認識in-line

內嵌元素與block-line區塊元素，因為HTML裡幾乎所有元素都屬於內聯元素或塊元素中的一種。

in-line這個字有許多解釋：內嵌、內嵌、行內、線級等，但是，它們都表示相同的意思，在這裡我們選擇習慣的叫法-內聯。

先看下面的範例就能明白兩者的差異：

測試一下區塊元素與內嵌元素的差異

測試一下

區塊元素< ;/p>

與內聯元素的差異

#效果如下圖：

在上面的例子中，

會自己產生一個新的行，而並沒有換行,這是在沒有CSS渲染的情況下才這樣，同樣，我們也可以透過CSS把p定義成內聯元素，把span定義成塊元素，但是，我們卻不能在HTML裡任意轉化它們，塊元素可以包含內聯元素或某些塊元素（上面的例子其實是錯誤的使用--->我把

放在

裡面了) ，

但內聯元素卻不能包含塊元素，它只能包含其他的內聯元素，再看這個：

<h2>我喜欢在
<a href="
http://bbs.blueidea.com/
 " >经典论坛</a>
讨论Web标准的原因。</h2>

登入後複製

其中

屬於區塊元素，而是屬於內聯元素，

包含是沒有錯誤的，同樣，

可以包含

，

包含也是對的，但是如果是下面這樣的話，就是錯誤的，因為內聯元素不應該包含區塊元素：

###

  <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>
    <ul>
         <li>现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。</li>
    </ul>
测试文字<p></p>

登入後複製

这也是跟刚才说第一个例子中

里面放

不合理是同一个道理。

那哪些块元素里面不能放哪些块元素呢？我知道你有这个疑问，也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的，我们已经知道是在最外层，下一级里面只会有、、、