Ausführliche Erläuterung der HTML-Grundlagen (Teil 2)

Ausführliche Erläuterung der HTML-Grundlagen (Teil 2)

1. Liste

Der Listen-UL- Container wird mit einer Text- oder Diagrammform mit konsistenter Struktur und Stil geladen, die als Liste bezeichnet wird.

Das größte Merkmal einer Liste ist, dass sie sauber, ordentlich und übersichtlich ist, ähnlich einer Tabelle, aber einen höheren Grad an Kombinationsfreiheit bietet.

1. Ungeordnete Liste ul

Nur <li></li> kann in <ul></ul> verschachtelt werden. Die direkte Eingabe anderer Tags oder Texte in die <ul></ul>-Tags ist nicht zulässig.

Der Raum zwischen <li> und </li> entspricht einem Container, der alle Elemente aufnehmen kann.

<ul>
  <li>Listenelement 1</li>
  <li>Listenelement 2</li>
  <li>Listenelement 3</li>
  ......
</ul>

2. Geordnete Liste ol

  • Der Typattributwert im <ol>-Tag ist die Sortierreihenfolgenummer. Wenn das Typattribut nicht hinzugefügt wird, wird die geordnete Liste standardmäßig beginnend bei Nummer 1 sortiert.
  • Häufig verwendete Typattributwerte sind 1, a, A, i, I
  • Das umgekehrte Attribut in <ol reversed="reversed"> kann die Reihenfolge der Sequenz in der geordneten Liste umkehren.
  • Der Startattributwert in <ol start="3"> ist 3, und die erste Seriennummer in der geordneten Liste beginnt bei 3.
<ol Typ="A"> 
  <li>Listenelement 1</li>
  <li>Liste 2</li>
  <li>Liste Drei</li>
</ol>

3. Benutzerdefinierte Liste dl

Definitionslisten werden häufig zur Erläuterung und Beschreibung von Begriffen oder Substantiven verwendet. Definitionslisten haben keine Aufzählungspunkte vor den Listenelementen.

<dl>
  <dt>Substantiv 1</dt>
  <dd>Substantiv 1 Erklärung 1</dd>
  <dd>Substantiv 1 Erklärung 2</dd>
  ...
  <dt>Substantiv 2</dt>
  <dd>Substantiv 2 Erklärung 1</dd>
  <dd>Substantiv 2, Erklärung 2</dd>
  ...
</dl>

Bildbeschreibung hier einfügen

2. Form

In HTML besteht ein vollständiges Formular normalerweise aus drei Teilen: Formularsteuerelemente (auch Formularelemente genannt), Eingabeaufforderungsinformationen und Formularfeldern. Der Zweck eines Formulars besteht darin, Benutzerinformationen zu erfassen.

Bildbeschreibung hier einfügen

Formularsteuerelemente:

Enthält bestimmte Formularfunktionselemente, z. B. ein einzeiliges Texteingabefeld, ein Kennworteingabefeld, ein Kontrollkästchen, eine Senden-Schaltfläche, eine Zurücksetzen-Schaltfläche usw.

Tipps:

Ein Formular muss normalerweise auch einen erklärenden Text enthalten, um den Benutzer zum Ausfüllen und Bedienen aufzufordern.

Formularfelder:

Es entspricht einem Container, der alle Formularsteuerelemente und Eingabeaufforderungsinformationen enthält. Es kann verwendet werden, um die URL-Adresse des Programms zu definieren, mit dem die Formulardaten verarbeitet werden, sowie die Methode zum Senden der Daten an den Server. Wenn die Formularfelder nicht definiert sind, können die Daten im Formular nicht an den Backend-Server übermittelt werden.

1. Eingabesteuerung

<input type="attribute value" value="Hallo">
  • Eingabe Bedeutung
  • Das <input />-Tag ist ein einzelnes Tag
  • Das Typattribut legt unterschiedliche Attributwerte fest, um unterschiedliche Steuerungstypen anzugeben
  • Neben dem Typattribut gibt es noch weitere Attribute

Bildbeschreibung hier einfügen

Benutzername: <input type="text" /> 
Passwort: <input type="password" />

Das Value-Attribut

Wert Der Standardtextwert. Einige Formulare möchten beim Öffnen der Seite standardmäßig einige Wörter anzeigen. Mit diesem Wert können Sie dies festlegen.

Benutzername:<input type="text" name="username" value="Bitte geben Sie Ihren Benutzernamen ein"> 

Namensattribut

  • Name ist der Name des Formulars, sodass der Hintergrund dieses Formular über dieses Namensattribut finden kann. Auf der Seite gibt es viele Formulare und die Hauptfunktion des Namens besteht darin, die verschiedenen Formulare zu unterscheiden.
  • Der Wert nach dem Namensattribut wird von uns selbst definiert.
  • Wenn es sich bei einem Radio um eine Gruppe handelt, müssen wir ihnen den gleichen Namen geben, damit mehrere Personen eines davon auswählen können.
  • Wir verwenden das Namensattribut jetzt selten, aber es ist notwendig, wenn wir Ajax und Hintergrund lernen.
<input type="radio" name="sex" />Männlich<input type="radio" name="sex" />Weiblich

Die geprüfte Eigenschaft

Zeigt den standardmäßig ausgewählten Status an. Häufiger bei Optionsfeldern und Kontrollkästchen.

Geschlecht:
<input type="radio" name="sex" value="sex" checked="checked" />-<input type="radio" name="sex" value="sex" />-

Zusammenfassung der Eingabeattribute

Eigentum veranschaulichen Wirkung
Typ Formulartyp Wird verwendet, um verschiedene Steuerungstypen anzugeben
Wert Formularwerte Der im Formular angezeigte Standardtext
Name Formularname Auf der Seite gibt es viele Formulare und die Hauptfunktion des Namens besteht darin, die verschiedenen Formulare zu unterscheiden.
geprüft Standardmäßig ausgewählt Zeigt an, dass das Optionsfeld oder Kontrollkästchen am Anfang ausgewählt ist

2. Etikett

  • Der Label-Tag definiert eine Bezeichnung (Label) für ein Eingabeelement.
  • Der Hauptzweck des Labels besteht darin, die Benutzererfahrung zu verbessern. Bieten Sie den Benutzern den besten Service.

Funktion: Wird zum Binden eines Formularelements verwendet. Wenn auf das Label-Tag geklickt wird, erhält das gebundene Formularelement den Eingabefokus.

Wie bindet man Elemente?

  • Die erste Verwendung besteht darin, das Label-Tag zu verwenden, um das Eingabeformular direkt einzuschließen, was für die Auswahl eines einzelnen Formulars geeignet ist
  • Die zweite Verwendung des For-Attributs gibt an, an welches Formularelement das Label gebunden ist (per ID).
  Geben Sie zuerst <label> Benutzername ein: 
    <input type="radio" name="usename" value="Bitte geben Sie Ihren Benutzernamen ein">   
  </Bezeichnung>
  Der zweite Typ <label for="sex">männlich</label>
  <Eingabetyp="Radio" Name="Geschlecht" ID="Geschlecht">

3. Textarea-Steuerelement (Textbereich)

  • Mit dem Textbereichssteuerelement können Sie ganz einfach ein mehrzeiliges Texteingabefeld erstellen
  • .cols="Anzahl der Zeichen in jeder Zeile" rows="Anzahl der angezeigten Zeilen" Wir müssen es in der eigentlichen Entwicklung nicht verwenden

Bildbeschreibung hier einfügen

 <Textbereich>
    Textinhalt</textarea>

Unterschied zwischen Textbox und Textfeld

Bilden Name Der Unterschied Standardwertanzeige In Szenen verwendet
Eingabetyp = "Text" Textfeld Es kann nur eine Textzeile angezeigt werden Einzelnes Etikett, Anzeige des Standardwerts durch Wert Benutzername, Spitzname, Passwort usw.
Textbereich Textfeld Kann mehrere Textzeilen anzeigen Doppeltes Etikett, der Standardwert steht in der Mitte des Etiketts Nachrichtenbrett

4. Dropdown-Liste auswählen

  • Wenn den Benutzern mehrere Optionen zur Auswahl stehen, können wir aus Platzgründen das Auswahlsteuerelement verwenden, um eine Dropdown-Liste zu definieren.
  • Definiert in Option Wenn ausgewählt = „ausgewählt“, ist das aktuelle Element das standardmäßig ausgewählte Element.
  • Wir verwenden es weniger in der eigentlichen Entwicklung

Bildbeschreibung hier einfügen

<Auswählen>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  ...
</Auswählen>

3. Formularfelder

Wie werden die gesammelten Benutzerinformationen an den Server weitergegeben?

  • Über Formularfelder

Zweck:

  • In HTML wird das Formular-Tag verwendet, um Formularfelder zum Sammeln und Übertragen von Benutzerinformationen zu definieren. Alle Inhalte des Formulars werden an den Server übermittelt.
<form action="URL-Adresse" method="Übermittlungsmethode" name="Formularname">
  Verschiedene Formularsteuerelemente</form>

Gemeinsame Eigenschaften:

Jedes Formular sollte seine eigenen Formularfelder haben. Wenn Sie später die Ajax-Hintergrundinteraktion lernen, benötigen Sie Formularfelder.

Eigentum Eigenschaftswert Wirkung
Aktion URL-Adresse Wird verwendet, um die URL-Adresse des Serverprogramms anzugeben, das Formulardaten empfängt und verarbeitet.
Verfahren erhalten/posten Wird verwendet, um die Übermittlungsmethode für Formulardaten festzulegen. Der Wert kann „get“ oder „post“ sein.
Name Name Wird verwendet, um den Namen des Formulars anzugeben, um mehrere Formulare auf derselben Seite zu unterscheiden.

Unterschied zwischen GET und POST

GET ist harmlos, wenn der Browser zurückfällt, während POST die Anforderung erneut übermittelt.
GET-Anfragen werden vom Browser aktiv zwischengespeichert, POST-Anfragen jedoch nicht, sofern sie nicht manuell festgelegt werden.
GET-Anfragen können nur URL-codiert werden, während POST mehrere Codierungsmethoden unterstützt.
Die Parameter der GET-Anfrage bleiben vollständig im Browserverlauf erhalten, die Parameter im POST bleiben jedoch nicht erhalten.
Die Größe einer GET-Anfrage beträgt im Allgemeinen (1024 Bytes). Das HTTP-Protokoll hat keine Beschränkung, aber es hängt vom Server und Betriebssystem ab. Theoretisch gibt es keine Größenbeschränkung für POST, und die HTTP-Protokollspezifikation hat auch keine Größenbeschränkung. In Wirklichkeit hängt die Datenmenge, die per POST übertragen werden kann, jedoch von den Servereinstellungen und der Speichergröße ab.
Für Parameterdatentypen akzeptiert GET nur ASCII-Zeichen, während POST keine Einschränkungen hat.
GET ist weniger sicher als POST, da die Parameter direkt in der URL angezeigt werden und daher nicht zum Übergeben vertraulicher Informationen verwendet werden können.

Teamvereinbarung:

Elementattributwerte verwenden die Syntax mit doppelten Anführungszeichen

Schreiben Sie alle Elementattributwerte, die geschrieben werden können

Empfohlen <input type="text" /> 
<input type="radio" name="name" checked="aktiviert" />

Was passiert von der Eingabe der URL bis zur Anzeige der Seite (Interview)

Autor: Twinkle_
Verknüpfung: https://juejin.im/post/6869279683230629896
Quelle: Nuggets

Multiprozessarchitektur von Browsern

  • Der gesamte Prozess von der Browsereingabe der URL bis zur Seitendarstellung wird durch die Zusammenarbeit verschiedener Prozesse in der Browserarchitektur abgeschlossen.
  • Browser-Hauptprozess: Unterprozesse verwalten und Servicefunktionen bereitstellen
  • Rendering-Prozess: Rendert HTML, CSS und JS in eine Oberfläche. Dabei kommen die JS-Engine v8 und die Layout-Engine Blink zum Einsatz. Für jede Registerkarte wird ein Rendering-Prozess erstellt.
  • GPU-Prozess: Ursprünglich für die Verarbeitung von 3Dcss verantwortlich, später wurde die UI-Schnittstelle jedoch auch von der GPU gezeichnet
  • Netzwerkprozess: ist für Netzwerkanforderungen und Ladeprozesse von Netzwerkressourcen verantwortlich
  • Plugin-Prozess: verantwortlich für den Betrieb des Plugins. Da Plugins häufig abstürzen, sollten Sie sie in unabhängige Prozesse einbinden, um zu verhindern, dass sie andere beeinträchtigen.

Von der Benutzereingabe bis zur Seitenanzeige laufen verschiedene Prozesse ab, wie das folgende Diagramm zeigt:

Bildbeschreibung hier einfügen

Wie aus der Abbildung ersichtlich, erfordert der gesamte Prozess die Zusammenarbeit verschiedener Prozesse. Der Prozess kann grob wie folgt beschrieben werden:

  • Der Benutzer gibt die URL ein, verarbeitet die eingegebenen Informationen, der Hauptprozess startet die Navigation und übergibt die Arbeit an den Netzwerkprozess
  • Der Netzwerkprozess initiiert eine Netzwerkanforderung, die eine Umleitung verursachen kann
  • Nachdem der Server auf die URL geantwortet hat, benachrichtigt der Hauptprozess den Rendering-Prozess und Sie können mit der Arbeit beginnen.
  • Der Rendering-Prozess ist bereit. Das Übermitteln von Daten an den Rendering-Prozess wird als Übermitteln des Dokuments bezeichnet.
  • Der Rendering-Prozess empfängt die Daten und schließt das Seiten-Rendering ab.

Spezifischer Prozess

1. Geben Sie die URL ein

Der Benutzer gibt die URL ein und verarbeitet die eingegebenen Informationen:

  • Wenn es sich um eine Zeichenfolge ohne URL-Struktur handelt, wird die Standard-Engine des Browsers zum Suchen nach der Zeichenfolge verwendet.
  • Wenn es sich um eine Zeichenfolge mit einer URL-Struktur handelt, übergibt der Hauptprozess des Browsers diese an den Netzwerkprozess, damit dieser mit der Arbeit beginnen kann.

2.1 Den Browser-Cache finden

  • Der Netzwerkprozess prüft zunächst, ob ein lokaler Cache vorhanden ist. Wenn ja, gibt er die Ressource direkt an den Browserprozess zurück. Wenn nicht, ist der nächste Schritt DNS-> IP-> TCP

2.2 DNS-Auflösung

  • Nachdem der Netzwerkprozess die URL erhalten hat, führt er zunächst eine DNS-Domänennamenauflösung durch, um die IP-Adresse zu erhalten. Wenn das Anforderungsprotokoll HTTPS ist, muss eine TLS-Verbindung hergestellt werden.

2.2 Herstellen einer TCP-Verbindung, Drei-Wege-Handshake

  • Der nächste Schritt besteht darin, über die IP-Adresse eine TCP-Verbindung mit dem Server herzustellen. Nachdem die Verbindung hergestellt ist, wird eine Anfrage an den Server gesendet.

3. Server-Antwort

  • Nach dem Empfang der Anforderungsinformationen generiert der Server basierend auf den Anforderungsinformationen eine Antwortzeile, einen Antwortheader und einen Antworttext und sendet sie an den Netzwerkprozess. Nachdem der Netzwerkprozess die Antwortinformationen erhalten hat, beginnt er mit der Analyse des Inhalts des Antwortheaders.

Der Prozess des Parsens der Antwortzeile und der Antwortheaderinformationen durch den Netzwerkprozess:

3.1 Umleitung

  • Wenn der Statuscode der Antwortzeile 301 (permanente Umleitung) und 302 (vorübergehend) lautet, bedeutet dies, dass Sie zu einer anderen URL umleiten müssen. Zu diesem Zeitpunkt liest der Netzwerkprozess die umgeleitete Adresse aus dem Standortfeld im Antwortheader und initiiert die Netzwerkanforderung erneut.

3.2 Antwortdatenverarbeitung

  • Die Navigation bestimmt den Typ der Antworttextdaten über das Feld **Content-type** im Anforderungsheader. Der Browser entscheidet hierdurch, wie der Inhalt des Antworttexts angezeigt wird. Handelt es sich beispielsweise um einen Anwendungs-/Oktett-Stream, wird die Anforderung entsprechend dem Download-Typ verarbeitet und die Navigation beendet. Wenn es Text/HTML ist, teilt dies dem Browser mit, dass der Server das HTML-Format zurückgibt, und der Browser benachrichtigt den Rendering-Prozess, dass Sie arbeiten müssen.

4. Bereiten Sie den Rendering-Prozess vor

Standardmäßig gibt es einen Renderer-Prozess pro Seite. Wenn sie sich jedoch auf derselben Site befinden (derselbe Stammdomänenname + dasselbe Protokoll), wird der Rendering-Prozess erneut verwendet.

5. Dokumente einreichen

  • Nachdem der Rendervorgang abgeschlossen ist, sendet der Browserprozess eine „Dokumentenübermittlungsnachricht“. Nachdem der Rendervorgang die Nachricht empfangen hat, nimmt er die Datenübertragungspipeline mit dem Netzwerkprozess wieder auf.
  • Nachdem die Datenübertragung abgeschlossen ist, weist der Rendervorgang den Browserprozess an, die Übermittlung des Dokuments zu bestätigen. Zu diesem Zeitpunkt aktualisiert der Browser die Seite, den Sicherheitsstatus, die URL sowie den Vorwärts- und Rückwärtsverlauf.
  • Die Navigation endet hier und tritt in die Rendering-Phase ein.

Hinweis: Wenn der Browser mit dem Laden einer Adresse beginnt, wechselt das Symbol auf der Registerkarte in den Ladezustand. Die Seite im Bild zeigt jedoch immer noch den Inhalt der zuvor geöffneten Seite und wird nicht sofort durch die Baidu-Startseite ersetzt. Denn mit der Ersetzung des Seiteninhalts muss bis zur Dokumentübermittlung gewartet werden.

4. Grundlegende Front-End-HTML-Interviewfragen

Was sind die Nachteile von Iframes?

Vorteile von iframes

  • Iframe kann die eingebettete Webseite unverändert anzeigen.
  • Wenn mehrere Webseiten auf Iframes verweisen, müssen Sie nur den Inhalt des Iframes ändern, um den Inhalt jeder aufgerufenen Seite zu ändern, was bequem und schnell ist.
  • Wenn eine Webseite für einen einheitlichen Stil denselben Header und dieselbe Version hat, kann sie als eine Seite geschrieben und mit Iframes verschachtelt werden, um die Wiederverwendbarkeit des Codes zu erhöhen.
  • Wenn beim Laden von Drittanbieter-Inhalten wie Symbolen und Anzeigen eine langsame Verarbeitung auftritt, können diese Probleme durch Iframes gelöst werden.

Nachteile von iframes

  • Dadurch werden sehr viele Seiten generiert, die nicht einfach zu verwalten sind.
  • Die Iframe-Struktur kann manchmal verwirrend sein. Wenn viele Frames vorhanden sind, können Bildlaufleisten nach oben und unten sowie nach links und rechts erscheinen, die die Besucher ablenken und zu einer schlechten Benutzererfahrung führen. Generation
  • Der Code ist komplex und kann von einigen Suchmaschinen nicht indexiert werden. Dies ist sehr kritisch. Aktuelle Suchmaschinen-Crawler können den Inhalt von iframes nicht gut verarbeiten, daher wirkt sich die Verwendung von iframes nachteilig auf die Suchmaschinenoptimierung aus.
  • Viele Mobilgeräte (PDA-Telefone) können den Rahmen nicht vollständig anzeigen und weisen eine schlechte Gerätekompatibilität auf.
  • Iframe-Seiten erhöhen die HTTP-Anfragen des Servers und sind für große Websites nicht ratsam.
  • Mittlerweile wird Ajax grundsätzlich als Ersatz für Iframe verwendet, sodass sich Iframe nach und nach aus der Front-End-Entwicklung zurückgezogen hat.

Was ist die Funktion des Etiketts? Wie benutzt man es?

Beispiel 1: Klicken Sie auf "Benutzername:", um den Cursor im Eingabefeld zu positionieren

<form><label for="myid"> Benutzername:</label>
<input type="text" id="meineid" /></form>  

Beispiel 2: Klicken Sie auf „Benutzername:“ oder drücken Sie Alt+1, um den Cursor in das Eingabefeld zu positionieren

<form>
    <label for="myid" accesskey="1"> Benutzername:</label>
    <input type="text" id="meineid" tabindex="1" />
</form>  

für Attributfunktion: Gibt das HTML-Element an, an das das Label-Tag gebunden ist. Wenn Sie auf dieses Tag klicken, erhält das gebundene Element den Fokus.

Accesskey-Attribut

Funktion: Gibt den Hotkey für den Zugriff auf das an das Label-Tag gebundene Element an. Wenn Sie den Hotkey drücken, erhält das gebundene Element den Fokus.

Einschränkung: Die durch das Attribut „accessKey“ festgelegte Tastenkombination darf nicht mit der Tastenkombination des Browsers in Konflikt geraten, da sonst zuerst die Tastenkombination des Browsers aktiviert wird.

Wie schalte ich die Autovervollständigungsfunktion im HTML5-Formular aus?

HTML-Eingabefelder können über eine Autovervollständigungsfunktion verfügen. Wenn Sie Inhalt in das Eingabefeld eingeben, sucht der Browser im Verlauf Ihrer vorherigen Eingabefelder nach ähnlichem Inhalt mit demselben Namen und listet ihn unterhalb des Eingabefelds auf. Auf diese Weise müssen Sie nicht alles eingeben, sondern können das Element direkt in der Liste auswählen.

Manchmal möchten wir jedoch die Autovervollständigungsfunktion des Eingabefelds deaktivieren. Wenn der Benutzer beispielsweise Inhalte eingibt, möchten wir die AJAX-Technologie verwenden, um in der Datenbank zu suchen und aufzulisten, anstatt im Verlauf des Benutzers zu suchen.

Es gibt 3 Möglichkeiten, die Autovervollständigungsfunktion des Eingabefelds zu deaktivieren:

1. Stellen Sie im Internetoptionen-Menü des IE den Inhalt in AutoVervollständigen ein

2. Stellen Sie die Autovervollständigung des Formulars auf „Ein“ oder „Aus“, um die Autovervollständigungsfunktion ein- oder auszuschalten

3. Stellen Sie die Autovervollständigung des Eingabefelds auf "Ein" oder "Aus", um die Autovervollständigungsfunktion des Eingabefelds ein- oder auszuschalten

Betrachten Sie HTML5 als offene Webplattform

Was sind die grundlegenden Bausteine ​​von HTML5?

  • Semantik – Bietet eine genauere Beschreibung des Inhalts.
  • Verbinden – Bietet neue Möglichkeiten zur Kommunikation mit dem Server.
  • Offline und Speicher – Ermöglicht Webseiten, Daten lokal zu speichern und effektiv offline auszuführen.
  • Multimedia – Video und Audio werden im offenen Web als erstklassige Bürger behandelt.
  • 2D/3D-Grafiken und Spezialeffekte – Bietet mehr Präsentationsoptionen.
  • Leistung und Integration – Bietet schnelleren Zugriff und leistungsstärkere Computerhardware.
  • Gerätezugriff – Ermöglicht die Verwendung verschiedener Eingabe- und Ausgabegeräte.
  • Erscheinungsbild: Es können umfangreiche Themen entwickelt werden.

Wie verwaltet und lädt der Browser HTML5-Offline-Speicherressourcen?

Fügen Sie dem HTML-Header des Browsers das Manifestattribut hinzu. Wenn der Browser zum ersten Mal aufgerufen wird, wird der Offline-Inhalt entsprechend dem Inhalt des Manifests heruntergeladen und gespeichert. Wenn zuvor darauf zugegriffen wurde, wird er aus dem Offline-Speicher geladen und der Offline-Speicher wird dann aktualisiert, wenn nach dem Vergleich mit dem Server neuer Inhalt vorhanden ist.

Im Offline-Modus verwendet der Browser direkt die offline gespeicherten Ressourcen.

Der Rendering-Prozess des Browsers?

1. Analysieren Sie das erhaltene HTML in einen DOM-Baum. 2. Verarbeiten Sie CSS, um ein Cascading Style Sheet-Modell zu bilden. CSSOM
3. Fügen Sie den DOM-Baum und CSSOM zu einem Rendering-Baum zusammen. 4. Berechnen Sie das Knotenlayout des Rendering-Baums gemäß CSSOM. 5. Zeichnen Sie den Knotenstil des Rendering-Baums auf die Seite. // Beachten Sie, dass es sich beim Rendering-Prozess um ein Top-Down-Rendering handelt.
js blockiert das Rendern der Seite. Warten Sie also, bis js die Ausführung abgeschlossen hat. Wenn der Stil während des Rendervorgangs geändert wird, führt dies zu einem Reflow und erfordert ein erneutes Rendern.

Was ist der Unterschied zwischen Link und @import?

1. Unterschiede in untergeordneten Beziehungen:
Der Link gehört zum HTML-Tag, während @import von CSS bereitgestellt wird.
2. Unterschied in der Ladereihenfolge:
Wenn die Seite geladen wird, wird der Link gleichzeitig geladen und das von @import referenzierte CSS wartet mit dem Laden, bis die Seite geladen ist.
3. Kompatibilitätsunterschiede:
Der Import kann nur von IE5 und höher erkannt werden, während der Link ein HTML-Tag ist und keine Kompatibilitätsprobleme aufweist.
4. Unterschiede in der DOM-Bedienbarkeit:
Sie können JS verwenden, um das DOM zu bearbeiten und Link-Tags einzufügen, um den Stil zu ändern. Da die DOM-Methode dokumentbasiert ist, können Sie @import nicht zum Einfügen von Stilen verwenden.
5. Gewichtsunterschied:
Wenn derselbe Stil bereits vorhanden ist, wird der von @import eingeführte Stil vom Stil der CSS-Datei selbst überlagert, was einen intuitiven Effekt zeigt, dass das Stilgewicht der Linkmethode höher ist als das von @import.
(Kurz gesagt, der Stil von link und @import wird angewendet, je nachdem, was später geschrieben wird, und der spätere Stil überschreibt den vorherigen Stil.)

Was ist der Unterschied zwischen src und href?

1.href zeigt auf den Speicherort einer Netzwerkressource, stellt eine Verbindung zum aktuellen Element (Anker) oder zum aktuellen Dokument (Link) her und wird für Hyperlinks verwendet.

2. src zeigt auf den Speicherort externer Ressourcen, und der Inhalt, auf den verwiesen wird, wird an der Position des aktuellen Tags im Dokument eingebettet. Wenn die src-Ressource angefordert wird, wird die Ressource, auf die sie verweist, heruntergeladen und auf das Dokument angewendet, z. B. JS-Skripte, IMG-Bilder, Rahmenelemente usw. Wenn der Browser dieses Element analysiert, wird das Herunterladen und Verarbeiten anderer Ressourcen angehalten, bis die Ressource geladen, kompiliert und ausgeführt wird. Dasselbe gilt für Elemente wie Bilder und Frames, was dem Einbetten der angegebenen Ressource in das aktuelle Tag ähnelt. Aus diesem Grund sollten Sie JS-Skripte auch unten und nicht oben platzieren.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

<<:  Ausführliche Erläuterung der HTML-Grundlagen (Teil 1)

>>:  Einführung in den HTML-Standard für chinesische Zeichenkodierung

Artikel empfehlen

Lösung für falsche Zeichenfolgenwerte in MySQL

Viele Freunde berichten von folgendem Fehler, wen...

Führen Sie die Schritte aus, um schnell ein Vue3.0-Projekt zu erstellen

Inhaltsverzeichnis 1. Wir müssen sicherstellen, d...

Warum brauchen wir Map, wenn wir in JavaScript bereits Object haben?

Inhaltsverzeichnis 1. Behandeln Sie Objekte nicht...

Die perfekte Lösung für das AutoFill-Problem in Google Chrome

In Google Chrome werden Sie nach der erfolgreiche...

Tutorial-Diagramm zur Installation von mysql8.0.18 unter Linux (Centos7)

1 Holen Sie sich das Installationsressourcenpaket...

So ändern Sie das Passwort des Root-Benutzers in MySQL

Methode 1: Verwenden Sie den Befehl SET PASSWORD ...

Lösen Sie das Problem inkonsistenter Front- und Back-End-Ports von Vue

Die Front- und Back-End-Ports von Vue sind inkons...

Zusammenfassung häufig verwendeter MySQL-Befehle im Linux-Betriebssystem

Hier sind einige gängige MySQL-Befehle für Sie: -...

Einführung in gängige XHTML-Tags

<br />Ich habe festgestellt, dass viele Leut...

Webdesign-Tutorial (4): Über Materialien und Ausdrücke

<br />Vorheriges Webdesign-Tutorial: Webdesi...

Drei Prinzipien effizienten Navigationsdesigns, die Webdesigner kennen müssen

Das Entwerfen der Navigation für eine Website ist...