script 标签|学习笔记

简介: 快速学习 script 标签

开发者学堂课程【HTML 基础入门学习script 标签】学习笔记与课程紧密联系,让用户快速学习知识

课程地址https://developer.aliyun.com/learning/course/465/detail/5720


script 标签

 

内容介绍

一、<script><script/>

二、<script><script/>的属性

 

一、<script><script/>

1、存放位置

是唯一一个既可置于 head 里、也可置于 body 里的标签

以前学的必须要放在 head 里,或者必须放在 body 里,此标签两个都可以放,可以根据自己的喜好进行选择。

今后将讲解合适放在和 head 里更好,何时放在 body 里更好。

2、作用

定义客户端脚本或者引入脚本

 

二、<script><script/>的属性

1、必填属性

Type 指定脚本的类型,text/javascript

但一般接触到的刚开始的脚本其实都是 js 脚本,那么 type 属性它的值一般就填text/javascript

2、选填属性

1Src // 外部脚本文件的 URL 引入外部 js 文件

2Defer // 规定是否对脚本执行进行延迟,直到页面加载为止,值和属性名一样

属性加入与否的结果:如果不加入这个属性的话,比如不管是引入外部脚本,那可能加进来以后就会执行js里面的代码做一些工作。

如果加了这个属性,比如引入 js,这个 js 放在头部,不是在头部加进来就会执行,而是等整个页面加载完成以后才会执行这个 js 所拥有的一些功能。

3Async 规定异步执行脚本(仅适用于外部脚本),值和属性名相同

异步,必须引入外部js文件,这个属性才可以用。

它的作用就是比如页面加载会加载进来很多 js 文件、css 文件以及很多图片文件等等,可能有些文件会导致页面加载缓慢,其他文件也相对于会被拖慢。

如果加了这个属性之后那么它的加载和整个页面的加载相当于是两条线的,对整个页面没有很多的影响。

注意:Defer Async 它们的值是它们本身。

3、举例

(1)内部引入

定义脚本,不引入外部文件,把 js 代码就写在了 script 里面和引入了外部文件。

<!DOCTYPE html><html>

<head>

<title></title>

</head>

<body>

</body></html>

//引入代码:

<!DOCTYPE html><html>

<head>

<title></title>

<script type="text/javascript">

alert(hello);

</script>

</head>

<body>

</body></html>

打印出 hello 并且是弹窗式的提醒。

将代码放在<body>里,刷新效果是一样的,只不过这时位于 body 之内

此为 html 文件里内部定义脚本。

(2)外部引入<script type="text/javascript" async="" src="http:/ /www.google-analytics.com/ga.js"></script>

这个程序是否异步,如果不需要就把 async=““删掉就可以了。

刷新,因为这是随便的引入了一个js,可能被强调了,在 network 中可以看到请求一直是 pending。

这个例子可能不是很恰当,随便引入一个 js 文件,只要js 文件没有被强调即可

此为引入外部的 js 文件方式。

4、结论

当学习 js 的时候就会知道所有的页面很多动态逻辑效果都是由 js 实现的。

相关文章
|
6天前
|
JavaScript
为什么把script标签放在div下面?
为什么把script标签放在div下面?
|
3月前
|
前端开发 JavaScript 安全
react 如何return script 标签和内容
在React中,你不能直接返回一个`<script>`标签,因为React会尝试解析并渲染所有的子节点,而`<script>`标签的内容通常会被视为JavaScript代码,而不是要渲染的文本。 但是,如果你只是想在React组件中嵌入一些JavaScript代码,你可以使用`dangerouslySetInnerHTML`属性。这个属性允许你插入原始的HTML内容,但是它非常危险,因为它会执行其中的任何JavaScript代码。因此,只有在你完全信任该内容,并且知道它是安全的情况下,才应该使用这个属性。 以下是一个示例,它创建了一个包含JavaScript代码的`<script>`标签:
|
开发者
title 标签|学习笔记
快速学习 title 标签
73 0
|
前端开发 区块链 开发者
link 标签|学习笔记
快速学习 link 标签
96 0
link 标签|学习笔记
|
前端开发 开发者 容器
DIV 和 SPAN 标签介绍| 学习笔记
快速学习 DIV 和 SPAN 标签介绍。
174 0
DIV 和 SPAN 标签介绍| 学习笔记
|
JavaScript 开发者
讲解 v-cloak、v-text、v-html 的基本使用|学习笔记
快速学习讲解 v-cloak、v-text、v-html 的基本使用
107 0
讲解 v-cloak、v-text、v-html 的基本使用|学习笔记
|
JavaScript 开发者
讲解v-cloak、v-text、v-html的基本使用|学习笔记
快速学习讲解v-cloak、v-text、v-html的基本使用
89 0
讲解v-cloak、v-text、v-html的基本使用|学习笔记
|
缓存 移动开发 JavaScript
如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性
如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性
307 0
如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性
|
移动开发 JavaScript
不写Js也能实现点击事件?说说你不知道的HTML之<Label>标签
不写Js也能实现点击事件?说说你不知道的HTML之<Label>标签
219 0
不写Js也能实现点击事件?说说你不知道的HTML之<Label>标签
HTML label标签学习笔记
HTML label标签学习笔记
105 0
HTML label标签学习笔记