Zusammenfassung einiger wichtiger Punkte beim HTML-Lernen-HTML-Tutorial-php.cn

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 konvertieren
Vergleichen 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 <b> und <i> sowie die beiden Tags <sub> und <sup> 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>

Nach dem Login kopieren

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

<!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>

Nach dem Login kopieren

2. Eingebetteter Stil:

<!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>

Nach dem Login kopieren

3. Externes Stylesheet:

<p style="color:red">这里文字是红色。</p>

Nach dem Login kopieren

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:
– relativ: Relative Positionierung einschalten
– absolut: Absolute Positionierung einschalten <style></style> - Behoben: Feste Positionierung aktivieren

① 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!