当前位置：首页 > 建站学院 > 前端开发 > 在HTML中使用JavaScript

在HTML中使用JavaScript

前端开发发布日期：2025年06月08日浏览次数：177次

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

　　2、使用<script>标签的src属性引入外部javaScript文件，JavaScript文件可以来自外域也可以是同域。如果script标签包含src属性，那么script标签中的内容会被忽律。

二、html文档中JavaScript执行顺序。

　　html文档中JavaScript执行顺序是按照他们在文档中的顺序执行的。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <script>
         console.log("aaa");
     </script>
     <script>
         console.log("hello world");
     </script>
 </head>
 <body>
 
 </body>
 </html>

　　控制台中会先输出aaa,在输出hello world.

　　html文档中script标签的位置可以在head标签中，也可以在body标签中。当script标签在head中时，会先执行JavaScript代码，再加载文档的内容，如果script标签在body标签中，会先加载文档内容，再执行JavaScript代码。

三、script标签的defer和aynsc属性

　　script标签的defer和aynsc属性只对外部脚本有效。

　　<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。脚本会被延迟到整个页面都解析完毕后再运行。

 <!DOCTYPE html>
 <html>   
 <head>     
     <title>Example HTML Page</title>     
     <script type="text/javascript" defer="defer" src="example1.js"></script>
         
     <script type="text/javascript" defer="defer" src="example2.js"></script>
       
 </head>
 <body>   
 <!-- 这里放内容 -->   </body>
 </html>

　　我们把<script>元素放在了文档的<head>元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。

　　<script>标签定义了aysnc属性。脚本执行和文档内容渲染之间异步（同时）执行，所以不要在脚本中修改dom。脚本会在Load时间之前执行，在DOMContentLoaded之前或者之后执行。脚本之间的顺序不可保证，所以脚本之间不要有依赖关系.

<!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，只需要在单独的文件中修改即可。

　　2.浏览器缓存，同一个页面多次加载时，外部的JavaScript文件会在浏览器缓存。

四、noscript标签

　　该标签可以出现在body标签中的任何位置，包含在<noscript>元素中的内容只有在下列情况下才会显示出来：

　　1.浏览器不支持脚本；

　　2.浏览器支持脚本，但脚本被禁用。　　

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script src="example1.js" async="async"></script>
     <script src="example2.html" async="async"></script>
 </head>
 <body>
     <noscript>
         <p>当前浏览不支持或者禁用了javascript</p>
     </noscript>
 </body>
 </html>

　　需要在浏览器中禁用JavaScript，然后在运行代码。

以上就是在HTML中使用JavaScript的详细内容，更多关于在HTML中使用JavaScript的资料请关注九品源码其它相关文章！

相关热词： HTML 使用 JavaScript

上一篇：微信小程序 confirm（删除提示）
下一篇：html： button样式 css生成器

文章分类

IT资讯 CMS教程服务器数据库前端开发后端开发工具使用其他教程

开发前端软件素材源码教程下载网站