HTML中的script标签研究_html/css_WEB-ITnose

Native Lazy Loading ist eine integrierte Browserfunktion, die das faule Laden von Bildern durch Hinzufügen von Loading = "Lazy" zum Tag hinzufügen kann. 1. Es erfordert keine Bibliotheken von JavaScript oder Drittanbietern und wird direkt in HTML verwendet. 2. Es ist für Bilder geeignet, die nicht auf dem ersten Bildschirm unterhalb der Seite, die Scrolling-Add-Ons und große Bildressourcen angezeigt werden. 3. Es ist nicht für Bilder mit dem ersten Bildschirm oder Display geeignet: keine; 4. Bei der Verwendung sollte ein geeigneter Platzhalter festgelegt werden, um Layout -Jitter zu vermeiden. 5. Es sollte das Laden von Responsive Bild in Kombination mit SRCSet- und Größenattributen optimieren. 6. Kompatibilitätsprobleme müssen berücksichtigt werden. Einige alte Browser unterstützen es nicht. Sie können durch Merkmalserkennung verwendet und mit JavaScript -Lösungen kombiniert werden.

SRCSET und Größen sind wichtige Eigenschaften für die HTML -Implementierung von reaktionsschnellen Bildern. SRCSET bietet mehrere Bildquellen und ihre Breite oder Pixeldichte wie 400 W und 800W, und der Browser wählt das entsprechende Bild entsprechend aus. Größen definiert die Anzeigebreite des Bildes unter verschiedenen Bildschirmbreiten, wie z. Im tatsächlichen Gebrauch müssen Sie mit der Medienabfrage eindeutig benannte multisige Bilder vorbereiten und die Leistung der Geräte testen, um zu vermeiden, dass Sie Größen oder Einheitsfehler ignorieren, wodurch Bandbreite speichert und die Leistung verbessert wird.

Der Hauptunterschied besteht darin, dass TextArea mehrere Zeilen der Texteingabe unterstützt, während InputText nur in einer einzelnen Zeile verfügbar ist. 1. Verwenden Sie InputType = "Text", um für kurze und einzelne Benutzereingaben wie Benutzername, E-Mail-Adresse usw. geeignet zu sein, und kann MaxLength festlegen, um die Anzahl der Zeichen zu begrenzen. Der Browser bietet eine automatische Füllfunktion und erleichtert das gleichmäßige Stylen von Browsern. 2. Verwenden Sie TextArea für Szenarien, die mehrere Eingangszeilen erfordern, z. B. Kommentarfelder, Rückkopplungsformulare, Support -Linienbrüche und Absätze und können die Größe durch CSS steuern oder die Einstellfunktion deaktivieren. Beide Unterstützungsfunktionen wie Platzhalter und erforderliche Füllungen. TextArea definiert jedoch die Größe durch Zeilen und Cols, und die Eingabe verwendet das Größenattribut.

Es handelt sich um ein Element auf Blockebene, das verwendet wird, um große Blockgehaltbereiche zu teilen. Es ist ein Inline -Element, das für die Verpackung kleiner Segmente von Text oder Inhaltsfragmenten geeignet ist. Die spezifischen Unterschiede sind wie folgt: 1. Nehmen Sie ausschließlich eine Reihe ein, Breite und Höhe, innere und äußere Ränder können festgelegt werden, die häufig in Layoutstrukturen wie Header, Seitenleisten usw. verwendet werden; 2. Wickeln Sie keine Linien ein, belegen Sie nur die Inhaltsbreite und werden für die lokale Stilkontrolle wie Verfärbungen, Fettdruck usw. verwendet. 3. In Bezug auf die Nutzungsszenarien ist es für die Layout- und Strukturorganisation des Gesamtbereichs geeignet und wird für Anpassungen im kleinen Maßstab verwendet, die das Gesamtlayout nicht beeinflussen. 4. Beim Verschachteln kann es alle Elemente enthalten, und Blockebene sollten im Inneren nicht verschachtelt sein.

Um schnell mit HTML zu beginnen, müssen Sie nur ein paar grundlegende Tags beherrschen, um ein Web -Skelett zu erstellen. 1. Die Seitenstruktur ist unerlässlich und enthält das Stammelement Meta -Informationen und ist der Inhaltsanzeigebereich. 2. Verwenden Sie den Titel. Je höher das Niveau, desto kleiner ist die Zahl. Verwenden Sie Tags, um den Text zu segmentieren, um zu vermeiden, dass das Level überspringt. 3. Die Link verwendet Tags und stimmt mit den HREF -Attributen überein, und das Bild verwendet Tags und enthält SRC- und ALT -Attribute. V. Jeder Eintrag ist dargestellt und muss in die Liste verschachtelt sein. 5. Anfänger müssen nicht alle Tags auswendig machen. Es ist effizienter zu schreiben und zu überprüfen, während Sie schreiben. Beherrschen Sie die Struktur, den Text, die Links, Bilder und Listen, um grundlegende Webseiten zu erstellen.

Um einen grundlegenden Pop-up-Effekt zu erzielen, müssen Sie die folgenden Schritte ausführen: 1. Struktur: Verwenden Sie HTML, um Triggertasten, Maskenebene und Popup-Inhaltsbereich zu erstellen. 2. Stil: Setzen Sie die Standardstile für versteckte, zentrierte Layout, Maskenhintergrund und schließen Sie die Schaltflächenstile durch CSS. 3. Interaktion: Verwenden Sie JavaScript, um Klick-Ereignisse zu binden, um die Popup-Anzeige zu steuern und auszublenden. Sie können die ESC-Schließfunktion erweitern. 4. Optimierung: Fügen Sie CSS -Animation hinzu, um die Benutzererfahrung zu verbessern. Der gesamte Prozess erfordert keine Bibliothek von Drittanbietern, die für die schnelle Verwirklichung grundlegender Popup-Funktionen geeignet ist.

Webworker sind unabhängige Threads, die im Browser-Hintergrund ausgeführt werden und zur Ausführung zeitaufwändiger Aufgaben verwendet werden, ohne die Benutzeroberfläche zu blockieren. Sie werden über JavaScript -Dateien implementiert und von Skripten auf HTML -Seiten gestartet. Sobald sie ausgeführt wurden, werden sie vom Haupt -Thread getrennt. 1. Webworker können nicht direkt auf die DOM zugreifen, um die Seitenstabilität zu gewährleisten. 2. Sie erkennen eine sichere Kommunikation mit dem Hauptfaden durch Postmessage () und OnMessage; 3. Es eignet sich zur Verarbeitung von CPU-intensiven Aufgaben wie Bildern, komplexen Computing, Datenanalyse; 4. Es unterstützt einige APIs wie SetTimeout, Fetch und IndexedDB. 5. Wenn Sie es verwenden, müssen Sie auf Debugging-Schwierigkeiten, Speicherverbrauch, Cross-Domänen-Beschränkungen und andere Probleme achten.

Shadowdom ist eine Technologie, die in der Webkomponenten -Technologie verwendet wird, um isolierte DOM -Subträume zu erstellen. 1. Es ermöglicht das Reittier einer unabhängigen DOM -Struktur für gewöhnliche HTML -Elemente mit eigenen Stilen und Verhaltensweisen und wirkt sich nicht auf das Hauptdokument aus. 2. über JavaScript erstellt, z. 3.. In Kombination mit HTML hat es drei Hauptmerkmale: klare Struktur, Stilisolation und Inhaltsprojektion (Slot); 4. Notizen umfassen komplexe Debugging, Style Scope Control, Performance Overhead und Framework -Kompatibilitätsprobleme. Kurz gesagt, Shadowdom bietet native Kapselungsfunktionen für den Aufbau wiederverwendbarer und nicht bedeckender UI-Komponenten.