Comment se cacher à l'aide de balises HTML

Dans le processus de développement de sites Web, les balises HTML sont un outil très couramment utilisé. Les balises HTML peuvent être utilisées pour définir le style et la mise en page des pages Web afin d'obtenir divers effets. Mais parfois, nous devons utiliser des balises HTML pour masquer certains éléments. Par exemple, dans certains cas spécifiques, vous ne souhaitez pas que certains contenus soient affichés. Pour le moment, masquer les balises HTML est pratique. Apprenons à utiliser les balises HTML. .Pour se cacher.

1. Comment masquer des éléments

1. display : aucun ;

L'attribut display est un attribut intégré de CSS, grâce auquel les éléments peuvent être affichés et masqués. Lorsque nous voulons masquer un certain élément, nous pouvons utiliser l'attribut display: none. Le code spécifique est le suivant :

.hide {
   display: none;
}

Dans le code ci-dessus, nous définissons l'attribut display: none pour l'élément avec le nom de classe "hide". , pour que Come, cet élément soit masqué.

Mais il faut noter que l'utilisation de display:none supprimera complètement l'élément du flux documentaire, ce qui signifie que l'élément n'occupe plus la position dans la page web, mais que le code de l'élément existe toujours dans le document HTML, donc dans certains cas, cela peut avoir un certain impact sur le référencement.

2. visibilité : caché ;

La propriété de visibilité est également une propriété intégrée de CSS, qui peut contrôler le masquage et l'affichage des éléments. Lorsque nous voulons qu'un élément soit masqué tout en conservant sa position, nous pouvons utiliser l'attribut visibilité:hidden Le code est le suivant :

.hide {
   visibility: hidden;
}

Dans le code ci-dessus, nous définissons également l'attribut visibilité:hidden pour l'élément avec la classe. nom "hide". De cette façon, l'élément est masqué, mais il occupe toujours sa place dans la page Web, c'est juste qu'il n'est pas visible à l'écran.

Mais il convient de noter que l'utilisation de visible:hidden occupera toujours l'espace du flux de documents, donc cela affectera toujours la mise en page, mais l'impact sera plus faible que display:none.

3. opacity : 0 ;

opacity est un nouvel attribut de style en CSS3, qui peut contrôler l'opacité des éléments. Définissez l'attribut opacity de l'élément sur 0, ce qui signifie qu'il est complètement transparent, c'est-à-dire l'effet de disparition. Le code est le suivant :

.hide {
    opacity: 0;
}

Il convient de noter que lors de l'utilisation de opacity:0 pour masquer un élément, le L'élément occupe toujours l'espace et ne sera pas supprimé du document. Il est supprimé du flux et ses éléments enfants sont également masqués.

2. Utilisez des sélecteurs d'attributs pour masquer

En plus des méthodes ci-dessus, nous pouvons également masquer en fonction des attributs de l'élément, ce qui nécessite l'utilisation de sélecteurs d'attributs. Par exemple :

1. [caché]

Dans la norme HTML5, un nouvel attribut masqué est ajouté, qui peut être utilisé pour masquer des éléments. Le code est le suivant :

<div hidden="hidden">...</div>

Dans le code ci-dessus, nous définissons l'attribut caché pour l'élément div, et l'élément sera masqué.

2. [aria-hidden="true"]

Si vous souhaitez masquer en fonction d'autres attributs de l'élément, vous pouvez utiliser le sélecteur d'attribut, par exemple en utilisant l'attribut aria-hidden, le code est le suivant :

<div aria-hidden="true">...</div>

Parmi eux, aria-hided="true" indique que l'élément est masqué.

3. Résumé

Grâce à l'introduction ci-dessus, nous avons découvert plusieurs méthodes de masquage des balises HTML et pouvons choisir la méthode correspondante pour masquer et afficher des éléments en fonction des besoins réels. Et vous devez faire attention à certains détails lorsque vous l'utilisez. Par exemple, différentes méthodes de masquage ont des effets différents sur la mise en page et le référencement des pages Web, et vous devez choisir en fonction de la situation spécifique.

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!