前端 on Ralph's Bloghttps://pothos.dpdns.org/tags/%E5%89%8D%E7%AB%AF/Recent content in 前端 on Ralph's BlogHugo -- 0.147.7zh-cnSun, 04 Jan 2026 00:00:00 +000013.htmlhttps://pothos.dpdns.org/posts/13.html/Thu, 25 Dec 2025 00:00:00 +0000https://pothos.dpdns.org/posts/13.html/<h1 id="13-html完整技术指南">13. HTML完整技术指南</h1> <h2 id="目录">目录</h2> <details> <summary>点击展开目录</summary> <h3 id="1-html基础概念"><a href="#1-html%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5">1. HTML基础概念</a></h3> <ul> <li><a href="#11-html%E7%AE%80%E4%BB%8B%E4%B8%8E%E7%89%B9%E7%82%B9">1.1 HTML简介与特点</a></li> <li><a href="#12-html%E5%8F%91%E5%B1%95%E5%8E%86%E5%8F%B2">1.2 HTML发展历史</a></li> <li><a href="#13-html%E6%96%87%E6%A1%A3%E7%BB%93%E6%9E%84">1.3 HTML文档结构</a></li> <li><a href="#14-html%E8%AF%AD%E6%B3%95%E8%A7%84%E5%88%99">1.4 HTML语法规则</a></li> </ul> <h3 id="2-基础html标签"><a href="#2-%E5%9F%BA%E7%A1%80html%E6%A0%87%E7%AD%BE">2. 基础HTML标签</a></h3> <ul> <li><a href="#21-%E6%96%87%E6%A1%A3%E7%BB%93%E6%9E%84%E6%A0%87%E7%AD%BE">2.1 文档结构标签</a></li> <li><a href="#22-%E6%96%87%E6%9C%AC%E5%86%85%E5%AE%B9%E6%A0%87%E7%AD%BE">2.2 文本内容标签</a></li> <li><a href="#23-%E9%93%BE%E6%8E%A5%E4%B8%8E%E5%AF%BC%E8%88%AA%E6%A0%87%E7%AD%BE">2.3 链接与导航标签</a></li> <li><a href="#24-%E5%88%97%E8%A1%A8%E6%A0%87%E7%AD%BE">2.4 列表标签</a></li> </ul> <h3 id="3-表单与交互元素"><a href="#3-%E8%A1%A8%E5%8D%95%E4%B8%8E%E4%BA%A4%E4%BA%92%E5%85%83%E7%B4%A0">3. 表单与交互元素</a></h3> <ul> <li><a href="#31-%E8%A1%A8%E5%8D%95%E5%9F%BA%E7%A1%80%E7%BB%93%E6%9E%84">3.1 表单基础结构</a></li> <li><a href="#32-%E8%BE%93%E5%85%A5%E6%8E%A7%E4%BB%B6%E7%B1%BB%E5%9E%8B">3.2 输入控件类型</a></li> <li><a href="#33-%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81">3.3 表单验证</a></li> <li><a href="#34-%E8%A1%A8%E5%8D%95%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5">3.4 表单最佳实践</a></li> </ul> <h3 id="4-多媒体与嵌入内容"><a href="#4-%E5%A4%9A%E5%AA%92%E4%BD%93%E4%B8%8E%E5%B5%8C%E5%85%A5%E5%86%85%E5%AE%B9">4. 多媒体与嵌入内容</a></h3> <ul> <li><a href="#41-%E5%9B%BE%E7%89%87%E5%A4%84%E7%90%86">4.1 图片处理</a></li> <li><a href="#42-%E9%9F%B3%E9%A2%91%E8%A7%86%E9%A2%91">4.2 音频视频</a></li> <li><a href="#43-%E5%93%8D%E5%BA%94%E5%BC%8F%E5%AA%92%E4%BD%93">4.3 响应式媒体</a></li> <li><a href="#44-%E5%B5%8C%E5%85%A5%E5%86%85%E5%AE%B9">4.4 嵌入内容</a></li> </ul> <h3 id="5-语义化html与无障碍"><a href="#5-%E8%AF%AD%E4%B9%89%E5%8C%96html%E4%B8%8E%E6%97%A0%E9%9A%9C%E7%A2%8D">5. 语义化HTML与无障碍</a></h3> <ul> <li><a href="#51-%E8%AF%AD%E4%B9%89%E5%8C%96%E6%A0%87%E7%AD%BE">5.1 语义化标签</a></li> <li><a href="#52-%E6%96%87%E6%A1%A3%E7%BB%93%E6%9E%84%E8%AF%AD%E4%B9%89%E5%8C%96">5.2 文档结构语义化</a></li> <li><a href="#53-%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BE%E8%AE%A1">5.3 无障碍设计</a></li> <li><a href="#54-aria%E5%B1%9E%E6%80%A7">5.4 ARIA属性</a></li> </ul> <h3 id="6-表格与数据展示"><a href="#6-%E8%A1%A8%E6%A0%BC%E4%B8%8E%E6%95%B0%E6%8D%AE%E5%B1%95%E7%A4%BA">6. 表格与数据展示</a></h3> <ul> <li><a href="#61-%E8%A1%A8%E6%A0%BC%E5%9F%BA%E7%A1%80%E7%BB%93%E6%9E%84">6.1 表格基础结构</a></li> <li><a href="#62-%E5%A4%8D%E6%9D%82%E8%A1%A8%E6%A0%BC%E8%AE%BE%E8%AE%A1">6.2 复杂表格设计</a></li> <li><a href="#63-%E5%93%8D%E5%BA%94%E5%BC%8F%E8%A1%A8%E6%A0%BC">6.3 响应式表格</a></li> <li><a href="#64-%E6%95%B0%E6%8D%AE%E5%B1%95%E7%A4%BA%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5">6.4 数据展示最佳实践</a></li> </ul> <h3 id="7-html5新特性与api"><a href="#7-html5%E6%96%B0%E7%89%B9%E6%80%A7%E4%B8%8Eapi">7. HTML5新特性与API</a></h3> <ul> <li><a href="#71-html5%E6%96%B0%E5%A2%9E%E6%A0%87%E7%AD%BE">7.1 HTML5新增标签</a></li> <li><a href="#72-canvas%E4%B8%8Esvg">7.2 Canvas与SVG</a></li> <li><a href="#73-web%E5%AD%98%E5%82%A8%E6%8A%80%E6%9C%AF">7.3 Web存储技术</a></li> <li><a href="#74-%E7%8E%B0%E4%BB%A3web-api">7.4 现代Web API</a></li> </ul> <h3 id="8-性能优化与最佳实践"><a href="#8-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5">8. 性能优化与最佳实践</a></h3> <ul> <li><a href="#81-%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E4%BC%98%E5%8C%96">8.1 页面加载优化</a></li> <li><a href="#82-%E8%B5%84%E6%BA%90%E4%BC%98%E5%8C%96%E7%AD%96%E7%95%A5">8.2 资源优化策略</a></li> <li><a href="#83-%E6%B8%B2%E6%9F%93%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96">8.3 渲染性能优化</a></li> <li><a href="#84-seo%E4%BC%98%E5%8C%96">8.4 SEO优化</a></li> </ul> <h3 id="9-html面试题集"><a href="#9-html%E9%9D%A2%E8%AF%95%E9%A2%98%E9%9B%86">9. HTML面试题集</a></h3> <ul> <li><a href="#91-%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5%E9%A2%98">9.1 基础概念题</a></li> <li><a href="#92-%E8%AF%AD%E4%B9%89%E5%8C%96%E4%B8%8E%E6%A0%87%E5%87%86%E9%A2%98">9.2 语义化与标准题</a></li> <li><a href="#93-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E9%A2%98">9.3 性能优化题</a></li> <li><a href="#94-%E5%AE%9E%E6%88%98%E5%BA%94%E7%94%A8%E9%A2%98">9.4 实战应用题</a></li> </ul> <h3 id="10-总结与进阶方向"><a href="#10-%E6%80%BB%E7%BB%93%E4%B8%8E%E8%BF%9B%E9%98%B6%E6%96%B9%E5%90%91">10. 总结与进阶方向</a></h3> </details> <h2 id="1-html基础概念-1">1. HTML基础概念</h2> <h3 id="11-html简介与特点">1.1 HTML简介与特点</h3> <p>**HTML（HyperText Markup Language）**是超文本标记语言，是创建网页的标准标记语言。</p>16.reacthttps://pothos.dpdns.org/posts/16.react/Thu, 25 Dec 2025 00:00:00 +0000https://pothos.dpdns.org/posts/16.react/<h1 id="react-技术完整指南">React 技术完整指南</h1> <h2 id="目录">目录</h2> <details> <summary>点击展开目录</summary> <ul> <li><a href="#react-%E6%8A%80%E6%9C%AF%E5%AE%8C%E6%95%B4%E6%8C%87%E5%8D%97">React 技术完整指南</a> <ul> <li><a href="#%E7%9B%AE%E5%BD%95">目录</a></li> <li><a href="#1-react-%E6%A6%82%E8%BF%B0%E4%B8%8E%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5">1. React 概述与核心概念</a> <ul> <li><a href="#11-react-%E7%AE%80%E4%BB%8B">1.1 React 简介</a> <ul> <li><a href="#111-react-%E7%89%B9%E7%82%B9%E4%B8%8E%E4%BC%98%E5%8A%BF">1.1.1 React 特点与优势</a></li> <li><a href="#112-react-%E7%94%9F%E6%80%81%E7%B3%BB%E7%BB%9F">1.1.2 React 生态系统</a></li> </ul> </li> <li><a href="#12-%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5">1.2 核心概念</a> <ul> <li><a href="#121-%E8%99%9A%E6%8B%9Fdom%E5%8E%9F%E7%90%86">1.2.1 虚拟DOM原理</a></li> <li><a href="#122-%E7%BB%84%E4%BB%B6%E5%8C%96%E6%80%9D%E6%83%B3">1.2.2 组件化思想</a></li> <li><a href="#123-%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81">1.2.3 单向数据流</a></li> </ul> </li> <li><a href="#13-react-%E6%9E%B6%E6%9E%84%E6%BC%94%E8%BF%9B">1.3 React 架构演进</a> <ul> <li><a href="#131-%E4%BB%8E%E7%B1%BB%E7%BB%84%E4%BB%B6%E5%88%B0%E5%87%BD%E6%95%B0%E7%BB%84%E4%BB%B6">1.3.1 从类组件到函数组件</a></li> <li><a href="#132-fiber-%E6%9E%B6%E6%9E%84%E5%8E%9F%E7%90%86">1.3.2 Fiber 架构原理</a></li> </ul> </li> </ul> </li> <li><a href="#2-%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E4%B8%8E%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F">2. 组件基础与生命周期</a> <ul> <li><a href="#21-%E7%BB%84%E4%BB%B6%E5%AE%9A%E4%B9%89%E4%B8%8E%E4%BD%BF%E7%94%A8">2.1 组件定义与使用</a> <ul> <li><a href="#211-%E5%87%BD%E6%95%B0%E7%BB%84%E4%BB%B6">2.1.1 函数组件</a></li> <li><a href="#212-%E7%B1%BB%E7%BB%84%E4%BB%B6">2.1.2 类组件</a></li> <li><a href="#213-%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1">2.1.3 组件通信</a></li> </ul> </li> <li><a href="#22-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E8%AF%A6%E8%A7%A3">2.2 生命周期详解</a> <ul> <li><a href="#221-%E6%8C%82%E8%BD%BD%E9%98%B6%E6%AE%B5">2.2.1 挂载阶段</a></li> <li><a href="#222-%E6%9B%B4%E6%96%B0%E9%98%B6%E6%AE%B5">2.2.2 更新阶段</a></li> <li><a href="#223-%E5%8D%B8%E8%BD%BD%E9%98%B6%E6%AE%B5">2.2.3 卸载阶段</a></li> </ul> </li> <li><a href="#23-%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E6%9C%BA%E5%88%B6">2.3 事件处理机制</a> <ul> <li><a href="#231-%E5%90%88%E6%88%90%E4%BA%8B%E4%BB%B6%E7%B3%BB%E7%BB%9F">2.3.1 合成事件系统</a></li> <li><a href="#232-%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98%E6%9C%BA%E5%88%B6">2.3.2 事件委托机制</a></li> </ul> </li> </ul> </li> <li><a href="#3-react-hooks-%E6%B7%B1%E5%BA%A6%E8%A7%A3%E6%9E%90">3. React Hooks 深度解析</a> <ul> <li><a href="#31-%E5%9F%BA%E7%A1%80hooks">3.1 基础Hooks</a> <ul> <li><a href="#311-usestate">3.1.1 useState</a></li> <li><a href="#312-useeffect">3.1.2 useEffect</a></li> <li><a href="#313-usecontext">3.1.3 useContext</a></li> </ul> </li> <li><a href="#32-%E9%AB%98%E7%BA%A7hooks">3.2 高级Hooks</a> <ul> <li><a href="#321-usereducer">3.2.1 useReducer</a></li> <li><a href="#322-usememo-%E5%92%8C-usecallback">3.2.2 useMemo 和 useCallback</a></li> <li><a href="#323-useref-%E5%92%8C-useimperativehandle">3.2.3 useRef 和 useImperativeHandle</a></li> </ul> </li> <li><a href="#33-%E8%87%AA%E5%AE%9A%E4%B9%89hooks">3.3 自定义Hooks</a> <ul> <li><a href="#331-%E8%AE%BE%E8%AE%A1%E5%8E%9F%E5%88%99">3.3.1 设计原则</a></li> <li><a href="#332-%E5%B8%B8%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89hooks">3.3.2 常用自定义Hooks</a></li> </ul> </li> </ul> </li> <li><a href="#4-%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E4%B8%8E%E6%95%B0%E6%8D%AE%E6%B5%81">4. 状态管理与数据流</a> <ul> <li><a href="#41-%E6%9C%AC%E5%9C%B0%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86">4.1 本地状态管理</a> <ul> <li><a href="#411-%E7%BB%84%E4%BB%B6%E5%86%85%E7%8A%B6%E6%80%81">4.1.1 组件内状态</a></li> <li><a href="#412-%E7%8A%B6%E6%80%81%E6%8F%90%E5%8D%87">4.1.2 状态提升</a></li> </ul> </li> <li><a href="#42-context-api">4.2 Context API</a> <ul> <li><a href="#421-context%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95">4.2.1 Context基础用法</a></li> <li><a href="#422-context%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5">4.2.2 Context最佳实践</a></li> </ul> </li> <li><a href="#43-%E7%AC%AC%E4%B8%89%E6%96%B9%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86">4.3 第三方状态管理</a> <ul> <li><a href="#431-redux">4.3.1 Redux</a></li> <li><a href="#432-zustand">4.3.2 Zustand</a></li> <li><a href="#433-%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E6%96%B9%E6%A1%88%E5%AF%B9%E6%AF%94">4.3.3 状态管理方案对比</a></li> </ul> </li> </ul> </li> <li><a href="#5-%E8%B7%AF%E7%94%B1%E4%B8%8E%E5%AF%BC%E8%88%AA">5. 路由与导航</a> <ul> <li><a href="#51-react-router%E5%9F%BA%E7%A1%80">5.1 React Router基础</a> <ul> <li><a href="#511-%E8%B7%AF%E7%94%B1%E9%85%8D%E7%BD%AE">5.1.1 路由配置</a></li> <li><a href="#512-%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0">5.1.2 路由参数</a></li> </ul> </li> <li><a href="#52-%E9%AB%98%E7%BA%A7%E8%B7%AF%E7%94%B1%E7%89%B9%E6%80%A7">5.2 高级路由特性</a> <ul> <li><a href="#521-%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1">5.2.1 嵌套路由</a></li> <li><a href="#522-%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB">5.2.2 路由守卫</a></li> <li><a href="#523-%E4%BB%A3%E7%A0%81%E5%88%86%E5%89%B2%E4%B8%8E%E6%87%92%E5%8A%A0%E8%BD%BD">5.2.3 代码分割与懒加载</a></li> </ul> </li> </ul> </li> <li><a href="#6-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B8%8E%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5">6. 性能优化与最佳实践</a> <ul> <li><a href="#61-react%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96">6.1 React性能优化</a> <ul> <li><a href="#611-reactmemo">6.1.1 React.memo</a></li> <li><a href="#612-usememo%E5%92%8Cusecallback">6.1.2 useMemo和useCallback</a></li> <li><a href="#613-concurrent-mode">6.1.3 Concurrent Mode</a></li> </ul> </li> <li><a href="#62-%E4%BB%A3%E7%A0%81%E5%88%86%E5%89%B2%E4%B8%8E%E6%87%92%E5%8A%A0%E8%BD%BD">6.2 代码分割与懒加载</a> <ul> <li><a href="#621-%E5%8A%A8%E6%80%81%E5%AF%BC%E5%85%A5">6.2.1 动态导入</a></li> <li><a href="#622-suspense%E4%B8%8Eerrorboundary">6.2.2 Suspense与ErrorBoundary</a></li> </ul> </li> <li><a href="#63-%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5">6.3 最佳实践</a> <ul> <li><a href="#631-%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1%E5%8E%9F%E5%88%99">6.3.1 组件设计原则</a></li> <li><a href="#632-%E6%80%A7%E8%83%BD%E7%9B%91%E6%8E%A7">6.3.2 性能监控</a></li> </ul> </li> </ul> </li> <li><a href="#7-%E6%B5%8B%E8%AF%95%E4%B8%8E%E8%B4%A8%E9%87%8F%E4%BF%9D%E8%AF%81">7. 测试与质量保证</a> <ul> <li><a href="#71-%E6%B5%8B%E8%AF%95%E5%9F%BA%E7%A1%80">7.1 测试基础</a> <ul> <li><a href="#711-%E6%B5%8B%E8%AF%95%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE">7.1.1 测试环境配置</a></li> <li><a href="#712-%E6%B5%8B%E8%AF%95%E7%B1%BB%E5%9E%8B">7.1.2 测试类型</a></li> </ul> </li> <li><a href="#72-%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95">7.2 单元测试</a> <ul> <li><a href="#721-jest%E6%B5%8B%E8%AF%95%E6%A1%86%E6%9E%B6">7.2.1 Jest测试框架</a></li> <li><a href="#722-react-testing-library">7.2.2 React Testing Library</a></li> </ul> </li> <li><a href="#73-%E9%9B%86%E6%88%90%E6%B5%8B%E8%AF%95%E4%B8%8Ee2e%E6%B5%8B%E8%AF%95">7.3 集成测试与E2E测试</a> <ul> <li><a href="#731-%E7%BB%84%E4%BB%B6%E9%9B%86%E6%88%90%E6%B5%8B%E8%AF%95">7.3.1 组件集成测试</a></li> <li><a href="#732-cypress-e2e%E6%B5%8B%E8%AF%95">7.3.2 Cypress E2E测试</a></li> </ul> </li> </ul> </li> <li><a href="#8-react-%E7%94%9F%E6%80%81%E7%B3%BB%E7%BB%9F">8. React 生态系统</a> <ul> <li><a href="#81-ui%E7%BB%84%E4%BB%B6%E5%BA%93">8.1 UI组件库</a> <ul> <li><a href="#811-ant-design">8.1.1 Ant Design</a></li> <li><a href="#812-material-ui">8.1.2 Material-UI</a></li> <li><a href="#813-%E7%BB%84%E4%BB%B6%E5%BA%93%E9%80%89%E6%8B%A9">8.1.3 组件库选择</a></li> </ul> </li> <li><a href="#82-%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7">8.2 构建工具</a> <ul> <li><a href="#821-create-react-app">8.2.1 Create React App</a></li> <li><a href="#822-vite">8.2.2 Vite</a></li> <li><a href="#823-webpack%E9%85%8D%E7%BD%AE">8.2.3 Webpack配置</a></li> </ul> </li> <li><a href="#83-%E5%85%A8%E6%A0%88%E6%A1%86%E6%9E%B6">8.3 全栈框架</a> <ul> <li><a href="#831-nextjs">8.3.1 Next.js</a></li> <li><a href="#832-remix">8.3.2 Remix</a></li> <li><a href="#833-gatsby">8.3.3 Gatsby</a></li> </ul> </li> </ul> </li> <li><a href="#9-%E5%AE%9E%E6%88%98%E9%A1%B9%E7%9B%AE%E6%A1%88%E4%BE%8B">9. 实战项目案例</a> <ul> <li><a href="#91-%E5%BE%85%E5%8A%9E%E4%BA%8B%E9%A1%B9%E5%BA%94%E7%94%A8">9.1 待办事项应用</a> <ul> <li><a href="#911-%E9%A1%B9%E7%9B%AE%E6%9E%B6%E6%9E%84">9.1.1 项目架构</a></li> <li><a href="#912-%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0">9.1.2 功能实现</a></li> </ul> </li> <li><a href="#92-%E7%94%B5%E5%95%86%E8%B4%AD%E7%89%A9%E8%BD%A6">9.2 电商购物车</a> <ul> <li><a href="#921-%E7%8A%B6%E6%80%81%E8%AE%BE%E8%AE%A1">9.2.1 状态设计</a></li> <li><a href="#922-%E7%BB%84%E4%BB%B6%E6%8B%86%E5%88%86">9.2.2 组件拆分</a></li> </ul> </li> <li><a href="#93-%E5%AE%9E%E6%97%B6%E8%81%8A%E5%A4%A9%E5%BA%94%E7%94%A8">9.3 实时聊天应用</a> <ul> <li><a href="#931-websocket%E9%9B%86%E6%88%90">9.3.1 WebSocket集成</a></li> <li><a href="#932-%E6%B6%88%E6%81%AF%E7%AE%A1%E7%90%86">9.3.2 消息管理</a></li> </ul> </li> </ul> </li> <li><a href="#10-react-%E9%9D%A2%E8%AF%95%E9%A2%98%E8%AF%A6%E8%A7%A3">10. React 面试题详解</a> <ul> <li><a href="#101-%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5%E7%B1%BB">10.1 基础概念类</a> <ul> <li><a href="#q1-%E4%BB%80%E4%B9%88%E6%98%AFreactreact%E6%9C%89%E5%93%AA%E4%BA%9B%E7%89%B9%E7%82%B9">Q1: 什么是React？React有哪些特点？</a></li> <li><a href="#q2-%E4%BB%80%E4%B9%88%E6%98%AF%E8%99%9A%E6%8B%9Fdom%E8%99%9A%E6%8B%9Fdom%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88">Q2: 什么是虚拟DOM？虚拟DOM的工作原理是什么？</a></li> <li><a href="#q3-%E8%A7%A3%E9%87%8Areact%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E6%96%B9%E6%B3%95">Q3: 解释React的生命周期方法</a></li> <li><a href="#q4-%E4%BB%80%E4%B9%88%E6%98%AFjsxjsx%E7%9A%84%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88">Q4: 什么是JSX？JSX的原理是什么？</a></li> <li><a href="#q5-react%E4%B8%AD%E7%9A%84key%E5%B1%9E%E6%80%A7%E6%9C%89%E4%BB%80%E4%B9%88%E4%BD%9C%E7%94%A8">Q5: React中的key属性有什么作用？</a></li> </ul> </li> <li><a href="#102-%E7%BB%84%E4%BB%B6%E4%B8%8E%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E7%B1%BB">10.2 组件与生命周期类</a> <ul> <li><a href="#q6-%E7%B1%BB%E7%BB%84%E4%BB%B6%E5%92%8C%E5%87%BD%E6%95%B0%E7%BB%84%E4%BB%B6%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB">Q6: 类组件和函数组件有什么区别？</a></li> <li><a href="#q7-%E4%BB%80%E4%B9%88%E6%98%AF%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6hoc%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0">Q7: 什么是高阶组件(HOC)？如何实现？</a></li> <li><a href="#q8-%E4%BB%80%E4%B9%88%E6%98%AFrender-props%E6%A8%A1%E5%BC%8F">Q8: 什么是Render Props模式？</a></li> </ul> </li> <li><a href="#103-hooks-%E6%B7%B1%E5%BA%A6%E7%90%86%E8%A7%A3%E7%B1%BB">10.3 Hooks 深度理解类</a> <ul> <li><a href="#q9-useeffect%E7%9A%84%E4%BE%9D%E8%B5%96%E6%95%B0%E7%BB%84%E6%98%AF%E5%A6%82%E4%BD%95%E5%B7%A5%E4%BD%9C%E7%9A%84">Q9: useEffect的依赖数组是如何工作的？</a></li> <li><a href="#q10-%E4%B8%BA%E4%BB%80%E4%B9%88usestate%E7%9A%84%E6%9B%B4%E6%96%B0%E6%98%AF%E5%BC%82%E6%AD%A5%E7%9A%84">Q10: 为什么useState的更新是异步的？</a></li> </ul> </li> <li><a href="#104-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%B1%BB">10.4 性能优化类</a> <ul> <li><a href="#q11-react%E4%B8%AD%E6%9C%89%E5%93%AA%E4%BA%9B%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%8A%80%E6%9C%AF">Q11: React中有哪些性能优化技术？</a></li> <li><a href="#q12-%E4%BB%80%E4%B9%88%E6%98%AFreact-fiber%E5%AE%83%E8%A7%A3%E5%86%B3%E4%BA%86%E4%BB%80%E4%B9%88%E9%97%AE%E9%A2%98">Q12: 什么是React Fiber？它解决了什么问题？</a></li> </ul> </li> <li><a href="#105-%E5%AE%9E%E6%88%98%E5%BA%94%E7%94%A8%E7%B1%BB">10.5 实战应用类</a> <ul> <li><a href="#q13-%E5%A6%82%E4%BD%95%E5%9C%A8react%E4%B8%AD%E5%AE%9E%E7%8E%B0%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86">Q13: 如何在React中实现状态管理？</a></li> <li><a href="#q14-%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86react%E4%B8%AD%E7%9A%84%E9%94%99%E8%AF%AF%E8%BE%B9%E7%95%8C">Q14: 如何处理React中的错误边界？</a></li> <li><a href="#q15-react%E4%B8%AD%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93">Q15: React中如何实现条件渲染？</a></li> </ul> </li> </ul> </li> <li><a href="#-%E6%80%BB%E7%BB%93">📚 总结</a> <ul> <li><a href="#-%E6%A0%B8%E5%BF%83%E5%86%85%E5%AE%B9">🎯 核心内容</a></li> <li><a href="#-%E6%8A%80%E6%9C%AF%E7%89%B9%E8%89%B2">✅ 技术特色</a></li> </ul> </li> </ul> </li> </ul> </details> <h2 id="1-react-概述与核心概念">1. React 概述与核心概念</h2> <h3 id="11-react-简介">1.1 React 简介</h3> <h4 id="111-react-特点与优势">1.1.1 React 特点与优势</h4> <p><strong>React</strong>是由Facebook开发的用于构建用户界面的JavaScript库，于2013年开源。它采用组件化开发模式，通过虚拟DOM提升性能，是现代前端开发的核心技术之一。</p>56.CSS技术指南https://pothos.dpdns.org/posts/56.css%E6%8A%80%E6%9C%AF%E6%8C%87%E5%8D%97/Sun, 04 Jan 2026 00:00:00 +0000https://pothos.dpdns.org/posts/56.css%E6%8A%80%E6%9C%AF%E6%8C%87%E5%8D%97/<h1 id="css-技术指南">CSS 技术指南</h1> <h2 id="目录">目录</h2> <details> <summary>点击展开目录</summary> <ul> <li><a href="#css-%E6%8A%80%E6%9C%AF%E6%8C%87%E5%8D%97">CSS 技术指南</a> <ul> <li><a href="#%E7%9B%AE%E5%BD%95">目录</a></li> <li><a href="#css%E6%A6%82%E8%BF%B0">CSS概述</a> <ul> <li><a href="#%E4%BB%80%E4%B9%88%E6%98%AFcss">什么是CSS</a></li> <li><a href="#css%E5%8F%91%E5%B1%95%E5%8E%86%E5%8F%B2">CSS发展历史</a></li> <li><a href="#css%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F">CSS引入方式</a></li> <li><a href="#css%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86">CSS工作原理</a></li> </ul> </li> <li><a href="#%E9%80%89%E6%8B%A9%E5%99%A8">选择器</a> <ul> <li><a href="#%E5%9F%BA%E7%A1%80%E9%80%89%E6%8B%A9%E5%99%A8">基础选择器</a></li> <li><a href="#%E7%BB%84%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8">组合选择器</a></li> <li><a href="#%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8">伪类选择器</a></li> <li><a href="#%E4%BC%AA%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8">伪元素选择器</a></li> <li><a href="#%E9%80%89%E6%8B%A9%E5%99%A8%E4%BC%98%E5%85%88%E7%BA%A7">选择器优先级</a></li> </ul> </li> <li><a href="#%E7%9B%92%E6%A8%A1%E5%9E%8B">盒模型</a> <ul> <li><a href="#%E6%A0%87%E5%87%86%E7%9B%92%E6%A8%A1%E5%9E%8B">标准盒模型</a></li> <li><a href="#ie%E7%9B%92%E6%A8%A1%E5%9E%8B">IE盒模型</a></li> <li><a href="#margin%E4%B8%8Epadding">margin与padding</a></li> <li><a href="#%E8%BE%B9%E6%A1%86%E4%B8%8E%E5%9C%86%E8%A7%92">边框与圆角</a></li> <li><a href="#%E7%9B%92%E5%AD%90%E9%98%B4%E5%BD%B1">盒子阴影</a></li> </ul> </li> <li><a href="#%E5%B8%83%E5%B1%80%E6%96%B9%E5%BC%8F">布局方式</a> <ul> <li><a href="#%E6%96%87%E6%A1%A3%E6%B5%81%E4%B8%8E%E5%AE%9A%E4%BD%8D">文档流与定位</a></li> <li><a href="#flexbox%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80">Flexbox弹性布局</a></li> <li><a href="#grid%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80">Grid网格布局</a></li> <li><a href="#%E5%A4%9A%E5%88%97%E5%B8%83%E5%B1%80">多列布局</a></li> <li><a href="#%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80">响应式布局</a></li> </ul> </li> <li><a href="#%E6%96%87%E6%9C%AC%E4%B8%8E%E5%AD%97%E4%BD%93">文本与字体</a> <ul> <li><a href="#%E5%AD%97%E4%BD%93%E5%B1%9E%E6%80%A7">字体属性</a></li> <li><a href="#%E6%96%87%E6%9C%AC%E5%B1%9E%E6%80%A7">文本属性</a></li> <li><a href="#web%E5%AD%97%E4%BD%93">Web字体</a></li> </ul> </li> <li><a href="#%E9%A2%9C%E8%89%B2%E4%B8%8E%E8%83%8C%E6%99%AF">颜色与背景</a> <ul> <li><a href="#%E9%A2%9C%E8%89%B2%E8%A1%A8%E7%A4%BA%E6%96%B9%E6%B3%95">颜色表示方法</a></li> <li><a href="#%E8%83%8C%E6%99%AF%E5%B1%9E%E6%80%A7">背景属性</a></li> <li><a href="#%E6%B8%90%E5%8F%98%E6%95%88%E6%9E%9C">渐变效果</a></li> </ul> </li> <li><a href="#%E8%BF%87%E6%B8%A1%E4%B8%8E%E5%8A%A8%E7%94%BB">过渡与动画</a> <ul> <li><a href="#css%E8%BF%87%E6%B8%A1">CSS过渡</a></li> <li><a href="#css%E5%8A%A8%E7%94%BB">CSS动画</a></li> <li><a href="#%E5%8F%98%E6%8D%A2transform">变换Transform</a></li> </ul> </li> <li><a href="#css%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8">CSS预处理器</a> <ul> <li><a href="#sassscss">Sass/SCSS</a></li> <li><a href="#less">Less</a></li> <li><a href="#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8%E5%AF%B9%E6%AF%94">预处理器对比</a></li> </ul> </li> <li><a href="#css%E6%9E%B6%E6%9E%84%E4%B8%8E%E8%A7%84%E8%8C%83">CSS架构与规范</a> <ul> <li><a href="#bem%E5%91%BD%E5%90%8D%E8%A7%84%E8%8C%83">BEM命名规范</a></li> <li><a href="#css%E6%A8%A1%E5%9D%97%E5%8C%96">CSS模块化</a></li> <li><a href="#css-in-js">CSS-in-JS</a></li> </ul> </li> <li><a href="#%E5%AE%9E%E6%88%98%E6%8A%80%E5%B7%A7">实战技巧</a> <ul> <li><a href="#%E5%B8%B8%E8%A7%81%E5%B8%83%E5%B1%80%E5%AE%9E%E7%8E%B0">常见布局实现</a></li> <li><a href="#css%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96">CSS性能优化</a></li> <li><a href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7">浏览器兼容性</a></li> </ul> </li> </ul> </li> </ul> </details> <hr> <h2 id="css概述">CSS概述</h2> <h3 id="什么是css">什么是CSS</h3> <p><strong>CSS</strong>（Cascading Style Sheets，层叠样式表）是用于描述 HTML 文档<strong>外观和格式</strong>的样式表语言。</p> <p><strong>CSS 的作用：</strong></p> <ul> <li><strong>分离内容与表现</strong>：HTML 负责结构，CSS 负责样式</li> <li><strong>统一样式管理</strong>：一处修改，全站生效</li> <li><strong>丰富的视觉效果</strong>：布局、颜色、动画等</li> <li><strong>响应式设计</strong>：适配不同设备</li> </ul> <p><strong>CSS 基本语法：</strong></p>