Éléments de niveau bloc en HTML-tutoriel HTML-php.cn

HTML contient des balises et des éléments prédéfinis ; il peut avoir certaines fonctionnalités et types d'éléments tels que des éléments HTML en ligne au niveau du bloc. Les pages Web ont un ensemble de navigation différent, les logiques seront implémentées à partir du HTML frontal, les exigences définies par l'utilisateur ou personnalisées seront utilisées pour mettre en évidence les pages Web, comme l'utilisation de CSS, de frameworks d'amorçage. Nous avons déjà discuté de l'article précédent comme span et div element est utilisé pour les éléments en ligne en HTML et

La balise est utilisée pour les éléments de niveau bloc en HTML. Chaque division des catégories HTML a un ensemble différent de fonctionnalités ; les logiques doivent être implémentées dans le front-end.

Syntaxe :

Les balises html ont leurs propres structures et fonctionnalités prédéfinies pour les balises et éléments prédéfinis. Les éléments de niveau bloc en HTML ont un ensemble de balises différent ; Les éléments seront utilisés dans les pages Web. Certaines des balises répertoriées ci-dessous.

<address>,<article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption>
<figure>,<footer>,<form>,<h1>-<h6>,<header>,<hr>,<li>,<main>,<nav>,<noscript>,<ol>,<p>
<pre class="brush:php;toolbar:false">,<section>,<table>,<tfoot>,<ul>,<video>

Copier après la connexion

Les balises mentionnées ci-dessus sont des balises prédéfinies dans les balises html au niveau du bloc ; chaque balise a des utilisations et des fonctionnalités différentes lorsque nous appelons les balises dans les pages HTML. Très probablement, nous utilisons

balises dans les éléments de niveau bloc en HTML.

<html>
<body>
<div>
----------codes------
----------------------
</div>
</body>
</html>

Copier après la connexion

Le code ci-dessus est la syntaxe générale des éléments de niveau bloc en HTML. Nous utiliserons également certaines balises prédéfinies mentionnées dans les paragraphes précédents ; si nécessaire, chaque balise aura un contenu indépendant et autonome en html.

Qu'est-ce que les éléments de niveau bloc en HTML ?

Les éléments au niveau du bloc utiliseront des styles CSS pour mettre en évidence les pages Web et des styles plus sophistiqués pour les utilisateurs Web pour développer le modèle de formatage HTML des croissances commerciales. Il a des règles qui couvriront à la fois les éléments en ligne et les éléments de bloc. Très probablement, il est utilisé pour couvrir les éléments de formatage au niveau du bloc. Chaque élément CSS créera les formulaires à l'aide de balises HTML et contient des boîtes ; il peut avoir certains composants comme le contenu, le remplissage et la bordure ; voici quelques composants dans les styles CSS.

Les éléments au niveau du bloc souhaitent définir les marges et le remplissage des pages Web, car ils nécessitent un alignement et une vue appropriés. Dans le même temps, la section des éléments contient également des marges qui existaient à l'extérieur du remplissage d'un élément ; il existe à l'intérieur d'un élément et couvre tout le contenu du corps HTML. Si les éléments nécessitaient une couleur d'arrière-plan ou des images, ils seraient attribués et ceux-ci seraient affichés dans les zones de contenu et de remplissage. Généralement, les zones de marge doivent toujours couvrir le transparent et afficher l'arrière-plan des éléments parents. Des exceptions se produiront si l'élément parent auquel sont attribuées les propriétés d'affichage n'a pas été attribué à des sections de corps dans lesquelles il provoque l'affichage de couleurs ou d'images dans les deux marges. et zones de remplissage Remarque : La marge désigne la distance entre le bord extérieur des éléments HTML (à la fois le contenu et le remplissage).

Nous pouvons également définir les zones de bordure pour mettre en valeur les pages Web au niveau supérieur ; il comprend les couleurs, les styles, la largeur et la marge des bordures. Identique à l'apparition dans les pages Web de la bordure autour d'un élément ainsi que de tous les types. CSS a sa propre propriété border-style pour permettre à l'utilisateur de définir ses propres styles de bordure personnalisés avec certaines valeurs comme aucun, solide, double, caché, pointillé, pointillé, rainure, crête, encart et début. Si nous avons aligné les documents avec des bordures, nous ne spécifions aucune valeur par défaut, aucune n'est attribuée, cela signifie qu'aucune bordure n'est attribuée aux pages Web. Ces styles de bordure sont inclus et disponibles dans la version CSS1 sauf les valeurs cachées qui ont été ajoutées dans la version suivante, c'est-à-dire) la version CSS2.

Dans HTML 4 et versions ultérieures, un élément div correspond aux éléments de niveau bloc et est utilisé pour la conception et sépare le document avec les divisions spécifiées ; l'élément n'a pas de format de caractéristiques spécifiques et il est également obsolète. Aligner les attributs en HTML, et il peut être utilisé pour centrer ou sur le côté droit de son contenu par défaut dans le

La balise était destinée à prendre n'importe quel format dans les styles CSS. En outre, il propose des options telles que des balises div imbriquées. Il doit combiner les autres éléments imbriqués avec div. Quoi que nous ayons déclaré et attribué, les styles, les bordures et les alignements sont spécifiés dans la balise div d'un document, affectant ces zones d'éléments imbriqués spécifiques. Certains attributs et valeurs de base utilisés pour la balise div sont une bordure, une image d'arrière-plan et d'autres styles de format définis par l'utilisateur.

div.sample {width:137px;background:green;border:7px dotted black;padding:3px;}
div.sample ul {color:blue;}

Copier après la connexion

Les codes marqués sont les exemples permettant de comprendre les attributs et fonctionnalités CSS implémentés avec la balise div.

Exemples d'éléments de niveau bloc en HTML

Un exemple d'éléments de niveau bloc en HTML est donné ci-dessous :

Exemple n°1

<html>
<head>
<style>
div.sample {width:133px;border:5px dotted green;padding:13px;}
div.sample ul {color:red;}
</style>
</head>
<body>
<div class="sample" style="color:black">
<p>Samples</p>
<ul>
<li>Mango</li>
<li>Coconut</li>
<li>Lemon</li>
</ul>
</div>
</body>
</html>

Copier après la connexion

Sortie :

Éléments de niveau bloc en HTML

Exemple n°2

<html>
<head>
<style>
div.sample {width:123px;border:10px dotted blue;padding:18px;}
div.sample ul {color:yellow;}
</style>
</head>
<body>
<p>Sample <span style = "color:black">Home</span><br/>
<span style = "color:LightGreen">Contactus</span></p>
</body>
</html>

Copier après la connexion

Sortie :

Éléments de niveau bloc en HTML

Example #3

<html>
<head>
<style>
.example1 {
background-color: darkgreen;
list-style-type: none;
text-align: center;
margin: 3;
padding: 13;
}
.example2 {
display: inline-block;
font-size: 32px;
padding: 27px;
}
</style>
</head>
<body>
<ul class="first">
<li><a href="#products">Products</a></li>
<li><a href="#email">Email</a></li>
<li><a href="#support">Support</a></li>
</ul>
</body>
</html>

Copier après la connexion

Output:

Éléments de niveau bloc en HTML

In the above examples, we have used the basics of the block-level elements in the first two examples and also aligned the menus tabs with text values in the

and tags. is used for in-line elements but

paragraph tag will be used for blocking the text which has already specified in the user-level areas. In the final example, we will use for

element in html is used for navigating the web pages with some block-level contents in the documents. We already shared information about the working of block-level elements and specified with some css properties are enabled for block-level attributes using background-color,text-styles with some options like list text-alignments, padding and margins font-styles; these are some attributes with values specified within the navigation web pages.

Conclusion

The block-level elements are covered with the entire space for elements that are used to create the blocks. The User browsers will display the block-level elements by using the new line and full-width for both before and after the html elements. We can visualize the elements using boxes like a stack.

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 HTML en ligne Article suivant：Attribut de formulaire 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