Table of Contents

实例" >实例

Home

Web Front-end

HTML Tutorial

Detailed introduction to html paragraph

tag

Detailed introduction to html paragraph
tag

黄舟

Jul 03, 2017 am 11:46 AM

html introduce detailed

Tags define paragraphs.

p elements automatically create some whitespace before and after them. The browser adds these spaces automatically, or you can specify them in your stylesheet.

The paragraph spacing
IE defaults to 19px, through the margin-top attribute of p Set
FF to 1.12em by default, set p through the
margin-bottom attribute of p to block display by default, and clear the paragraph spacing , generally you can set

p {
   margin-top:0;
   margin-bottom:0;
}

Copy after login

## Further reading: Allowed paragraph usage

Paragraphs can be specified only within blocks, or they can be used with other paragraphs, lists, forms, and pre-formatted text. In general, this means that paragraphs can appear anywhere there is appropriate text flow, such as in the body of the document, within list elements, etc.

From a technical point of view, paragraphs cannot appear in headers, anchors, or other places that strictly require content to be text only. In fact, most browsers ignore this restriction and format paragraphs as part of the content of the containing element.

<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p> 
</body>
</html>

Copy after login

In HTML, the P tag cannot contain the p tag

Deep study:

##Let’s first understand in-lineInline elements and block-line block elements, because HTML Almost all elements in it are either inline elements or block elements.

The word in-line has many interpretations: inline, inline, inline, line level, etc., but they all mean the same thing means, here we choose the customary name - inline.

You can understand the difference between the two by looking at the following example:

Test the block element and

Differences between inline elements

Test it

Block elements< ;/p>

The difference between inline elements

The effect is as follows:

##In the above example,

will generate a new line by itself, while does not wrap. This is without CSS rendering. That's it. Similarly, we can also define p as an inline element and span as a block element through CSS. However, we cannot convert them arbitrarily in HTML. Block elements can contain inline elements or certain block elements ( The above example is actually a wrong use --->I put

inside

), But inline elements cannot contain block elements, they can only contain other inline elements. Element

, look at this again:

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

Copy after login

# where

is a block element , and is an inline element. It is not wrong for

to contain . Similarly,

can contain

, and it is also correct for

to contain Yes, but if it is like this, it is wrong because inline elements should not contain block elements:

  <a href="#">
 <h2>这样是错误的用法！</h2>
</a>

Copy after login

# #There are also situations where some block elements cannot contain other block elements. For example:

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

Copy after login

而这样又是可以的。

  <ul>
         <li><p>这样是可以的</p></li>
    </ul>

Copy after login

为什么呢？因为我们使用的DTD中规定了块级元素是不能放在

里面的，再加上一些浏览器纵容这样的写法：

 <p>这是一个段落的开始
     <p>这是另一个段落的开始

Copy after login

当一个

签还没结束时，遇到下一个块元素就会把自己结束掉，其实浏览器是把它们处理成这样：

 <p>这是一个段落的开始</p>
    <p>这是另一个段落的开始</p>

Copy after login

所以刚才那样的写法会变成这样：

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

Copy after login

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

里面放

不合理是同一个道理。

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