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 替代）。

核心区别：存储周期、容量、是否随请求发送、共享范围。