• 为什么引用CSS的link标签放在头部,引用JS的script标签放在body结束标签之前?


    为什么引用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"/>
    
    • 1

    HTML标签实例:

    链接一个外部样式表:

    <head>
      <link rel="stylesheet"type="text/css"href="theme.css"/>
    head>
    
    • 1
    • 2
    • 3

    对于动态网站来说,出现很多重复的网页可以访问到相同的内容是很正常的。

    二、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>
      
      • 1

    总结

    以上就是为什么引用CSS的link标签放在头部,引用JS的script标签放在body结束标签之前的全部内容了。

  • 相关阅读:
    随手笔记-Jackson -> @JsonFormat -> 失真问题解决
    文本词频统计的应用——以微词云平台为例
    metrics server request failed - “403 Forbidden“
    NodeJS 读写文件
    k8s使用rbd作为存储
    java文件查看大小,压缩,文件下载工具类
    动态切换 Spring Boot 打包配置:使用 Maven Profiles 管理 JAR 和 WAR
    Wpf 使用 Prism 实战开发Day04
    LeetCode 第 307 场周赛 复盘
    115 不同的子序列
  • 原文地址:https://blog.csdn.net/weixin_42397937/article/details/125849254