HTML-常见问题

一杯甜梦去冰全糖
24 阅读6分钟

1. 前端页面的三层结构

1.1 结构层（Structure）- HTML

  • 作用：搭建网页的骨架和内容，描述文本、图片、链接、表格、表单等部分。
  • 特点：注重语义化，提升可读性和SEO效果，便于无障碍访问。

1.2 样式层（Presentation）- CSS

  • 作用：控制网页的外观和布局，美化页面，如字体样式、颜色、动画效果等。
  • 特点：具备继承性、层叠性，支持响应式设计。

1.3 行为层（Behavior）- JavaScript

  • 作用：实现网页用户交互，如按钮点击、表单验证、数据加载等。
  • 特点：可操作DOM，支持组件化开发（如React、Vue）。

简单总结：HTML管内容，CSS管样式，JavaScript管交互。

2. HTML5 新特性

2.1 语义化标签

  • 如 <header>、<nav>、<section>、<article>、<aside>、<footer>。
  • 让结构更清晰，有助于SEO和无障碍访问。

2.2 多媒体元素

  • <audio> 和 <video>，无需依赖插件（如Flash）。

2.3 Canvas

  • <canvas> 用于绘制图形、动画，由JavaScript控制，支持像素级操作。

2.4 本地存储（Web Storage）

  • localStorage（持久保存）和 sessionStorage（会话保存），代替部分Cookie功能。

2.5 新的表单类型和属性

  • 新类型：email、url、number、range、date、color。
  • 新属性：required、placeholder、autocomplete、pattern。

2.6 DOM查询操作增强

  • document.querySelector()、document.querySelectorAll()。

2.7 拖放（Drag and Drop）

  • 原生支持元素拖拽，无需第三方库。

3. 对 HTML 语义化的理解

  • 定义：使用符合内容含义的标签组织结构。
  • 优点：
    • ✅ 提升代码可读性。
    • ✅ 增强用户体验（无障碍支持）。
    • ✅ 有助于SEO优化。
    • ✅ 方便后期拓展和样式控制。

4. 前端需要注意的 SEO（搜索引擎优化） 事项

  • 合理设置 title、description、keywords。
  • 使用语义化HTML结构。
  • 避免大量使用 <iframe>。
  • 非装饰性图片添加 alt 属性。
  • 优化网站访问速度（如图片压缩、CDN、懒加载等）。

5. Canvas 和 SVG 的区别

特性CanvasSVG
本质基于像素基于矢量
绘制方式JavaScript 绘制XML 标签描述
适用场景动态图形、游戏静态图表、矢量图
渲染原理重绘整个画布局部重绘
缩放效果会失真不失真
事件支持需手动绑定自带DOM事件
性能适合大量图形绘制适合结构清晰少量图形
动画需手动控制支持CSS、SMIL动画
文件大小较小结构复杂时较大

简单总结：

  • Canvas：像素渲染，适合实时渲染。
  • SVG：矢量渲染，适合静态展示。

6. 浏览器存储方式总结

6.1 Cookie

  • 小型文本（4KB），随请求发送，适合小数据（如登录凭证）。

6.2 Web Storage

  • localStorage（长期保存）、sessionStorage（窗口关闭清除），容量大，不随请求发送。

6.3 IndexedDB

  • 非关系型数据库，支持大量数据，适合离线应用（PWA）。

简单总结：

  • Cookie：小，服务器读。
  • Web Storage：大，本地存。
  • IndexedDB：超大，复杂结构存储。

7. 行内元素、块级元素和空元素

分类元素示例特点
行内元素<span>, <a>, <img>, <input>不换行，只占内容宽度
块级元素<div>, <p>, <h1>, <ul>独占一行，可设置宽高
空元素<br>, <hr>, <meta>, <link>自闭合标签

8. <title>、<h1>、<b>、<strong>、<i>、<em> 区别

8.1 <title> vs <h1>

  • title：浏览器标题栏显示。
  • h1：网页主标题，正文层次。

8.2 <b> vs <strong>

  • b：加粗，无语义。
  • strong：加粗且强调语义。

8.3 <i> vs <em>

  • i：倾斜，无语义。
  • em：倾斜且强调语义。

简单总结：

  • title = 页眉标题
  • h1 = 页面主标题
  • b = 加粗
  • strong = 加粗+强调
  • i = 倾斜
  • em = 倾斜+强调

9. img 中 title 和 alt 区别

  • title：鼠标悬浮显示提示文字。
  • alt：图片加载失败时显示，SEO必备属性。

简单总结：

  • alt：必填，描述图片。
  • title：选填，提示信息。

10. iframe 的优点与缺点

  • 优点

    • ✅ 嵌入外部内容。
    • ✅ 与父页面隔离，模块化。

  • 缺点

    • ❌ 性能影响，加载慢。
    • ❌ 无障碍访问差。
    • ❌ 安全风险（如点击劫持）。

11. JS事件冒泡与捕获

11.1 事件冒泡（Event Bubbling）

  • 事件从触发源向上传播至祖先元素。

11.2 事件捕获（Event Capturing）

  • 事件从document向下传播至目标元素。
element.addEventListener('click', handler, true); // 捕获阶段
element.addEventListener('click', handler, false); // 冒泡阶段

12. 页面导入样式时 link 和 @import 区别

项目link@import
加载顺序并行加载页面解析后加载
权重高低
从属HTML标签CSS语法
兼容性所有浏览器低版本IE不支持

推荐使用 link。

13. <script> 中 defer 和 async 区别

浏览器在加载 <script> 标签时，如果未加任何属性（即默认行为），会阻塞 HTML 的解析与渲染，直到该脚本下载并执行完成。为了提升性能，可以使用 defer 或 async 属性使脚本加载与执行更加高效。

对比总结表：

属性加载方式执行顺序执行时机是否保持顺序适用场景
无属性（默认）遇到即加载加载后立即执行阻塞 HTML 解析✅ 是小脚本内联或必须同步执行
defer并行加载按标签出现执行DOM 解析完成后（DOMContentLoaded 前）✅ 是DOM 依赖脚本，如主逻辑 JS
async并行加载加载完成即执行（无序）加载完成即执行（不等待 DOM）❌ 否不依赖 DOM 的脚本，如广告、打点

特别说明：

  • defer 和 async 仅对外部脚本有效（即 <script src="..."> 才能生效），内联脚本无效。
  • 如果多个脚本都使用 defer，会按照标签出现的顺序依次执行，并确保在 DOM 解析完成后统一执行。
  • defer 保证 HTML 结构已可用，适用于依赖 DOM 的初始化逻辑。
  • 如果多个脚本都使用 async，它们的执行顺序不确定，谁先加载完谁先执行。

使用建议：

  • 常规业务脚本推荐使用 defer，以避免阻塞 HTML 渲染。
  • 第三方脚本（如广告、埋点、统计等）使用 async，不关心执行顺序和 DOM 状态。
  • 不要同时使用 defer 和 async，会忽略 defer，按 async 执行。

14. 严格模式与混杂模式

模式描述触发方式
严格模式按W3C标准解析网页<!DOCTYPE html> 正确声明
混杂模式浏览器兼容老版本解析缺失或错误的 <!DOCTYPE>

15. 浏览器内核及对应浏览器

内核代表浏览器
BlinkChrome、新版Opera
TridentIE
GeckoFirefox
WebkitSafari、旧版Chrome
Presto（废弃）旧版Opera

16. 优雅降级与渐进增强

16.1 渐进增强（Progressive Enhancement）

  • 从基本功能开始，保证低端设备也能使用；
  • 然后为高级浏览器添加高级体验。

16.2 优雅降级（Graceful Degradation）

  • 先开发完整高端版本；
  • 在低端浏览器中合理降级，保持基本功能可用。

总结：

  • 渐进增强 = 底线保障，逐步增强
  • 优雅降级 = 先高端，再兼容
avatar
文章
阅读
粉丝