HTML标签必知必会(一)

作为前端开发人员,我们在写页面的时候经常见到一些标签,但不一定知道它有什么作用,或者只知道一些标签的某部分功能。今天就介绍两个比较常见的标签,一个是DOCTYPE,一个是<script>

  1. DOCTYPE标签
    <!DOCTYPE>是表示文档类型的标签,它的作用是告诉浏览器应以什么类型的文档来解析文档。不同的文档类型会影响浏览器对CSS,甚至是Javascript的解析。

在使用DOCTYPE是应确保让其置于HTML的顶端,如果有任何字符在它前面,会导致IE9或更早期的浏览器触发怪异模式。

有两种类型:
1)标准类型。浏览器以W3C标准来解析文档,浏览器会以最高标准来解析文档
2)怪异类型。在解析文档时,浏览器会采用向后兼容的方式来解析。

  1. script标签
    在写JS代码时,肯定是会用到这个标签的,但我们通常用的是不带任何属性的script标签。其实,它还有两个属性,分别是deferasync。不同的属性,浏览器会采用的不同的方式来加载和执行JS脚本。

1)不带任何属性
script标签不带任何属性时,当浏览器识别到它时会暂停文档的解析,开始加载script指向的JS代码,当加载完毕后,接着开始执行,当执行完毕后才会接着解析剩下的文档。

2)带defer属性
当script标签带有defer属性时,即<script defer>,JS代码的加载是异步的。就是说,JS代码的加载不影响DOM文档的解析,当文档解析完毕后,才会执行JS代码。

3)带async属性
JS代码的加载也是异步的,与defer不同的是,在加载完JS代码后立即执行,执行结束会再继续解析文档。

下面这张图可以直观地看出三者之前的区别。图中,青色部分是文档的解析,蓝色部分是JS脚本的加载,红色部分是JS脚本的执行。


script不同属性之间的区别
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容