communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > Blocs HTML

Blocs HTML

WBOY
Libérer： 2024-09-04 16:39:25
original
741 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

É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.
  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.
  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.
  15. 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.
  17.  : Si un utilisateur souhaite afficher une liste d'éléments, il est alors possible d'utiliser l'option
  18. élément.
    19.  : 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>
    Copier après la connexion

    Sortie :

    Blocs HTML

    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>
    Copier après la connexion

    Output:

    Blocs HTML

    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>
    Copier après la connexion

    Output:

    Blocs HTML

    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>
    Copier après la connexion

    Output:

    Blocs HTML

    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!

    Étiquettes associées：
    html html5 HTML Tutorial HTML Properties HTML tags
    source：php
    Article précédent：Bloc d'affichage HTML Article suivant：UTF-8 en HTML
    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
    Derniers articles par auteur
    Derniers numéros
    Conversion automatique PX en erreur REM  <style>html {   taille de police : calc(100vw / 3,75);      }body {    taille de la...
    Depuis 2024-04-16 09:34:16
    0
    0
    4687
    La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
    Depuis 2024-04-06 21:58:04
    0
    1
    800
    Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...
    Depuis 2024-04-06 20:22:15
    0
    1
    454
    Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...
    Depuis 2024-04-06 20:02:10
    0
    2
    543
    Méthode de niveau supérieur pour remplacer une chaîne par du code HTML (généré à partir d'un tableau) Étant donné une chaîne comme celle-ci...$htmlPattern="Usernameis:#name#andusercompany...
    Depuis 2024-04-06 17:40:41
    0
    2
    410
    Rubriques connexes
    Plus>
    Recommandations populaires
    Tutoriels populaires
    Plus>
    Tutoriels associés
    Recommandations populaires
    Derniers cours
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal