在html中使用JavaScript

最新推荐文章于 2024-06-10 20:53:57 发布

.ZL.

最新推荐文章于 2024-06-10 20:53:57 发布

阅读量407

点赞数

分类专栏： JavaScript学习记录1 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_45888120/article/details/120577156

版权

JavaScript学习记录1 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

script元素

async：应该立刻下载正脚本，但是不应妨碍页面中的其他操作，比如下载资源或等待其他脚本。只对外部脚本有效

charset：表示通过src属性制定的代码的字符集。很少有人用

defer：表示脚本刻意延迟到文档完全被解析和显示后在执行。只对外部脚本有效

language：已经废弃。表示编写代码使用的是哪种脚本语言

src：表示包含要执行代码的外部文件

type：可以理解为language的替代

使用script元素的方式有两种：

和css一样，直接在html文档中的script标签里面写，或者用外部文件导入

xxxxxxxxxxxxxxxxxxxxxxx

</script>

同样这个src属性可以指向当前html页面所在域之外的某个域中的完整的url

换句话说就是只要有完整的url你就可以直接加载它的js文件。

在解析过程中如果不包含defer 和async js元素会在页面中出现的先后顺序进行依次解析。

标签的位置

一般来说js文件应该放在head标签中，但是由于js文件很多，下载解析和执行的也很久，这就导致body久久不被解析，所以页面会出现明显的延迟，也就是说在下载解析js文件的过程中，页面会是一片空白。

所以我们把script标签放在body内容的最下面。

延迟脚本defer

HTML 4.01为<script>标签定义了defer属性。

defer属性表明脚本会延迟到整个页面解析完毕在执行，所以说设置了这个的<script>标签意思是，立刻下载，延迟执行。

由于某些浏览器会忽略这个属性，所以说把延迟脚本放在页面底部是最佳选择。

异步脚本async

HTML5为<script>元素定义了async属性。

在html解析过程中遇到带有async属性的<script>元素，会继续解析html文档，同时使用另一个进程下载这个JavaScript文件，当文件下载好以后，停止html解析，开始执行此脚本文件，这就导致了js文件不会按顺序执行，而是说谁先下载好了谁就先执行，这就要求带有这个标签的js文件需要互不依赖。

嵌入代码与外部文件

直接在html中嵌入JavaScript代码是可行的，但是一般来说还是使用外部文件好：

1可维护性强：开发人员可以在不触及html标记的情况下专心的编辑JavaScript代码

2可缓存：浏览器可以根据设置去缓存这个链接的所有外部JavaScript文件，如果说有两个页面使用同一个js文件，那么这个js文件下载一次，加快页面加载速度

3适应未来：html和xhtml包含外部文件的语法是相同的。

文档模式：

1.文档模式的意义：

IE5.5引入了文档模式的概念，通过使用DOCTYPE实现模式切换，它的主要作用是告诉浏览器以哪种模式呈现，如何解析文档，也就是说两种模式主要影响css内容的呈现，某些情况下也会影响js的执行。

2.两种模式的定义：

1）混杂模式又称怪异模式或兼容模式，指浏览器按照自己的方式来解析代码，页面以宽松的向后兼容的解析方式，是实现IE5.5以下版本浏览器的渲染模式。就严格度上来说不如严格模式，但是模拟老式浏览器的行为可以防止站点无法工作

2）标准模式又称严格模式，是一种要求严格地DTD，排版和js运作模式根据web标准去解析页面的模式

3.两种模式的区别：

1)盒模型的解析：混合模式盒模型的宽高=内容的宽高；标准模式盒模型的宽高=内容的宽高+padding的宽高+border的宽高

2)当一个块元素div中包含的内容只有图片时，在标准模式下，不管IE还是标准，在图片底部都有3像素的空白。但在混杂模式下，标准浏览器（Chrome）中div距图片底部默认没有空白。

3）设置行内元素的高度：标准模式，给span等行内元素设置width和height没有效果；混杂模式下，会生效

4）设置百分比的宽度：标准模式，一个元素的高度是由它包含的内容决定的，若父元素没有设置高度，子元素设置一个百分比的高度是无效的。

5）margin：0 auto设置水平居中在IE下会失效

标准模式下可以使元素水平居中，混杂模式下的解决办法用text-align

6）混杂模式下table的自提属性不能继承上层的设置

7）混合模式下white-space：pre会失效

4.如何判断两种模式

    if(document.compatMode=="CSS1Compat" ) {

    console.log('标准模式');

    }else {

    console.log('混杂模式');

    }

5.如何触发

1）混杂模式

（1）不写<!DOCTYPE html>
（2）<!DOCTYPE html>前面加上xml声明 <?xml version="1.0" encoding="utf-8"?> (IE6)
（3）<!DOCTYPE html>和<?xml version="1.0" encoding="utf-8"?>之间加了（标签、文本、注释）(ie8以下都有，ie9以上未测)
（4）<!DOCTYPE html>前面有（标签、文本、注释）(ie8以下都有，ie9以上未测)

2）标准模式

正常建立

————————————————
版权声明：本文为CSDN博主「??or??」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zhangyr_student/article/details/86242391

<noscript>元素

早期的浏览器不支持JavaScript，所以使用noscript可以制定在不支持JavaScript的浏览器中显示代替内容，但是在支持JavaScript的情况下，则不显示其中的内容

.ZL.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在html中使用JavaScript

script元素async：应该立刻下载正脚本，但是不应妨碍页面中的其他操作，比如下载资源或等待其他脚本。只对外部脚本有效charset：表示通过src属性制定的代码的字符集。很少有人用defer：表示脚本刻意延迟到文档完全被解析和显示后在执行。只对外部脚本有效language：已经废弃。表示编写代码使用的是哪种脚本语言src：表示包含要执行代码的外部文件type：可以理解为language的替代使用script元素的方式有两种：和css一样，直接在html文档中的scrip
复制链接

扫一扫