览器缓存究竟是什么？

浏览器缓存（Browser Caching）是为了加速浏览，浏览器在用户磁盘上对请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。它是网站访问统计最难解决的问题之一。为了回收重复阅览网站而产生的资源浪费，而产生的机制。缓存的方式节约了网络的资源，提高了网络的效率。

为什么要清理缓存呢？缓存会带来哪些问题？

部署前端项目以后，你会发现一个问题（为什么必须刷新页面，页面才会更新到最新版本），其实就是因为服务器缓存的问题。缓存会导致你页面样式、图片或脚本等未能及时更新展示。

浏览器自身如何清理缓存呢？

以谷歌浏览器为例：按照下图指示：（也可使用快捷键直接唤起：Ctrl + Shift + Del）

vue项目中如何清理缓存呢?

1.在根目录下index.html的header头中添加一下代码：

2.配置 nginx 不缓存 html

index.html在服务器端可能是有缓存的，需要在服务器nginx上配置不让缓存index.html

名词解释:

no-cache：数据内容不能被缓存, 每次请求都重新访问服务器, 若有max-age（最大缓存期）, 则缓存期间不访问服务器

no-store：不仅不能缓存, 连暂存也不可以(即: 临时文件夹中不能暂存该资源)

以上就是我本次分享的方式，各位同仁们还有什么好的方式可以下方留言，共同学习！

---携手共进，一同进阶！

**实现梯形圆角Tab：打造独特Web界面元素的艺术之旅**

**导语：**

在网页设计中，创新且个性化的UI元素往往能带来出色的视觉体验与用户互动性。本文将以“实现梯形圆角Tab”为主题，详解如何利用CSS3和JavaScript实现这一独特的导航样式，带你领略Web前端艺术的魅力。通过一步步的教程和实战代码，您将学会如何在项目中创造出富有创意的梯形圆角Tab。

## **一、认识梯形圆角Tab**

梯形圆角Tab是一种融合了梯形和圆角矩形特征的导航标签，因其新颖的形状和良好的触感，常被用于网站或应用的页面切换或菜单导航。每个Tab项顶部呈梯形，两侧带有圆角，赋予界面立体感和生动性。

## **二、HTML结构设定**

首先，我们构建基础的HTML结构，为每个Tab项创建一个`<div>`元素。

```html

<div class="tab-container">

<div class="tab-item">Tab 1</div>

<div class="tab-item">Tab 2</div>

<div class="tab-item">Tab 3</div>

</div>

```

## **三、CSS样式设定**

接下来，我们通过CSS3的border-radius、transform属性以及伪元素技术，来实现梯形圆角Tab的样式。

```css

.tab-container {

display: flex;

justify-content: space-between;

}

.tab-item {

background: #ccc;

padding: 1em;

color: white;

position: relative;

cursor: pointer;

z-index: 1;

}

.tab-item::before,

.tab-item::after {

content: '';

position: absolute;

width: 0;

height: 0;

border-style: solid;

}

/* 左侧梯形 */

.tab-item::before {

left: 0;

top: 0;

border-width: 0 calc(50% - 10px) calc(50% - 10px) 0;

border-color: transparent transparent #ccc transparent;

}

/* 右侧梯形 */

.tab-item::after {

right: 0;

top: 0;

border-width: 0 0 calc(50% - 10px) calc(50% - 10px);

border-color: transparent transparent transparent #ccc;

}

/* 圆角 */

.tab-item {

border-radius: 10px 10px 0 0;

}

/* 选中态样式 */

.tab-item.active {

background: #007bff;

}

.tab-item.active::before,

.tab-item.active::after {

border-bottom-color: #007bff;

}

```

## **四、JavaScript交互**

为了让Tab具备切换功能，我们可以为每个Tab项添加JavaScript事件监听器，实现选中状态的切换。

```javascript

document.querySelectorAll('.tab-item').forEach(tab => {

tab.addEventListener('click', function() {

this.classList.add('active');

this.parentNode.querySelectorAll('.tab-item').forEach(otherTab => {

if (otherTab !== this) {

otherTab.classList.remove('active');

}

});

});

});

```

## **五、应用场景与拓展**

梯形圆角Tab不仅适用于常规的导航栏，还可应用于各种创新交互设计中，如产品选项卡、折叠面板等。通过修改CSS样式，您可以轻松调整梯形的角度、颜色以及圆角大小，以适应不同的设计风格。

总结来说，通过巧妙运用CSS3的高级特性，我们成功地创建了一组美观且实用的梯形圆角Tab。这个过程不仅锻炼了我们的前端技术功底，也启发了我们去发掘更多可能的Web设计形态。在实际项目中，这类富有创意的UI元素将极大地提升用户体验，从而让你的网站或应用脱颖而出。

、html页面会缓存吗？

单纯的html页面不会缓存，htm是一种标记语言，用来描述和标记的，不能实现缓存。html里面的JavaScript代码是当这个html页面加载时浏览器解释执行，也不可以实现数据缓存。

二、html 页面怎么对缓存进行设置

根据服务器系统环节的不同设置方法不一样

1、在Apache环境下

可以通过在.htaccess文件中添加下面的代码，设置图片的HTTP缓存和有效期（需要开启apache的headers模块支持）：

其中max-age后面这个数字就是设置的缓存有效期（以秒为单位），比如上面的代码设置了网站的图片使用为期一年（秒）的HTTP缓存。

2、在Nginx下

可以通过修改nginx.conf配置文件，来修改缓存设置：

location~*\.(flv|gif|jpg|jpeg|png|ico|swf)${;access_logoff;break;}

注意：同样的方法，可以给js和css文件设置缓存。

html缓存:html5 应用程序缓存和浏览器缓存有什么区别

应用程序缓存是会预加载的，保证齐全地供应和保存。浏览器缓存没有这些控制，不能作为程序缓存使用。不幸地，应用程序缓存过於简单，导致效率不彰，预期将会被ServiceWorker取代。