在 HTML 文档中嵌入 JS 的几种方式

🌙
手机阅读
本文目录结构

在 HTML 文档中嵌入 JS 的几种方式

JavaScript 是一种嵌入到 HTML 文档的脚本语言,由浏览器解释和执行,无需编译。 将 JavaScript 脚本嵌入到 HTML 文档中有 3 种标准方法:

  • 1: 通过<script>直接嵌入
  • 2: 引入外部脚本;
  • 3: 在 HTML 属性中直接嵌入。

通过<script>直接嵌入

注意:通过<script>标签嵌入 JavaScript 代码时,必须放在<script type="text/javascript">XXXXX</script>之间

引入外部脚本

当网页功能比较复杂,或通用代码(每个页面都是用)较多时,直接在 <script type="text/javascript"></script>比较乱,不容易管理。

这时候,我们希望能将 JavaScript 代码保存在单独的文件中,使用时再嵌入到 HTML 文档。

标签中嵌入 JavaScript 代码会导致网页杂乱,不易管理。这时候,我们希望能将 JavaScript 代码保存在单独的文件中,使用时再嵌入到 HTML 文档。

标签嵌入

引入外部脚本,能够很轻松的让多个页面使用相同的 JavaScript 代码。外部脚本一般会被浏览器保存在缓存文件中,用户再次访问网页时,无需重新载入,加快了网页打开速度。

注意:外部脚本一般保存为 .js 的文件。

在 HTML 属性中直接嵌入

在 HTML 属性中嵌入 JavaScript 代码主要是针对 JavaScript 事件。JavaScript 事件是指用户对网页进行操作时,网页做出相应的响应。

嵌入脚本的位置

<script> 标签嵌入的脚本和外部引入的脚本可以放在 <head> 标签和 <body> 标签的任意位置。 上面的几个例子,都是将 JavaScript 代码嵌入到 <body> 标签,下面演示在 <head> 标签中嵌入脚本。

头部引入外部 js 文件,头部<script>标签中直接书写

大部分 js 脚本都是在最后引入!

更多 HTML 搜索

通过查看前端开发者在搜索引擎里的搜了哪些 HTML 内容,可以知道他们实际工作使用了什么技术或者什么地方薄弱;

你可以通过点击 HTML 常见搜索 来查看前端开发者都在搜哪些内容;

注:这里仅收录了常见搜索,并不是无论搜索什么都记录在里面的;

如果你是为了面试做准备的,那么推荐你查看 HTML面试题,这里基本包涵了市场上的所有 HTML 方面的面试题,让你更加牢固的掌握 HTML 知识

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了