Home > Article > Web Front-end > What to put in the html header
What to put in the html header
- 青灯夜游Original
- 2021-12-14 12:06:173604browse
The html header needs to be placed: 1. Title tag, set the document title; 2. Multiple meta tags, set the encoding method, website description and Viewport; 3. Link tag, set the small icon and introduction of the web page title Style file; 4. Script tag, introduce script file.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
This is a question I encountered during the interview. I usually use plug-ins! I add tabs to generate the html5 structure, but I can't think of anything else to put besides css and js. This problem seems very simple, but it is easily ignored by us, so I will write an article to summarize it, HTML head What should be put inside (the head)?
Necessary title
title is necessary, but if it is not added, the browser will automatically add it for you.
<head> <title>web</title> </head>
Encoding (encoding method)
The specification of the encoding method is placed at the front of the head. If not specified, the browser will also make a determination based on the server's header. , but not necessarily accurate.
<head> <meta charset="UTF-8"> <title>web</title> </head>
Description (website description)
I haven’t noticed this before. It is a description of your website. Search engines will see it and it should be very commonly used in SEO
<meta name="description" content="这里是对网站的描述">
Viewport
This is very common. Viewport is usually adapted to the mobile terminal and puts the page in a virtual window - viewport. If the web page does not When using viewport, it will appear that when we open the mobile browser, it is very small, and it can also be moved and zoomed. It is extremely low. Viewport allows web developers to dynamically set the size of control elements in their web content through their sizes, so that in The browser achieves the same effect as the web page (scale reduction). , used to better support responsive websites.
<meta name="viewport" content="width=device-width, initial-scale=1">
width: Control the size of the viewport. Generally, it is specified as device-width (the unit is CSS pixels scaled to 100%). You can also specify a fixed value such as 600.
Height: corresponds to width, specifies the height.
initial-scal: initial scaling ratio, the scaling ratio when the page is loaded for the first time.
maximum-scale: The maximum ratio the user is allowed to zoom to.
minimum-scale: The minimum ratio the user is allowed to zoom to.
user-scalable: Whether the user can manually zoom.
Favicon
This is the small icon on the left side of the webpage title. Specify its path. If not specified, the browser will be in the root directory. Looking for
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
css
Link the style file through the link tag
<link rel="stylesheet" href="css/test.css">
javascript(emphasis)
Link script files through script tags
<script src="js/test.js"></script>
Here we discuss several points
1 The js file is placed in the head and The difference between placing it in the body
First place it in the head. If the script tag does not add the async attribute, it will block the browser, which means that the js file must be downloaded before proceeding to the next step. , if the file is small, it's okay, but if it is relatively large, it will have a blocking effect and affect the user experience.
When the browser parses the web page, it parses it line by line, which means that it will stop when it parses the js file in the head, and our Dom structure is in the body tag under the head, which means that we have to The content of the body cannot be seen until the js file is downloaded. If we choose to place it at the bottom of the body, the browser will load the dom first and download it only after parsing the js at the bottom of the body. However, we can already see the body before downloading. content, the browsing experience will be better.
Some people may ask, what is the difference between placing it at the head and bottom of the body? In fact, if you put it in the body head, it is the same as putting it in the head.
2 Put the js file in the head to avoid disadvantages
There are two attributes that can solve the problem of js Problems with synchronous file downloading: defer and async
defer:
If a script adds the defer attribute, even if it is placed in the head, it will be executed after the html page is parsed. That is similar to placing this script at the bottom of the page.
<script defer src="test.js"></script>
async:
For async, this is a new attribute in HTML5. Its function is to load and execute scripts asynchronously without blocking the loading of the page due to loading the script. Once loaded it will be executed immediately. With async, the process of loading and rendering subsequent document elements will occur in parallel (asynchronously) with the loading and execution of script.js. But it is very likely that it is not executed in the original order. If there are dependencies before and after js, using async is likely to cause errors.
<script async src="test.js"></script>
3 Where is the best place to put the js file
Now the browser has done some optimization, even if the js is placed in the head, there will be no big problem. So we can put the necessary js in the head, and the larger js at the bottom of the body, but the simplest and best way is to put it at the bottom of the body. W3C puts js in the head;
Recommended tutorial: "html video tutorial"
The above is the detailed content of What to put in the html header. For more information, please follow other related articles on the PHP Chinese website!