前言
大家好！作为前端初学者，HTML 作为前端入门的基石，看似简单但面试中常被问到 "细节题""原理题"，很多同学容易因为基础不牢丢分。今天整理了 10 道 HTML 高频面试题，覆盖基础概念、语义化、兼容性、实操场景等核心考点，每道题都附标准答案 + 解析 + 记忆技巧，帮你吃透底层逻辑，不仅能应对面试，更能加深对 HTML 的理解～
面试题 1：HTML5 新增了哪些语义化标签？为什么要使用语义化标签？
参考答案
1. 新增语义化标签
<header>（页面 / 区块头部）、<nav>（导航栏）、<main>（页面核心内容）、<article>（独立文章内容）、<section>（文档分区）、<aside>（侧边栏）、<footer>（页面 / 区块底部）、<figure>（图文组合）、<mark>（标记文本）等。
2. 语义化标签的优势
- 对开发者：代码可读性更高，结构清晰，便于团队协作维护；
- 对浏览器 / 搜索引擎：利于 SEO（搜索引擎优化），爬虫能更精准识别页面内容；
- 对无障碍访问：屏幕阅读器能根据标签语义解读内容，提升残障用户体验。
记忆技巧
语义化标签核心是 "见名知意"，记住 "头（header）、导航（nav）、主体（main）、文章（article）、区块（section）、侧边（aside）、脚（footer）" 这 7 个核心标签即可覆盖 80% 考点。
面试题 2：DOCTYPE 的作用是什么？HTML5 的 DOCTYPE 写法是什么？
参考答案
1. DOCTYPE 作用
全称 Document Type（文档类型），用于告诉浏览器当前文档使用的 HTML 版本和 DTD（文档类型定义），让浏览器以对应的渲染模式解析页面，避免出现 "怪异模式"（Quirks Mode）导致页面布局错乱。
2. HTML5 DOCTYPE 写法
<!DOCTYPE html>（HTML5 简化了 DOCTYPE，无需引用 DTD 文件，因为 HTML5 不基于 SGML，只需声明文档类型为 html 即可）
记忆技巧
DOCTYPE 是 "浏览器解析规则的开关"，HTML5 写法极简，记住<！DOCTYPE html>（注意大小写不敏感，但规范写小写）。
面试题 3：src 和 href 的区别是什么？分别用在哪些标签？
参考答案
1. 核心区别
src（source）：替换当前标签内容，浏览器解析到该属性时，会暂停其他资源加载，先加载并执行 src 指向的资源（如 JS 文件、图片），属于 "嵌入资源"；href（hyper reference）：建立关联，浏览器不会暂停解析，只是建立当前文档与目标资源的链接关系，属于 "引用资源"。
2. 应用场景
src：<script src="xxx.js">、<img src="xxx.png">、<iframe src="xxx.html">；href：<link href="xxx.css">、<a href="xxx.html">。
记忆技巧
src="替换"（塞内容进去），href="链接"（只搭桥不替换）。
面试题 4：HTML 中常用的块级元素和行内元素有哪些？区别是什么？
参考答案
1. 常见元素
- 块级元素 ：
<div>、<p>、<h1-h6>、<ul>/<ol>/<li>、<section>、<header>等； - 行内元素 ：
<span>、<a>、<img>、<strong>、<em>、<input>、<label>等。
2. 核心区别
表格
| 特性 | 块级元素 | 行内元素 |
|---|---|---|
| 宽度 | 默认占满父容器 100% | 默认由内容撑开 |
| 高度 | 可手动设置 | 不可手动设置（由内容决定） |
| 换行 | 自动换行 | 不会换行，同行显示 |
| 盒模型 | 可设置 margin/padding（上下左右都生效） | 仅左右 margin/padding 生效，上下不生效 |
| 嵌套 | 可嵌套块级 / 行内元素 | 只能嵌套行内元素（除<a>） |
记忆技巧
块级 ="独占一行的盒子"，行内 ="跟着内容走的文字"。
面试题 5：HTML5 新增的表单控件有哪些？举例说明用途。
参考答案
1. 核心新增控件
type="email"：邮箱输入框，自带邮箱格式验证；type="tel"：电话输入框（移动端唤起数字键盘）；type="url"：网址输入框，自带 URL 格式验证；type="number"：数字输入框，限制仅输入数字；type="date"/"month"/"time"：日期 / 月份 / 时间选择器（原生控件，无需手写 JS）；type="range"：滑块控件（如音量调节）；type="search"：搜索框（输入后带 "清除" 按钮）；placeholder：输入框提示文字（替代传统的 value 提示）；required：标记表单必填项；autocomplete：自动补全（默认 on，可设 off 关闭）。
2. 示例代码
<input type="email" placeholder="请输入邮箱" required>
<input type="date" name="birthday">
<input type="range" min="0" max="100" value="50">记忆技巧
按 "输入类型" 分类记：邮箱 / 电话 / 网址 / 数字（基础输入）、日期 / 时间（时间选择）、range/search（特殊交互），再记 2 个属性：placeholder（提示）、required（必填）。
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。