HTML5(7)——段落

HTML段落

<p>元素是用来定义段落的,并且是由结束标签的。而且网页在解析时,会自动在段落前和段落后添加一些空格区域。

1
2
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML段落显示

你是没有办法去控制网页到底会怎么样显示,小的屏幕,大的屏幕等情况都会变得不一样。而且你也不能添加空格和换行来改变段落显示,网页会自动移除这些空格和空行,比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>

显示结果

HTML换行

HTML中换行,你需要<br>元素来进行实现。你可以在你想换行的地方添加<br>元素来进行换行。
<p>This is<br>a paragraph<br>with line breaks.</p>

诗的显示问题

1
2
3
4
5
6
7
8
9
10
11
12
13
<p>In HTML, spaces and new lines are ignored:</p>

<p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

单行显示了

如果想要正常的显示诗,且能够保存空格,那么我们需要用到<pre>元素,它是用来预格式化文本的,能够保存文本原本的空格和换行且能够使字体宽度固定。

1
2
3
4
5
6
7
8
9
10
11
<p>The pre tag preserves both spaces and line breaks:</p>

<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.
</pre>

正常显示诗

坚持原创技术分享,您的支持将鼓励我继续创作!