Zusammenfassung einiger Grundsätze, die bei der Ausgabe von HTML-Seiten beachtet werden sollten

1. DOCTYPE ist unverzichtbar. Der Browser bestimmt die Regeln für die Seitendarstellung basierend auf dem von Ihnen deklarierten DOCTYPE. Wenn Sie ihn nicht deklarieren, können die Anzeigeeffekte in verschiedenen Browsern unterschiedlich sein.
2. Fügen Sie vor <title> das Tag <meta> hinzu, um die von der Seite verwendete Kodierung anzugeben. Andernfalls kann es sein, dass einige Browser den Seitentitel als verstümmelte Zeichen anzeigen.
3. <style> sollte im <head>-Tag platziert werden. Andernfalls sieht die Seite vor Abschluss des Downloads nicht gut aus und der Browser muss die Seite nach dem Herunterladen des Inhalts von <style> erneut rendern, was sich auf das Benutzererlebnis auswirkt.
4. Versuchen Sie, die Verwendung von Ausdrücken in CSS zu vermeiden. Andernfalls berechnet der Browser den Wert des Ausdrucks jedes Mal neu, wenn sich der Seiteninhalt ändert (beispielsweise fügt JavaScript dynamisch Elemente hinzu oder löscht sie, ändert die Größe des Browserfensters). Eine alternative Methode besteht darin, JavaScript zu verwenden, um den Stil in window.onload dynamisch zu bestimmen und zu bestätigen. Wir sollten auch die Ressourcen auf der Benutzerseite wertschätzen.
5. Wenn Sie JavaScript verwenden, um den Anzeigeeffekt von Seitenelementen zu ändern, versuchen Sie, ihn mit dem Attribut className zu ändern. Sie sollten versuchen, die Verwendung von Anweisungen wie element.style.color = "#ff0000" zu vermeiden, insbesondere wenn Sie mehrere Eigenschaften gleichzeitig ändern. Dafür gibt es zwei Gründe: die Wartung zu vereinfachen und Client-Ressourcen zu sparen. Wenn der Klassenname geändert wird, muss die Seite nur einmal neu gerendert werden, und wenn das Stilattribut geändert wird, muss es jedes Mal neu gerendert werden, was sehr aufwändig ist.
6. Das <script/>-Tag sollte direkt vor dem </body>-Tag platziert werden. Wenn der Browser den Inhalt in <script> herunterlädt, lädt er nicht gleichzeitig andere Inhalte (Bilder, Flash, HTML-Dokumente nach <script> usw.) herunter. Wenn zu viele externe Skriptdateien verwendet werden, kann dies dazu führen, dass Benutzer die Geduld verlieren und weiter auf die Anzeige der Seite warten müssen.
Ein einfaches Beispiel:

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Vorführung</title>
<meta name="Schlüsselwörter" content="Test,Demonstration" />
<link rel="Stylesheet" type="text/css" href="common.css" />
<style type="text/css">
.test{border:1px solid #ff0000;}
.dom{Breite:200px;Höhe:100px;}
.notdom{Breite:202px;Höhe:102px;}
</Stil>
</Kopf>
<Text>
<div id="main" Klasse="test"></div>
<script type="text/javascript" src="jquery.js"></script>
<Skripttyp="text/javascript">
$(Funktion(){
wenn($.support.boxModel){
$("#main").addClass("dom");
}anders{
$("#main").addClass("notdom");
}
});
</Skript>
</body>
</html>

Einfache Addition:
Das HTML ist gut geschrieben und entspricht den Standards.
Es wird empfohlen, die UTF-8-Kodierung zu verwenden.
http://zh.wikipedia.org/zh-cn/Gb2312
gb2312 enthält nur mehr als 6.000 chinesische Schriftzeichen und schließt das Zeichen „镕“ nicht ein.
Windows Notepad ist in GBK codiert und enthält mehr als 20.000 chinesische Zeichen.
UTF-8 enthält 10 globale Zeichen.
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />

<<: Detaillierte Erklärung des TodoList-Falls von Vue

>>: Detaillierter Prozess der Installation verschiedener Software in Docker unter Windows

Ausführliche Erläuterung der Stilfunktion in Vue3-Einzeldateikomponenten

Erläuterung zur Verwendung von „if“-Beurteilungsbedingungen in Summen- und Zählfunktionen bei der Verwendung von SQL-Anweisungen zum Sammeln von Daten

Artikel

Detaillierte Erklärung von count(), group by, order by in MySQL

Zusammenfassung einiger Grundsätze, die bei der Ausgabe von HTML-Seiten beachtet werden sollten

Ausführliche Erläuterung der Stilfunktion in Vue3-Einzeldateikomponenten

Grundlagen zu Betrieb und Wartung unter Linux - Tutorial zu statischen httpd-Webseiten

MySQL-Serie 15: Allgemeine MySQL-Konfiguration und Leistungsstresstest

JavaScript implementiert Produktdetails der E-Commerce-Plattform

Abfrageprozess und Optimierungsmethode der (JOIN/ORDER BY)-Anweisung in MySQL

Designtheorie: Textausdruck und Benutzerfreundlichkeit

Erläuterung zur Verwendung von „if“-Beurteilungsbedingungen in Summen- und Zählfunktionen bei der Verwendung von SQL-Anweisungen zum Sammeln von Daten

Detaillierte Erklärung von count(), group by, order by in MySQL

MySQL Master-Slave-Replikationsprinzip und zu beachtende Punkte

Lernprogramm zur Verwendung von HTML-Formular-Tags

Artikel empfehlen

So deinstallieren Sie MySQL 5.7 unter CentOS7

Beginnen Sie CSS-Pseudoklassennamen nicht mit Zahlen

Lösung für Fehler 1290 beim Importieren von Dateidaten in MySQL

Beispielcode zum Bereitstellen eines Spring-Boot-Projekts mit Docker

Lebenszyklus und Ausführungsreihenfolge von React-Class-Komponenten

js-Methode zur Realisierung der Warenkorbberechnung

Detaillierte Einführung in die Definition und Verwendung des HTML-Thead-Tags

Grafisches Tutorial zur Installation und Konfiguration der kostenlosen Installationsversion von MySQL 5.7.16

Eine gute Möglichkeit, Ihre Designfähigkeiten zu verbessern

Verstehen Sie den aktuellen Status der HTML5-Entwicklung in der mobilen Entwicklung genau

Was wir von Googles neuer Benutzeroberfläche (Bilder und Text) lernen können

Beispiele für die Verwendung von HTML-Marquee-Tags

Detaillierte Erläuterung der Destrukturierungszuweisung von JS ES6-Variablen

Eine detaillierte Einführung in die Linux-Verzeichnisstruktur

Vue verwendet E-Charts, um ein Organigramm zu zeichnen