Summary of several principles that should be followed in HTML page output

1. DOCTYPE is indispensable. The browser determines the page rendering rules based on the DOCTYPE you declare. If you do not declare it, the display effects may be different in different browsers.
2. Add the <meta> tag before <title> to indicate the encoding used by the page. Otherwise, some browsers may display the page title as garbled characters.
3. <style> should be placed in the <head> tag. Otherwise, the page will not look good before the download is complete, and the browser will have to re-render the page after downloading the content of <style>, which will affect the user experience.
4. Try to avoid using expressions in CSS. Otherwise, the browser will recalculate the value of the expression every time the page content changes (for example, JavaScript dynamically adds or deletes elements, changes the browser window size). An alternative method is to use javascript to dynamically determine and confirm the style in window.onload. We should also cherish the resources on the user side.
5. When using javascript to change the display effect of page elements, try to use the className attribute to change it. You should try to avoid using statements like element.style.color = "#ff0000", especially when changing multiple properties at once. There are two reasons for doing this: to facilitate maintenance and to save client resources. When the className is changed, the page only needs to be re-rendered once, and when the style attribute is changed, it needs to be re-rendered every time, which is very expensive.
6. The <script /> tag should be placed just before the </body> tag. When the browser downloads the content in <script>, it will not download other content (pictures, flash, HTML documents after <script>, etc.) at the same time. If too many external script files are used, it may cause users to lose patience and continue to wait for the page to be displayed.
A simple example:

Copy code

The code is as follows:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demonstration</title>
<meta name="keywords" content="test,demonstration" />
<link rel="Stylesheet" type="text/css" href="common.css" />
<style type="text/css">
.test{border:1px solid #ff0000;}
.dom{width:200px;height:100px;}
.notdom{width:202px;height:102px;}
</style>
</head>
<body>
<div id="main" class="test"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
if($.support.boxModel){
$("#main").addClass("dom");
}else{
$("#main").addClass("notdom");
}
});
</script>
</body>
</html>

Simple addition:
The html is well written and meets the standards.
It is recommended to use UTF-8 encoding.
http://zh.wikipedia.org/zh-cn/Gb2312
gb2312 only contains more than 6,000 Chinese characters, and does not include the character "镕".
Windows Notepad is encoded in GBK and contains more than 20,000 Chinese characters.
UTF-8 contains 10 global characters.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<<: Detailed explanation of Vue's TodoList case

>>: Detailed process of installing various software in Docker under Windows

Summary of several principles that should be followed in HTML page output

Several ways to solve the problem of floating causing the height of the parent element to collapse in CSS

Pay attention to the order of TRouBLe when writing shorthand properties in CSS (to avoid pitfalls)

How to view the type of mounted file system in Linux

Tutorial on installing Ubuntu 20.04 and NVIDIA drivers

Summary of various implementation methods of mysql database backup

A practical guide to Vue project first screen performance optimization components

Tutorial on using Multitail command on Linux

Web Design Teaching or Learning Program

Analysis of the cause of docker error Exited (1) 4 minutes ago

JavaScript implementation of carousel example

Recommend

Native JS to implement login box email prompt

Detailed explanation of the use of filter properties in CSS

JS implements simple calendar effect

Win10 installation of MySQL 5.7 MSI version of the tutorial with pictures and text

Problems with using wangeditor rich text editing in Vue

The difference between Input's size and maxlength attributes

Using vue3 to implement counting function component encapsulation example

uniapp realizes the recording upload function

MySQL sorting by conventional sorting, custom sorting, and sorting by Chinese pinyin letters

12 Useful Array Tricks in JavaScript

Docker runs operations with specified memory

idea combines docker to realize image packaging and one-click deployment

MySQL 8.0.12 Installation and Configuration Tutorial

Draw a heart with CSS3

Summary of Linux ps and pstree command knowledge points