HTML 段落<p>标签
<p> 标签定义段落。
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标签内不可包含DIV标签
深究：
我们先来认识in-line内联元素和block-line块元素，因为HTML里几乎所有元素都属于内联元素或者块元素中的一种。
in-line这个词有很多种解释：内嵌、内联、行内、线级等，但是，它们都是表示相同的意思，在这里我们选择习惯的叫法-内联。
先看下面的例子你就能明白两者的差别：
<p>测试一下块元素与<span>内联元素</span>的差别</p>
<p>测试一下<div>块元素</div>与内联元素的差别</p>
效果如下图：
在上面的例子中，<div>会自己产生一个新的行，而<span>并没有换行,这是在没有CSS渲染的情况下才这样，同样，我们也可以通过CSS把div定义成内联元素，把span定义成块元素，但是，我们却不能在HTML里任意转化它们，块元素可以包含内联元素或某些块元素（上面的例子其实是错误的使用--->我把<div>放在<p>里面了) ，但内联元素却不能包含块元素，它只能包含其他的内联元素，再看看这个：
<h2>我喜欢在<a href="http://bbs.blueidea.com/ " >经典论坛</a>讨论Web标准的原因。</h2>
其中<h2>是属于块元素，而<a>是属于内联元素，<h2>包含<a>是没有错误的，同样，<div>可以包含<p>，<p>包含<a>也是对的，但是如果是下面这样的话，就是错误的，因为内联元素不应该包含块元素：
<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>
所以刚才那样的写法会变成这样：
<p>测试文字</p>
<ul>
<li>现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。</li>
</ul>
测试文字<p></p>
这也是跟刚才说第一个例子中<p>里面放<div>不合理是同一个道理。
那哪些块元素里面不能放哪些块元素呢？我知道你有这个疑问，也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的，我们已经知道<html>是在最外层，<html>下一级里面只会有<head>、<body>、<frameset>、<noframes>，而我们已经知道了可视的元素只会出现在<body>里，所以我们把<body>划在第一个级里面，接着，把不可以自由嵌套的元素划在第三个级，其他的就归进第二个级。
所谓的不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>；段落标记的<p>；分隔线<hr>和一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)。
为什么说第二级的元素可以自由嵌套呢？我们可以把它们看成是一些容器（或者说是盒子）， 这些容器的大小可以自由变化，例如我们可以把<ul>嵌在<div>里面，也可以把<div>嵌在<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校验无法通过也是这个原因-->错误的元素嵌套，然而把提示错误的标签改成<div>或者<span>就可以通过，但是我们不能这样盲目的为了校验而校验，<div>也不是神，<div>代替不了语义化的标签。
下面有一张关于(X)HTML Strict下嵌套规则的图，可以参考：
其实在内联元素中，还是可以再区分一下的，有几个元素（<img>、<input>等）比较特别，它们可以定义宽高。虽然在IE 浏览器里，所有的元素都可以定义宽高，但这是IE自己的标准，并非所有浏览器都支持，W3C称它们为replaced元素，我也找不到适合翻译的词，它们在属于in-line的情况下同样具有block-line的一些特性，在"dasplay:inline-block的应用"中所说的inline-block其实就是让其他元素也模拟成replaced元素，你暂时也不用过多了解，等到后面再学习它。
<p> 标签支持 HTML 中的全局属性。
= HTML5 中添加的属性。
| 属性 | 值 | 描述 | 例子 | 浏览器支持 |
| class | classname | 规定元素的一个或多个类名（引用样式表中的类） | <p class="ab"></p> | 所有浏览器都支持。 |
| contenteditable |
true（可编辑） false（不可编辑） |
规定元素内容是否可编辑 | <p contenteditable="true">这是一个可编辑的段落。</p> | 所有主流浏览器都支持。 |
| contextmenu 5 | menu_id（要打开的 <menu> 元素的 id。） | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 |
<p contextmenu="supermenu">本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。</p> <menu id="supermenu"> |
目前只有 Firefox 支持 contextmenu 属性。 |
| data-* 5 | somevalue (规定属性的值（以字符串）。) |
data-* 属性用于存储页面或应用程序的私有自定义数据。 data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。 存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。 data-* 属性包括两部分：
注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。 |
<p id="test" data-age="24"> |
所有主流浏览器都支持 data-* 属性。 |
| dir |
ltr （默认。从左向右 的文本方向。 rtl （从右到左的文本方向。） |
规定元素中内容的文本方向。 | <p dir="rtl">Write this text right-to-left!</p> | 所有浏览器均支持 dir 属性。 |
| draggable |
true (规定元素的可拖动的。) false (规定元素不可拖动。) auto (使用浏览器的默认行为。) |
draggable 属性规定元素是否可拖动。 提示：链接和图像默认是可拖动的。 |
<p
|
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 属性。 注释：Internet Explorer 8 以及更早的版本，不支持 draggable 属性。 |
| dropzone |
copy (拖动数据会产生被拖动数据的副本。) move (拖动数据会导致被拖动数据被移动到新位置。) link (拖动数据会产生指向原始数据的链接。) |
dropzone 属性规定在元素上拖动数据时，是否拷贝、移动或链接被拖动数据。 |
<p dropzone="copy"></p> |
目前所有主流浏览器都不支持 contenteditable 属性。 |
| hidden 5 |
hidden 属性是布尔属性。 如果设置该属性，它规定元素仍未或不再相关。 浏览器不应显示已规定 hidden 属性的元素。 hidden 属性也可用于防止用户查看元素，直到匹配某些条件（比如选择了某个复选框）。然后，JavaScript 可以删除 hidden 属性，以使此元素可见。 |
<p hidden="hidden">这是一段隐藏的段落。</p> | 所有主流浏览器都支持 hidden 属性，除了 Internet Explorer。 | |
| id | idname |
id 属性规定 HTML 元素的唯一的 id。 id 在 HTML 文档中必须是唯一的。 id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。 |
<p id="ab"></p> | 所有浏览器都支持。 |
| lang | language_code (规定元素内容的语言代码。) | lang 属性规定元素内容的语言。 |
<p
|
所有浏览器均支持 lang 属性。 |
| spellcheck 5 |
true (对元素进行拼写和语法检查.) false (不检查元素。) |
spellcheck 属性规定是否对元素进行拼写和语法检查。 可以对以下内容进行拼写检查：
|
实例进行拼写检查的可编辑段落： <p contenteditable="true"
|
Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 支持 spellcheck 属性。 注释：Internet Explorer 9 以及更早的版本不支持 spellcheck 属性。 |
| style | style_definition (一个或多个由分号分隔的 CSS 属性和值。) |
style 属性规定元素的行内样式（inline style） style 属性将覆盖任何全局的样式设定，例如在 <style> 标签或在外部样式表中规定的样式。 |
实例在 HTML 文档中使用 style 属性： <p
|
所有浏览器都支持。 |
| title | text (规定元素的工具提示文本（tooltip text）。) |
title 属性规定关于元素的额外信息。 这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。 提示：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。 |
实例在 HTML 文档中使用 title 属性： <p title="Free Web tutorials">W3School.com.cn</p> |
所有浏览器都支持。 |
| translate 5 |
yes (规定应该翻译元素内容。) no (规定不应翻译元素内容。) |
translate 规定是否应该翻译元素内容。 提示：请使用 class="notranslate" 替代。 |
实例规定不应翻译某些元素： <p translate="no">请勿翻译本段。</p> |
所有主流浏览器都无法正确地支持 translate 属性。 |
HTML 段落<p>标签的更多相关文章
- phpcms v9编辑器ckeditor设置回车换行br为段落p标签
phpcms v9和dedecms自带的编辑器都是使用的ckeditor,在默认情况下使用ckeditor编辑内容时,按下回车键后在源代码显示的是<br>而非<p>标签,对于习 ...
- ckeditor_配置 修改工具栏段落的标签和在文中的格式
在默认的工具栏中自带一个格式的选项,可以编辑文字的段落属性,将文字转换为标题.ckeditor中提供了方法可以对这个标签进行修改. 正在做的项目中不叫标题1标题2,叫章.节.条... . 需要进行配置 ...
- HTML5之语义标签
在HTML5标准中,新加了几个用于增添页面语义的标签,这些标签有:article.section.nav和aside等.与别的大多数标签不 同,浏览器在解释渲染这些标签的时候仅仅把它作为普通的div块 ...
- HTML-学习笔记（常用标签）
本篇博客讲一讲HTML中的标签 HTML 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的.<h1> 定义最大的标题.<h6> ...
- HTML“计算机输出”标签 <code><kbd><samp><tt><var><pre>
我们并不反对使用它们,但是如果您只是为了达到某种视觉效果而使用这些标签的话,我们建议您使用样式表,那么做会达到更加丰富的效果. <code> 标签-定义计算机代码文本. 定义和用法: &l ...
- bootstrap学习笔记<二>（标题，段落样式）
标题.样式:class="h1"~class="h6" bootstrap中重新定义了h1~h6标签,具体差别如下: 在bootstrap中其他任何标签使用cl ...
- html5 Doctor——教你规范使用html5标签
学习地址(英文资料):http://html5doctor.com/ http://www.w3.org/html/wg/drafts/html/master/text-level-semantics ...
- H5学习之旅-H5的基本标签（2）
H5的标签和html的标签没什么区别,主要介绍H5的基本标签 1.基础标签header和body,header的<title>元素主要是显示在标签页面里面,以及设置使用的语言和编码格式.b ...
- html5标签基础
1.声明:<!DOCTYPE> HTML有多个不同的版本,只有完全明白页面中使用的确切HTML版本,浏览器才能完全正确的显示出HTML页面,这就是<!DOCTYPE>的用处. ...
随机推荐
- Force StyleCop to Ignore a File
You can quickly force StyleCop to ignore files in a project by manually modifying the project file, ...
- 简明python教程 --C++程序员的视角（二）:函数及作用域
函数通过def关键字定义.def关键字后跟一个函数的标识符名称,然后跟一对圆括号.圆括号之中可以包括一些变量名,该行以冒号结尾.接下来是一块语句,它们是函数体. 函数的基本概念 1 位置:从左往右进行 ...
- 面试：浅谈tcp/udp
tcp是一种面向连接的.可靠的.基于字节流的传输层通信协议.是专门为了在不可靠的互联网络上提供一个可靠的端到端字节流而设计的,面向字节流. udp(用户数据报协议)是iso参考模型中一种无连接的传输层 ...
- android opengl
引用:http://weimingtom.iteye.com/blog/1616972 二维坐标系变换为原点在左上角(测试用) * GLES * JOGL * LWJGL * libgdx(使用g2d ...
- Filter过滤的2种方式
1.新建一个过滤器,继承ActionFilterAttribute,然后重写 public class DemoFilterAttribute:ActionFilterAttribute { //在A ...
- Proteus 8 画原理图仿真 1602 LCD显示字符
以下是源程序: #include <reg52.h> #include<intrins.h> /** * P2 上接的是 D1 ~ D7 */ sbit RS = P3 ^ ; ...
- python发送邮件方法
1.普通文本邮件 #!/usr/bin/env python # -*- coding:utf-8 -*- import smtplib from email.mime.text import MIM ...
- lua 操作中文字符串之截取和长度竖排显示
前言 在游戏中,我们经常会遇到汉字的多行显示,比如名字竖行显示等.如下图: 为了实现上面的效果,lua实现分行是通过 \n 实现的,所以我们需要取出汉字,然后插入 \n 实现分行效果.还有一种就是 ...
- 20160308001 GridView的Sorting排序
参考地址: http://www.cnblogs.com/yinluhui0229/archive/2011/08/01/2124169.html 功能介绍:单击gridview的某一列列头,可以对该 ...
- 安装和使用sass
在安装和使用sass之前,需要一些准备条件: 文件夹---存放.scss 或 .sass: 编辑器,我们推荐使用Sublime Text 2 或者 3: 你的电脑需要安装Ruby,因为sass是依赖于 ...