HTML宝典(第 1 版)
2.2.2 p元素
阅读(

HTML基础

HTML元素

结构语义元素

内容分组元素

div元素

p元素

HTML会忽略在文本编辑器中输入的回车符合其他额外的空格,要在网页中开始一个新的段落,应该使用p元素(p 是 paragraph 的缩写)。

p元素是一个有特定语义的元素,以 <p> 标签开始,以 </p> 标签结束。但是,当 p元素后紧跟 address、article, aside、blockquote、div、dl、fieldset、footer、form、h1~h6、header、hgroup、hr、main、nav、ul、ol、p、pre、section、table元素时,或 p元素的父元素中再没有其他内容时,可以省略结束标签。

p元素最常见的用法就是放置文本,浏览器会在每个段落结束的地方,自动插入一个换行符,让段落自动换行。并且,为了防止段落之间过于拥挤,大部分的浏览器都在段落与段落之间设置一定的空白。如:

<p>p元素最常见的用法就是放置文本…在段落与段落之间设置一定的空白。</p>

运行结果如图 2‑6 所示:

段落自动换行
图2-6 段落自动换行

段落中除了可以放置文本外,还可以放置其他元素,如在表单中使用 p元素来对表单元素进行分块。如:

<fieldset>
    <legend>用户登录:</legend>
    <p><label>用户名: <input name="user"></label></p>
    <p><label>密  码: <input name="password"></label></p>
</fieldset>

运行结果如图 2‑7 所示:

段落对表单分块
图2-7 段落对表单分块

另外,还可以使用 br 元素来段落内部手动强制换行。如:

<article>
    <h1>静夜思</h1>
    <p>唐•李白</p>
    <p>床前明月光,疑是地上霜。<br />举头望明月,低头思故乡。</p>
</article>

运行结果如图 2‑8 所示:

段落内强制换行
图2-8 段落内强制换行

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验