前端面试题：HTML / CSS / HTTP

1. 请说明 HTML 语义化的重要性。

• 语义化标签帮助浏览器、搜索引擎和辅助设备理解页面结构。
• 提高可访问性、SEO 和可维护性。
• 例如使用 <header>、<main>、<article>、<section> 替代大量 <div>。

2. HTML5 新特性中有哪些表单和多媒体相关的标签？

• 表单：<input type="date">、<input type="email">、<datalist>、<output>。
• 多媒体：<video>、<audio>、<source>、<track>。

3. CSS 选择器优先级如何计算？

• 内联样式最高：style="..."。
• ID 选择器权重高于类、属性、伪类选择器。
• 类、属性、伪类选择器权重高于标签和伪元素选择器。
• 继承和 !important 也会影响最终样式。

4. CSS 盒模型包括哪些部分？

• content：内容区域。

• padding：内边距。

• border：边框。

• margin：外边距。

• box-sizing: border-box; 会把 border 和 padding 计算进宽高。

5. Flexbox 与 Grid 有何区别？

• Flexbox 适合一维布局（行或列）。
• Grid 适合二维布局（行和列结合）。
• Flexbox 常用于导航、列表排列；Grid 常用于页面整体布局。

6. HTTP 常见方法与语义分别是什么？

• GET：读取资源。
• POST：创建资源或提交数据。
• PUT：更新资源（幂等）。
• PATCH：部分更新资源。
• DELETE：删除资源。
• HEAD：只获取响应头。

7. HTTP 状态码的常见分组是什么？

• 1xx：信息性响应。
• 2xx：成功。
• 3xx：重定向。
• 4xx：客户端错误。
• 5xx：服务器错误。

常见状态码：200、301、302、304、400、401、403、404、500。

8. 浏览器请求一个页面时，关键 HTTP 头有哪些？

• 请求头：Host、User-Agent、Accept、Accept-Encoding、Cookie、Referer。
• 响应头：Content-Type、Content-Length、Cache-Control、ETag、Set-Cookie、Content-Security-Policy。

9. CORS 是什么？为什么会出现跨域问题？

• 同源策略限制浏览器从不同源加载数据。
• CORS 通过服务器响应头 Access-Control-Allow-Origin 等来放行跨域请求。
• 简单请求与预检请求机制决定不同类型请求是否允许。

10. HTTP/2 和 HTTP/1.1 的主要区别是什么？

• HTTP/2 支持二进制分帧、多路复用、头部压缩和服务器推送。
• HTTP/1.1 每个连接默认同时只能发送一个请求，容易出现队头阻塞。
• HTTP/2 在一个连接上可并发多个请求/响应，提高性能。

11. 什么是预加载与懒加载？

• 预加载（<link rel="preload">）提前加载关键资源。
• 懒加载（loading="lazy" 或 JS 逻辑）延迟加载非关键资源，提升首屏速度。

12. 如何让一个页面具备更好的可访问性？

• 使用语义化标签。
• 为图片添加 alt。
• 使用 aria-* 属性辅助屏幕阅读器。
• 确保键盘导航可用。
• 保持颜色对比度。