Learn about the script tag in HTML

Students who have learned a little bit about web page writing all know that the js code in the web page should be written in the script tag, but why do you do this? This article will introduce the script tag.

script tag

Initially, Netscape wanted to display HTML files using js in the browser, but did not want to affect the display effect of this file in other browsers, so it created script tag

We all know that tags can add attributes to it. The script tag has the following attributes:

• async means to download the script immediately and should not hinder other operations in the interface
• src indicates the external file to execute this script, optional
• charset The character set of the external file specified by src
• defer The script is delayed until the document parsing and display is completed, optional
• language has been obsolete
• type is important, used to replace the language attribute, the default is text/javascript, so this parameter generally does not need to be specified.

<script>
    // 属性设置
    function SayHi(){
        alert("Hi");
    }
</script>

<!-- 注意下面的写法    /> 这么写本身没有问题，但是不能在html中使用这种语法，因为这样会打乱html的解析 -->
<script></script>
// 必须写成下面的样子
<script></script>

Note:

• Until the interpreter evaluates the code in the script tag, the rest of the content on the page will not be loaded or displayed by the browser
• If there is js code in the tag with src, it will be ignored, so if you write src, you should not write code in it.
• Try to use external files to write js, Try to Use less embedded js, which makes maintenance easier and the js is in one place. If two pages use the same js, it can be cached

script tag location

Originally, the tag should be placed in the header, but because it is placed in the header, the page will not be rendered when js is loaded (the page will not start rendering until it is loaded into the body), causing the page to appear for a long time. Bai, so now we put it at the end of the body

...

<script></script>
<script></script>
<script></script>

After adding the defer attribute to the script, putting it in the header can theoretically achieve the purpose of delayed execution, but because different browsers have different support for defer ( The execution order is uncertain, embedded js does not support defer, etc.), it is best for us to follow the above writing method and write it at the end of the body .

The async attribute is also to solve the problem of asynchronous loading of scripts. It also does not support embedded js scripts. Originally, the difference between it and defer is that defer loads in order, async does not load in order, but in actual use, Browsers also have different support for this attribute. Neither attribute can guarantee the sequential execution of scripts and execution before DOMContentLoaded, so it is best not to use this attribute until the browser fully supports it.

tag

When the browser disables js or the browser does not support js at all (of course this is rare now), it needs to be degraded smoothly, so the noscript tag

is needed The function is to display the content in noscript when the situation mentioned above occurs. See the example below

    
        <script></script>
    
    
        <noscript>
            <p>本页面需要浏览器支持（启用）JavaScript</p>
        </noscript>
    

Note that if the browser has JS enabled, the content in this tag will not be displayed.

Recommended tutorials: HTML tutorial, JavaScript video tutorial

The above is the detailed content of Learn about the script tag in HTML. For more information, please follow other related articles on the PHP Chinese website!