Um ehrlich zu sein, war mir dieses Etikett immer fremd. Ich bin immer etwas nervös, wenn ich es benutze. Zum Glück ist nichts schief gelaufen. Aber es ist immer noch notwendig, es sorgfältig zu studieren, also keine Panik.
Die Natur von Titel-Tags
Zunächst stellt sich die erste Frage, wie groß die Schrift von h1 ist.
h1{
}
<h1>h1 title</h1>
Schreiben Sie ein h1-Tag und öffnen Sie den Browser, um es zu überprüfen. Guter Kerl! Der Browser teilt Ihnen direkt mit, wie das h1-Tag implementiert wird, das wie folgt implementiert wird.
font-size ist 2em, die Standardschriftgröße von html ist 16px, 2em=16px*2=32px. Das heißt, die Größe von h1 beträgt standardmäßig 32 Pixel. Sich daran zu erinnern ist natürlich bedeutungslos.
Die Pixelgröße ändert sich, Sie müssen sich nur daran erinnern, dass die h1-Größe 2em*Schriftgröße des übergeordneten Elements ist.
Eine weitere erwähnenswerte Sache ist font-weight:bold. Das heißt, h1 hat standardmäßig einen fetten Effekt.
Lassen Sie uns die angezeigten Werte margin-inline und margin-block ignorieren, Sie können sie als gleichwertig mit margin behandeln. Im Allgemeinen setzen wir den Rand des h-Tags auf 0.
Nachdem ich dies geschrieben habe, habe ich eine Idee, ich schreibe eine
Beschriften und dann die Größe und Fettschrift der p-Beschriftung festlegen, kann der gleiche Effekt erzielt werden?
Es ist ersichtlich, dass der Effekt derselbe ist.
.s1{
font-size: 32px;
font-weight: bold;
background-color: lightgreen;
}
h1{
background-color: lightgreen;
}
<h1>h1 title</h1>
<p class="s1">h1 title</p>
Aber es gibt immer noch Unterschiede: Die Ränder des p-Tags unterscheiden sich immer noch von h1, aber das ist kein Problem. Jedenfalls wird die Marge im Allgemeinen auf 0 gesetzt.
Nachdem Sie die Essenz des h-Tags herausgefunden haben, ist der Rest einfach.
Schriftgröße für h1-h6
Diese Werte scheinen unregelmäßig zu sein. Denk dran. Die letzten paar werden jedoch im Allgemeinen nicht verwendet.
h1-2em
h2-1,5em
h3-1,17em
h4-1em
h5-0,83em
h6-0,63em
Die Randgröße von h1-h6
Es ist auch ein anderer Wert, der aber nicht zu merken ist, in der Regel wird der Rand mit 0 überschrieben.