在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
网页主要由三部分组成，分别为HTML、CSS和Javascript。如果说HTML是肉身，CSS是皮相，那Javascript就是灵魂。因此，三者的联系与融合则至关重要。本文就来为大家讲解一下JavaScript与HTML的联系，即JavaScript在HTML中的基础用法。
我们能通过HTML实现页静态弹出框效果，但不能控制显示或隐藏弹出框，但有了Javascript的加入，可实现动态弹出框效果，我们通过点击按钮来控制显示和隐藏，赋予网页更多的生命力。如何在HTML文件代码中使用JavaScript呢？这就需要借助<script> 标签来实现！使用语法如下：
<script type="MIME_type"></script>
其中，type 属性规定脚本的 MIME 类型，标识 <script> 与 </script> 标签之间的内容。MIME 类型包括两部分：media type 和 subtype。对于 JavaScript，MIME 类型是 "text/JavaScript"。MIME_type：规定脚本的 MIME 类型，其默认值是 "text/JavaScript"。
但是，在HTML5中浏览器能够确定类型，因此，MIME类型在HTML5中完全不重要，即在HTML5规范中type 属性的书写不再是必需，可以省略；简化掉type属性的语法格式，如下所示：
<script>JavaScript代码</script>
由上述语法格式可以看出：Javascript代码置于 <script>与</script> 标签之间，<script>与</script>决定JavaScript开始与结束的位置；标签<script>与</script>之间的代码行包含了JavaScript代码；Javascript脚本有两种放置方式，可被放置在HTML页面的 <head>与<body> 标签中。
（1）head标签中的JavaScript
在HTML页面中，我们可以将<script>标签置于<head> 部分，然后在<head>标签中插入JavaScript脚本代码。JavaScript在<head>标签中使用，如下：
<!DOCTYPE html>
<html>
<head>
<script>
// JavaScript脚本显示在这里
</script>
</head>
<body>
</body>
</html>
如上述代码所示：JavaScript核心代码位于<head>标签中间。
（2）body标签中的JavaScript
在HTML页面中，我们还可以将<script>标签置于<body> 部分，然后在<body>标签中插入JavaScript脚本代码。 JavaScript在<body>标签中的代码，如下：
<!DOCTYPE html>
<html>
<head>
*
</head>
<body>
<script>
// JavaScript脚本显示在这里
</script>
</body>
</html>
我们可以清楚看到，<body>标签与<head>标签应用的整体代码结构基本一致，区别就在于JavaScript核心代码的显示位置；如上述代码所示：JavaScript核心代码位于<body>标签中间。
（3）引入外部JavaScript
我们只需创建一个外部文件，将JavaScript脚本保存在该外部文件中，最后使用<script>标签中的src属性引用该文件即可！也就是说，需要运行 JavaScript脚本时，只需引用对应的外部文件，不需要再重复的书写脚本。引入外部Javascript文件示例代码如下：
<script type="text/javascript" src="文件路径"></script>
src 属性规定外部脚本文件的URL（地址）。有时，我们需要在网站的多个页面中运行 JavaScript，不需要重复编写相同的脚本，只需在单独的文件中创建 JavaScript，并以 .js 为后缀保存，然后使用 <script> 标签中的 src 属性引用该文件即可。如调用本地xx.js文件，示例如下：
<script type="text/javascript" src="xx.js"></script>
如调用网络文件xx.js，示例如下：
<script type="text/javascript" src="http://www.xxx.com/xx.js"></script>
综上，我们已经总结了Javascript在HTML中的的三种基本用法，而且三种用法均能实现相同的效果。可能有的人会有一个疑问：既然三种用法都能实现相同的效果，那在实际应用中要怎么选择呢？ 其实，引入外部Javascript方式是实际应用中最为常用的！大家可以下来自己动手试试~
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
0基础前端开发需要学什么？
下一篇：
培训班出来的前端好找工作吗？
相关推荐 更多
Web前端开发培训班课程怎么样？如何选择靠谱的培训班？
目前学习前端成为进入互联网主要途径之一。随着互联网技术的高度迭代更新，多平台发展，Web前端开发成为市场的娇宠，目前Web前端岗位市场需求量较大，薪资水平也处于较高水平，因此大部分同学通过参加Web前端开发培训班课程进入前端开发领域。
4327
2019-08-22 17:59:01
Web前端开发培训班师资力量如何
参加Web前端开发培训的同学们最关注的几个问题：课程体系是否全面；课程讲师授课效果如何；课程服务是否全面；未来就业是否有保障等等。一般参加培训班前课程体系大家都可以根据不同机构的对比了解到是否全面 。课程服务作为机构课程的最大优势，可以在机构官方宣传途径显而易见的看到。就业保障可以通过真实学员就业案例明确，那Web前端开发培训班的师资力量如何？我们今天一起了解一下。
4295
2019-09-10 18:33:43
前端页面如何优化？解决方案讲解
前端页面的用户体验有多重要，相信大家都能够了解。试想，如果一个网站的页面打开的很慢，无疑会影响网站的浏览量，因此可以说前端页面的打开速度决定了网站的存亡。那么我们应该如何优化前端页面呢？众所周知，前端的页面主要包括HTML,CSS,JS等，因此解决方案可以从这几点入手，下面是详细讲解。
4459
2019-09-25 14:53:16
六种前端排序算法代码演示
排序算法是前端算法中一个十分经典的算法，因此它也是前端面试中常见的考察重点。如今前端行业火爆，就业市场对前端人才的要求也越来越高，排序算法是每个前端从业者都必须掌握的基础知识。众所周知，排序算法有六种，分别是冒泡排序、选择排序、快速排序、归并排序、基数排序。下面我为大家逐一用代码演示这六大排序算法，感兴趣的朋友一起来看看吧！
4401
2020-04-13 10:23:09
HTML入门实操4例子
在没有任何辅助工具基础上，本次通过实操来完成4个例子。首先建立一个文本文档（.txt后缀），然后打开后把下面例子一个一个粘贴到文档里保存关闭，把文档后缀改成.html,双击即可自动打开浏览器预览。
4235
2020-06-22 16:38:22
