JavaScript在HTML中的基础用法总结

网页主要由三部分组成,分别为HTML、CSS和Javascript。如果说HTML是肉身,CSS是皮相,那Javascript就是灵魂。因此,三者的联系与融合则至关重要。本文就来为大家讲解一下JavaScript与HTML的联系,即JavaScript在HTML中的基础用法。
在这里插入图片描述
我们能通过HTML实现页静态弹出框效果,但不能控制显示或隐藏弹出框,但有了Javascript的加入,可实现动态弹出框效果,我们通过点击按钮来控制显示和隐藏,赋予网页更多的生命力。如何在HTML文件代码中使用JavaScript呢?这就需要借助

<script type="MIME_type"></script>

其中,type 属性规定脚本的 MIME 类型,标识 标签之间的内容。MIME 类型包括两部分:media type 和 subtype。对于 JavaScript,MIME 类型是 “text/JavaScript”。MIME_type:规定脚本的 MIME 类型,其默认值是 “text/JavaScript”。

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

<script>JavaScript代码</script>

本人在职前端开发,如果你也想学习前端开发技术,可以加入我组建的前端学习交流裙:851 231 348 
也可以关注我的微信公众号:【前端留学生】自己根据多年来的开发经验总结录制的一套web前端精讲视频和学习方法,
以及一些前端学习手册,前端面试题,端开发工具,PDF文档书籍教程,无偿分享给大家。
需要的话都可以自行来获取下载。

由上述语法格式可以看出:Javascript代码置于 之间的代码行包含了JavaScript代码;Javascript脚本有两种放置方式,可被放置在HTML页面的 与 标签中。

(1)head标签中的JavaScript

在HTML页面中,我们可以将

<!DOCTYPE html>
<html>
<head>
  <script>
       // JavaScript脚本显示在这里
  </script>
</head>
<body>
</body>
</html>

如上述代码所示:JavaScript核心代码位于标签中间。

(2)body标签中的JavaScript

在HTML页面中,我们还可以将

<!DOCTYPE html>
<html>
<head>
  *
</head>
<body>
  <script>
       // JavaScript脚本显示在这里
  </script>
</body>
</html>

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

(3)引入外部JavaScript

我们只需创建一个外部文件,将JavaScript脚本保存在该外部文件中,最后使用

<script type="text/javascript" src="文件路径"></script>

src 属性规定外部脚本文件的URL(地址)。有时,我们需要在网站的多个页面中运行 JavaScript,不需要重复编写相同的脚本,只需在单独的文件中创建 JavaScript,并以 .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方式是实际应用中最为常用的!大家可以下来自己动手试试~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值