20道HTML相关前端面试题及答案
20道HTML相关前端面试题及答案
HTML 相关面试题及答案
-
什么是 HTML？它的全称是什么？
HTML 是超文本标记语言（HyperText Markup Language），是用于创建网页的标准标记语言。它通过标签描述网页的结构和内容，如文本、图像、链接等，浏览器会解析这些标签并展示为可视化页面。
-
HTML5 相比 HTML4 有哪些主要改进？
-
新增语义化标签（如
<header>、<article>），提升代码可读性和 SEO。 -
引入原生多媒体支持（
<video>、<audio>），无需依赖插件。 -
新增 Canvas 绘图、SVG 矢量图支持。
-
提供本地存储（LocalStorage、SessionStorage）和离线应用（Service Worker）能力。
-
简化 DOCTYPE 声明（
<!DOCTYPE html>），去除过时标签（如<font>）。
-
什么是元标签（meta tag）？常见的 meta 标签有哪些作用？
元标签是位于
<head>中的辅助标签，用于提供页面的元数据（如描述、关键词、编码等），不直接显示在页面上。常见作用：
①charset="UTF-8"：指定字符编码；
②name="viewport"：控制移动端页面缩放（如content="width=device-width, initial-scale=1.0"）；
③name="description"：提供页面描述（用于搜索引擎）；
④http-equiv="refresh"：自动刷新页面或跳转。 -
HTML 中的注释语法是什么？注释有什么作用？
注释语法：
<!-- 注释内容 -->，浏览器会忽略注释内容。作用：
① 解释代码逻辑，方便开发和维护；
② 临时隐藏代码（调试时）；
③ 不影响页面渲染，不被用户看到。 -
什么是表单的 enctype 属性？它有哪些取值及用途？
enctype用于指定表单数据提交时的编码类型，默认值为application/x-www-form-urlencoded。取值及用途：
①application/x-www-form-urlencoded：普通表单数据（文本）编码；
②multipart/form-data：用于上传文件（必须配合method="post"）；
③text/plain：纯文本编码，特殊字符不转义（极少使用）。 -
<div>和<span>的区别是什么？分别适用于什么场景？
-
<div>：块级元素，独占一行，可包含块级或行内元素，常用于布局（如划分页面区块）。 -
<span>：行内元素，不独占一行，仅能包含行内元素或文本，常用于包裹局部文本（如设置特定样式）。核心区别：
<div>用于大区块布局，<span>用于文本片段样式调整。
- HTML 中的列表有哪几种类型？分别用什么标签定义？
-
无序列表：项目前带符号（如圆点），用
<ul>定义，子项为<li>。 -
有序列表：项目前带编号（如 1、2、3），用
<ol>定义，子项为<li>，可通过type属性指定编号类型（如字母、罗马数字）。 -
定义列表：包含术语和解释，用
<dl>定义，术语为<dt>，解释为<dd>（如字典条目）。
-
什么是
<label>标签？它的作用是什么？<label>用于关联表单控件（如<input>、<select>），点击<label>时会触发关联控件的交互（如聚焦输入框、选中复选框）。关联方式：
① 通过for属性绑定控件的id（如<label for="username">用户名</label><input id="username">）；
② 将控件嵌套在<label>内部（如<label>同意 <input type="checkbox"></label>）。 -
HTML 中的
<img>标签有哪些重要属性？alt属性的作用是什么？重要属性：
①src：指定图片路径；
②alt：图片加载失败时显示的替代文本；
③width/height：设置图片尺寸（建议只设置一个，保持比例）；
④loading="lazy"：图片懒加载。alt的作用：
① 提升可访问性（屏幕阅读器读取）；
② 图片加载失败时提示内容；
③ 帮助搜索引擎理解图片内容。 -
什么是
<a>标签的target属性？它有哪些取值？target用于指定链接打开的位置，常见取值：
①_self：在当前窗口打开（默认）；
②_blank：在新窗口打开（建议配合rel="noopener noreferrer"提升安全性）；
③_parent：在父框架打开；
④_top：在顶层窗口打开；
⑤ 框架名称：在指定框架打开。 -
HTML5 的
<canvas>和<svg>有什么共同点和区别？共同点：均用于绘制图形。
区别：
-
绘制方式：
<canvas>通过 JavaScript 动态绘制像素，<svg>通过 XML 标签定义矢量图形。 -
缩放效果：
<canvas>放大后失真，<svg>放大不失真。 -
事件支持：
<canvas>需手动实现元素事件，<svg>标签可直接绑定事件。 -
适用场景：
<canvas>适合复杂动画、游戏；<svg>适合图标、图表。
-
什么是语义化标签？为什么要使用语义化标签？
语义化标签是指具有明确含义的标签（如
<nav>表示导航、<footer>表示页脚），而非通用的<div>。原因：
① 提升代码可读性和可维护性；
② 帮助搜索引擎解析页面结构（优化 SEO）；
③ 便于屏幕阅读器等辅助设备识别内容（提升无障碍性）。 -
HTML 中的
<form>标签的method属性有什么作用？get和post有什么区别？method指定表单数据的提交方式：
-
get：数据通过 URL 参数传递（可见，有长度限制），适合查询、搜索等非敏感操作，可被缓存。 -
post：数据在请求体中传递（不可见，无长度限制），适合提交表单、上传文件等敏感操作，不可被缓存。
-
什么是 HTML5 的
data-*属性？它的作用是什么？data-*是自定义数据属性，用于在 HTML 元素中存储额外数据（*为自定义名称，如data-id、data-user）。作用：
① 存储与元素相关的元数据（如<div data-id="123" data-name="商品">）；
② 通过 JavaScript 的dataset属性读取（如element.dataset.id获取123），避免使用class或id存储数据。 -
HTML 中的
<table>标签相关的结构标签有哪些？它们的作用是什么？结构标签：
①<thead>：表格头部（如列标题）；
②<tbody>：表格主体（数据行）；
③<tfoot>：表格底部（如汇总信息）；
④<th>：表头单元格（默认加粗居中）；
⑤<tr>：表格行；
⑥<td>：表格数据单元格。作用：明确表格结构，提升可读性和无障碍性，便于 CSS 样式定位。
-
什么是
<iframe>标签？使用时需要注意哪些问题？<iframe>用于在当前页面嵌入另一个页面（如嵌套第三方内容）。注意问题：
① 影响页面加载速度（阻塞onload事件）；
② 搜索引擎难以抓取内容（不利于 SEO）；
③ 可能引发安全风险（如第三方页面注入恶意代码）；
④ 需设置width/height控制尺寸，避免布局错乱。 -
HTML5 新增的表单输入类型有哪些？举例说明其作用。
新增类型：
①email：验证邮箱格式；
②tel：适合输入电话号码（移动端弹出数字键盘）；
③url：验证 URL 格式；
④number：仅允许输入数字（带上下箭头）；
⑤date：日期选择器；
⑥range：滑块控件（用于选择范围值）；
⑦color：颜色选择器。作用：提升用户体验（专用输入控件），减少前端验证代码。
-
什么是 HTML 的 DOCTYPE？它的作用是什么？缺失会有什么影响？
DOCTYPE（文档类型声明）位于 HTML 文档第一行，用于告诉浏览器当前文档遵循的 HTML 规范（如
<!DOCTYPE html>表示 HTML5）。作用：确保浏览器以标准模式（Standard Mode）解析页面，避免进入怪异模式（Quirks Mode）。
缺失影响：浏览器可能采用旧的渲染规则，导致页面布局错乱（如盒模型计算方式不同）。
-
HTML 中的块级元素和行内元素有哪些特性？如何相互转换？
块级元素特性：
① 独占一行；
② 可设置width、height、margin、padding；
③ 可包含块级或行内元素（如<div>、<p>）。行内元素特性：① 不独占一行；
②width、height无效，margin和padding仅水平方向有效；
③ 仅能包含行内元素或文本（如<span>、<a>）。转换方式：通过 CSS 的
display属性，如display: block（行内→块级）、display: inline（块级→行内）、display: inline-block（兼具两者特性）。 -
HTML5 的离线存储有哪些方式？它们的区别是什么？
主要方式：
① LocalStorage：永久存储（除非手动删除），容量 5-10MB，同源页面共享；
② SessionStorage：会话级存储（关闭标签页消失），容量 5-10MB，仅当前标签页可见；
③ Cookie：容量 4KB 左右，可设置过期时间，随 HTTP 请求发送到服务器；④ Application Cache（已废弃，被 Service Worker 替代）。核心区别：存储周期、容量、是否随请求发送、共享范围。