为什么引用CSS的link标签放在头部，引用JS的script标签放在body结束标签之前？
前言
link标签和script标签的引用位置
一、link标签是什么？
html，link标签的定义和用法：link是HTML语言中的一个标签。用链接(link)可以建立和外部文件的链接。
标签定义文档与外部资源的关系。 标签最常见的用途是链接样式表。html的link标签是用于当前文档引用外部文档用的，rel属性用于设置对象和链接目的间的关系。
rel是relationship的英文缩写；stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思。
rel="stylesheet"描述了当前页面与href所指定文档的关系。即说明href连接的文档是一个样式表。
<link rel="stylesheet"href="style.css"type="text/css"/>
HTML标签实例：
链接一个外部样式表：
<head>
<link rel="stylesheet"type="text/css"href="theme.css"/>
</head>
对于动态网站来说，出现很多重复的网页可以访问到相同的内容是很正常的。
二、script标签是什么？
script 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
三、link标签和script标签的引用位置
-
link标签放在head标签中
用户访问网站时，代码是从上往下解析的，正常展示页面内容的样式，提高用户体验
放在 html 结构底部时，加载页面会出现 html 结构混乱的情况
-
script标签放在body结束标签之前
JS脚本在下载和执行期间会阻止 html 解析
把 script 标签放在底部，保证 html和css 首先完成解析之后再加载 JS 脚本
script 标签加上 defer 属性时，可以放在 head 标签中 （async）
<script defer> </script>
总结
以上就是为什么引用CSS的link标签放在头部，引用JS的script标签放在body结束标签之前的全部内容了。
扫一扫
631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
