Shulou(Shulou.com)06/02 Report--

This article mainly introduces what the html head needs to put, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Html header needs to be put: 1, title tags, set document title; 2, multiple meta tags, set encoding, site description and Viewport;3, link tags, set small icons for page titles and introduce style files; 4, script tags, introduce script files.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Necessary title

Title is necessary, but if you don't add it, the browser will automatically add it for you.

WebEncoding (Encoding method)

The specification of the encoding method is put at the front of the head, if not specified, the browser will also determine according to the server's header, but it is not necessarily accurate.

WebDescription (website description)

I didn't notice this before, that is, it describes your website. Search engines will see that it should be very common in SEO.

Viewport

This is very common. Viewport usually adapts to the mobile side and places the page in a virtual window-viewport. If the web page does not use viewport, it will appear that we are very small when the mobile browser is opened, and we can also move and zoom. Low is amazing. Viewport is to let web developers dynamically set the size of the control elements in their web content through its size, so as to achieve the same effect on browsers as in web pages (scale reduction). To better support responsive websites

Width: controls the size of the viewport, which is generally specified as device-width (CSS pixels scaled by 100%), or you can specify a fixed value such as 600.

Height: specify the height corresponding to width.

Initial-scal: the initial scale, the scale of the page when it first load.

Maximum-scale: the maximum scale to which users are allowed to zoom.

Minimum-scale: the minimum scale to which users are allowed to zoom.

User-scalable: whether the user can zoom manually.

Favicon

This is the small icon to the left of the page title. Specify its path. If not, the browser will look for it in the root directory.

Css

Link into a style file through the link tag

Javascript (key)

Link into the script file through the script tag

Here we discuss a few points.

1 the difference between putting js files in head and in body

First of all, put it in the head. If the script tag does not add the async attribute, it will block the browser. It is only after downloading the js file that the next step will be carried out. If the file is small and good, if it is relatively large, it will have a blocking effect and affect the user experience.

The browser parses the web page line by line, that is, it stops when parsing to the js file in head, and our Dom structure is in the body tag under head, that is, we have to wait for the js file to be downloaded before we can see the contents of body. If we choose to put it at the bottom of body, the browser will load dom first and download it only when parsing to js at the bottom of body. But before downloading, we can already see the content of body, so the browsing experience will be better.

Then some people will ask, what's the difference between the head and the bottom of the body? In fact, if you put it in the head of body, it will be the same as in head.

2 js files are put in head to avoid malpractice

There are two properties that can solve the problem of synchronous download of js files: defer and async

Defer:

If a script adds a defer attribute, even if it is placed in the head, it will be executed after the html page has been parsed, which is similar to putting the script at the bottom of the page.

Async:

For async, this is a new property in html5. Its function is to load and execute scripts asynchronously without blocking the loading of the page because of loading scripts. It will be executed as soon as it is loaded. 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 likely not to be carried out in the original order. If there are dependencies before and after js, using async, you are likely to make an error.

3 where is the best place to put the js file

Now that the browser has made some optimizations, it won't be a big problem even if we put js in head, so we can put the necessary js in head and the larger js at the bottom of body, but the simplest and best way is to put it at the bottom of body, and W3C put js in head.

Thank you for reading this article carefully. I hope the article "what do you need to put in the html head" shared by the editor will be helpful to you? at the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.