前端面试复习指南【代码演示多多版】之——HTML

1. 什么是 DOCTYPE

DOCTYPE 是 Document Type Declaration（文档类型声明） 的缩写。它是放在网页源代码最最顶部、<html> 标签之前的一行代码。
<!DOCTYPE html> 就像是你在启动一台新机器前，先告诉它"请使用 2026 年的现代操作手册来理解我"，而不是让它猜着用 1998 年的老古董规则来运行。它是保证网页跨浏览器兼容性的第一行基石。

2. HTML语义化

2.1 什么是HTML语义化

HTML语义化是指使用具有特定含义的HTML标签来构建网页结构，而不是单纯使用<div>和<span>这类无意义的通用容器 。

简单来说，就是用合适的标签，放合适的内容。

2.2 为什么需要语义化

2.2.1 对搜索引擎友好（SEO）

搜索引擎的爬虫在分析网页时，会依赖HTML标签来判断内容的重要性。语义化标签能帮助搜索引擎：

<h1>~<h6> ：识别页面标题和内容层级
<strong> ：知道这是重要内容（而<b>只是加粗）
<a> ：识别链接
<article> ：识别独立文章块

2.2.2. 对开发者和维护者友好

代码的可读性 大大提高。当你看到<nav>时，立刻知道这里是导航；看到<aside>，知道是侧边栏。这就像代码的"自注释"。

2.3 常用语义化标签

标签	含义	使用场景
`<header>`	页眉	页面头部、文章头部
`<nav>`	导航	主导航、侧边栏导航
`<main>`	主体内容	页面的核心内容，每个页面只用一次
`<article>`	文章/独立内容	博客文章、新闻帖子、评论
`<section>`	区块/区域	有主题的内容分组，通常带标题
`<aside>`	侧边栏/补充内容	侧边栏、广告、相关链接

3. script标签的defer和async

在HTML中，<script>标签的defer和async属性都是用来控制脚本加载和执行时机的，目的是优化页面加载性能。但它们的行为有重要区别。

3.1 先理解默认情况（无defer/async）

html

xml 复制代码

<script src="script.js"></script>

加载过程 ：遇到script标签时，立即暂停HTML解析 → 下载脚本 → 执行脚本 → 恢复HTML解析
特点：阻塞式，脚本会按顺序执行
问题：如果脚本很大，页面会白屏等待

3.2 defer（延迟执行）

html

xml 复制代码

<script defer src="script.js"></script>

加载：异步加载（不阻塞HTML解析）
执行时机 ：HTML解析完成后 ，DOMContentLoaded事件之前执行
顺序：保持顺序，多个defer脚本按出现顺序执行

示意图：

lua 复制代码

HTML解析： |=======解析中========|======解析完成======|
script加载：    |--下载--| (不阻塞)
script执行：                           |--执行--|
DOMContentLoaded：                                    触发

3.3 async（异步执行）

xml 复制代码

<script async src="script.js"></script>

加载：异步加载（不阻塞HTML解析）
执行时机 ：下载完成后立即执行（此时可能HTML还没解析完）
顺序：不保证顺序，谁先下载完谁先执行

示意图：

scss 复制代码

HTML解析： |=======解析中========|======解析完成======|
script加载：    |--下载--| (不阻塞)
script执行：           |--执行--| (可能阻塞解析)
DOMContentLoaded：                触发 (可能被脚本延迟)

4. HTML5的新特性

4.1 语义化标签（让结构更有意义）

这是 HTML5 最直观的变化，新增了一系列用于描述页面结构的标签：

标签	描述
`<header>`	头部区域
`<footer>`	底部区域
`<nav>`	导航链接
`<article>`	独立的内容块（如文章、帖子）
`<section>`	文档中的节（有主题的内容分组）
`<aside>`	侧边栏、补充内容
`<main>`	页面主要内容（每个页面只用一次）

意义：让搜索引擎和屏幕阅读器更好地理解页面结构，也提高了代码的可读性。

4.2 增强型表单（更好的用户体验）

HTML5 为 <input> 增加了许多新的 type 类型，让浏览器提供原生的输入控制：

新增 input 类型：

xml 复制代码

<input type="email">      <!-- 邮箱格式验证 -->
<input type="url">        <!-- URL 格式验证 -->
<input type="tel">        <!-- 电话号码（不自动验证，但移动端弹出数字键盘） -->
<input type="number">     <!-- 数字输入（带上下箭头） -->
<input type="range">      <!-- 滑块 -->
<input type="date">       <!-- 日期选择器 -->
<input type="color">      <!-- 颜色选择器 -->
<input type="search">     <!-- 搜索框（带清空按钮） -->

新增表单属性：

xml 复制代码

<input placeholder="提示文字">      <!-- 输入框提示文本 -->
<input required>                   <!-- 必填 -->
<input autofocus>                  <!-- 自动获取焦点 -->
<input pattern="[0-9]{11}">        <!-- 正则表达式验证:11位数字验证 -->
<input min="1" max="100">          <!-- 范围1-100 -->
<input step="5">                   <!-- 每次增减5 -->

意义：减少 JavaScript 表单验证代码，提升用户体验（尤其是移动端）。

4.3 多媒体支持（告别 Flash）

HTML5 提供了原生的音视频标签，无需第三方插件。

视频：

css 复制代码

<video src="movie.mp4" controls width="400">
  您的浏览器不支持 video 标签。
</video>

属性：controls（控件）、autoplay、loop、muted、poster（封面图）

音频：

css 复制代码

<audio src="song.mp3" controls>
  您的浏览器不支持 audio 标签。
</audio>

意义：移动端友好、性能更好、更安全（相比 Flash）。

4.4 Canvas 绘图（强大的绘图能力）

<canvas> 是一个画布，通过 JavaScript 在网页上绘制图形、动画、游戏画面。

ini 复制代码

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 50, 30);
</script>

应用场景：数据可视化图表、小游戏、图像处理、动态特效。

4.5 SVG 支持（矢量图形）

虽然 SVG 不是 HTML5 首创，但 HTML5 将其更好地集成进来，支持在 HTML 中直接嵌入 SVG 代码。

arduino 复制代码

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

特点：矢量图、不失真、可被 CSS 和 JavaScript 操作。

Canvas vs SVG：

Canvas：像素级、性能好、适合复杂动画（如游戏）
SVG：矢量、可交互、适合图标和简单图形

4.6 地理定位

通过 JavaScript 获取用户的地理位置（需要用户授权）。

arduino 复制代码

navigator.geolocation.getCurrentPosition(function(position) {
  console.log('纬度：', position.coords.latitude);
  console.log('经度：', position.coords.longitude);
});

应用：附近商家、导航服务、天气应用。

HTML5 提供了两种在浏览器端存储数据的方式，比 Cookie 容量更大（一般 5-10MB）、更简单。

localStorage（永久存储）：

javascript 复制代码

localStorage.setItem('username', '张三');
let name = localStorage.getItem('username');

sessionStorage（会话级，关闭浏览器就清除）：

arduino 复制代码

sessionStorage.setItem('token', 'abc123');

优势：相比 Cookie（4KB），容量大、不随请求发送、API 简单。

4.8 离线应用与缓存

Application Cache （已废弃，但概念重要）和更新的 Service Worker 使网页可以离线访问。

manifest 文件（旧方案）：指定哪些文件离线可用
Service Worker（新方案）：更强大的离线缓存、消息推送、后台同步

意义：让网页像原生 App 一样，无网络也能使用。

4.9 拖放 API

HTML5 支持原生的拖放操作。

html

ini 复制代码

<div draggable="true" ondragstart="drag(event)">可拖拽元素</div>
<div ondrop="drop(event)" ondragover="allowDrop(event)">放置区域</div>

应用：文件上传、看板管理、布局拖拽。

4.10 Web Workers（多线程）

JavaScript 是单线程的，但 Web Workers 允许在后台运行脚本，不阻塞主线程。

javascript

ini 复制代码

// 创建 worker
const worker = new Worker('worker.js');
// 接收消息
worker.onmessage = function(event) {
  console.log('计算结果：', event.data);
};
// 发送消息
worker.postMessage([10, 20]);

应用：大数据计算、图像处理、加密解密。

4.11 WebSocket（全双工通信）

HTML5 提供了 WebSocket API，实现浏览器与服务器的持久连接，双向实时通信。

javascript

ini 复制代码

const socket = new WebSocket('ws://example.com');
socket.onmessage = function(event) {
  console.log('收到消息：', event.data);
};
socket.send('Hello Server');

应用：在线聊天、实时游戏、股票行情、协同编辑。

4.12 新的语义元素（文本级）

除了结构标签，还有一些文本级的语义标签：

标签	用途
`<mark>`	高亮标记（如搜索结果中的关键词）
`<time>`	时间/日期
`<progress>`	进度条
`<meter>`	度量衡（如磁盘使用量）
`<details>`/`<summary>`	可折叠的详情区域

4.13 废弃的标签

HTML5 移除了一些纯表现层的标签，要求用 CSS 替代：

已废弃： <font>、<center>、<big>、<strike>、<frame>、<frameset>、<noframes>

保留但语义改变： <small>（不再表示小字号，而是"免责声明"类的小字注释）

前端面试复习指南【代码演示多多版】之——HTML

1. 什么是 DOCTYPE

2. HTML语义化

2.1 什么是HTML语义化

2.2 为什么需要语义化

2.2.1 对搜索引擎友好（SEO）

2.2.2. 对开发者和维护者友好

2.3 常用语义化标签

3. script标签的defer和async

3.1 先理解默认情况（无defer/async）

3.2 defer（延迟执行）

3.3 async（异步执行）

4. HTML5的新特性

4.1 语义化标签（让结构更有意义）

4.2 增强型表单（更好的用户体验）

4.3 多媒体支持（告别 Flash）

4.4 Canvas 绘图（强大的绘图能力）

4.5 SVG 支持（矢量图形）

4.6 地理定位

4.7 Web 存储（替代 Cookie）

4.8 离线应用与缓存

4.9 拖放 API

4.10 Web Workers（多线程）

4.11 WebSocket（全双工通信）

4.12 新的语义元素（文本级）

4.13 废弃的标签