组成的导航链接列表。
2、用
3、将主要内容区块用明确标识，每个独立内容单元（如博客文章、产品卡片）使用，相关但非主体内容（如侧边栏推荐）使用。
二、启用本地存储替代Cookie
localStorage和sessionStorage提供比传统Cookie更大容量（通常5MB）、无网络传输开销、且支持结构化数据存储的能力，适用于用户偏好设置、表单草稿缓存等场景。
1、调用window.localStorage.setItem('theme', 'dark')保存用户选择的主题模式。
2、在页面加载时执行const savedTheme = window.localStorage.getItem('theme')读取值，并动态添加class或修改CSS变量。
3、对敏感操作（如临时登录态），改用sessionStorage.setItem('tempToken', token)，该数据在关闭标签页后自动清除。
三、集成Canvas与SVG实现动态图形渲染
Canvas提供像素级控制能力，适合游戏、数据可视化、图像处理；SVG则以矢量描述图形，缩放不失真且支持CSS与DOM操作，适用于图标系统、交互图表及动画。
1、在HTML中插入，通过getContext('2d')获取绘图上下文并调用fillRect、drawImage等方法绘制帧。
2、将图标资源统一改为内联SVG，例如svg class="icon">，并在中预定义路径数据。
3、为SVG元素绑定事件：document.querySelector('.icon').addEventListener('click', handleIconClick)。
四、使用Fetch API与Service Worker实现离线优先架构
Fetch API提供基于Promise的现代化HTTP请求接口，配合Service Worker可拦截网络请求、缓存关键资源并实现离线访问能力。
1、在主JS文件中注册Service Worker：if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); }。
2、在sw.js中监听install事件，调用caches.open('v1').then(cache => cache.addAll(['/index.html', '/style.css', '/app.js']))预缓存核心资源。
3、在fetch事件中判断请求资源是否存在于缓存：event.respondWith(caches.match(event.req
uest).then(response => response || fetch(event.request)))。
五、启用Web Components构建可复用UI模块
通过Custom Elements、Shadow DOM和HTML Templates三大API，可创建封装样式与行为、不依赖外部框架的原生组件，提升开发效率与维护性。
1、定义类继承HTMLElement，例如class CardComponent extends HTMLElement { connectedCallback() { this.innerHTML = `
`; } }。
2、使用customElements.define('ui-card', CardComponent)注册自定义标签。
3、在HTML中直接使用这是嵌入的卡片内容，其中
