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

Detaillierte Erläuterung des SSR-Server-Side-Rendering-Beispiels von Vue

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

Detaillierte Erläuterung des SSR-Server-Side-Rendering-Beispiels von Vue

Docker generiert Bilder über Container und übermittelt DockerCommit im Detail

W3C Tutorial (12): W3C Soap Aktivität

Mysql-Beispiel für die Aufteilung in mehrere Zeilen und Spalten durch bestimmte Symbole

So verwenden Sie den Skeleton-Bildschirm im Vue-Projekt

Zusammenfassung der Projektentwicklungspraxis in Kombination mit Vue3 von TypeScript

Das Vue-Projekt konfiguriert den Webpack-Obfuscator, um Codeverschlüsselung und -verschleierung zu implementieren.

Detaillierte Erläuterung der MySQL Master-Slave-Replikationspraxis - GTID-basierte Replikation

Ein- und Ausblenden von HTML-Elementen durch Anzeige oder Sichtbarkeit

So konfigurieren Sie MySQL8 in Nacos

Artikel empfehlen

Implementierung der Validierungsregel für Vue Element-ui-Formulare

Fallerklärung für den Nginx-Reverse-Proxy zu Go-FastDFS

Probleme beim Upgrade von Python und der Installation von Mongodb-Treibern unter Centos

Codebeispiele für die Dekomprimierung, Änderung und andere Betriebsmethoden von Linux-Deb-Paketen

MySQL-Lösung für zeitgesteuerte Backups (mithilfe von Linux crontab)

Detaillierter Prozess der NTP-Serverkonfiguration unter Linux

Mehrere Methoden zur Lösung des Problems des MySQL-Fuzzy-Abfrageindexfehlers

Eine kurze Zusammenfassung von Vue Keep-Alive

N Möglichkeiten, die letzte Listenzeile im CSS-Flex-Layout linksbündig auszurichten (Zusammenfassung)

HTML-Cellpadding- und Cellspacing-Attribute in Bildern erklärt

Vollständige Schritt-für-Schritt-Anleitung zur Installation und Deinstallation von MySQL 8.0.26

CentOS 8: Installation des benutzerdefinierten Verzeichnisses nginx (Details zum Tutorial)

So wechseln Sie in Linux effizient zwischen Verzeichnissen

Detaillierte Erläuterung möglicher Probleme bei der Konvertierung von Gleitkommadaten in Zeichendaten in MySQL

Tutorial zur HTML-Tabellenauszeichnung (30): Farbattribut für dunkle Zellenränder BORDERCOLORDARK