原 二、在HTML中使用JavaScrip

作者:汪娇娇

时间:2017年11月4日

一、<script>标签

1、标签的位置

</body>之前

2、延迟脚本

defer

3、异步脚本

async

4、defer 和async 的区别

defer属性可以让脚本在文档完全呈现之后再执行,延迟脚本总是按照指定它们的顺序执行。

saync属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现,不过不能保证异步脚本按照它们在页面中出现的顺序执行。

二、嵌入代码与外部文件

外部文件的好处:

可维护、可缓存、适应未来

三、文档模式

h5:<!DOCTYPE html>

四、<noscript>元素

使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。

五、小结

把 Javascript插入到HTML页面中要使用<script>元素。使用这个元素可以把 Javascript嵌入到HTML页面中,让脚本与标记混合在一起;也可以包含外部的 Javascript文件。而我们需要注意的地方有:

1、在包含外部 Javascript文件时,必须将src属性设置为指向相应文件的URL。而这个文件既可以是与包含它的页面位于同一个服务器上的文件,也可以是其他任何域中的文件。

2、所有<script>元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用 defer和 async属性的情况下,只有在解析完前面<script>元素中的代码之后,才会开始解析后面<script>元素中的代码。

3、由于浏览器会先解析完不使用 defer属性的<script>元素中的代码,然后再解析后面的内容,所以一般应该把<script>元素放在页面最后,即主要内容后面,</body>标签前面。

4、使用defer属性可以让脚本在文文档完全全是现之后再执行,延迟脚本总是按照指定它们的顺序执行。

5、使用async属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。

另外,使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下,浏览器不会显示<noscript>元素中的任何内容。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏pangguoming

PowerDesigner设置表字段唯一约束

现有一个表student,id为主键。 ? 现打算给name添加一个唯一约束。 双击打开这个表,点击“keys"选项卡,显示有一个key_1,这是id主键。 ?...

36970
来自专栏DeveWork

自定义WordPress 密码文章提示文字

WordPress 默认的密码提示文字是这样的:This post is password protected. To view it please enter...

41370
来自专栏代码GG之家

Scoops android app多主题架构(四)

使用Scoops ? 1:MainApp ? 使用addDayNightFlavor将一个主题设置为DayNight模式 2:在对应的主题里面配置上文本...

22460
来自专栏Jerry的SAP技术分享

SAP Fiori应用Footerbar区域按钮的高亮显示逻辑

如果您够细心,您或许会发现有的SAP Fiori应用的footerbar区域内的按钮有高亮显示,有的则没有。

20380
来自专栏web

vue-router基本使用

16020
来自专栏前端下午茶

JS 回调模式

如果有个模块 findeNodes() ,任务是找到期望的 DOM 元素并使用 hide() 处理:

17910
来自专栏deepcc

简单的滑动条

404130
来自专栏做全栈攻城狮

程序员带你学习安卓开发系列-Android文件存储

输入帐号密码,并勾选记住帐号 ,点击登录时,保存帐号信息。下次登陆可以直接显示上次保存的QQ帐号。

15920
来自专栏小狼的世界

如何生成eot字体

前一段时间听闻Google退出ubuntu字体的时候,使用了一下,从而了解到 font-face 的用法:

13920
来自专栏liulun

在VSCode中编辑HTML文档时,在Dom标签上写style属性时智能提示的问题

首先在VSCode中打开一个HTML文件 然后点右下角的“选择语言模式” image.png 然后点击配置HTML语言的基础设置 image.png 然后在...

23780

扫码关注云+社区

领取腾讯云代金券