tag
Tags define paragraphs.
p elements automatically create some whitespace before and after them. The browser adds these spaces automatically, or you can specify them in your stylesheet.
The paragraph spacing
IE defaults to 19px, through the margin-top attribute of p Set
FF to 1.12em by default, set p through the
margin-bottom attribute of p to block display by default, and clear the paragraph spacing , generally you can set
p { margin-top:0; margin-bottom:0; }
## Further reading: Allowed paragraph usage
Paragraphs can be specified only within blocks, or they can be used with other paragraphs, lists, forms, and pre-formatted text. In general, this means that paragraphs can appear anywhere there is appropriate text flow, such as in the body of the document, within list elements, etc. From a technical point of view, paragraphs cannot appear in headers, anchors, or other places that strictly require content to be text only. In fact, most browsers ignore this restriction and format paragraphs as part of the content of the containing element.
<html> <body> <p>这是段落。</p> <p>这是段落。</p> <p>这是段落。</p> <p>段落元素由 p 标签定义。</p> </body> </html>
In HTML, the P tag cannot contain the p tag
Deep study:
##Let’s first understand in-lineInline elements and block-line block elements, because HTML Almost all elements in it are either inline elements or block elements.
You can understand the difference between the two by looking at the following example:
##
Test the block element and
Differences between inline elements##Test it
Block elements< ;/p>
The difference between inline elementsThe effect is as follows:
##In the above example, will generate a new line by itself, while does not wrap. This is without CSS rendering. That's it. Similarly, we can also define p as an inline element and span as a block element through CSS. However, we cannot convert them arbitrarily in HTML. Block elements can contain inline elements or certain block elements ( The above example is actually a wrong use --->I put inside ), # where can contain , and it is also correct for # #There are also situations where some block elements cannot contain other block elements. For example: 而这样又是可以的。 为什么呢?因为我们使用的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 属性将覆盖任何全局的样式设定,例如在 <h2>我喜欢在
<a href="
http://bbs.blueidea.com/
" >经典论坛</a>
讨论Web标准的原因。</h2>
is a block element , and is an inline element. It is not wrong for
to contain . Similarly,
<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 属性和值。)