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