一、HTML中使用JavaScript的兩種方式

　　1、在<script></script>中包含JavaScript代碼。

　　2、使用<script>標簽的src屬性引入外部javaScript文件，JavaScript文件可以來自外域也可以是同域。如果script標簽包含src屬性，那么script標簽中的內(nèi)容會被忽律。

二、html文檔中JavaScript執(zhí)行順序。

　　html文檔中JavaScript執(zhí)行順序是按照他們在文檔中的順序執(zhí)行的。

 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中時，會先執(zhí)行JavaScript代碼，再加載文檔的內(nèi)容，如果script標簽在body標簽中，會先加載文檔內(nèi)容，再執(zhí)行JavaScript代碼。

三、script標簽的defer和aynsc屬性

　　script標簽的defer和aynsc屬性只對外部腳本有效。

　　<script>標簽定義了defer屬性。這個屬性的用途是表明腳本在執(zhí)行時不會影響頁面的構(gòu)造。腳本會被延遲到整個頁面都解析完畢后再運行。

 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 <!-- 這里放內(nèi)容 -->   </body>12 </html>

　　我們把<script>元素放在了文檔的<head>元素中，但其中包含的腳本將延遲到瀏覽器遇到</html>標簽后再執(zhí)行。HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行，因此第一個延遲腳本會先于第二個延遲腳本執(zhí)行，而這兩個腳本會先于DOMContentLoaded事件執(zhí)行。

　　<script>標簽定義了aysnc屬性。腳本執(zhí)行和文檔內(nèi)容渲染之間異步（同時）執(zhí)行，所以不要在腳本中修改dom。腳本會在Load時間之前執(zhí)行，在DOMContentLoaded之前或者之后執(zhí)行。腳本之間的順序不可保證，所以腳本之間不要有依賴關(guān)系.

<!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代碼分離，內(nèi)容清晰，如果需要修改JavaScript，只需要在單獨的文件中修改即可。

　　2.瀏覽器緩存，同一個頁面多次加載時，外部的JavaScript文件會在瀏覽器緩存。

四、noscript標簽

　　該標簽可以出現(xiàn)在body標簽中的任何位置，包含在<noscript>元素中的內(nèi)容只有在下列情況下才會顯示出來：

　　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>