前端面试必备：HTML语义化、Localstorage与Cookie、CSS盒模型解析

"前端常见面试题总结，包括HTML语义化、Localstorage、session和Cookie的区别、CSS中的盒子模型及居中方法等知识点" 在前端开发中，掌握这些基础但重要的概念是至关必要的。让我们逐一深入探讨： 1. **HTML语义化** HTML语义化是指使用恰当的HTML标签来表示网页内容的结构和意义，而非仅仅关注视觉表现。这样做的好处包括： - 用户体验提升：即使没有样式，用户也能通过浏览器的默认样式理解页面结构。 - SEO优化：搜索引擎能够更好地解析和索引具有语义化的HTML，提高搜索排名。 - 辅助技术友好：对屏幕阅读器等辅助技术友好，方便残障人士访问。 - 开发维护简便：提高代码可读性和可维护性，与CSS3的结合更加紧密。 新的HTML5标签如<header>, <nav>, <main>, <article>, <aside>, 和<footer>等，就是为了增强语义表达。 2. **Localstorage、sessionStorage和Cookie的区别** - **Localstorage**：数据在浏览器关闭后仍然保留，直到被清除或达到其最大存储限制（通常是5MB）。它主要用于长期存储用户数据，但不会自动发送回服务器。 - **SessionStorage**：与Localstorage类似，但数据仅在当前会话期间有效，浏览器关闭后数据将被删除。适合存储短暂信息，如页面间的临时状态。 - **Cookie**：由服务器生成，可以在客户端和服务器之间传递，可以设置过期时间。通常限制为4KB，每次请求都会携带在HTTP头中，大量Cookie会影响性能。 3. **CSS盒子模型** 盒子模型是CSS布局的核心概念，分为两种： - **标准盒模型（W3C模型）**：元素的总宽度=内容宽度 + border + padding + margin。content-box是默认设置。 - **怪异盒模型（IE模型）**：元素的总宽度=内容宽度 + border + padding + margin，其中内容宽度已经包含了border和padding。 CSS属性`box-sizing`用于切换这两种模型，设置为`border-box`时，元素的width和height会包含border和padding。 4. **盒子水平垂直居中** CSS提供了多种方法实现元素的居中对齐： - `position: absolute`配合`transform`：设置元素的top, left为50%，然后使用负margin使其居中。 - `position: relative`配合`margin: auto`：适用于已知宽度的元素，设置左右或上下的margin为auto。 - 使用Flexbox：设置`display: flex`，`justify-content: center`和`align-items: center`可以让子元素在容器中水平垂直居中。 - 使用Grid布局：在CSS Grid中，`place-items: center`可以实现子元素的居中对齐。 了解并熟练掌握这些前端基础知识，将有助于开发者在面试中表现出色，同时也能够在实际项目中游刃有余。