HTML中css和js链接中的版本号(刷新缓存)

在HTML中，我们通常使用link标签和script标签链接CSS文件和JS文件。在项目开发中，我们可能会经常修改CSS或JS文件内容，但是浏览器会默认缓存这些文件，导致新的修改可能无法立即生效。这时，我们可以在链接CSS和JS文件时增加版本号参数，从而强制浏览器重新加载文件，达到刷新缓存的效果。

下面是具体步骤：

1. 在CSS或JS文件名称后面加入版本号参数

在链接CSS或JS文件时，在文件名称后面加入?参数名=版本号，如下所示：

<!-- 链接CSS文件，版本号为1.0 -->
<link rel="stylesheet" href="style.css?ver=1.0">

<!-- 链接JS文件，版本号为2.0 -->
<script src="app.js?ver=2.0"></script>

1. 修改版本号可以刷新文件缓存

当需要更新文件内容时，只需要将版本号更新即可，如将CSS文件的版本号从1.0改为1.1，或将JS文件的版本号从2.0改为2.1。这样，浏览器会重新加载文件，实现缓存刷新。

示例1：CSS文件缓存刷新

假设我们有一个网站，样式表名称为style.css，在样式表中我们定义了背景颜色为黄色。我们希望将背景颜色修改为绿色。首先，我们需要修改样式表文件，并将版本号从1.0改为1.1。

/* 修改前 */
body {
    background-color: yellow;
}

/* 修改后 */
body {
    background-color: green;
}

然后，在HTML文件中，将样式表链接修改为：

<link rel="stylesheet" href="style.css?ver=1.1">

这样，浏览器会重新加载样式表，并展示修改后的效果。

示例2：JS文件缓存刷新

假设我们有一个网站，JS文件名称为app.js，在JS文件中我们定义了一个弹窗，点击后弹出提示信息。我们需要将提示信息修改为其他内容。首先，我们需要修改JS文件，并将版本号从2.0改为2.1。

// 修改前
function openAlert() {
    alert("Hello World!");
}

// 修改后
function openAlert() {
    alert("Welcome to my website!");
}

然后，在HTML文件中，将JS文件链接修改为：

<script src="app.js?ver=2.1"></script>

这样，浏览器会重新加载JS文件，并展示修改后的效果。

通过上述步骤，我们可以很容易地实现刷新CSS和JS文件缓存的效果。在实际项目中，我们可以通过构建工具自动化地将版本号写入链接，避免手动修改版本号带来的风险。