HTML面试题

文章目录

• • 一、资源引入与脚本加载
  • • [1. `src` 与 `href` 的区别](#1. src 与 href 的区别)
    • [2. `script` 标签加载机制：`defer` vs `async`](#2. script 标签加载机制：defer vs async)
  • [二、 元数据控制：Meta 标签的应用](#二、 元数据控制：Meta 标签的应用)
  • [三、语义化与 HTML5](#三、语义化与 HTML5)
  • • [1. 结构与语义化](#1. 结构与语义化)
    • [2. 多媒体与表单增强](#2. 多媒体与表单增强)
    • [3. Web 存储与 API](#3. Web 存储与 API)
  • [四、 元素分类](#四、 元素分类)
  • [五、Canvas vs SVG](#五、Canvas vs SVG)

一、资源引入与脚本加载

1. src 与 href 的区别

在引用外部资源时，两者有着本质的语义和行为差异：

属性	含义	行为特征	典型应用
src	Source（资源嵌入）	阻塞解析：会下载并嵌入资源，直到加载、编译、执行完成。	<script>, <img>, <iframe>
href	Hypertext Reference（超链接）	非阻塞：与当前文档并行下载，不影响文档处理。	<a>, <link>

2. script 标签加载机制：defer vs async

不加属性，脚本会阻塞 HTML 解析

• async ：异步下载，下载完成后立即执行（会阻塞 HTML 解析）。适用于独立性强的脚本，如统计代码
• defer ：异步下载，等待 HTML 解析完成后再执行。适用于需要 DOM 结构的脚本，且能保证执行顺序

属性	行为特征	执行顺序	最佳场景
无属性	立即下载并执行，阻塞解析	按 HTML 顺序	极其精简的基础脚本
async	下载完立即执行，可能阻塞解析	不保证顺序（谁快谁先跑）	广告、埋点统计、第三方组件
defer	解析完 HTML 后执行	按源码顺序执行	依赖 DOM 的核心业务逻辑

二、 元数据控制：Meta 标签的应用

meta 标签是网页的"名片"，定义了 SEO、编码、视口等关键属性

• 基础配置 ：<meta charset="UTF-8">（编码）

• SEO 优化 ：keywords 和 description 用于定义关键词与页面描述

• 移动端适配 ：viewport 是响应式开发的关键

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

• 索引控制 ：robots 控制搜索引擎是否检索页面及跟踪链接（如 index,follow）。

三、语义化与 HTML5

HTML5 不仅仅是增加了几个标签，更是赋予了浏览器强大的应用能力

1. 结构与语义化

通过 header, nav, footer, article, section, aside 等标签，让网页结构清晰，利于 SEO 和无障碍阅读

2. 多媒体与表单增强

• 媒体标签 ：audio 和 video 提供了原生的多媒体支持。配合 source 标签，可以实现多格式兼容
• 表单控件 ：新增了 email, url, number, range, color, date 等类型，极大地简化了前端验证逻辑
• 表单属性 ：placeholder (提示), autofocus (自动聚焦), required (必填), pattern (正则校验)

3. Web 存储与 API

• Web Storage ：localStorage（永久存储）与 sessionStorage（会话级存储）

  特性	localStorage	sessionStorage
  生命周期	永久存储，除非手动清理	页面会话结束（关闭标签页）即销毁
  存储容量	约 5MB - 10MB	约 5MB
  作用域	同源的所有窗口共享	仅在当前窗口/标签页有效

• 图形绘制 ：canvas（位图画布）与 SVG（矢量图形）

• 高级能力 ：Geolocation（地理定位）、History API（无刷新跳转）

四、 元素分类

类型	特点	常见标签
块级元素 (Block)	独占一行，可设宽高	div, ul, li, p, h1-h6
行内元素 (Inline)	不换行，宽高由内容撑开	a, span, strong, input
空元素 (Void)	没有内容，无需闭合	br, hr, img, meta, link

块级元素可以通过 display: inline 变为行内元素，行内元素也可以通过 display: block 变为块级元素

五、Canvas vs SVG

在需要动态生成图形时，这两者是完全不同的技术路径：

特性	Canvas (画布)	SVG (矢量图)
渲染模式	位图（依赖分辨率），由脚本驱动绘制	矢量图（不依赖分辨率），基于 XML 描述
DOM 操作	不支持。图形一旦画好，浏览器就不再关注它	支持。每个图形元素都是一个 DOM 节点
性能表现	适合绘制大量对象、高频刷新（如游戏）	适合静态图标、地图，对象数量多时性能下降
事件绑定	只能给整个 Canvas 绑定	可以给每个图形路径绑定事件