html的head里面的link 以及script连接的路径中有 ？以及以后的内容的含义。

最新推荐文章于 2022-10-23 17:33:00 发布
原创 最新推荐文章于 2022-10-23 17:33:00 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#HTML

本文介绍了一种通过在文件URL后添加版本号或日期参数的方法来解决浏览器缓存导致的资源加载不更新的问题。这种方法简单有效，适用于各种类型的前端资源如JS和CSS文件。


xxxx/js/common.js?v=201309091720

xxxx/css/base.css?v=201309091720
这里的  ?以及之后的字符，只是为了在更新脚本的时候强制浏览器下载新版本。一应对 浏览器的缓存问题。
这里的 ?的字符串可以才随便命名，不过一般用js的版本号转化或用日期转化，这样写更容易理解。
CSS 的 link 标签放在 head 标签之间的作用
TianXuab的博客
11-11 2145
当我们在开发网页时，经常会遇到关于CSS文件引入位置的讨论。有些人喜欢将CSS文件的链接放在HTML文件的底部，而另一些人则认为最好将CSS链接放在标签之间。那么，究竟应该将CSS的link标签放在head标签之间的原因是什么呢？让我们来深入探讨一下。
前端入门知识分享：HTML 页面中 head 标签之间的代码详解
uu0216的博客
07-31 1639
head元素内的内容不会直接显示在网页上，但会影响网页的渲染和功能。 为了提高页面加载速度，通常建议将CSS样式表放在 使用meta标签可以优化搜索引擎对网页的索引和理解。
html语言head里面的link示例,Html之head部分详解(示例代码)
weixin_33514300的博客
06-09 1436
随便打开一个网页，右击查看网页源代码，总能看到…封闭标签，在里面通常会包含5类标签：title、link、script、meta、style。这5类标签看着都挺熟悉的哈，那么在web前端技术中具体要怎么使用，规则是什么，在我学习的时侯，我做了笔记整理，希望有帮助。1. title 标签title是一个封闭标签，在head中是成对出现。也就是…。在打开一个网页时，网页上方的文字就是title部分。T...
html head <link>标签
tfy1332的专栏
04-03 1383
html网页中head之link标签 什么是link标签? link标签通常放置在一个网页的头部标签head标签内的用于链接外部css文件、链接收藏夹图标（favicon.ico）， 标签最常见的用途是链接外部样式表，外部资源。 link引人外部CSS与引人ico网站图标截图 link实例 link href="img/divcss5.css" rel="stylesheet
网页head头部meta和link标签使用大全
weixin_34323858的博客
07-17 320
　　 <!-- 声明文档使用的字符编码 --> <meta charset="utf-8"> <!-- 声明文档的兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><!-- 指示ie以目前可用的最高模式显示内容 --&g...
Dom-manipulation-practice-simple-:这只是在学习如何使用外部JS文件来操作DOM，以及如何使用HTML中的script标签进行链接。
04-02
在HTML中引入外部JS文件通常有两种方式：通过`<script>`标签和使用`<link>`标签。本实践项目中，我们主要关注`<script>`标签。例如，可以在`<head>`或`<body>`的底部添加如下代码来引入名为`script.js`的外部JS文件...
SpringBoot中关于static和templates的注意事项以及webjars的配置
08-26
本文将详细介绍Spring Boot中关于`static`和`templates`目录的注意事项，以及如何配置`webjars`来管理第三方库。 1. **静态资源处理**：Spring Boot默认会自动扫描并处理位于`src/main/resources/static`目录下的...
Java获取此次请求URL以及服务器根路径的方法
09-03
在Java Web开发中，我们经常需要获取到当前请求的URL以及服务器的根路径，以便于构建动态的页面链接或者处理请求。本篇文章将详细介绍如何在Java中实现这一目标。 首先，我们来理解一下请求URL（Request URL）和...
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
HTML中的link的简单介绍和用法
datouniao1的博客
08-07 5266
HTML中每一个标签都有一定的作用，link在<head>...<head>之间也有着非常重要的作用。我一直认为head之间的内容是对整片文档其作用的，其实说优化还是在head之间，那么外部的样式自然是优化网页的一种理想的选择。但是怎样将外部的样式优化当前网页中来，这个link就起这一个桥梁性的作用。我们link链接外部的资源，主要用于对网页的的样式进行控制的一些列的文档的链接。
HTML中的link标签
weixin_56462592的博客
10-23 3853
html中的link标签
有关Html中<a>、<link>和<script>标签中相对路径与绝对路径的问题总结
横练技术
09-23 3万+
一、HTML 相对路径和绝对路径区别分析 HTML初学者会经常遇到这样一个问题，如何正确引用一个文件。比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)？怎样在一个网页中插入一张图片。 如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。  为了避免这些错误，正确地
在<HEAD>内使用<LINK>标签
a2512813304的专栏
05-14 1072
一、内部规则 - 直接写在网页文件内部的样式   1.将以下代码插入在与之间可设定此页的默认的样式    body{color=red;font-size=9pt} -->  2.在HTML行中加入样式规则  如：   Amaze your friends! 二、外部规则 - 独立的样式表文件
动态创建 script 链接 插入到 head标签里面
业余前端的职业经历
09-02 4758
工作中还是 经常会碰到这样的需求呢 我就分别从原生 和 jquery 版本进行说明 1.原生 let head=document.querySelector('head'); // 或者 是 let head=document.getElementByTagName('head')[0]; let script=document.createElement('script'); script.type="text/javascript"; script.innerHTML=‘alert("hel
nuxt-link 跳转目录问题
xuelang532777032的博客
11-19 1万+
目录结构如下， 如果你要在inde.vue里面做个 nuxt-link  跳转参数到  test文件下面的  _type ，那下面我就来分享下 方法，就一句话 1“-”就是 分割符了 好，点不点赞看你了，或者 可以加入 我的 群153181864  前端交流群 ，绝对原创，转载请附上 本微博链接。
Vue-meta动态管理vue项目HTML中head头部信息（可传变量）
qq_33991007的博客
03-06 2488
1、安装 npm install --save vue-meta plugin 2、引入main.js中 3、在vue文件中进行如下配置 重点注意：其中metaInfo写为一个方法，这样可以接收变量，如果不写为方法的话，无法读取data及computed中的信息。 ...
html中link连接css样式不能打包到dist文件中
最新发布
07-25
<think>我们正在处理一个关于在HTML中使用link标签引入CSS样式，但在打包后（dist目录）这些样式未正确包含的问题。根据用户描述，问题出现在使用某种打包工具（可能是Webpack、Vite等）时，静态资源路径处理不当。 参考引用[1]和引用[2]的内容，我们可以得到一些线索： 引用[1]提到：如果打包前本地访问正常，打包后访问dist中的index.html发现样式和图标丢失，这可能是因为打包的dist文件默认不是静态的，包括了server服务。同时，在build过程中出现了building client + server bundles...，这暗示可能是Nuxt.js（一个基于Vue的框架）项目。 引用[2]给出了一个nuxt.config.js的配置示例，其中展示了如何配置head中的link标签（如favicon）和script标签（引入js），以及如何在css数组中引入样式。 因此，我们推断用户可能在使用Nuxt.js。在Nuxt.js中，通常不建议直接在HTML文件中使用link标签引入CSS，而是通过配置文件或模块化的方式引入。 解决方案： 1. 将CSS文件放置在合适的目录（如static或assets），然后在nuxt.config.js中配置css数组。 2. 对于放在static目录下的资源，可以直接通过绝对路径引用（注意：static目录下的文件会直接映射到根目录）。 3. 避免在HTML文件中直接写link标签，而是通过Nuxt的配置来引入。 具体步骤： 步骤1：将CSS文件放入项目中的static/css目录（如果没有则创建）。例如，将你的reset.css文件放在static/css/reset.css。 步骤2：在nuxt.config.js的css数组中添加该CSS文件的路径。注意，这里使用~static/作为别名是不正确的，因为static目录下的文件在构建后会被复制到dist目录的根目录下，所以我们可以直接使用绝对路径（以/开头）或者使用~assets/（如果放在assets目录下）但需要配合loader。 但是注意引用[2]中的示例： css: [ '@/static/css/reset.css', ... ] 这里使用了@/static，而@在Nuxt中默认是srcDir（通常是项目根目录）。但官方推荐：放在assets目录中的样式文件会被webpack处理（如压缩、合并等），而放在static目录中的文件则直接复制，不经过webpack。 因此，如果CSS文件不需要预处理（如Sass编译），可以放在static/css中，然后在nuxt.config.js中这样引入： css: [ '/css/reset.css' ] 注意：这里使用绝对路径，因为static目录下的文件在服务器根目录。 步骤3：如果CSS文件需要预处理（比如是Sass文件），则应放在assets目录中，然后使用~assets路径： css: [ '~assets/css/main.scss' ] 步骤4：如果一定要在head中通过link标签引入（比如CDN资源），则可以在nuxt.config.js的head.link数组中添加： head: { link: [ { rel: 'stylesheet', href: '/css/reset.css' } // 对于static/css/reset.css，这样引用 ] } 但是注意：这种方式引入的CSS文件不会被webpack处理，所以如果文件在static目录下，这样写是可行的。 步骤5：重新运行打包命令（如npm run build），然后检查dist目录中是否有对应的CSS文件，以及HTML中是否正常引入了。 常见问题： - 路径错误：在开发环境中，可能可以访问到，但生产环境路径不同。确保使用绝对路径（以/开头）来引用static目录下的文件。 - 没有将CSS文件放在正确的目录：static目录用于不需要处理的静态文件，assets目录用于需要webpack处理的文件。 如果用户不是使用Nuxt.js，而是其他构建工具（如Vue CLI或Webpack），那么解决方案会有所不同。但根据引用内容，我们重点讨论Nuxt.js。 因此，针对用户的问题，我们建议： 1. 将CSS文件移动到static/css目录下（例如：static/css/reset.css）。 2. 在nuxt.config.js中，通过head.link引入： head: { link: [ { rel: 'stylesheet', href: '/css/reset.css' } ] } 或者，如果希望多个CSS文件，可以继续在css数组中引入（注意：css数组中的文件会被webpack处理，但static目录下的文件不经过webpack，所以这里用head.link更直接）。 3. 或者，也可以将CSS文件放在assets目录，然后在css数组中引入（这样会经过webpack处理）： css: [ '@/assets/css/reset.css' ] 注意：使用assets目录时，路径别名@表示项目根目录，而assets目录通常位于项目根目录下。 最后，重新构建项目，查看dist目录中是否包含了这些CSS文件，并且HTML中正确链接。 如果问题仍然存在，请检查构建配置中是否对静态资源路径有特殊处理，或者检查服务器配置（如果部署后有问题）。 注意：在Nuxt.js中，静态资源有两种处理方式： - assets: 会被webpack处理，然后通过url-loader等优化（小文件可能转为base64）。 - static: 直接复制到dist目录，不处理。 因此，根据需求选择放置的目录。 相关问题： 1. 在Nuxt.js中，如何处理全局CSS文件？ 2. 如何正确引入第三方CSS库（如Bootstrap）？ 3. 在Nuxt.js中，静态资源（如图片、字体）应该放在assets还是static目录？ 4. 打包后资源路径错误（如出现404）如何调试？</think>### 解决HTML中link标签引入CSS未正确打包到dist的问题 在构建工具（如Webpack、Vite或Nuxt.js）中，HTML通过`<link>`引入的CSS未正确打包到`dist`目录，通常由**静态资源路径处理不当**或**构建配置缺失**导致。以下是系统解决方案： --- ### 根本原因分析 1. **静态资源未正确复制** HTML中直接写`<link href="/css/style.css">`，但构建工具未将`/css/`目录复制到`dist` 2. **路径别名未解析** 使用`@/static/`等别名路径，但构建工具未配置别名解析 3. **CSS未显式声明** 构建工具未在配置中显式声明需处理的CSS文件（如Nuxt的`css:[]`配置） --- ### 解决方案（通用流程） #### 步骤1：检查文件目录结构 确保CSS文件存放在项目**静态资源目录**中： ```bash 项目根目录 ├── static/ # 静态资源目录（Nuxt/Vite） │ └── css/ │ └── style.css ├── public/ # Webpack的静态资源目录 │ └── css/ │ └── style.css ``` #### 步骤2：配置构建工具处理静态资源 根据框架配置静态资源复制规则： - **Nuxt.js** (`nuxt.config.js`) ```javascript export default { // 关键配置：显式声明CSS文件 css: [ '@/static/css/style.css' // 使用别名@指向根目录 ], // 配置head中的link标签（可选） head: { link: [ { rel: 'stylesheet', href: '/css/style.css' // dist中路径为 /_nuxt/css/style.css } ] } } ``` - **Webpack** (`webpack.config.js`) ```javascript const CopyPlugin = require('copy-webpack-plugin'); module.exports = { plugins: [ new CopyPlugin({ patterns: [ { from: "public/css", // 源目录 to: "css" // 输出到dist/css } ] }) ] } ``` - **Vite** (`vite.config.js`) ```javascript import { defineConfig } from 'vite' export default defineConfig({ publicDir: 'static', // 指定静态资源目录 build: { assetsDir: 'css' // 输出到dist/css } }) ``` #### 步骤3：修正HTML中的引用路径 ```html <!-- 正确写法（使用绝对路径） --> <link rel="stylesheet" href="/css/style.css"> <!-- 错误写法（避免相对路径或别名） --> <link rel="stylesheet" href="../static/css/style.css"> <!-- 打包后路径失效 --> ``` #### 步骤4：验证打包结果 构建后检查`dist`目录结构： ```bash dist/ ├── css/ │ └── style.css # 确认CSS已复制 ├── index.html # 检查link标签路径是否为/css/style.css ``` --- ### 调试技巧 1. **查看构建日志** 运行`npm run build`时观察是否有`Copying static/css`类似日志 2. **浏览器检查** 打开`dist/index.html`，按F12查看Network面板中CSS文件的加载状态（404表示路径错误） 3. **路径修正工具** 使用`path.resolve(__dirname, 'static/css')`处理绝对路径[^2] --- ### 关键注意事项 1. **静态资源目录差异** - Nuxt/Vite：默认使用`static/`目录 - Webpack：默认使用`public/`目录 2. **生产环境路径** 部署到服务器时，确保静态资源路径前缀匹配（如Nginx配置`location /css/`） 3. **避免混合引用** 不要同时使用`<link>`标签和框架的`css:[]`配置引入同一文件，可能重复加载 > 通过显式声明CSS文件路径并配置静态资源复制，可确保打包后正确引用[^1][^2]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值