Maîtriser les éléments courants au niveau des blocs et les éléments en ligne ainsi que leur utilisation

Pour maîtriser les éléments courants au niveau du bloc et les éléments en ligne ainsi que leur utilisation, des exemples de code spécifiques sont nécessaires

En HTML, les éléments peuvent être divisés en éléments au niveau du bloc et en éléments en ligne. Comprendre et maîtriser leurs caractéristiques et leur utilisation est crucial pour développer des pages Web et comprendre la structure des pages. Cet article présentera les éléments courants au niveau du bloc et les éléments en ligne, et donnera quelques exemples de code spécifiques.

1. Éléments de niveau bloc

Les éléments de niveau bloc sont affichés sous forme de blocs en HTML. Ils occuperont une ligne exclusive et créeront un nouveau bloc indépendant dans le contexte. Les éléments courants au niveau du bloc sont :

<ol><li><div> : utilisé pour définir une partition ou un bloc de zone dans un document HTML. Il s'agit de l'un des éléments de niveau bloc les plus couramment utilisés et peut être utilisé pour envelopper d'autres éléments afin d'obtenir une division de mise en page et un contrôle de style. <code><div>：用来定义HTML文档中的一个分区或者一个区域块。它是最常用的块级元素之一，可以用来包裹其他元素，实现布局的分割和样式的控制。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;div&gt; &lt;h1 id=&quot;Hello-World&quot;&gt;Hello, World!&lt;/h1&gt; &lt;p&gt;This is a paragraph.&lt;/p&gt; &lt;/div&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><ol start="2"><li><code><p>：用来定义段落。在HTML中，段落通常用来展示一些连续的文本内容。

<p>This is a paragraph.</p>

<li><h1 id="code-code-h-code-用来定义标题-code-h-code-是最高级别的标题-code-h-code-是最低级别的标题-li-ol-div-class-code-style-position-relative-padding-px-margin-px-pre-class-brush-php-toolbar-false-h-This-is-a-heading"> ~ <h6>：用来定义标题，<h1>是最高级别的标题，<h6>是最低级别的标题。

<h1>This is a heading.</h1>

<li><ul>：用来定义无序列表，列表项使用<li>元素包裹。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<li><ol>：用来定义有序列表，列表项同样使用<li>元素包裹。

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

二、行内元素

行内元素在HTML中以行内的形式展示，它们不会独占一行，可以与其他元素在同一行中显示。常见的行内元素有：

<ol><li><span>：用来定义文本的一部分，通常用于对文本进行标记、样式控制或者提供额外的语义信息。

<p>This is a <span style="color: red;">red</span> text.</p>

<li><a>：用来定义超链接，通过href属性指定链接的目标URL。

<a href="https://www.example.com">Click here</a> to visit our website.

<li><strong>：用来强调文本内容，通常以粗体显示。

<p><strong>This is a strong text.</strong></p>

<li><em>：用来斜体化文本内容，强调其重要性。

<p><em>This is an emphasized text.</em></p>

<li><img src="/static/imghw/default1.png" data-src="image.jpg" class="lazy" alt="Maîtriser les éléments courants au niveau des blocs et les éléments en ligne ainsi que leur utilisation" >：用来插入图像，通过src

<img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="Description">

<p></p> : Utilisé pour définir des paragraphes. En HTML, les paragraphes sont généralement utilisés pour afficher du contenu textuel continu. <p></p>rrreee

<h1> ~ <h6> : utilisé pour définir le titre,

est le titre de niveau le plus élevé et <h6>

est le titre de niveau le plus bas.

rrreee

<ul> : utilisé pour définir une liste non ordonnée, et les éléments de la liste sont enveloppés avec des éléments <li> . 🎜🎜rrreee
🎜<ol>
 : utilisé pour définir une liste ordonnée. Les éléments de la liste sont également enveloppés avec des éléments <li>. 🎜🎜rrreee🎜 2. Éléments en ligne 🎜🎜Les éléments en ligne sont affichés en ligne en HTML. Ils n'occupent pas de ligne exclusive et peuvent être affichés dans la même ligne que les autres éléments. Les éléments en ligne courants sont : 🎜🎜🎜<span> : utilisé pour définir une partie du texte, généralement utilisé pour marquer le texte, contrôler le style ou fournir des informations sémantiques supplémentaires. 🎜🎜rrreee
🎜<a> : Utilisé pour définir un lien hypertexte et spécifier l'URL cible du lien via l'attribut href. 🎜🎜rrreee
🎜<strong> : utilisé pour mettre en valeur le contenu du texte, généralement affiché en gras. 🎜🎜rrreee
🎜<em> : utilisé pour mettre en italique le contenu du texte et souligner son importance. 🎜🎜rrreee
🎜<img alt="Maîtriser les éléments courants au niveau des blocs et les éléments en ligne ainsi que leur utilisation" > : utilisé pour insérer des images, précisez l'URL de l'image via l'attribut src. 🎜🎜rrreee🎜Il convient de noter que les éléments au niveau du bloc peuvent contenir d'autres éléments, tandis que les éléments en ligne ne peuvent contenir que du contenu textuel ou d'autres éléments en ligne. 🎜🎜Résumé : 🎜🎜En maîtrisant les éléments courants au niveau des blocs et les éléments en ligne ainsi que leur utilisation, nous pouvons mieux comprendre la structure des pages HTML et être en mesure de les utiliser pour créer et mettre en page des pages Web. Dans le développement réel, nous pouvons choisir les éléments appropriés en fonction des besoins pour obtenir différentes fonctions et effets de style. Les exemples de code donnés ci-dessus espèrent aider les lecteurs à mieux comprendre et utiliser ces éléments. 🎜