Heim >Web-Frontend >HTML-Tutorial >Zusammenfassung einiger wichtiger Punkte beim HTML-Lernen
Zusammenfassung einiger wichtiger Punkte beim HTML-Lernen
- 无忌哥哥Original
- 2018-07-19 11:39:412579Durchsuche
Wichtige Zusammenfassung über HTML
Blockelemente, Inline-Elemente, Inline-Blockelemente
HTML kann Elemente in drei Arten klassifizieren Inline-Elemente, Blockelemente und Inline-Blockelemente
Mithilfe des Anzeigeattributs können die drei beliebig konvertiert werden
Blockelemente automatisch Zeilenumbruch
Konvertierungsmethode
(1)display:inline; In Inline-Element konvertieren
(2)display:block;In Blockelement konvertieren
(3)display:inline-block; In Inline-Blockelement konvertierenVergleichen Sie
1. Inline-Element
Das am häufigsten verwendete Inline-Element ist span, und die anderen werden nur unter bestimmten Funktionen verwendet. Die modifizierten Schriftarten a4b561c25d9afb9ac8dc4d70affff419 und 5a8028ccc7a7e27417bff9f05adf5932 sowie die beiden Tags b96cac025db4031319c29e1eb68f19d6 und 2cdea26b4c3988e37d674b56660962a7 können verwendet werden Direkt Es ist sehr praktisch, einen quadratischen Effekt ohne die Hilfe ähnlicher Bewegungsattribute zu erzeugen.
Eigenschaften von Inline-Elementen: (1) Das Festlegen der Breite und Höhe ist ungültig.
(2) Das Festlegen des Randes ist nur in der linken und rechten Richtung gültig, nicht nach oben und unten Die Einstellung ist sowohl nach oben als auch nach unten, nach links und nach rechts gültig, wodurch der Raum erweitert wird Reichtumdie Fußzeile, Abschnitt, Artikel, Ul-Li, Adresse usw. können alle mit p implementiert werden. Um Programmierern jedoch die Interpretation des Codes zu erleichtern, werden im Allgemeinen bestimmte semantische Tags verwendet, um den Code besser lesbar und einfacher auf Fehler zu überprüfen.
Eigenschaften von Blockelementen: (1) Fähigkeit, Breite und Höhe zu identifizieren
(2) Rand und Abstand gelten sowohl für oben, unten, links und rechts
( 3) Automatischer Zeilenumbruch log ｗ Es kombiniert die Eigenschaften von Inline-Elementen und Blockelementen, aber jedes hat seine eigenen Kompromisse. Daher werden Inline-Blockelemente aufgrund ihrer Eigenschaften im täglichen Gebrauch häufiger eingesetzt.
Eigenschaften von Inline-Blockelementen: (1) Kein automatischer Zeilenumbruch
(2) Kann Breite und Höhe erkennen
(3) Die Standardanordnung ist von links nach rechts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行内元素</title>
<style type="text/css">
span {
width: 120px;
height: 120px;
margin: 1000px 20px;
padding: 50px 40px;
background: lightblue;
}
</style>
</head>
<body>
<sspan>不会自动换行</span>
<span>行内元素</span>
</body>
</html>Absoluter Pfad und relativer Pfad
Absoluter Pfad: Bezieht sich auf die absolute Position unter dem Verzeichnis und erreicht direkt den Zielort, normalerweise den Pfad, der vom Laufwerk ausgeht Buchstabe
Relativer Pfad: Bezieht sich auf die Pfadbeziehung zu anderen Dateien (oder Ordnern), die durch den Pfad verursacht wird, in dem sich diese Datei befindet
Jeder . Eine Ebene nach außen springen.
Drei Möglichkeiten, Stile zu schreiben
1. Schreiben Sie den CSS-Code direkt in das vorhandene HTML-Tag <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>块状元素</title> <style type="text/css"> p { width: 120px; height: 120px; margin: 50px 50px; padding: 50px 40px; background: lightblue; } </style> </head> <body> <i>自动换行</i> <p>块状元素</p> <p>块状元素</p> </body> </html>2. Eingebetteter Stil:
Eingebetteter CSS-Stil bedeutet, dass Sie CSS-Stilcode zwischen Tags schreiben können <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>行内块状元素</title> <style type="text/css"> p { display: inline-block; width: 100px; height: 50px; background: lightblue; } </style> </head> <body> <p>行内块状元素</p> <p>行内块状元素</p> </body> </html>3. Externes Stylesheet:
Extern CSS-Stil (auch externer Stil genannt) besteht darin, den CSS-Code in eine separate externe Datei zu schreiben. Diese CSS-Stildatei hat die Erweiterung „.css“
<p style="color:red">这里文字是红色。</p>
Hinweis:
Der Dateiname im CSS-Stil muss den Benennungsregeln entsprechen, z. B. main.css
rel=“stylesheet“ type=“text/css“ ist eine feste Schreibmethode, die nicht möglich ist Modifizierte
CSS-Dateien können auch über den Import in
eingeführt werden, diese Methode kann jedoch nicht mit js- Absolute Positionierung, relativ ausgeführt werden Positionierung und feste Positionierung Hinweis:
- 1. Das Positionsattribut kann steuern, wie und wo ein Webbrowser ein bestimmtes Element anzeigt.
2. Sie können das Positionsattribut verwenden, um ein Element an einer beliebigen Stelle auf der Webseite zu platzieren.
Optionale Werte:
- statisch: Standardwert, für das Element ist die Positionierung nicht aktiviert -
– relativ: Relative Positionierung einschalten
– absolut: Absolute Positionierung einschalten
c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927- Behoben: Feste Positionierung aktivieren 3. Relative Positionierung
① Jedes Element hat eine natürliche Position im Dokumentfluss der Seite. Das Verschieben eines Elements relativ zu dieser Position wird als relative Positionierung bezeichnet. Umliegende Elemente bleiben davon völlig unberührt.
②Wenn die relative Positionierung aktiviert ist, können Sie die vier Attribute oben, rechts, unten und links verwenden, um das Element zu positionieren.
—-left: Der linke Versatz des Elements relativ zu seiner Positionierungsposition. left: 100px, Offset 100px nach rechts relativ zur ursprünglichen Position
–-right: der rechte Offset des Elements relativ zu seiner Positionierungsposition
–-top: das Element relativ zu seiner Positionierungsposition Der obere Versatz
– unten: der untere Versatz des Elements relativ zu seiner Positionierungsposition
③Eigenschaften der relativen Positionierung
– Wenn das Element nicht festgelegt ist Offset, die Position des Elements ändert sich nicht.
——Die relative Positionierung bezieht sich auf die ursprüngliche Position des Elements im Dokumentfluss.
– Durch die relative Positionierung wird das Element nicht aus dem Textfluss entfernt. Die Position des Elements im Textfluss ändert sich nicht.
——Die relative Positionierung verändert die ursprünglichen Eigenschaften des Elements nicht. Blockelement oder Blockelement, Inline oder Inline
– Durch die relative Positionierung wird die Ebene des Elements erhöht, sodass das Element Elemente im Textfluss überdecken kann.
4. Absolute Positionierung
①Absolute Positionierung bedeutet, dass das Element relativ zum HTML-Element oder seinem nächsten Vorfahren-Positionierungselement positioniert wird.
②Wenn das Positionsattribut auf „absolut“ gesetzt ist, ist die absolute Positionierung des Elements aktiviert.
③Wenn die absolute Positionierung aktiviert ist, können Sie die vier Attribute oben, rechts, unten und links verwenden, um das Element zu positionieren.
④Eigenschaften der absoluten Positionierung:
– Durch die absolute Positionierung wird das Element vollständig vom Textfluss getrennt.
– Die Breite eines absolut positionierten Blockelements wird durch seinen Inhalt gedehnt.
– Durch die absolute Positionierung werden Inline-Elemente in Blockelemente umgewandelt.
– Die absolute Positionierung erfolgt relativ zum nächstgelegenen Vorgängerelement, für das die Positionierung aktiviert ist. Wenn die Positionierung nicht für alle Vorfahren aktiviert ist, werden sie relativ zum Browserfenster positioniert.
——Im Allgemeinen wird bei Verwendung der absoluten Positionierung eine relative Positionierung für das übergeordnete Element angegeben, um sicherzustellen, dass das Element relativ zum übergeordneten Element positioniert werden kann.
——Absolute Positionierung erhöht die Ebene des Elements.
5. Feste Positionierung
①Feste Positionierungselemente werden an einer bestimmten Position auf dem Bildschirm gesperrt. Wenn der Besucher die Webseite scrollt, bleibt das feste Element stationär auf dem Bildschirm
②Wenn das Positionsattribut auf „Fest“ gesetzt ist, ist die feste Positionierung des Elements aktiviert. ③Wenn die feste Positionierung aktiviert ist, können Sie die vier Attribute oben, rechts, unten und links verwenden, um das Element zu positionieren. ④ Die feste Positionierung ist auch eine Art absolute Positionierung. Andere Merkmale der festen Positionierung ähneln der absoluten Positionierung. ist anders: (1) Die feste Positionierung ist immer relativ zur Browserpositionierung. (2) wird an einer bestimmten Position im Browserfenster fixiert und lässt sich nicht mit der Bildlaufleiste scrollen. (3) IE6 unterstützt keine feste Positionierung.Das obige ist der detaillierte Inhalt vonZusammenfassung einiger wichtiger Punkte beim HTML-Lernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!