前端面试必备：HTML5语义标签与浏览器存储

"前端面试题，包括HTML5的语义化标签、HTML5浏览器端存储方式及区别，以及CSS中的盒子模型概念和设置" 在前端面试中，掌握基本的HTML5和CSS知识是非常重要的。HTML5引入了一系列新的语义化标签，旨在提高网页的可读性和可访问性。以下是一些主要的语义化标签： 1. `<header>`: 表示页眉，常包含网站标志、主导航、全站链接以及搜索框。 2. `<nav>`: 用于标记导航链接，通常用于重要的链接群。 3. `<main>`: 定义页面主要内容，每个页面只能有一个。 4. `<article>`: 包含独立的内容，可以脱离上下文理解。 5. `<section>`: 定义文档中的区段，如章节、页眉或页脚。 6. `<aside>`: 用于放置与主要内容相关的辅助内容，如侧边栏、广告或相关链接。 7. `<footer>`: 表示页脚，当其父元素为`body`时，表示整个页面的页脚。 8. `<audio>` 和 `<video>`: 支持音频和视频内容的嵌入。 HTML5浏览器端存储主要有三种方式： 1. `localStorage`: 数据存储是永久性的，直到用户手动清除，容量通常为5MB，不会随页面关闭而丢失，但只存在于客户端，不与服务器交互。 2. `sessionStorage`: 数据仅在当前会话有效，关闭页面或浏览器后数据会被清除，容量与`localStorage`相同，同样只存在于客户端。 3. `cookie`: 数据的生命周期由设定决定，可以跨会话持续存在，直到过期，容量较小，一般为4KB左右，且每次请求都会发送到服务器，可能导致性能问题。 CSS中的盒子模型是布局的基础，包括content（内容）、padding（内边距）、border（边框）和margin（外边距）四部分。盒子模型有两种模式： 1. 标准盒子模型（W3C盒子模型）：内容区域的宽度和高度不受边框和内边距影响，可通过`box-sizing: content-box`设置。 2. 怪异盒子模型（IE盒子模型）：内容区域的宽度和高度包括了边框和内边距，可通过`box-sizing: border-box`设置。 在标准模式下，添加的padding和border不会改变元素的总尺寸，而是在content的基础上增加；而在怪异模式中，元素的总尺寸会根据padding和border进行调整。理解这两种模式对于布局和响应式设计至关重要。