网页主要由三部分组成，分别为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方式是实际应用中最为常用的！大家可以下来自己动手试试~

非常感谢！

请你喝杯茶记得三连哦～

1.阅读完记得给点个赞哦，有赞有动力

2.关注公众号【前端留学生】，陪你聊聊前端的趣事

JavaScript在HTML中的基础用法总结的更多相关文章

  1. Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)

     一.实际项目中有很多如下界面效果.    二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码:      <!DOCTYPE html> <html> & ...

  2. Jquery和Javascript 实际项目中写法基础-闭包 (2)

    一.什么是闭包? 概念性的我就不去百度了,感兴趣的可以自己去搜下,我自己的理解,闭包就是一个封装的包,相当于类的概念,把乱七八糟的的东西封装到一起,然后统一使用一个对象来调用,实现代码部分对外开放,部 ...

  3. javascript或node中的console用法总结

    //建立app.js页面 // 一:页面代码 console.log("log信息"); //在页面中执行(node app.js)这个文件会在控制台中看到log信息:" ...

  4. Jquery和Javascript 实际项目中写法基础-ajax和json (3)

    一.什么是JSON数据? 一种轻量级的数据交换格式.实际中知道如何使用即可. 软件开发我认为就是一个会用,然后知其原理的过程. 例子如下: <!DOCTYPE html> <html ...

  5. Jquery和Javascript 实际项目中写法基础 (1)

    一.JS 是什么,jquery 是什么  就不说明了,直接说一般使用是怎么样的 <!DOCTYPE html> <html> <head> <meta cha ...

  6. 详细解读-this-关键字在全局、函数、对象、jQuery中的基础用法！

    一.前言 1. Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的设计模式来实现面向对象的编程,其 ...

  7. 详细解读-this-关键字在全局、函数、对象、jQuery等中的基础用法！

    一.前言 1. Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的设计模式来实现面向对象的编程,其 ...

  8. c++中sort基础用法

    用法一:数组排序 对一个数组进行升序排序 #include <algorithm> #include <iostream> #include <cstdio> us ...

  9. bootstrap-vue 中 model 基础用法

    Model 官方文档:  https://bootstrap-vue.js.org/docs/components/modal <b-modal v-model="labelModal ...

随机推荐

  1. 设计模式：decorator模式

    两点: 继承同一虚接口,实现数据一致性 桥接方式指向被装饰类 目的:在不改变被装饰类功能的前提下增加新功能 特点:继承是子类和父类强耦合,桥接是低耦合 例子: class Print //抽象接口 { ...

  2. 题解 洛谷 P3340 【[ZJOI2014]星系调查】

    根据题意,发现题目中的图,其实就是一颗树或者是一颗基环树,每个节点上有一个点对\((x,y)\),每次询问为给定端点,找一条直线到端点间的所有点的距离之和最小. 设这条直线为\(y=kx+b\),根据 ...

  3. python-多任务编程03-迭代器(iterator)

    迭代器是一个可以记住遍历的位置的对象.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退. 可迭代对象(Iterable) 能够被循环遍历(迭代)的对象称为可迭代 ...

  4. jenkins初学部分笔记网站

    https://www.cnblogs.com/wfd360/p/11314697.html 自动化部署详细教程 https://blog.csdn.net/weixin_41948075/artic ...

  5. Tkinter经典写法

    1.继承 tkinter.Frame 类,实现类的基本写法 2.创建主窗口及主窗口大小位置及标题 3.将需要添加的组件放入到类中进行创建, 继承的 Frame 类需要使用 master 参数作为父类的 ...

  6. map 函数基本写法

    map(需要对对象使用的函数,要操作的对象) 函数可以是自定义的,也可以是内置函数的,或者 lambda 匿名函数 操作的对象多为 可迭代对象可以是函数名的列表集合     2020-05-04

  7. Python exec 内置语句

    描述 exec 执行储存在字符串或文件中的Python语句,相比于 eval,exec可以执行更复杂的 Python 代码.岭组词  https://www.cgewang.com/post/2205 ...

  8. DOM标签属性和对象属性

    DOM元素的属性分为两种 (1)标签属性 直接写在标签上的属性 (2)对象属性 由于所有的DOM元素都是Object类型,所以我们可以通过对象的方式为DOM元素设置属性 1.标签属性 (1)设置标签属 ...

  9. 7.1 NOI模拟赛 dp floyd

    这是一道非常垃圾的题目 且 数据范围简直迷惑选手.. 可以发现 题目中有 边权递增 边的条数 所有边权值不同 最小边权和等条件. 看起来很难做 一个想法 边权递增+边的1的权值都不相同可以想到 关系存 ...

  10. luogu P6583 回首过去 简单数论变换 简单容斥

    LINK:回首过去 考试的时候没推出来 原因:状态真的很差 以及 数论方面的 我甚至连除数分块都给忘了. 手玩几个数据 可以发现 \(\frac{x}{y}\)满足题目中的条件当且仅当 这个是一个既约 ...