Maison > interface Web > tutoriel HTML > Description détaillée des éléments HTML au niveau du bloc

Description détaillée des éléments HTML au niveau du bloc

高洛峰
Libérer: 2017-03-15 12:48:54
original
1754 Les gens l'ont consulté
<h2>Mots précédents <p>  Avant l'émergence du HTML5, les gens divisaient généralement les éléments en éléments de bloc au niveau bloc, en ligne et en ligne. Cet article présentera en détail les éléments HTML au niveau du bloc

<p>

h

<p>  L'élément titre (Heading) a six niveaux différents, <h1> est le niveau le plus élevé et <h6> est le niveau le plus bas. Un élément de titre qui décrit brièvement le sujet de la section

<p>   De <h1> à <h6>, l'importance diminue progressivement et la taille de la police diminue également. Lorsque vous utilisez des éléments de titre, faites attention aux points suivants

<p> 1. N'utilisez pas de titres de bas niveau afin de réduire la police du titre, utilisez plutôt le style font-size de CSS.

<p> 2. Évitez de sauter un certain niveau de titres : commencez toujours par <h1>, puis utilisez <h2> et ainsi de suite

<p> 3. Lorsque vous utilisez l'élément <section>, évitez les duplications pour par souci de commodité Lorsque vous utilisez <h1> sur une page, <h1> doit être utilisé pour indiquer le titre de la page, et les autres titres doivent commencer par <h2>. Lors de l'utilisation de <section>, chaque section doit utiliser une balise <h2>

<p>【Style par défaut】

//从h1到h6
margin: 0.67em 0 -> 0.83em 0 -> 1em 0 -> 1.33em 0 -> 1.67em 0 -> 2.33em 0;
font-size: 2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
font-weight: bold;
Copier après la connexion
<p> HTML5balise <hgroup> nouvellement ajoutée, elle représente un groupe de titres, utilisé pour combiner des titres. Utilisez

<hgroup>
    <h1>水果</h1>
    <h2>苹果</h2>
</hgroup>
Copier après la connexion
<p>

p

<p> uniquement lorsque le bloc doit avoir plusieurs niveaux de titres (paragraphe) représente un paragraphe de texte. . Cet élément apparaît généralement sous la forme d'un bloc entier de texte séparé du texte adjacent, soit séparé par un espace blanc vertical, soit mis en retrait avec la première ligne <p>

[Style par défaut] <p>

margin: 16px 0;

<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
Copier après la connexion
<p>. L'élément

p

 <p> (pide) (ou <p>document HTML élément de partition) est un conteneur de contenu de flux à usage général, qui ne représente sémantiquement aucun type de contenu spécifique. , il peut être utilisé pour regrouper d'autres éléments, généralement pour des besoins liés au style (en utilisant l'attribut class ou id) ou pour regrouper un ensemble d'éléments avec le même attribut ( tel que lang), il ne doit être utilisé que lorsqu'aucun autre élément sémantique n'est disponible (tel que ou )<article> Le <nav>

<p>hr<🎜 L'élément >

  

représente une transition thématique entre des éléments au niveau du paragraphe (par exemple, un changement de scène dans une histoire ou un changement dans le thème d'un chapitre). Dans les premières versions de HTML, il s'agissait d'une ligne horizontale. Il peut toujours être représenté comme une ligne horizontale dans le navigateur visuel, mais il est actuellement défini comme un niveau sémantique plutôt que de présentation

Pas besoin d'utiliser <p> pour le fractionnement <hr>

<p>【. Style par défaut】<hr><hr>

Formater le texte. Le texte de cet élément est généralement affiché dans une police à largeur fixe selon le format du fichier d'origine. Les caractères d'espacement (tels que les espaces et les sauts de ligne) dans le texte seront affichés, indiquant généralement le contenu de composition, tel que les blocs de code et Peinture de personnages, etc.
<p>段落1</p>
<hr>
<p>段落2</p>
Copier après la connexion
<p>

【Style par défaut】
margin: 8px 0;
border-style: inset;
border-width: 1px;
Copier après la connexion
<p>

blockquote<p>
</code> </p> élément (ou niveau de bloc HTML <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><pre class="brush:php;toolbar:false">
body {
  color:red;
}
Copier après la connexion
Citation <p> élément), ce qui signifie que le texte qu'il contient est un contenu cité. Habituellement lors du rendu, le contenu de cette partie sera mis en retrait dans une certaine mesure. Si la citation provient d'Internet, vous pouvez définir l'adresse URL source du contenu original sur l'attribut cite. Si vous souhaitez informer les lecteurs de la source de la citation sous forme de texte, vous pouvez utiliser l'élément

.
margin: 1em 0;
white-space: pre;
Copier après la connexion
<p> [Note] citation La signature doit être définie en dehors de la citation

【Style par défaut】<p><blockquote> <cite>adresse

<p> L'élément

permet à l'auteur de Son élément ancêtre
<blockquote cite="http://baike.baidu.com/view/921793.htm">
  <p>横眉冷对千夫指,俯首甘为孺子牛</p>
</blockquote>    
<p>鲁迅</p>
Copier après la connexion
ou <p> le plus proche fournit des informations de contact. Dans ce dernier cas, cela s'applique à l'ensemble du document

<p>  当表示一个和联系信息无关的任意的地址时,使用<p>元素而不是<address>元素。这个元素不能包含除了联系信息之外的任何信息,比如出版日期(这应该包含在<<a href="//m.sbmmt.com/wiki/1268.html" target="_blank">time</a>>元素中)。通常,<address>元素可以放在当前section的<footer>元素中,如果存在的话

<p>【默认样式】

font-style: italic;
Copier après la connexion
<p> 

其他

<p>  除了上面介绍的<p><h><p><hr><blockquote><address>标签外,还有一些前面已经介绍过的标签属于块级标签

<p>  包括骨架类标签(<html><body>),列表类标签(<ul><ol><<a href="//m.sbmmt.com/wiki/596.html" target="_blank">dl</a>><dd><dt>),表单类标签(<a href="//m.sbmmt.com/wiki/125.html" target="_blank">for</a>m<fieldset><output><legend><optgroup><option>),HTML5新增的结构标签(<article><aside><header><footer><nav><section>),HTML5新增的多媒体标签(<figure><figcaption>),HTML5新增的功能性标签(<summary><details>)

<p> 

<h2>最后 <p>  可能有人会觉得<br>标签应该是一个块级元素,因为它有换行,与块级元素的特征很相似。但它实际上是一个内联元素,它的用途是在文本中产生一个换行

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal