1.使用<script>标签
1.使用<script>的两种方式
1.直接在页面中嵌入
<script type="text/javascript">
function sayHi(params) { console.log('hi') }
</script>
批注：包含在javascript中的代码会从上到小依次解释；当浏览器解析<script>中的代码完毕之前，页面中的其他代码不会被浏览器加载和显示
2.包含外部文件
<script type="text/javascript" src="index.js"></script>
批注：与解析嵌入式JavaScript代码一样，在解析外部JavaScript的代码时（包含下载该文件），页面的处理会被停止
2.标签的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
//注释
</body>
</html>
批注：这样做的目的是为了在加载页面时，先把外部文件先下载，所有就必须把所有的JavaScript的文件下载完；但是会有一个缺点，就是如果外部引入的文件过于大的话，会导致浏览器在呈现页面时会有延迟，而延迟期间页面一直空白；体验不好，所以之后我们会把引用的文件放在放在<body>的内容的后面
3.延迟脚本
defer属性：属性的用途是表明脚本在执行时不会页面的构造，也就是说，脚本会被延迟到整个页面都解析完毕后再运行；
设置defer属性，等于告诉浏览器立即下载但延迟执行
<script type="text/javascript" src="index.js" defer=“defer”></script>
<script type="text/javascript" src="index.js" defer=“defer”></script>
批注：第一个延迟脚本会先于第二个延迟脚本执行，defer只适用于外部脚本文件
4.异步脚本
html5为<script>元素定义了async属性
这个属性与defer属性类似，只适用于外部脚本文件，但是与defer不同的是，async的脚本并不会按照指定他们的先后顺序执行
<script type="text/javascript" src="index.js" async></script> <script type="text/javascript" src="index.js" async></script>
2.<noscript>标签
浏览器不支持JavaScript让页面平稳的退化，浏览器不支持脚本，浏览器支持脚本，但是脚本被禁用，满足任意一个，都会显示<noscript>的内容
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><noscript>12132131231231</noscript></head><body>//注释</body></html>
