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

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

CSS-Lösung für mehrspaltiges Layout

Detaillierte Erklärung zur Verwendung von ElementUI in Vue

Tutorial zur Verwendung von Hyperlink-Tags in XHTML

So implementieren Sie ein Glücksradspiel im WeChat-Applet

Detaillierte Erläuterung der Tomcat-Kernkomponenten und der Anwendungsarchitektur

Lösung für das Problem der Nullspalte in der NOT IN-Füllgrube in MySQL

Verwenden Sie Angular CDK, um eine Service-Popup-Toast-Komponentenfunktion zu implementieren

Kopieren von JS-Objekten (Deep Copy und Shallow Copy)

HTML css js implementiert Tab-Seite Beispielcode

Einführung in die Einrichtung von Tomcat für den automatischen Start auf einem Linux-System

Artikel empfehlen

So installieren Sie CentOS8 in VMware12 (Tutorial zur Installation von CentOS8 in einer virtuellen VM-Maschine)

Vue Front-End HbuliderEslint Echtzeitüberprüfung Automatische Reparatureinstellungen

Zabbix implementiert die Überwachung mehrerer MySQL-Prozesse

So öffnen Sie ein temporäres QQ-Dialogfeld, um online zu chatten, ohne Freunde hinzuzufügen

Diagramm des Bereitstellungs- und Installationsprozesses in der Java+Tomcat-Umgebung

Analyse des Docker-Image-Erstellungsprinzips (Sie können ein Image erstellen, ohne Docker zu installieren)

Implementierung der benutzerdefinierten MySQL-Listensortierung nach angegebenen Feldern

Stellen Sie in HTML die Bildlaufleiste so ein, dass sie automatisch angezeigt wird, wenn der Inhalt im Div überschreitet

Detaillierte Erklärung dieses Zeigeproblems in JavaScript

So erstellen Sie eine PHP+Nginx+Swoole+MySQL+Redis-Umgebung mit Docker

CSS3 realisiert Textreliefeffekt, Gravureffekt, Flammentext

Der einfachste Weg, ein Programm beim Start in Linux automatisch auszuführen

So zeigen Sie Serverhardwareinformationen in Linux an

Detaillierte Erklärung des Nginx Reverse-Proxy-Beispiels

18 Web-Usability-Prinzipien, die Sie kennen müssen