网页主要由三部分组成，分别为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. vuex : 模块化改造

    我们知道,vuex是vue技术栈中很重要的一部分,是一个很好用的状态管理库. 如果你的项目没有那么复杂,或者对vuex的使用没有那么重度,那么,是用不着modules功能的. 但如果你写着写着就发现你 ...

  2. PHP常见的十个安全问题

    相对于其他几种语言来说, PHP 在 web 建站方面有更大的优势,即使是新手,也能很容易搭建一个网站出来.但这种优势也容易带来一些负面影响,因为很多的 PHP 教程没有涉及到安全方面的知识. 此帖子 ...

  3. PHP中使用 TUS 协议来实现可恢复文件上传

    曾经尝试过用PHP上传大文件吗?想知道您是否可以从上次中断的地方继续上传,而不会在遇到任何中断的情况下再次重新上传整个数据?如果您觉得这个场景很熟悉,请接着往下阅读. 文件上传是我们几乎所有现代Web ...

  4. 修改ElementUI样式的几种方式

    ElementUI是一款非常强大的前端UI组件库,它默认定义了很多美观的样式,但是我们在实际开发过程中不可避免地遇到需要修改ElementUI默认样式.下面总结了几种修改默认样式的方法. 1. 新建全 ...

  5. jmeter压力测试报错:java.net.BindException: Address already in use: connect || java.net.SocketException: Socket closed

    windows提供给TCP/IP链接的端口为 1024-5000,并且要四分钟来循环回收它们,就导致我们在短时间内跑大量的请求时将端口占满了,导致如上报错. 解决办法(在jmeter所在服务器操作): ...

  6. Qt-操作xml文件

    1  简介 参考视频:https://www.bilibili.com/video/BV1XW411x7AB?p=12 xml简介:可扩展标记语言,标准通用标记语言的子集,简称XML.是一种用于标记电 ...

  7. 【vagrant】第一次安装添加box报错：The box failed to unpackage properly....

    报错信息 The box failed to unpackage properly. Please verify that the box file you're trying to add is n ...

  8. laravel报错1071 Specified key was too long; max key length is 1000 bytes

    Laravel 默认使用utf8mb4字符编码,而不是的utf8编码.因此运行php artisan migrate会出现如下错误: [Illuminate\Database\QueryExcepti ...

  9. 12天，这本《重学Java设计模式》PDF书籍下载量9k，新增粉丝1400人，Github上全球推荐榜！

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言

  10. kylin streaming原理介绍与特点浅析

    目录 前言 kylin streaming设计和原理 架构介绍 streaming coordinator streaming receiver cluster kylin streaming数据构建 ...