## ![](https://i-blog.csdnimg.cn/direct/baec391ea1884d1bbcbaf86b6bc37270.png) > 适合前端入门 / 巩固基础，涵盖 11 道高频面试题 *** ** * ** *** ### 目录 1. [DOCTYPE 的作用是什么？DOCTYPE 写错或漏写会有什么后果？](#DOCTYPE 的作用是什么？DOCTYPE 写错或漏写会有什么后果？) 2. [` ##### 常见使用场景 ##### 应该优先使用哪个？ **答案：优先使用 `defer`** 原因： * `async` 不保证执行顺序，如果多个脚本有依赖关系会导致错误 * `defer` 保证脚本按 HTML 中的顺序执行，接近于把脚本放在 body 底部的效果 * `defer` 在 DOM 完全解析后再执行，不会出现"找不到 DOM 元素"的问题现代前端工程化项目（Vue/React CLI）打包后，通常会把 ` ##### 图解对比 href: 建立关系，不替换链接 → 点击 → 导航到 page.html（当前页面内容被替换为新页面） → 不点击 → page.html 不加载 src: 嵌入内容，替换显示

→ 浏览器立即下载 photo.jpg → 下载完成后，替换标签位置，显示图片 → 如果不下载图片，区域就是空的 ##### 加载时机区别 ##### 实际开发中的注意事项 **CSS 的 link vs img 的 src**

**搜索引擎对 href 和 src 的处理** * 搜索引擎爬虫会跟踪 `` 链接来抓取其他页面 * 搜索引擎会抓取 `` 中的图片 URL，用于图片搜索索引 * 搜索引擎会执行 ` ❌

用户输入:

✅

用户输入: <script>alert('XSS')</script>

##### 常用 HTML 实体速查表 | 显示效果 | 命名实体 | 数字实体（十进制） | 数字实体（十六进制） | |------|------------|-----------|------------| | `<` | `<` | `<` | `<` | | `>` | `>` | `>` | `>` | | `&` | `&` | `&` | `&` | | `"` | `"` | `"` | `"` | | `'` | `'`（非标准） | `'` | `'` | | 空格 | ` ` | ` ` | ` ` | | `©` | `©` | `©` | `©` | | `®` | `®` | `®` | `®` | | `™` | `™` | `™` | `™` | | `¥` | `¥` | `¥` | `¥` | | `€` | `€` | `€` | `€` | | `£` | `£` | `£` | `£` | | `×` | `×` | `×` | `×` | | `÷` | `÷` | `÷` | `÷` | ##### 编程中的实体会话话在 JavaScript 中，通常使用 DOM API 来避免手动转义： // 错误做法：手动拼接（容易出错） element.innerHTML = '

' + userInput + '

'; // 如果 userInput = ''，就会触发 XSS // 正确做法：使用 textContent 自动转义 element.textContent = ''; // 显示为纯文本，不会被执行 // React/Vue 等框架默认会转义，防止 XSS // 但使用 v-html / dangerouslySetInnerHTML 时需要特别注意 // Node.js 后端渲染时，使用专门的转义库 const escapeHtml = require('escape-html'); const safeOutput = escapeHtml(userInput); #### 答案 HTML 实体是以 `&` 开头、`;` 结尾的字符串，用于表示 HTML 中的特殊字符，避免被浏览器解析为 HTML 代码。 **必须使用 HTML 实体的场景**： 1. **显示 HTML 特殊字符** ：如 `<`、`>`、`&`、`"`、`'` 2. **HTML 属性中包含引号** ：属性值中的双引号需用 `"` 3. **保留多个连续空格** ：用 ` ` 或 CSS `white-space: pre-wrap` 4. **显示特殊符号** ：版权 `©`、注册 `®`、乘号 `×` 等 5. **防止 XSS 攻击**：用户输入的内容在输出到 HTML 页面时必须转义，这是最关键的安全场景 *** ** * ** *** ### 附录：常见面试追问 | 问题 | 考察点 | |---------------------------------------------------------|-----------------------------| | DOCTYPE 写在 HTML 之前还是之后？ | 规范要求 DOCTYPE 是文档第一行 | | `

干货精讲｜初级 HTML 面试高频考题

目录