2.0 script标签

最新推荐文章于 2024-03-29 10:45:11 发布

yehuiyuwei

最新推荐文章于 2024-03-29 10:45:11 发布

阅读量118

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yehuiyuwei/article/details/90343187

版权

3 篇文章 0 订阅

订阅专栏

`<script>`标签的由来

在当初开发JavaScript的时候，Netscape公司要解决如何让JavaScript既能与HTML页面共存，又不影响页面在浏览器中显现的效果，后来为web增加统一的脚本支持

<script>可以放到HTML中的任意位置，因为代码从上而下执行。不同的位置，JavaScript开始执行的时候也不同
虽然可以放在不同位置，但我们一般将<script>标签写到<head>中<title>下面。（和style标签有点像）
```
 <head>
     <title>标题</title>
     <script src=""></script>
 </head>
```
- <script>放在<head>中意味着必须等待全部的JavaScript加载完毕才会执行<body>标签里面，才会显示内容，页面就会出现延迟或者空白，可以使用属性defer解决，但是不是唯一方法，还有很多解决方法
当js代码可以等待<body>里面的内容加载完毕后再加载js可以使用defer属性,但是一般建议把<script>放到</body>上面，一样可以达到同样的效果，内嵌或者外部都可以

async：表示应该立即下载脚本，但不应妨碍页面其他操作，比如下载其他资源或等待加载其他脚本，只对外部脚本文件有效，执行顺序是按照你加载的js文件执行
```
 <script src="./main.js" async="async"></script>
```
defer：表示脚本可以延迟到文档完全被解析和显示后再执行。只对外部脚本文件有效，执行顺序不一定是按照加载的js文件顺序执行
```
 <script src="./main.js" defer="defer"></script>
```
src：表示要执行代码的外部文件

嵌入代码：在<head>中的<script>中直接写JavaScript代码

 <head>
     <title>标题</title>
     <script>
         js代码
     </script>
 </head>

整个HTML文件包括js有两种模式混杂模式和标准模式
- 混杂模式：影响css和JS，不同浏览器显示的不一样
- 标准模式<!DOCTYPE html>：这种模式下的浏览器特征很多符合标准
如果文档在开头的时候没有<!DOCTYPE html> ，默认混杂模式

关注