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

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

Artikel empfehlen

HTML-Grundlagen - Pflichtlektüre - Detaillierte Erläuterung von Formularen, Bild-Hotspots, Aufteilung und Zusammenfügen von Webseiten

1. Formular <form id="" name="&...

Detaillierte Erläuterung des Beispielcodes für die Verbesserungen und Änderungen, die CSS-Variablen bei der Entwicklung interaktiver JS-Komponenten mit sich bringen

1. Qualitative Änderungen durch CSS-Variablen Die...

So verwenden Sie die Typerweiterung ohne Typingscript

Vorwort Aufgrund der schwachen Typisierung von JS...

Von Alibaba Cloud OSS hochgeladener Implementierungscode für die Nginx-Proxy-Weiterleitung

Vorwort Da für den Upload des Miniprogramms https...

Ein Beispiel für die vertikale Zentrierung von Unterelementen in Div mithilfe des Flex-Layouts

1. Flex ist die Abkürzung für Flexible Box, was „...

Der eigentliche Prozess der Implementierung des Zahlenrätsels im WeChat-Applet

Inhaltsverzeichnis Funktionseinführung Rendern 1....

Verwenden Sie vue2+elementui für Hover-Prompts

Die Hover-Prompts von Vue2+elementui sind in exte...

Vergleich von 5 CSS-Scrolling-Ceiling-Implementierungsmethoden (Performance-Upgrade-Version)

Vorschau auf die überarbeitete Fassung Dieser Art...

Eine Sammlung gängiger Verwendungen von HTML-Meta-Tags

Was ist ein Mata-Tag? Das <meta>-Element li...

So bereinigen Sie Ihre Docker-Daten vollständig

Inhaltsverzeichnis Regelmäßig beschneiden Spiegel...

Verwandte Vorgänge zum Hinzufügen und Löschen von Indizes in MySQL

Inhaltsverzeichnis 1. Die Rolle des Index 2. Erst...

Docker-Konfiguration Alibaba Cloud Container Service-Betrieb

Konfigurieren des Alibaba Cloud Docker Container ...

Codeblock-Hervorhebung kann kopiert und angezeigt werden js Plugin highlight.js + clipboard.js Integration

Vor allem aus zwei Gründen: 1. Hervorhebung/Zeile...

Farben werden in HTML durch 6-stellige Hexadezimalcodes, RGB oder Schlüsselwörter dargestellt.

Es gibt drei Möglichkeiten, Farben in HTML darzust...

So reduzieren Sie die Bildgröße mithilfe des mehrstufigen Docker-Builds

In diesem Artikel wird beschrieben, wie Sie die m...