Table des matières

实例" >实例

Maison

interface Web

tutoriel HTML

Introduction détaillée à la balise

du paragraphe HTML

Introduction détaillée à la balise
du paragraphe HTML

Jul 03, 2017 am 11:46 AM

html 介绍详细

La balise

<p> définit un paragraphe. L'élément

p crée automatiquement un espace blanc avant et après. Le navigateur ajoute ces espaces automatiquement ou vous pouvez les spécifier dans votre feuille de style.

Espacement des segments
IE est par défaut de 19 px, via l'attribut margin-top de p Définissez
FF sur 1.12em par défaut, et définissez p pour bloquer l'affichage par défaut via l'attribut
margin-bottom de p. Pour effacer l'espacement des paragraphes, vous pouvez généralement définir

p {
   margin-top:0;
   margin-bottom:0;
}

Copier après la connexion

Lectures complémentaires : Utilisations de paragraphes autorisées

Vous pouvez spécifier des paragraphes uniquement dans des blocs, ou vous pouvez utiliser des paragraphes avec d'autres paragraphes, listes, formulaires et texte préformaté. En général, cela signifie que les paragraphes peuvent apparaître partout où le texte est approprié, comme dans le corps du document, dans les éléments de la liste, etc.
D'un point de vue technique, les paragraphes ne peuvent pas apparaître dans les en-têtes, les ancres ou à d'autres endroits qui exigent strictement que le contenu soit uniquement du texte. En fait, la plupart des navigateurs ignorent cette restriction et formatent les paragraphes comme faisant partie du contenu de l'élément conteneur.

&lt;html&gt;
&lt;body&gt;
&lt;p&gt;这是段落。&lt;/p&gt;
&lt;p&gt;这是段落。&lt;/p&gt;
&lt;p&gt;这是段落。&lt;/p&gt;
&lt;p&gt;段落元素由 p 标签定义。&lt;/p&gt; 
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

En HTML, la balise p ne peut pas être incluse dans la balise P

Étude approfondie :

Apprenons d'abord à connaître les éléments en ligneen ligne et les blocs -éléments de bloc en ligne Parce que presque tous les éléments en HTML sont soit des éléments en ligne, soit des éléments de bloc.

Le mot in-line a de nombreuses interprétations : inline, inline, inline, niveau ligne, etc., mais ils signifient tous la même chose signifie , nous choisissons ici le nom habituel - inline.

Vous pouvez comprendre la différence en regardant l'exemple suivant :

<span>Éléments en ligne</span> différences< ;/p>

;/p>La différence entre et les éléments en ligne</p>

L'effet est le suivant :

Dans l'exemple ci-dessus, <p> ;span> ne s'enroule pas. C'est sans rendu CSS. De même, nous pouvons également définir p comme un élément en ligne et span comme un élément de bloc via CSS. Cependant, nous ne pouvons pas les convertir arbitrairement en HTML. éléments en ligne ou certains éléments de bloc (l'exemple ci-dessus est en fait une mauvaise utilisation ---> J'ai mis <p> à l'intérieur de <p>), mais les éléments en ligne ne peuvent pas contenir d'éléments de bloc, ils ne peuvent contenir que d'autres éléments en ligne éléments. Élément , regardez à nouveau ceci :

&lt;h2&gt;我喜欢在
&lt;a href=&quot;
http://bbs.blueidea.com/
 &quot; &gt;经典论坛&lt;/a&gt;
讨论Web标准的原因。&lt;/h2&gt;

Copier après la connexion

où <h2> appartient à un élément de bloc, et <a> est un élément en ligne. Il n'est pas faux que <h2> contienne <a> ;a> C'est également correct, mais c'est faux si c'est comme suit, car les éléments en ligne ne doivent pas contenir d'éléments de bloc :

  &lt;a href=&quot;#&quot;&gt;
 &lt;h2&gt;这样是错误的用法！&lt;/h2&gt;
&lt;/a&gt;

Copier après la connexion

Il existe également des cas où certains éléments de bloc ne peuvent pas contenir d'autres éléments de bloc. Par exemple :

&lt;p&gt;测试文字
     &lt; ul&gt;
          &lt;li&gt;现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。&lt;/li&gt;
      &lt;/ul&gt;
       测试文字
    &lt;/p&gt;

Copier après la connexion

而这样又是可以的。

  &lt;ul&gt;
         &lt;li&gt;&lt;p&gt;这样是可以的&lt;/p&gt;&lt;/li&gt;
    &lt;/ul&gt;

Copier après la connexion

为什么呢？因为我们使用的DTD中规定了块级元素是不能放在<p>里面的，再加上一些浏览器纵容这样的写法：

 &lt;p&gt;这是一个段落的开始
     &lt;p&gt;这是另一个段落的开始

Copier après la connexion

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

 &lt;p&gt;这是一个段落的开始&lt;/p&gt;
    &lt;p&gt;这是另一个段落的开始&lt;/p&gt;

Copier après la connexion

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

&lt;p&gt;测试文字&lt;/p&gt;
    &lt;ul&gt;
         &lt;li&gt;现阶段是不能这样用的，要等到XHTML 2.0才可以这样用。&lt;/li&gt;
    &lt;/ul&gt;
测试文字&lt;p&gt;&lt;/p&gt;

Copier après la connexion

这也是跟刚才说第一个例子中<p>里面放<p>不合理是同一个道理。

那哪些块元素里面不能放哪些块元素呢？我知道你有这个疑问，也知道我仅仅列一张清单你不好记住它们。我们可以先把所有的块元素再次划分成几个级别的，我们已经知道<html>是在最外层，<html>下一级里面只会有<head>、<body>、<frameset>、<noframes>，而我们已经知道了可视的元素只会出现在<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下嵌套规则的图，可以参考：

其实在内联元素中，还是可以再区分一下的，有几个元素（<img>、<input>等）比较特别，它们可以定义宽高。虽然在IE 浏览器里，所有的元素都可以定义宽高，但这是IE自己的标准，并非所有浏览器都支持，W3C称它们为replaced元素，我也找不到适合翻译的词，它们在属于in-line的情况下同样具有block-line的一些特性，在"dasplay:inline-block的应用"中所说的inline-block其实就是让其他元素也模拟成replaced元素，你暂时也不用过多了解，等到后面再学习它。

<p> 标签支持 HTML 中的全局属性。

5 = HTML5 中添加的属性。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Repo: Comment relancer ses coéquipiers

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

3 Il y a quelques semaines By DDD

Afficher plus

Outils chauds Tags

Code&IT

Voix

Entreprise

Commercialisation

Détecteur d'IA

Chatbot

Conception et art

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Repo: Comment relancer ses coéquipiers

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

R.E.P.O. Enregistrer l'emplacement du fichier: où est-il et comment le protéger?

3 Il y a quelques semaines By DDD

Afficher plus

Tags d'article chaud

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7312

Tutoriel Java

1624

Tutoriel CakePHP

1347

Tutoriel Laravel

1259

Tutoriel PHP

1207

Afficher plus

Related knowledge

Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Bordure de tableau en HTML

Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Tableau imbriqué en HTML

Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Marge gauche HTML

Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Disposition du tableau HTML

Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Déplacer du texte en HTML

Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Liste ordonnée HTML

Comment analysez-vous et traitez-vous HTML / XML dans PHP? Feb 07, 2025 am 11:57 AM

Comment analysez-vous et traitez-vous HTML / XML dans PHP?

Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

Bouton HTML onclick

See all articles

属性	值	描述	例子	浏览器支持
class	classname	规定元素的一个或多个类名（引用样式表中的类）	<p class="ab"></p>	所有浏览器都支持。
contenteditable 5	true（可编辑） false（不可编辑）	规定元素内容是否可编辑	<p contenteditable="true">这是一个可编辑的段落。</p>	所有主流浏览器都支持。
contextmenu 5	menu_id（要打开的 <menu> 元素的 id。）	规定元素的上下文菜单。上下文菜单在用户点击元素时显示。	<p contextmenu="supermenu">本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。</p> <menu id="supermenu"> <command label="Step 1: Write Tutorial" onclick="doSomething()"> <command label="Step 2: Edit Tutorial" onclick="doSomethingElse()"> </menu> Copier après la connexion	目前只有 Firefox 支持 contextmenu 属性。
data-* 5	somevalue (规定属性的值（以字符串）。)	data-* 属性用于存储页面或应用程序的私有自定义数据。 data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。 data-* 属性包括两部分：属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符属性值可以是任意字符串注释：用户代理会完全忽略前缀为 "data-" 的自定义属性。	<p id="test" data-age="24"> Click Here </p> Copier après la connexion	所有主流浏览器都支持 data-* 属性。
dir	ltr （默认。从左向右的文本方向。 rtl （从右到左的文本方向。）	规定元素中内容的文本方向。	<p dir="rtl" >Write this text right-to-left!</p> Copier après la connexion	所有浏览器均支持 dir 属性。
draggable 5	true (规定元素的可拖动的。) false (规定元素不可拖动。) auto (使用浏览器的默认行为。)	draggable 属性规定元素是否可拖动。提示：链接和图像默认是可拖动的。	<p draggable="true">这是一个可拖动的段落。</p> Copier après la connexion	Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 属性。注释：Internet Explorer 8 以及更早的版本，不支持 draggable 属性。
dropzone 5	copy (拖动数据会产生被拖动数据的副本。) move (拖动数据会导致被拖动数据被移动到新位置。) link (拖动数据会产生指向原始数据的链接。)	dropzone 属性规定在元素上拖动数据时，是否拷贝、移动或链接被拖动数据。	<p dropzone="copy"></p> Copier après la connexion	目前所有主流浏览器都不支持 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="fr">Ceci est un paragraphe.</p> Copier après la connexion	所有浏览器均支持 lang 属性。
spellcheck 5	true (对元素进行拼写和语法检查.) false (不检查元素。)	spellcheck 属性规定是否对元素进行拼写和语法检查。可以对以下内容进行拼写检查： input 元素中的文本值（非密码） <textarea> 元素中的文本可编辑元素中的文本	实例进行拼写检查的可编辑段落： <p contenteditable="true" spellcheck="true">这是一个段落。</p> Copier après la connexion	Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 支持 spellcheck 属性。注释：Internet Explorer 9 以及更早的版本不支持 spellcheck 属性。
style	style_definition (一个或多个由分号分隔的 CSS 属性和值。)	style 属性规定元素的行内样式（inline style） style 属性将覆盖任何全局的样式设定，例如在 <style> 标签或在外部样式表中规定的样式。	实例在 HTML 文档中使用 style 属性： <p style="color:red">This is a paragraph.</p> Copier après la connexion	所有浏览器都支持。
title	text (规定元素的工具提示文本（tooltip text）。)	title 属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。提示：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。	实例在 HTML 文档中使用 title 属性： <p title="Free Web tutorials">W3School.com.cn</p> Copier après la connexion	所有浏览器都支持。
translate 5	yes (规定应该翻译元素内容。) no (规定不应翻译元素内容。)	translate 规定是否应该翻译元素内容。提示：请使用 class="notranslate" 替代。	实例规定不应翻译某些元素： <p translate="no">请勿翻译本段。</p> <p>本段可被译为任意语言。</p> Copier après la connexion	所有主流浏览器都无法正确地支持 translate 属性。

Introduction détaillée à la balise
du paragraphe HTML

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1

SublimeText3 version chinoise

Envoyer Studio 13.0.1

Dreamweaver CS6

SublimeText3 version Mac

Sujets chauds

实例

实例

实例

实例