一、在<script></script>中包含JavaScript代码。javascript
二、使用<script>标签的src属性引入外部javaScript文件,JavaScript文件能够来自外域也能够是同域。若是script标签包含src属性,那么script标签中的内容会被忽律。html
html文档中JavaScript执行顺序是按照他们在文档中的顺序执行的。java
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <script>
7 console.log("aaa"); 8 </script>
9 <script>
10 console.log("hello world"); 11 </script>
12 </head>
13 <body>
14
15 </body>
16 </html>
控制台中会先输出aaa,在输出hello world.浏览器
html文档中script标签的位置能够在head标签中,也能够在body标签中。当script标签在head中时,会先执行JavaScript代码,再加载文档的内容,若是script标签在body标签中,会先加载文档内容,再执行JavaScript代码。缓存
script标签的defer和aynsc属性只对外部脚本有效。dom
<script>标签订义了defer属性。这个属性的用途是代表脚本在执行时不会影响页面的构造。脚本会被延迟到整个页面都解析完毕后再运行。异步
1 <!DOCTYPE html>
2 <html> 3 <head> 4 <title>Example HTML Page</title> 5 <script type="text/javascript" defer="defer" src="example1.js"></script>
6 7 <script type="text/javascript" defer="defer" src="example2.js"></script>
8 9 </head>
10 <body> 11 <!-- 这里放内容 --> </body>
12 </html>
咱们把<script>元素放在了文档的<head>元素中,但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。HTML5规范要求脚本按照它们出现的前后顺序执行,所以第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded事件执行。async
<script>标签订义了aysnc属性。脚本执行和文档内容渲染之间异步(同时)执行,因此不要在脚本中修改dom。脚本会在Load时间以前执行,在DOMContentLoaded以前或者以后执行。脚本之间的顺序不可保证,因此脚本之间不要有依赖关系.spa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="example1.js" async="async"></script>
<script src="example2.js" async="async"></script>
</head>
<body>
</body>
</html>
1.代码可维护性好。html和JavaScript代码分离,内容清晰,若是须要修改JavaScript,只须要在单独的文件中修改便可。code
2.浏览器缓存,同一个页面屡次加载时,外部的JavaScript文件会在浏览器缓存。
该标签能够出如今body标签中的任何位置,包含在<noscript>元素中的内容只有在下列状况下才会显示出来:
1.浏览器不支持脚本;
2.浏览器支持脚本,但脚本被禁用。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="example1.js" async="async"></script>
7 <script src="example2.html" async="async"></script>
8 </head>
9 <body>
10 <noscript>
11 <p>当前浏览不支持或者禁用了javascript</p>
12 </noscript>
13 </body>
14 </html>
须要在浏览器中禁用JavaScript,而后在运行代码。