Appearance
HTML + CSS 高频面试题
1. HTML 核心
什么是 HTML 语义化标签？常用语义化标签有哪些？好处是什么？
1. 什么是语义化标签
简单说：标签本身就表达标签内容的含义，而不是只看样式。
过去大量使用 <div>、<span>，它们是无语义的通用容器，只用来做布局，浏览器、机器不知道这块内容是标题、导航、还是页脚。
语义化标签 = 让标签告诉浏览器 / 搜索引擎：这块是什么类型的内容，不改变默认样式，改变的是含义。
2. 常用语义化标签
html
<!-- 页面头部 -->
<header></header>
<!-- 导航区域 -->
<nav></nav>
<!-- 独立完整的内容块，比如一篇文章、一条帖子 -->
<article></article>
<!-- 内容区块，主题相关的一组内容 -->
<section></section>
<!-- 侧边栏、附属补充内容 -->
<aside></aside>
<!-- 页面底部 -->
<footer></footer>
<!-- 主内容，一个页面最好只出现一次 -->
<main></main>
<!-- 标题 h1~h6 本身就是语义标签 -->
<h1></h1>
<!-- ~ -->
<h6></h6>
<!-- 段落 -->
<p></p>
<!-- 列表 -->
<ul></ul>
<ol></ol>
<li></li>
<!-- 引用 -->
<blockquote></blockquote>
<!-- 强调文本 -->
<em></em> <strong></strong>
<!-- 时间日期 -->
<time></time>
<!-- 媒体 -->
<video></video>
<audio></audio>
<!-- 图 + 图说明 -->
<figure>
<img />
<figcaption>图片描述</figcaption>
</figure>对比：
- ❌
<div class="header">只有 class，标签本身没有含义 - ✅
<header>标签本身就代表页面头部
3. 使用语义化的好处
对搜索引擎 SEO 友好
搜索引擎爬虫可以识别页面结构，分清哪里是导航、正文、页脚，利于爬虫抓取分析页面。
无障碍阅读（屏幕阅读器）
给视障用户使用的读屏软件可以识别语义标签，快速导航到导航、主内容、页脚，提升残障用户体验。如果全是 div，读屏软件无法区分内容区域。
代码可读性、可维护性提升
看标签就能看懂页面结构，不用看 class 类名就能知道这块是导航、侧边栏，多人协作更友好。
利于浏览器解析
浏览器更好理解文档结构，有利于浏览器的解析渲染。
注意
语义化不等于不用 div。布局嵌套依旧大量使用 div，只是有明确业务含义的区域优先使用对应语义标签。
4. 面试口头描述
是什么
语义化标签就是让标签本身带上内容含义，而不是只靠样式或 class 来表达这块是什么。
常用有哪些
常见如：header、footer、main、nav、section、article、aside、h1~h6、p，以及 video、audio 等。
有什么好处
- SEO：爬虫更容易识别导航、正文、页脚等结构，利于抓取和分析
- 可维护性：开发看标签就能懂页面结构，不必依赖 class 命名
- 浏览器解析：语义结构更清晰，有利于浏览器理解并渲染文档
- 业务方面：业务如果有朗读、读屏、文本提取、辅助阅读类需求，语义化标签可以辅助设备识别内容层级。也更方便程序识别有效内容，过滤掉导航、页脚等无关模块。如果全部使用 div 的页面，机器只能读取全部 DOM，无法区分哪些是真正的主体内容。
H5 新增特性有哪些？
H5新增了有语义标签、表单增强、多媒体、画布图形、存储、API、拖拽等。
1. 语义化标签
header、nav、main、article、section、aside、footer、time、figure 等，提升页面结构可读性与无障碍体验。
2. 表单增强
- 新类型：
email、tel、url、number、range、date、time、color - 新属性：
placeholder、required、autofocus、pattern（正则校验）、multiple
3. 多媒体标签
<video> 视频、<audio> 音频，不再依赖 Flash 播放音视频。
4. 图形绘制
<canvas>：用 JS 绘制，做图表、游戏、动画<svg>：矢量图形
5. 本地存储
localStorage：持久化本地存储sessionStorage：会话级存储
注意
cookie 不属于 H5 新增，更早就有。
6. 新 Web API（高频）
- File API：文件读取、上传预览（
FileReader） - 拖拽 API（Drag & Drop）：拖拽相关事件
- Geolocation API：获取设备地理位置
- WebWorker：后台子线程，缓解 JS 单线程阻塞
- WebSocket：长连接，双向实时通信
7. 其他新增
data-*自定义属性，存业务自定义数据<details>、<summary>：折叠展开
8. 面试口头描述
H5新增了很多东西像语义化标签(header、footer)、多媒体标签(video、audio)、图形绘制(canvas、svg)、表单增强、浏览器存储、API(拖拽/上传)、还有data-*这种自定义属性。