跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

html段落标签的详细介绍

标签定义段落。 p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。 段间距IE默认为19px,通过p的margin-top属性设置FF默认为1.12em,通过p的margin-bottom属性设置p默认为块状显示,要清除段间距,一般可以设置

p { margin-top:0; margin-bottom:0; }
延伸阅读:允许的段落用法 可以只在块(block)内指定段落,也可以把段落和其他段落、列表、表单和预定义格式的文本一起使用。总的来讲,这意味着段落可以在任何有合适的文本流的地方出现,例如文档的主体中、列表的元素里,等等。 从技术角度将,段落不可以出现在头部、锚或者其他严格要求内容必须只能是文本的地方。实际上,多数浏览器都忽略了这个限制,它们会把段落作为所含元素的内容一起格式化。

这是段落。

这是段落。

这是段落。

段落元素由 p 标签定义。

HTML中P标签内不可包含p标签 深究: 立即学习 “ 前端免费学习笔记(深入) ”; 我们先来认识in-line内联元素和block-line块元素,因为HTML里几乎所有元素都属于内联元素或者块元素中的一种。 in-line这个词有很多种解释:内嵌、内联、行内、线级等,但是,它们都是表示相同的意思,在这里我们选择习惯的叫法-内联。 先看下面的例子你就能明白两者的差别:

测试一下块元素与内联元素的差别

测试一下

块元素

与内联元素的差别

效果如下图: 在上面的例子中,

会自己产生一个新的行,而并没有换行,这是在没有CSS渲染的情况下才这样,同样,我们也可以通过CSS把p定义成内联元素,把span定义成块元素,但是,我们却不能在HTML里任意转化它们,块元素可以包含内联元素或某些块元素(上面的例子其实是错误的使用--->我把

放在

里面了) ,但内联元素却不能包含块元素,它只能包含其他的内联元素,再看看这个:

我喜欢在 经典论坛 讨论Web标准的原因。

其中

是属于块元素,而是属于内联元素,

包含是没有错误的,同样,

可以包含

,

包含也是对的,但是如果是下面这样的话,就是错误的,因为内联元素不应该包含块元素:

还有一些情况就是一些块元素不可以包含另一些块元素。例如这样:

测试文字 < ul>

  • 现阶段是不能这样用的,要等到XHTML 2.0才可以这样用。
  • 测试文字

    而这样又是可以的。
    • 这样是可以的

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

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

    这是一个段落的开始

    这是另一个段落的开始

    当一个

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

    这是一个段落的开始

    这是另一个段落的开始

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

    测试文字

    • 现阶段是不能这样用的,要等到XHTML 2.0才可以这样用。
    测试文字

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

    里面放

    不合理是同一个道理。 那哪些块元素里面不能放哪些块元素呢?我知道你有这个疑问,也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的,我们已经知道是在最外层,下一级里面只会有、、、,而我们已经知道了可视的元素只会出现在<body>里,所以我们把<body>划在第一个级里面,接着,把不可以自由嵌套的元素划在第三个级,其他的就归进第二个级。 所谓的不可自由嵌套的元素就是里面只能放内联元素的,它们包括有:标题标记的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>;段落标记的<p>;分隔线<hr>和一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)。 为什么说第二级的元素可以自由嵌套呢?我们可以把它们看成是一些容器(或者说是盒子), 这些容器的大小可以自由变化,例如我们可以把<ul>嵌在<p>里面,也可以把<p>嵌在<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校验无法通过也是这个原因-->错误的元素嵌套,然而把提示错误的标签改成<p>或者<span>就可以通过,但是我们不能这样盲目的为了校验而校验,<p>也不是神,<p>代替不了语义化的标签。 下面有一张关于(X)HTML Strict下嵌套规则的图,可以参考: 其实在内联元素中,还是可以再区分一下的,有几个元素(、<input>等)比较特别,它们可以定义宽高。虽然在IE 浏览器里,所有的元素都可以定义宽高,但这是IE自己的标准,并非所有浏览器都支持,W3C称它们为replaced元素,我也找不到适合翻译的词,它们在属于in-line的情况下同样具有block-line的一些特性,在"dasplay:inline-block的应用"中所说的inline-block其实就是让其他元素也模拟成replaced元素,你暂时也不用过多了解,等到后面再学习它。 <p> 标签支持 HTML 中的全局属性。 5= HTML5 中添加的属性。 属性值描述例子浏览器支持classclassname规定元素的一个或多个类名(引用样式表中的类)<pclass="ab"></p>所有浏览器都支持。contenteditable5true(可编辑)false(不可编辑)规定元素内容是否可编辑<pcontenteditable="true">这是一个可编辑的段落。</p>所有主流浏览器都支持。contextmenu5menu_id(要打开的 <menu> 元素的 id。)规定元素的上下文菜单。上下文菜单在用户点击元素时显示。<pcontextmenu="supermenu">本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。</p>@@######@@目前只有 Firefox 支持 contextmenu 属性。data-*5somevalue(规定属性的值(以字符串)。)data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更下载存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。data-* 属性包括两部分:属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符属性值可以是任意字符串注释:用户代理会完全忽略前缀为 "data-" 的自定义属性。@@######@@所有主流浏览器都支持 data-* 属性。dirltr(默认。从左向右 的文本方向。rtl(从右到左的文本方向。)规定元素中内容的文本方向。@@######@@所有浏览器均支持 dir 属性。draggable5true(规定元素的可拖动的。)false(规定元素不可拖动。)auto(使用浏览器的默认行为。)draggable 属性规定元素是否可拖动。提示:链接和图像默认是可拖动的。@@######@@Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 属性。注释:Internet Explorer 8 以及更早的版本,不支持 draggable 属性。dropzone5copy(拖动数据会产生被拖动数据的副本。)move(拖动数据会导致被拖动数据被移动到新位置。)link(拖动数据会产生指向原始数据的链接。)dropzone 属性规定在元素上拖动数据时,是否拷贝、移动或链接被拖动数据。@@######@@目前所有主流浏览器都不支持 contenteditable 属性。hidden5hidden 属性是布尔属性。如果设置该属性,它规定元素仍未或不再相关。浏览器不应显示已规定 hidden 属性的元素。hidden 属性也可用于防止用户查看元素,直到匹配某些条件(比如选择了某个复选框)。然后,JavaScript 可以删除 hidden 属性,以使此元素可见。<phidden="hidden">这是一段隐藏的段落。</p>所有主流浏览器都支持 hidden 属性,除了 Internet Explorer。ididnameid 属性规定 HTML 元素的唯一的 id。id 在 HTML 文档中必须是唯一的。id 属性可用作链接锚(link anchor),通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式。<pid="ab"></p>所有浏览器都支持。langlanguage_code(规定元素内容的语言代码。)lang 属性规定元素内容的语言。@@######@@所有浏览器均支持 lang 属性。spellcheck5true(对元素进行拼写和语法检查.)false(不检查元素。)spellcheck 属性规定是否对元素进行拼写和语法检查。可以对以下内容进行拼写检查:input 元素中的文本值(非密码)<textarea> 元素中的文本可编辑元素中的文本实例进行拼写检查的可编辑段落:@@######@@Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 支持 spellcheck 属性。注释:Internet Explorer 9 以及更早的版本不支持 spellcheck 属性。stylestyle_definition(一个或多个由分号分隔的 CSS 属性和值。)style 属性规定元素的行内样式(inline style)style 属性将覆盖任何全局的样式设定,例如在 <style> 标签或在外部样式表中规定的样式。实例在 HTML 文档中使用 style 属性:@@######@@所有浏览器都支持。titletext(规定元素的工具提示文本(tooltip text)。)title 属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)。提示:title 属性常与 form 以及 a 元素一同使用,以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。实例在 HTML 文档中使用 title 属性:@@######@@所有浏览器都支持。translate5yes(规定应该翻译元素内容。)no(规定不应翻译元素内容。)translate 规定是否应该翻译元素内容。提示:请使用 class="notranslate" 替代。实例规定不应翻译某些元素:@@######@@所有主流浏览器都无法正确地支持 translate 属性。 <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><menu id="supermenu"> <command label="Step 1: Write Tutorial" onclick="doSomething()"> <command label="Step 2: Edit Tutorial" onclick="doSomethingElse()"> </menu></code></div> <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p id="test" data-age="24"> Click Here </p></code></div> <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p dir="rtl" >Write this text right-to-left!</p></code></div> <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p draggable="true">这是一个可拖动的段落。</p></code></div> <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p dropzone="copy"></p></code></div> <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p lang="fr">Ceci est un paragraphe.</p></code></div> <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p contenteditable="true" spellcheck="true">这是一个段落。</p></code></div> <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p style="color:red">This is a paragraph.</p></code></div> <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p title="Free Web tutorials">W3School.com.cn</p></code></div> <div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><p translate="no">请勿翻译本段。</p> <p>本段可被译为任意语言。</p></code></div> </div> <!-- 文章导航 --> <nav class="xjpbg-article-nav" aria-label="文章导航"> <a href="http://www.xjpbg.com/bg/19545.html" class="xjpbg-article-nav-link xjpbg-article-nav-prev"> <span>&#8249;</span> <div> <div class="xjpbg-article-nav-label">上一篇</div> <div class="xjpbg-article-nav-title">如何在两个可编辑引用块之间复制内容</div> </div> </a> <a href="http://www.xjpbg.com/bg/19561.html" class="xjpbg-article-nav-link xjpbg-article-nav-next"> <div> <div class="xjpbg-article-nav-label">下一篇</div> <div class="xjpbg-article-nav-title">jQuery之按钮组件的深入解析_jquery</div> </div> <span>&#8250;</span> </a> </nav> </div> </article> <!-- 相关文章列表 --> <section class="xjpbg-content-section" style="margin-top: 20px;"> <h2 class="xjpbg-widget-title" style="margin-bottom: 20px;">相关文章</h2> <ul class="xjpbg-article-list"> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/19545.html" class="xjpbg-article-link">如何在两个可编辑引用块之间复制内容</a> <div class="xjpbg-article-meta">2026-10-07</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/19541.html" class="xjpbg-article-link">如何解决自定义弹窗 visible prop 控制可见性失效的问题?</a> <div class="xjpbg-article-meta">2026-10-07</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/19532.html" class="xjpbg-article-link">Vue 中如何实现通知及消息提示?</a> <div class="xjpbg-article-meta">2026-10-07</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/19472.html" class="xjpbg-article-link">javascript获取当前日期</a> <div class="xjpbg-article-meta">2026-10-07</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/19468.html" class="xjpbg-article-link">简单介绍JS中的的异步执行</a> <div class="xjpbg-article-meta">2026-10-07</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/19561.html" class="xjpbg-article-link">jQuery之按钮组件的深入解析_jquery</a> <div class="xjpbg-article-meta">2026-10-07</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/19568.html" class="xjpbg-article-link">CSS自定义属性是否会增加内存占用_针对高性能应用的变量分析</a> <div class="xjpbg-article-meta">2026-10-07</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/19627.html" class="xjpbg-article-link">[JavaScript]检测(判断)一个链接(URL)是否有效(服务可用)</a> <div class="xjpbg-article-meta">2026-10-07</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/19632.html" class="xjpbg-article-link">Bootstrap 栅格系统解决百分比布局小数位问题</a> <div class="xjpbg-article-meta">2026-10-07</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/19646.html" class="xjpbg-article-link">React 中 setState 为何看似“延迟更新”?真相与最佳实践详解</a> <div class="xjpbg-article-meta">2026-10-07</div> </li> </ul> </section> </div> <!-- 右侧边栏 --> <aside class="xjpbg-sidebar xjpbg-sidebar-right" aria-label="侧边栏"> <!-- 推荐阅读 --> <div class="xjpbg-widget"> <h3 class="xjpbg-widget-title">推荐阅读</h3> <div class="xjpbg-recommend-grid"> <a href="http://www.xjpbg.com/bg/33550.html" class="xjpbg-recommend-item"> <div class="xjpbg-recommend-thumb"> <img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="为什么Bootstrap 5移除了jQuery对性能有何提升_探讨原生JS与CSS变量的结合应用"> </div> <div class="xjpbg-recommend-title">为什么Bootstrap 5移除了jQuery对性能有何提升_探讨原生JS与CSS变量的结合应用</div> </a> <a href="http://www.xjpbg.com/bg/33546.html" class="xjpbg-recommend-item"> <div class="xjpbg-recommend-thumb"> <img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="jQuery统计指定子元素数量的方法_jquery"> </div> <div class="xjpbg-recommend-title">jQuery统计指定子元素数量的方法_jquery</div> </a> <a href="http://www.xjpbg.com/bg/33525.html" class="xjpbg-recommend-item"> <div class="xjpbg-recommend-thumb"> <img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="如何利用Vue表单处理实现表单的数据筛选与过滤"> </div> <div class="xjpbg-recommend-title">如何利用Vue表单处理实现表单的数据筛选与过滤</div> </a> <a href="http://www.xjpbg.com/bg/33512.html" class="xjpbg-recommend-item"> <div class="xjpbg-recommend-thumb"> <img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="javascript一点特殊用法_javascript技巧"> </div> <div class="xjpbg-recommend-title">javascript一点特殊用法_javascript技巧</div> </a> </div> </div> <!-- 最新文章 --> <div class="xjpbg-widget"> <h3 class="xjpbg-widget-title">最新文章</h3> <ul class="xjpbg-article-list"> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33550.html" class="xjpbg-article-link">为什么Bootstrap 5移除了jQuery对性能有何提升_探讨原生JS与CSS变量的结合应用</a> <div class="xjpbg-article-meta">2026-10-30</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33546.html" class="xjpbg-article-link">jQuery统计指定子元素数量的方法_jquery</a> <div class="xjpbg-article-meta">2026-10-30</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33525.html" class="xjpbg-article-link">如何利用Vue表单处理实现表单的数据筛选与过滤</a> <div class="xjpbg-article-meta">2026-10-30</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33512.html" class="xjpbg-article-link">javascript一点特殊用法_javascript技巧</a> <div class="xjpbg-article-meta">2026-10-30</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33471.html" class="xjpbg-article-link">js中toString方法3个作用</a> <div class="xjpbg-article-meta">2026-10-30</div> </li> <li class="xjpbg-article-item"> <a href="http://www.xjpbg.com/bg/33456.html" class="xjpbg-article-link">CSS focus伪类在表单中的应用_提升输入框的视觉焦点</a> <div class="xjpbg-article-meta">2026-10-30</div> </li> </ul> </div> <!-- 热门标签 --> <div class="xjpbg-widget"> <h3 class="xjpbg-widget-title">热门标签</h3> <div class="xjpbg-article-tag-list"> <a href="http://www.xjpbg.com/tag/4811" class="xjpbg-article-tag-item">详细</a> <a href="http://www.xjpbg.com/tag/3428" class="xjpbg-article-tag-item">介绍</a> <a href="http://www.xjpbg.com/tag/1653" class="xjpbg-article-tag-item">html</a> </div> </div> </aside> </div> </div> </main> <!-- 页脚 --> <footer class="xjpbg-footer"> <div class="xjpbg-container"> <div class="xjpbg-footer-links" style="justify-content: center;"> <a href="http://www.xjpbg.com/22.html" class="xjpbg-footer-link">免责声明</a> <a href="http://www.xjpbg.com/23.html" class="xjpbg-footer-link">关于我们</a> <a href="http://www.xjpbg.com/24.html" class="xjpbg-footer-link">联系我们</a> <a href="http://www.xjpbg.com/25.html" class="xjpbg-footer-link">投诉删除</a> <a href="http://www.xjpbg.com/26.html" class="xjpbg-footer-link">投稿须知</a> </div> <div class="xjpbg-footer-copyright" style="text-align: center; margin-top: 20px;"> Copyright 2026 新派编程网 版权所有 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025064387号</a> </div> <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明:本站信息来源于网络,仅供学习使用,版权归原作者所有,如有不愿意被转载的情况,请联系QQ:182111886,通知我们删除已转载的信息。</div> </div> </footer> <!-- 返回顶部按钮 --> <button class="xjpbg-back-to-top" id="backToTop" aria-label="返回顶部">&#8679;</button> <!-- 公共脚本 --> <script src="http://www.xjpbg.com/static/v6/js/common.js"></script> <div class="hide"> </div> </body> </html>