在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
意见反馈

原创 JavaScript在HTML中的基础用法总结

发布时间：2020-08-13 16:49:48 浏览 5101 来源：博学谷作者：照照

网页主要由三部分组成，分别为HTML、CSS和Javascript。如果说HTML是肉身，CSS是皮相，那Javascript就是灵魂。因此，三者的联系与融合则至关重要。本文就来为大家讲解一下JavaScript与HTML的联系，即JavaScript在HTML中的基础用法。

JavaScript基础用法

我们能通过HTML实现页静态弹出框效果，但不能控制显示或隐藏弹出框，但有了Javascript的加入，可实现动态弹出框效果，我们通过点击按钮来控制显示和隐藏，赋予网页更多的生命力。如何在HTML文件代码中使用JavaScript呢？这就需要借助<script> 标签来实现！使用语法如下：

其中，type 属性规定脚本的 MIME 类型，标识 <script> 与 </script> 标签之间的内容。MIME 类型包括两部分：media type 和 subtype。对于 JavaScript，MIME 类型是 "text/JavaScript"。MIME_type：规定脚本的 MIME 类型，其默认值是 "text/JavaScript"。

但是，在HTML5中浏览器能够确定类型，因此，MIME类型在HTML5中完全不重要，即在HTML5规范中type 属性的书写不再是必需，可以省略；简化掉type属性的语法格式，如下所示：

由上述语法格式可以看出：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>

// JavaScript脚本显示在这里

</script>

</head>

<body>

</body>

</html>

如上述代码所示：JavaScript核心代码位于<head>标签中间。

（2）body标签中的JavaScript

在HTML页面中，我们还可以将<script>标签置于<body> 部分，然后在<body>标签中插入JavaScript脚本代码。 JavaScript在<body>标签中的代码，如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

// JavaScript脚本显示在这里

</script>

</body>

</html>

我们可以清楚看到，<body>标签与<head>标签应用的整体代码结构基本一致，区别就在于JavaScript核心代码的显示位置；如上述代码所示：JavaScript核心代码位于<body>标签中间。

（3）引入外部JavaScript

我们只需创建一个外部文件，将JavaScript脚本保存在该外部文件中，最后使用<script>标签中的src属性引用该文件即可！也就是说，需要运行 JavaScript脚本时，只需引用对应的外部文件，不需要再重复的书写脚本。引入外部Javascript文件示例代码如下：

src 属性规定外部脚本文件的URL（地址）。有时，我们需要在网站的多个页面中运行 JavaScript，不需要重复编写相同的脚本，只需在单独的文件中创建 JavaScript，并以 .js 为后缀保存，然后使用 <script> 标签中的 src 属性引用该文件即可。如调用本地xx.js文件，示例如下：

如调用网络文件xx.js，示例如下：

综上，我们已经总结了Javascript在HTML中的的三种基本用法，而且三种用法均能实现相同的效果。可能有的人会有一个疑问：既然三种用法都能实现相同的效果，那在实际应用中要怎么选择呢？其实，引入外部Javascript方式是实际应用中最为常用的！大家可以下来自己动手试试~

Web前端技术 Web开发

— 申请免费试学名额 —

在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！

上一篇： 0基础前端开发需要学什么？下一篇：培训班出来的前端好找工作吗？

相关推荐 更多

Web前端开发培训班课程怎么样？如何选择靠谱的培训班？

目前学习前端成为进入互联网主要途径之一。随着互联网技术的高度迭代更新，多平台发展，Web前端开发成为市场的娇宠，目前Web前端岗位市场需求量较大，薪资水平也处于较高水平，因此大部分同学通过参加Web前端开发培训班课程进入前端开发领域。

6402

2019-08-22 17:59:01

Web开发Web前端培训就业前景
IT前端和后端要做什么？哪个辛苦加班多？

IT前端和后端要做什么？前端开发和后端开发是软件开发的重要组成部分。前端开发主要做的是用户所能看到的前端展示界面；后端开发主要做的是逻辑功能等模块。要问哪个辛苦加班多？其实都差不多，毕竟技术研发行业都不会太轻松。

22718

2019-08-28 10:31:21

Web开发就业前景前端工程师
H5前端开发主要做什么？从事的前端岗位？

html5前端技术集合开发岗位，会用到html5、CSS3以及JS前端技术；h5即HTML5，描述网页的标准语言，html5是属于前端开发的一部分。可以胜任企业的WEB前端开发工程师、H5 APP开发工程师、微信小程序开发工程师。

10069

2020-11-23 16:40:24

Web前端技术Web岗位
前端和后端开发哪个工资高？

一般来说前端开发平均薪资17k左右，后端开发平均工资16k左右，能拿到这个薪资水平的一般是有1-2年工作经验的开发人员，由于公司要求几个人能力不同薪资差距还是比较大的。

13442

2020-12-22 16:06:41

Web开发薪资待遇
Web常用开发工具有哪些？常用工具推荐

IT程序员为了快速、高效地完成任务，会使用一些Web开发具来辅助完成工作，这些工具有代码高亮显示、语法提示等便捷功能的前端开发工具，对于开发者非常友好。

7466

2021-02-05 15:25:34

Web开发软件工具