So verbergen Sie mithilfe von HTML-Tags

Im Prozess der Website-Entwicklung sind HTML-Tags ein sehr häufig verwendetes Werkzeug. Mit HTML-Tags können Sie den Stil und das Layout von Webseiten festlegen, um verschiedene Effekte zu erzielen. Aber manchmal müssen wir HTML-Tags verwenden, um einige Elemente auszublenden. In bestimmten Fällen möchten Sie beispielsweise, dass bestimmte Inhalte nicht angezeigt werden. Lassen Sie uns lernen, wie man HTML-Tags verwendet . Verstecken.

1. So verbergen Sie Elemente

1. display: none; Das display-Attribut ist ein integriertes Attribut von CSS, über das Elemente angezeigt und ausgeblendet werden können. Wenn wir ein bestimmtes Element ausblenden möchten, können wir das Attribut display: none verwenden. Der spezifische Code lautet wie folgt:

.hide {
   display: none;
}

Im obigen Code legen wir das Attribut display: none für das Element mit dem Klassennamen „hide“ fest. , damit Komm, dieses Element wird ausgeblendet.

Es ist jedoch zu beachten, dass durch die Verwendung von display:none das Element vollständig aus dem Dokumentfluss entfernt wird, was bedeutet, dass das Element nicht mehr die Position auf der Webseite einnimmt, der Code des Elements jedoch weiterhin im HTML-Dokument vorhanden ist. Daher kann es in manchen Fällen einen gewissen Einfluss auf die Suchmaschinenoptimierung haben.

visibility: versteckt;

2. Die Sichtbarkeitseigenschaft ist auch eine integrierte Eigenschaft von CSS, die das Ausblenden und Anzeigen von Elementen steuern kann. Wenn wir möchten, dass ein Element ausgeblendet wird und gleichzeitig seine Position beibehält, können wir das Attribut „visibility:hidden“ verwenden:

.hide {
   visibility: hidden;
}

Im obigen Code legen wir auch das Attribut „visibility:hidden“ für das Element mit der Klasse fest Benennen Sie „hide“. Auf diese Weise wird das Element ausgeblendet, es nimmt jedoch weiterhin seinen Platz auf der Webseite ein, es ist nur nicht auf dem Bildschirm sichtbar.

Aber es sollte beachtet werden, dass die Verwendung von „visibility:hidden“ immer noch den Dokumentflussraum belegt und sich daher immer noch auf das Layout auswirkt, die Auswirkung jedoch geringer ist als bei „display:none“.

opacity: 0;

3. opacity ist ein neues Stilattribut in CSS3, das die Deckkraft von Elementen steuern kann. Setzen Sie das Opazitätsattribut des Elements auf 0, was bedeutet, dass es vollständig transparent ist, d Das Element belegt weiterhin den Platz und wird nicht aus dem Dokument entfernt. Es wird aus dem Fluss entfernt und seine untergeordneten Elemente werden ebenfalls ausgeblendet.

2. Verwenden Sie Attributselektoren zum Ausblenden

Zusätzlich zu den oben genannten Methoden können wir auch basierend auf den Attributen des Elements ausblenden, was die Verwendung von Attributselektoren erfordert. Zum Beispiel:

[hidden]

Im HTML5-Standard wird ein neues verstecktes Attribut hinzugefügt, mit dem Elemente ausgeblendet werden können. Der Code lautet wie folgt:

.hide {
    opacity: 0;
}

1. Im obigen Code legen wir das versteckte Attribut für das div-Element fest und das Element wird ausgeblendet.

[aria-hidden="true"]

Wenn Sie das Element basierend auf anderen Attributen ausblenden möchten, können Sie die Attributauswahl verwenden, z. B. das aria-hidden-Attribut. Der Code lautet wie folgt:

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

2. Unter diesen zeigt aria-hidden="true" an, dass das Element ausgeblendet ist.

3. Zusammenfassung

Durch die obige Einführung haben wir verschiedene Methoden zum Ausblenden von HTML-Tags kennengelernt und können die entsprechende Methode zum Ausblenden und Anzeigen von Elementen entsprechend den tatsächlichen Anforderungen auswählen. Und Sie sollten bei der Verwendung auf einige Details achten. Beispielsweise haben unterschiedliche Ausblendmethoden unterschiedliche Auswirkungen auf das Webseitenlayout und die Suchmaschinenoptimierung, und Sie müssen entsprechend der jeweiligen Situation auswählen.

Das obige ist der detaillierte Inhalt vonSo verbergen Sie mithilfe von HTML-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!