https://pothos.dpdns.org/tags/html/Recent content in HTML on Ralph's BlogHugo -- 0.147.7zh-cnThu, 25 Dec 2025 00:00:00 +0000https://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>