タグは段落を定義します。
p 要素は、その前後に空白を自動的に作成します。これらのスペースはブラウザによって自動的に追加されるか、スタイルシートで指定することもできます。
段落間隔
IEのデフォルトは19pxで、pのmargin-top属性で設定されます
FFのデフォルトは1.12emで、pのmargin-bottom属性で設定されます
p デフォルトはブロック表示です。段落の間隔をクリアするには、通常、
を設定できます。段落の使用は許可されています
ブロック では、段落を他の段落、リスト、フォーム、事前にフォーマットされたテキストとともに使用することもできます。一般に、これは、ドキュメントの本文やリスト要素内など、適切なテキスト フローがある場所ならどこにでも段落を表示できることを意味します。
p { margin-top:0; margin-bottom:0; }
HTML では、p タグを
より深い分析:
まずインラインを理解しましょうインライン要素
とblock-line ブロック要素。HTML のほとんどすべての要素はインライン要素またはブロック要素のいずれかであるためです。 インラインという言葉には、インライン、インライン、インライン、ラインレベルなど、さまざまな解釈があります。ただし、ここでは、慣習的な名前である inline を選択します。次の例を見てください:
& lt; ブロック要素と
たとえば、
は単独で新しい行を生成しますが、 は CSS レンダリングを行わない場合にのみ当てはまります。同様に、CSS Define p をインライン要素およびスパンとして使用することもできます。ただし、HTML ではこれらを任意に変換することはできません。ブロック要素にはインライン要素または特定のブロック要素を含めることができます (上記の例は実際には間違った使用法です -- > の中に を入れています)。 )、 、もう一度見てください: ここで、 も問題ありませんが、 を含む場合も同様です。これは次のようなものですが、インライン要素にブロック要素を含めるべきではないため、間違っています: また、一部のブロック要素に他のブロック要素を含めることができない状況もあります。例: 而这样又是可以的。 为什么呢?因为我们使用的DTD中规定了块级元素是不能放在 里面的,再加上一些浏览器纵容这样的写法: 当一个 签还没结束时,遇到下一个块元素就会把自己结束掉,其实浏览器是把它们处理成这样: 所以刚才那样的写法会变成这样: 这也是跟刚才说第一个例子中 里面放 不合理是同一个道理。 那哪些块元素里面不能放哪些块元素呢?我知道你有这个疑问,也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的,我们已经知道是在最外层,下一级里面只会有、、 所谓的不可自由嵌套的元素就是里面只能放内联元素的,它们包括有:标题标记的 ;分隔线 为什么说第二级的元素可以自由嵌套呢?我们可以把它们看成是一些容器(或者说是盒子), 这些容器的大小可以自由变化,例如我们可以把 里面,也可以把 嵌在 在HTML里有几个元素是比较特别的: 很多人在W3C校验无法通过也是这个原因-->错误的元素嵌套,然而把提示错误的标签改成 或者就可以通过,但是我们不能这样盲目的为了校验而校验, 也不是神, 代替不了语义化的标签。 下面有一张关于(X)HTML Strict下嵌套规则的图,可以参考: 其实在内联元素中,还是可以再区分一下的,有几个元素(、等)比较特别,它们可以定义宽高。虽然在IE 浏览器里,所有的元素都可以定义宽高,但这是IE自己的标准,并非所有浏览器都支持,W3C称它们为replaced元素,我也找不到适合翻译的词,它们在属于in-line的情况下同样具有block-line的一些特性,在"dasplay:inline-block的应用"中所说的inline-block其实就是让其他元素也模拟成replaced元素,你暂时也不用过多了解,等到后面再学习它。 标签支持 HTML 中的全局属性。 5 = HTML5 中添加的属性。 class="ab" true(可编辑) false(不可编辑) contenteditable="true" contextmenu="supermenu" data-* 属性用于存储页面或应用程序的私有自定义数据。 data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。 存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。 data-* 属性包括两部分: 属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符 属性值可以是任意字符串 注释:用户代理会完全忽略前缀为 "data-" 的自定义属性。 ltr (默认。从左向右 的文本方向。 rtl (从右到左的文本方向。) true (规定元素的可拖动的。) false (规定元素不可拖动。) auto (使用浏览器的默认行为。) draggable 属性规定元素是否可拖动。 提示:链接和图像默认是可拖动的。 Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 属性。 注释:Internet Explorer 8 以及更早的版本,不支持 draggable 属性。 copy (拖动数据会产生被拖动数据的副本。) move (拖动数据会导致被拖动数据被移动到新位置。) link (拖动数据会产生指向原始数据的链接。) hidden 属性是布尔属性。 如果设置该属性,它规定元素仍未或不再相关。 浏览器不应显示已规定 hidden 属性的元素。 hidden 属性也可用于防止用户查看元素,直到匹配某些条件(比如选择了某个复选框)。然后,JavaScript 可以删除 hidden 属性,以使此元素可见。 hidden="hidden" id 属性规定 HTML 元素的唯一的 id。 id 在 HTML 文档中必须是唯一的。 id 属性可用作链接锚(link anchor),通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式。 id="ab" true (对元素进行拼写和语法检查.) false (不检查元素。) spellcheck 属性规定是否对元素进行拼写和语法检查。 可以对以下内容进行拼写检查: input 元素中的文本值(非密码) 可编辑元素中的文本 进行拼写检查的可编辑段落: Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 支持 spellcheck 属性。 注释:Internet Explorer 9 以及更早的版本不支持 spellcheck 属性。 style 属性规定元素的行内样式(inline style) style 属性将覆盖任何全局的样式设定,例如在 はブロック要素、 ; はインライン要素です。 を含む
<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>
</body>
</html>
<p>测试文字
< ul>
<li>现阶段是不能这样用的,要等到XHTML 2.0才可以这样用。</li>
</ul>
测试文字
</p>
<ul>
<li><p>这样是可以的</p></li>
</ul>
<p>这是一个段落的开始
<p>这是另一个段落的开始
<p>这是一个段落的开始</p>
<p>这是另一个段落的开始</p>
<p>测试文字</p>
<ul>
<li>现阶段是不能这样用的,要等到XHTML 2.0才可以这样用。</li>
</ul>
测试文字<p></p>
、
、
、
、
、
、
和一个特别的元素的子一级)。
嵌在
、
、
、
,它们的子一层必须是指定元素,
、
的子一级必须是
的子一级必须是
的子一层必须是
( 只存在于、 、中),之后才是可放内容的或者 。 属性 值 描述 例子 浏览器支持 class classname 规定元素的一个或多个类名(引用样式表中的类) 所有浏览器都支持。 contenteditable 5 规定元素内容是否可编辑 所有主流浏览器都支持。 contextmenu 5 menu_id(要打开的 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 <menu id="supermenu">
<command label="Step 1: Write Tutorial" onclick="doSomething()">
<command label="Step 2: Edit Tutorial" onclick="doSomethingElse()">
</menu>
目前只有 Firefox 支持 contextmenu 属性。 data-* 5 somevalue (规定属性的值(以字符串)。) <p id="test" data-age="24">
Click Here
</p>
所有主流浏览器都支持 data-* 属性。 dir 规定元素中内容的文本方向。 <p
dir="rtl"
>Write this text right-to-left!</p>
所有浏览器均支持 dir 属性。 draggable 5 <p draggable="true">这是一个可拖动的段落。</p>
dropzone 5 dropzone 属性规定在元素上拖动数据时,是否拷贝、移动或链接被拖动数据。 <p dropzone="copy"></p>
目前所有主流浏览器都不支持 contenteditable 属性。 hidden 5 所有主流浏览器都支持 hidden 属性,除了 Internet Explorer。 id idname 所有浏览器都支持。 lang language_code (规定元素内容的语言代码。) lang 属性规定元素内容的语言。 <p lang="fr">Ceci est un paragraphe.</p>
所有浏览器均支持 lang 属性。 spellcheck 5 实例
<p contenteditable="true" spellcheck="true">这是一个段落。</p>
style style_definition (一个或多个由分号分隔的 CSS 属性和值。)