1 <script> 标签
<script> 标签用于定义客户端脚本，比如 JavaScript。
在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。
script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
注：旧的 JavaScript 例子也许会使用 type 属性：<script type="text/javascript">。
type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
1.1 <script> 属性
| 属性 | 是否必填 | 适用范围 | 说明 |
| async | 可选 | 外部文件 | 表示应该立即下载脚本，但不应妨碍页面中的其它操作，比如下载资源或其它脚本文件 |
| charset | 可选 | 外部文件 | 表示通过src指定的代码的字符集 |
| defer | 可选 | 外部文件，IE4-7也支持嵌入代码 | 表示脚本可以延迟到文档完全解析和显示之后再执行 |
| language | 可选（已废弃） | 原用于表示编写代码的脚本语言 | |
| src | 可选，使用外部文件时为必填选项 | 外部文件 | 表示包含要执行的外部文件 |
| type | 可选，默认text/javascript | 可以看成是language的替代属性，表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。 |
(1) 关于type属性，虽然text/javascript和java/ecmascript都已经不被推荐使用，但一直以来使用的都还是text/javascript，实际上，服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript，但在type中设置这个值可能导致脚本被忽略，另外，在非IE浏览器中还可以使用application/javascript和application/ecmascript。type如果没有指定，默认值为text/javascript。
(2) 只要不包含async和defer，浏览器会按照<script>在页面中出现的顺序依次解析；设置了defer时，会立即下载<script>元素，但是延迟执行，在规范中，要求多个含defer属性的脚本顺序执行且在DOMContentLoaded事件前执行，但是在实现中不一定满足这些要求；在HTML5中添加了async属性，和defer类似，也只是适用于外部文件，告诉浏览器立即下载文件，但延迟执行，不同的是，多个含async的脚本即便在规范中也没有规定执行的顺序，异步脚本再load事件前执行，但可能在DOMContentLoaded之前或之后执行。
(3) 在阅读之前的代码或者用一些IDE生成代码时，常常可以看到下面的结构：
| 显示 | 说明 | 实体名称 | 实体编号 |
| 半方大的空白 |   |   | |
| 全方大的空白 |   |   | |
| 不断行的空白 | |   | |
| < | 小于 | < | < |
| > | 大于 | > | > |
| & | &符号 | & | & |
| " | 双引号 | " | " |
有些不支持JavaScript的浏览器，可以将JavaScript代码包含在一个HTML注释中（由于所有主流浏览器均支持JavaScript，所以不再推荐使用）：
<script><!-- //--></script>
对于一些老旧浏览器或者禁用了JavaScript的浏览器，还可以使用<noscript></noscript>元素来呈现相关的说明。
1.2 <script> 位置
脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。
注：把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
(1) <head> 中的 JavaScript
JavaScript 函数被放置于 HTML 页面的 <head> 部分
例：
<!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "段落被更改。"; } </script> </head> <body> <h1>一张网页</h1> <p id="demo">一个段落</p> <button type="button" onclick="myFunction()">试一试</button> </body> </html>
(2) <body> 中的 JavaScript
JavaScript 函数被放置于 HTML 页面的 <body> 部分。
例：
<!DOCTYPE html> <html> <body> <h1>A Web Page</h1> <p id="demo">一个段落</p> <button type="button" onclick="myFunction()">试一试</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "段落被更改。"; } </script> </body> </html>
2 JavaScript 使用方法
在HTML中使用JavaScript的方式主要有：
2.1 引入外部脚本
在Html中使用<script>标签元素引入外部文件（推荐），将代码写入外部文件中，JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本，请在 <script> 标签的 src (source) 属性中设置脚本的名称。
可通过完整的 URL 或相对于当前网页的路径引用外部脚本：
(1) 使用完整的 URL 来链接至脚本
例：
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>
(2) 使用位于当前网站上指定文件夹中的脚本
例：
<script src="/js/myScript1.js"></script>
(3) 链接了与当前页面相同文件夹的脚本：
例：
<script src="myScript1.js"></script>
备注：
a. 可以在 <head> 或 <body> 中放置外部脚本引用。
b. 在XHTML文档中，导入外部文件时，可以使用简写方式<script/>但是在HTML中只能<script></script>。
c. 导入外部文件时，src属性是必须的，这个时候嵌入在<script></script>中的代码（如果有）会被忽略。
d. src属性也可以指定来自外部域的JavaScript文件，这一点让<script>元素异常强大，也备受争议，因为可能会让人恶意注入脚本。
e. 外部文件只需要包含<script></script>中的代码即可，不需要包括<script>元素本身，意思就是外部脚本不能包含 <script> 标签。
f. 外部文件一般扩展名为.js，但这不是强制的。
引入外部脚本优势：
a. 分离了 HTML 和代码
b. 使 HTML 和 JavaScript 更易于阅读和维护
c. 已缓存的 JavaScript 文件可加速页面加载
2.2 在<script>内写入JavaScript代码。
在<script>元素中内嵌代码时，只需要指定type属性，但代码中不能出现</script>字符串，否则会解析出错。
例：
<script type="text/javascript"> //document.writeln('</script>');会将字符串中的</script>作为前面的标签结束符来解析，从而出现异常 document.writeln('</scr'+'ipt>');//通过将</script>分开，从而避免作为<script>的结束标签解析 </script>
2.3 将脚本程序代码作为某个元素的事件属性值或超链接的href属性值
超链接<a>的href属性除了可以使用http和mailto等协议之外，还可以使用Javascript协议。
例：
<a href=”javascript:alert(new Date())”;>javascript</a>
单击这个超链接，浏览器将会执行JavaScript:后面的脚本程序代码。
3 文档模式
在IE5.5中开始引入文档模式的概念，通过使用通过文档类型（doctype）切换实现的，最初包括混杂模式（quirks mode）和标准模式（standards mode），混杂模式让IE的行为与包括非标准特性的IE5相同，标准模式则让IE的行为更接近标准行为。在IE引入文档模式之后，其他浏览器也纷纷仿效。之后，IE又提出一种所谓准标准模式（almost standards mode），这种模式下的浏览器特性有很多是符合标准的，但也不尽然。所有浏览器默认开启混杂模式。
可以通过下面的方法启动标准模式：
<!-- HTML 4.01 严格型--> <!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/xhtml1/DTD/xhtml1-strict.dtd"> <!-- HTML5 --> <!DOCTYPE html>
通过过渡性或框架集型来触发准标准模式：
<!-- HTML 4.01 过渡型--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- HTML 4.01 框架集型--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 FrameSet//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!-- XHTML 1.0 过渡型--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- XHTML 1.0 框架集型--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 FrameSet//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
参考来源：https://www.cnblogs.com/linjisong/archive/2012/08/23/2642355.html