向HTML页面中插入JavaScript的主要方法，使用<script>元素。
1. script元素
1.1<script> 的属性
<script>定义了6各属性：
| 属性 | 含义 | 可选性 |
|---|---|---|
| async | 表示立即下载脚本文件； 只对外部脚本文件有效； |
可选 |
| charset | 表示通过src属性指定的代码的字符集 | 可选 |
| defer | 表示脚本可以延迟到文档完全被解析和显示之后在执行； 只对外部脚本文件有效； |
可选 |
| language | 表示编写代码使用的脚本语言 | 已废弃 |
| src | 表示要执行代码的外部文件 | 可选 |
| type | 可以看成language的替代属性； 表示编写代码使用的脚本语言的内容类型（MIME类型）; 参数：text/javascript、text/ecmascript、application/x-javascript、application/javascript、application/ecmascript |
可选 |
注：目前type属性的值依旧还是type/javascript，若未指定，默认为type/javascript。
1.2 <script>标签的位置
1. 放在页面的<head>元素中
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script type="text/javascript" src="demo1.js"></script>
<script type="text/javascript" src="demo2.js"></script>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
此种方法意味着必须等到全部JavaScript代码都被下载、解析和执行完毕之后，页面内容才开始呈现。（浏览器在遇到<body>标签时才开始呈现内容）。
缺点：当JavaScript代码很多时，浏览器呈现页面明显出现延迟。
2. 放在页面的<body>元素中页面内容的后面
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
</head>
<body>
<p>Hello World!</p>
<script type="text/javascript" src="demo1.js"></script>
<script type="text/javascript" src="demo2.js"></script>
</body>
</html>
在解析包含的JavaScript代码之前，页面的内容已经完全呈现在浏览器中。
1.3 延迟脚本
defer - 告知浏览器立即下载，但延迟执行。脚本会延迟到整个页面都解析完毕之后再运行。
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script type="text/javascript" defer=“defer ”src="demo1.js"></script>
<script type="text/javascript" defer=“defer” src="demo2.js"></script>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
1️⃣虽然<script>元素放在了文档的<head>元素中，但脚本将延迟到浏览器遇到</html>标签后再执行。
2️⃣HTML5规范中要求脚本会按照出现顺序先后执行，因此先执行demo1.js，再执行demo2.js；但现实中，延迟脚本不一定按照出现顺序执行，因此最后只包含一个延迟脚本。
3️⃣由于有的浏览器可能会忽略defer属性，所以延迟脚本放在页面底部仍是最佳选择。
1.4 异步脚本
async - 和defer相同点在于只适用于外部脚本，告诉浏览器立即下载文件；不同点在于不保证按照指定他们的先后顺序执行。
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script type="text/javascript" async=“async ”src="demo1.js"></script>
<script type="text/javascript" async=“async” src="demo2.js"></script>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
1️⃣demo2.js可能会在demo1.js脚本文件之前执行，因此要确保两者之间互不依赖。
2️⃣指定async目的在于不让页面等待两个脚本文件下载和执行，从而异步加载页面其他内容。
3️⃣建议异步脚本不要在加载期间修改DOM。
4️⃣异步脚本一定会在页面的load事件前执行。
1.5 小结
- 所有<script>元素在不使用defer和async情况下，会按照它们在页面中出现的顺序依次被解释。
- defer 属性可以让脚本文件在文档完全呈现之后再执行，按出现顺序执行。
- async属性表示当前脚本不必等待其他脚本，也不必阻塞文档呈现，不保证按照出现的顺序执行。
2. 文档模式
文档模式的概念是通过使用文档类型（doctye）切换实现的。包括两种类型：混杂模式（quirks mode）和标准模式（standards mode）。
这两种模式主要影响CSS内容的呈现，某些程度上也会影响JavaScript的解释执行。
如果文档开始没有文档类型的声明，则所有浏览器默认开启混杂模式。
标准模式下，文档类型：
<!-- HTML 4.0.1 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!--XHTML 1.0 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml-strict.dtd">
<!-- HTML 5 -->
<!DOCTYPE html>
