1、DOCTYPE 的作用是什么？
-
DOCTYPE（文档类型声明）用于告诉浏览器当前 HTML 文档使用的 HTML 版本规范，让浏览器按照对应的规范解析页面，避免进入 “怪异模式（Quirks Mode）”。
-
例如 HTML5 的声明：
<!DOCTYPE html>（无需指定版本，简洁且兼容所有现代浏览器）；HTML4 的声明则需要指定 DTD（文档类型定义），如<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">。
2、HTML5 新增了哪些语义化标签？
-
语义化标签的核心作用是让标签有 “含义”，提升可读性、SEO 友好性，便于浏览器 / 爬虫理解页面结构。
-
新增核心语义标签：
<header>（页面 / 区块头部）、<nav>（导航栏）、<main>（页面核心内容）、<article>（独立文章 / 内容块）、<section>（内容分区）、<aside>（侧边栏）、<footer>（页面 / 区块底部）、<figure>（插图 / 图表容器）、<figcaption>（图注）等。 -
对比：传统布局多用
<div>（无语义），语义化标签让结构更清晰。
3、src 和 href 的区别是什么？
-
src（source）：表示 “引入资源”，会暂停当前文档的解析，加载并执行引入的资源（如脚本、图片），资源加载失败会影响页面功能。- 示例：
<script src="index.js"></script>、<img src="logo.png">。
- 示例：
-
href（hypertext reference）：表示 “建立链接”，不会暂停文档解析，仅建立当前文档与目标资源的关联（如跳转、样式表）。- 示例：
<a href="https://www.baidu.com">、<link href="style.css" rel="stylesheet">。
- 示例：
4、块元素、行内元素、行内块元素，三者有何不同以及区别？
| 分类 | 特性 | 典型标签 |
|---|---|---|
| 块级元素 | 独占一行，默认宽度 100%，可设置宽高、margin/padding | 示例：<div>、<p>、<h1-h6>、<ul>、<li>、<section>等 |
| 行内元素 | 不独占行，宽度由内容决定，不可设置宽高，margin/padding 仅左右生效 | 示例：<span>、<a>、<em>、<strong>、<img>（特殊，行内但可设宽高）等 |
| 行内块元素 | 不独占行，但可设置宽高，兼具行内元素和块级元素的特性 | 示例：<img>、<input>、<button>、<textarea>、<select>，或通过 CSS display: inline-block 转换。 |
5、HTML5 的离线存储（LocalStorage/SessionStorage/Cookie）有什么区别？
| 特性 | Cookie | LocalStorage | SessionStorage |
|---|---|---|---|
| 存储大小 | 约 4KB | 约 5MB | 约 5MB |
| 有效期 | 可设置过期时间（默认会话结束） | 永久存储（除非手动删除） | 会话结束（关闭标签 / 浏览器） |
| 与服务器交互 | 每次请求都会携带到服务器 | 仅在本地，不发服务器 | 仅在本地，不发服务器 |
| 作用域 | 同域名下所有页面共享 | 同域名下所有页面共享 | 仅当前标签页（同域名不同标签不共享） |
| 易用性 | 原生 API 繁琐（需自行封装） | 原生 API 简洁（setItem/getItem） | 同 LocalStorage |
