Blocs HTML

HTML est le langage utilisé pour créer des pages Web en utilisant différents blocs. Ces éléments sont du style, divisés en deux types différents : les éléments de niveau HTML Blocks et les éléments en ligne. Tous ces types d'éléments sont enfermés dans le balise des blocs HTML. Les éléments au niveau du bloc sont structurés pour concevoir la mise en page principale de votre page Web.

Si nous parlons de la vue structure, cela crée une vue structure plus grande que la vue des éléments en ligne. Chaque élément de niveau bloc commence par une nouvelle ligne occupant toute la largeur de l'écran. Ils doivent être rédigés dans l'ouverture < > et balise de fermeture < />.

Le regroupement d'éléments est une méthode importante pour diviser la mise en page sous forme de sections ou de sous-sections. Il est possible de placer n'importe quel élément de bloc dans un autre élément de bloc, et nous pouvons également placer des éléments en ligne dans les éléments HTML Blocks, mais il n'est pas possible de placer des éléments de niveau bloc dans les éléments en ligne plutôt que balise d'élément.

Syntaxe pour différents blocs HTML

Voyons la syntaxe des différents éléments HTML au niveau du bloc :

1. Élément div : Il fonctionne comme un élément de bloc, qui occupe toute la largeur de l'écran et commence toujours sur une nouvelle ligne.

<div>
{ ……Lines of code…...}
</div>

2. table : le tableau est utilisé pour afficher les données dans un format tabulaire comprenant un en-tête de tableau, un corps de tableau comportant une ligne de tableau et une colonne de tableau.

<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

3. Éléments de liste : Liste ordonnée et liste non ordonnée.

<h6>An Unordered list </h6>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<h4>An Ordered list</h4>
<ol>
<li></li>
<li></li>
<li></li>
</ol>

4. Mettre des éléments de formulaire : Mettre des éléments de formulaire pour créer un formulaire HTML comme suit.

<form>
<input type=”text” name=” ” />
<textarea rows=” 3” col=”5” name=””></textarea>
<input type=”submit” name=”” />
</form>

Éléments des blocs HTML

Il existe différents éléments utilisés comme éléments de niveau bloc HTML :

1.  : La balise d'adresse est utilisée pour spécifier les informations de contact de l'auteur dans l'article HTML.
2.  : L'article permet de préciser le contenu qui est autonome.
3.  : Il s'agit d'une sorte d'éléments situés en dehors du contenu principal ; généralement, il est traité comme une barre latérale.

4.  : Chaque fois que nous prenons du contenu provenant d'une autre source, blockquote est utilisé.

5.  : Canvas est un élément utilisé dans les documents Web pour fournir un espace graphique.
6.  : C'est l'élément le plus important dans tout le développement Web qui est utilisé pour diviser les documents HTML en sections ou divisions.
7.  : Quels que soient les étiquettes ou éléments liés au groupe utilisés dans les formulaires Web regroupés dans l'ensemble de champs.
8.  : Les formulaires HTML sont définis à l'aide de cet élément de niveau bloc. Il est le plus couramment utilisé dans le processus de développement Web.
9.  : Il est utilisé pour indiquer la section de pied de page d'une page Web.

10. -

    :Ce sont les rubriques utilisées dans le langage HTML définissant les niveaux 1 à 6.

11.  : Cet élément est utilisé pour indiquer la section d'en-tête de la page Web.
12.  : Il s'agit du dernier élément introduit dans HTML 5, qui est utilisé pour indiquer la section de la page, y compris les liens de navigation vers celle-ci.
13.  : L'élément Section est utilisé pour représenter une section générique de son document.
14.  : Chaque fois que nous souhaitons afficher des données au format tabulaire, un tableau est une solution parfaite. Cela créera un tableau dans votre document HTML.
    Si vous souhaitez inclure du contenu vidéo dans votre document HTML, cela est également possible en utilisant des éléments vidéo simples dans votre code.
     : Si un utilisateur souhaite afficher une liste d'éléments, il est alors possible d'utiliser l'option
    élément.
     : Il affichera la liste de manière ordonnée.
    1.  : Il affichera la liste de manière désordonnée.
       • : cet élément utilisé pour décrire différents termes au format de la liste de description.

    Exemples de blocs HTML

    Voici quelques exemples de blocs HTML donnés ci-dessous :

    Exemple n°1

    Dans l'exemple ci-dessous, nous allons utiliser certains éléments de bloc HTML de base comme div, p, les titres, l'élément lists avec la liste ordonnée et non ordonnée, etc.

    Code :

    <html>
    <head>
    <title>HTML Block Level Elements </title>
    </head>
    <body>
    <h1>HTML Block Level Elements </h1>
    <p>This is the example of HTML block elements showing multiple block
    level elements enclosed within it .Here we can also use inline elements too
    </p>
    <div>
    <h3>Example including div , p , headings elements, list elements</h3>
    <p>This example shows different kind of HTML block elements like div, p
    , headings in between h1 to h6 </p>
    </div>
    <h2>Example of Lists</h2>
    <h4>An Unordered HTML List showing Countries </h4>
    <ul>
    <li>Mumbai</li>
    <li>Pune</li>
    <li>Nagpur</li>
    </ul>
    <h4>An Ordered HTML List showing Countries</h4>
    <ol>
    <li>Mumbai</li>
    <li>Pune</li>
    <li>Nagpur</li>
    </ol>
    </body>
    </html>

    Sortie :

    

    Example #2

    Here we will see another example in which we are creating a table.

    Code:

    <style>
    table {
    border-collapse: collapse;
    }
    th, td {
    border: 1px solid black;
    padding: 10px;
    text-align: left;
    }
    </style>
    <table>
    <tr>
    <th>Sr No</th>
    <th>Emp ID</th>
    <th>Emp Name</th>
    <th>Designation</th>
    </tr>
    <tr>
    <td>1</td>
    <td>111</td>
    <td>John</td>
    <td>Developer</td>
    </tr>
    <tr>
    <td>2</td>
    <td>112</td>
    <td>Alebela</td>
    <td>Tester</td>
    </tr>
    <tr>
    <td>3</td>
    <td>113</td>
    <td>Rakesh</td>
    <td>Project Manager</td>
    </tr>
    <tr>
    <td>4</td>
    <td>114</td>
    <td>Siya</td>
    <td>UX Designer</td>
    </tr>
    <tr>
    <td>5</td>
    <td>115</td>
    <td>Kuldeep</td>
    <td>Web Developer</td>
    </tr>
    </table>

    Output:

    

    Example #3

    Now by using HTML blocks elements, we are going to create an HTML form as follows:

    Code:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Password Input Control</title>
    </head>
    <body >
    <form >
    <h2>Welcome to HTMl Block Demo</h2>
    <h4>Please login here</h4>
    User ID : <input type = "text" name = "user_id" />
    <br><br>
    Password: <input type = "password" name = "password" />
    <br><br>
    <input type = "checkbox" name = "remember" value = "on"> Remember Me
    <br><br>
    <input type = "submit" name = "Login" value = "Submit" />
    </form>
    </body>
    </html>

    Output:

    

    Example #4

    Here we are trying to Address the element in HTML blocks.

    Code:

    <address>
    Presented BY <a href="mailto:[email&#160;protected]">Narendra Modi</a>.<br>
    Visit us at:Delhi<br>
    primeminister.com<br>
    Box 104, Red Fort<br>
    Delhi
    </address>

    Output:

    

    Conclusion

    The above information concluded that the HTML blocks level element included in the HTML document’s body. It will create some large HTML blocks of sections like paragraphs or pages with the division. One can include another block-level element into the block-level elements. It’s also possible to include inline elements into the block-level element but including block-level elements into the inline elements is not possible.

    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!

    html if for format include using Generic this column canvas ul table li kind

    Déclaration：

    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 précédent：Bloc d'affichage HTMLArticle suivant：Bloc d'affichage HTML

    Articles Liés

    Voir plus

    • Résumé des connaissances HTML
    • Comment apprendre le HTML rapidement
    • La différence entre htmlxhtmlxml
    • La différence entre les attributs src et href
    • 关于HTML5和CSS替换使用

    • Maison

    • Cours

    • Questions et réponses

    • Mon

    • Maison
    • Cours
    • Article
    • Questions et réponses
    • Dictionnaire
    • Manuel
    • Télécharger
    • Sujet

    Maison

    Article

    Questions et réponses

    Cours

    Sujet

    Télécharger

    Jeu

    Dictionnaire

    简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）