JavaScript在HTML中的基础用法总结
网页主要由三部分组成，分别为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中的基础用法总结的更多相关文章
- Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)
一.实际项目中有很多如下界面效果. 二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码: <!DOCTYPE html> <html> & ...
- Jquery和Javascript 实际项目中写法基础-闭包 (2)
一.什么是闭包? 概念性的我就不去百度了,感兴趣的可以自己去搜下,我自己的理解,闭包就是一个封装的包,相当于类的概念,把乱七八糟的的东西封装到一起,然后统一使用一个对象来调用,实现代码部分对外开放,部 ...
- javascript或node中的console用法总结
//建立app.js页面 // 一:页面代码 console.log("log信息"); //在页面中执行(node app.js)这个文件会在控制台中看到log信息:" ...
- Jquery和Javascript 实际项目中写法基础-ajax和json (3)
一.什么是JSON数据? 一种轻量级的数据交换格式.实际中知道如何使用即可. 软件开发我认为就是一个会用,然后知其原理的过程. 例子如下: <!DOCTYPE html> <html ...
- Jquery和Javascript 实际项目中写法基础 (1)
一.JS 是什么,jquery 是什么 就不说明了,直接说一般使用是怎么样的 <!DOCTYPE html> <html> <head> <meta cha ...
- 详细解读-this-关键字在全局、函数、对象、jQuery中的基础用法！
一.前言 1. Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的设计模式来实现面向对象的编程,其 ...
- 详细解读-this-关键字在全局、函数、对象、jQuery等中的基础用法！
一.前言 1. Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的设计模式来实现面向对象的编程,其 ...
- c++中sort基础用法
用法一:数组排序 对一个数组进行升序排序 #include <algorithm> #include <iostream> #include <cstdio> us ...
- bootstrap-vue 中 model 基础用法
Model 官方文档: https://bootstrap-vue.js.org/docs/components/modal <b-modal v-model="labelModal ...
随机推荐
- Java中static、final和static final（final static）的区别（转）
大佬的总结(大赞!) final可以修饰:属性,方法,类,局部变量(方法中的变量) final修饰的属性的初始化可以在编译期,也可以在运行期,初始化后不能被改变. final修饰的属性跟具体对象有关, ...
- NCRE-Python考点
NCRE-Python考点 作者:封亚飞本文不含 文件处理.面向对象程序设计.公共基础.计算生态希望各位可以批评指正Qq 64761294 由于图片上传不方便,需要真题的朋友可以加我的qq找我要pdf ...
- MongoDB 事务，复制和分片的关系
摘要:本文尝试对Mongo的复制和分布式事务的原理进行描述,在必要的地方,对实现的正确性进行论证,希望能为MongoDB内核爱好者提供一些参考. 1.前言 MongoDB基于wiredTiger提供的 ...
- raw目录的位置是D:\android_projects\qrscan\app\src\main\res\raw
D:\android_projects\qrscan\app\src\main\res\raw 这里可以放数据库文件和音频文件 文件名为sp.mp3 引用方法: MediaPlayer mp = Me ...
- Salt组件(二)
四.配置管理States 是SaltStack中的配置语言,在日常进行配置管理时需要编写大量的States文件.比如我们需要安装一个包,然后管理一个配置文件,最后保证某个服务正常运行.这里就需要我们编 ...
- shell变量子串
表达式 说明 ${parameter} 返回变量$parameter的内容 ${#parameter} 返回变量$parameter内容的长度(按字符),也适用于特殊变量 ${parameter:of ...
- 一切皆组件的Flutter，安能辨我是雄雌
从一开始接触Flutter,相信读者都会铭记一句话,那就是--一切皆组件.今天我们就来体会一下这句话的神奇魔力,我们先从实际的产品需求说起. 我们先来看一个简化的运行图: 我们要实现如上图所示的日期选 ...
- 《闲扯Redis八》Redis字典的哈希表执行Rehash过程分析
一.前言 随着操作的不断执行, 哈希表保存的键值对会逐渐地增多或者减少, 为了让哈希表的负载因子(load factor)维持在一个合理的范围之内, 当哈希表保存的键值对数量太多或者太少时, 程序需要 ...
- PHP 标量类型与返回值类型声明
标量类型声明 默认情况下,所有的PHP文件都处于弱类型校验模式. PHP 7 增加了标量类型声明的特性,标量类型声明有两种模式: 强制模式 (默认) 严格模式 标量类型声明语法格式: declare( ...
- PHP imagecolorclosestalpha - 取得与指定的颜色加透明度最接近的颜色的索引
imagecolorclosestalpha — 取得与指定的颜色加透明度最接近的颜色的索引.高佣联盟 www.cgewang.com 语法 int imagecolorclosestalpha ( ...