[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"article-html学习笔记":22,"comments-html学习笔记":43,"footer-socials":44},{"site_title":4,"site_subtitle":5,"home_intro":6,"avatar":7,"seo_keywords":8,"seo_description":9,"site_subtitle_highlight":10,"home_description":11,"about_name":12,"about_intro":13,"code_comment_2":14,"code_log":15,"code_skills":16,"code_goal":17,"code_comment_1":18,"meteor_density":19,"meteor_max_count":19,"meteor_enabled":20,"meteor_speed":21},"ShineGoldYao","架构代码，","全栈开发者 \u002F 开源爱好者 \u002F 技术探索者","https:\u002F\u002Fforuda.gitee.com\u002Favatar\u002F1762402862010015318\u002F16382196_yaoxingjin_1762402861.png!avatar200","ShiGoldYao,技术博客,全栈开发","专注于前沿技术分享与开源项目展示的个人技术博客","书写未来。","大家好，我是 ShiGoldYao。一名全栈学习与技术爱好者。在这里，我分享关于现代 Web 开发、技术框架学习记录以及极客生活的深度思考。","ShiGoldYao","我是一名全栈技术学习者，对构建高性能、可扩展的现代 Web 应用充满热情。过去一年里，我从初识互联网前后端开发，到逐步沉淀技术体系，始终保持着对前端、后端与工程化的持续探索。\n\n我坚信 “代码如诗”。除了日常学习与项目实践，我也会花大量时间关注开源社区，尝试摸索 WebAssembly、Rust 等前沿技术在浏览器端的更多可能，不断挑战性能与体验的边界。\n\n生活里的我并不只有代码：闲暇时会打打永劫无间，享受博弈与操作的快感；也喜欢打乒乓球，在运动中放松自己；当然，最幸福的时光，还是和女朋友一起慢慢生活、认真恋爱。","\u002F\u002F 🚀 开启学习之旅","","Vue , TypeScript , Nest , Mysql","成为优秀的前端全栈工程师","\u002F\u002F 欢迎来到我的技术世界","3","true","5",{"id":23,"title":24,"slug":25,"coverUrl":15,"summary":15,"content":26,"htmlContent":27,"categoryId":28,"viewCount":29,"likeCount":30,"isTop":30,"isPublish":31,"seoKeywords":15,"seoDescription":15,"publishTime":32,"createTime":33,"updateTime":34,"deleteTime":35,"category":36,"tags":42},"4","HTML 学习笔记","html学习笔记","# HTML 学习笔记\n\n> 专为前端工程师设计的 HTML 基础与进阶学习笔记\n\n---\n\n## 目录\n\n- [一、HTML 简介](#一html-简介)\n- [二、HTML 基础结构](#二html-基础结构)\n- [三、常用标签](#三常用标签)\n- [四、文本格式化](#四文本格式化)\n- [五、列表](#五列表)\n- [六、表格](#六表格)\n- [七、表单](#七表单)\n- [八、多媒体](#八多媒体)\n- [九、HTML5 语义化标签](#九html5-语义化标签)\n- [十、HTML5 新特性](#十html5-新特性)\n- [十一、文档结构](#十一文档结构)\n- [十二、实战示例](#十二实战示例)\n- [十三、最佳实践](#十三最佳实践)\n- [十四、快速参考](#十四快速参考)\n\n---\n\n## 一、HTML 简介\n\n### 1.1 什么是 HTML\n\nHTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。\n\n**特点：**\n- 不是编程语言，而是标记语言\n- 使用标签来描述网页结构\n- 浏览器解析 HTML 并渲染为可视化页面\n\n### 1.2 HTML 版本历史\n\n| 版本 | 发布年份 | 主要特性 |\n|------|----------|----------|\n| HTML 1.0 | 1993 | 基础标签 |\n| HTML 2.0 | 1995 | 表单、表格 |\n| HTML 3.2 | 1997 | CSS 支持 |\n| HTML 4.01 | 1999 | 严格规范 |\n| XHTML 1.0 | 2000 | XML 语法 |\n| HTML5 | 2014 | 语义化、多媒体、API |\n\n### 1.3 HTML 文档结构\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"zh-CN\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Ctitle>网页标题\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003C!-- 页面内容 -->\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n---\n\n## 二、HTML 基础结构\n\n### 2.1 DOCTYPE 声明\n\n```html\n\u003C!-- HTML5 -->\n\u003C!DOCTYPE html>\n\n\u003C!-- HTML4.01 严格模式 -->\n\u003C!DOCTYPE HTML PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Fstrict.dtd\">\n\n\u003C!-- XHTML 1.0 -->\n\u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.0 Strict\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-strict.dtd\">\n```\n\n### 2.2 html 标签\n\n```html\n\u003Chtml lang=\"zh-CN\">\n    \u003C!-- 页面内容 -->\n\u003C\u002Fhtml>\n```\n\n**常用属性：**\n- `lang`：指定文档语言（zh-CN, en-US, ja-JP）\n- `xmlns`：命名空间（XHTML）\n\n### 2.3 head 标签\n\n```html\n\u003Chead>\n    \u003C!-- 字符编码 -->\n    \u003Cmeta charset=\"UTF-8\">\n    \n    \u003C!-- 视口设置（移动端） -->\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \n    \u003C!-- 页面标题 -->\n    \u003Ctitle>网页标题\u003C\u002Ftitle>\n    \n    \u003C!-- SEO 关键词 -->\n    \u003Cmeta name=\"keywords\" content=\"HTML, CSS, JavaScript\">\n    \n    \u003C!-- SEO 描述 -->\n    \u003Cmeta name=\"description\" content=\"这是一个学习 HTML 的网页\">\n    \n    \u003C!-- 作者 -->\n    \u003Cmeta name=\"author\" content=\"作者名\">\n    \n    \u003C!-- 引入 CSS -->\n    \u003Clink rel=\"stylesheet\" href=\"style.css\">\n    \n    \u003C!-- 内联 CSS -->\n    \u003Cstyle>\n        body { margin: 0; }\n    \u003C\u002Fstyle>\n    \n    \u003C!-- 引入 JavaScript -->\n    \u003Cscript src=\"script.js\">\u003C\u002Fscript>\n    \n    \u003C!-- 内联 JavaScript -->\n    \u003Cscript>\n        console.log('Hello World');\n    \u003C\u002Fscript>\n\u003C\u002Fhead>\n```\n\n### 2.4 body 标签\n\n```html\n\u003Cbody>\n    \u003C!-- 页面可见内容 -->\n\u003C\u002Fbody>\n```\n\n---\n\n## 三、常用标签\n\n### 3.1 标题标签\n\n```html\n\u003Ch1>一级标题\u003C\u002Fh1>\n\u003Ch2>二级标题\u003C\u002Fh2>\n\u003Ch3>三级标题\u003C\u002Fh3>\n\u003Ch4>四级标题\u003C\u002Fh4>\n\u003Ch5>五级标题\u003C\u002Fh5>\n\u003Ch6>六级标题\u003C\u002Fh6>\n```\n\n**使用原则：**\n- 一个页面只有一个 h1\n- 标题级别按顺序递增\n- 不要为了样式选择标题级别\n\n### 3.2 段落标签\n\n```html\n\u003Cp>这是一个段落\u003C\u002Fp>\n\u003Cp>这是另一个段落\u003C\u002Fp>\n\n\u003C!-- 换行 -->\n\u003Cbr>\n\n\u003C!-- 水平线 -->\n\u003Chr>\n```\n\n### 3.3 链接标签\n\n```html\n\u003C!-- 基本链接 -->\n\u003Ca href=\"https:\u002F\u002Fwww.example.com\">访问网站\u003C\u002Fa>\n\n\u003C!-- 相对路径 -->\n\u003Ca href=\"about.html\">关于我们\u003C\u002Fa>\n\n\u003C!-- 锚点链接 -->\n\u003Ca href=\"#section1\">跳转到第一部分\u003C\u002Fa>\n\n\u003C!-- 打开新窗口 -->\n\u003Ca href=\"https:\u002F\u002Fwww.example.com\" target=\"_blank\">新窗口打开\u003C\u002Fa>\n\n\u003C!-- 下载链接 -->\n\u003Ca href=\"file.pdf\" download>下载文件\u003C\u002Fa>\n\n\u003C!-- 邮件链接 -->\n\u003Ca href=\"mailto:example@example.com\">发送邮件\u003C\u002Fa>\n\n\u003C!-- 电话链接 -->\n\u003Ca href=\"tel:13800138000\">拨打电话\u003C\u002Fa>\n```\n\n**target 属性值：**\n- `_self`：当前窗口（默认）\n- `_blank`：新窗口\n- `_parent`：父框架\n- `_top`：顶层框架\n\n### 3.4 图片标签\n\n```html\n\u003C!-- 基本图片 -->\n\u003Cimg src=\"image.jpg\" alt=\"图片描述\">\n\n\u003C!-- 指定宽高 -->\n\u003Cimg src=\"image.jpg\" alt=\"图片描述\" width=\"300\" height=\"200\">\n\n\u003C!-- 响应式图片 -->\n\u003Cimg src=\"image.jpg\" alt=\"图片描述\" style=\"max-width: 100%;\">\n\n\u003C!-- 图片懒加载 -->\n\u003Cimg src=\"image.jpg\" alt=\"图片描述\" loading=\"lazy\">\n\n\u003C!-- 错误处理 -->\n\u003Cimg src=\"image.jpg\" alt=\"图片描述\" onerror=\"this.src='fallback.jpg'\">\n```\n\n**常用属性：**\n- `src`：图片路径\n- `alt`：替代文本（必填，用于 SEO 和无障碍访问）\n- `width\u002Fheight`：宽度和高度\n- `title`：鼠标悬停提示\n- `loading`：加载方式（eager, lazy）\n\n### 3.5 div 和 span\n\n```html\n\u003C!-- div：块级元素 -->\n\u003Cdiv class=\"container\">\n    \u003Cdiv class=\"header\">头部\u003C\u002Fdiv>\n    \u003Cdiv class=\"content\">内容\u003C\u002Fdiv>\n    \u003Cdiv class=\"footer\">底部\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- span：行内元素 -->\n\u003Cp>这是一段\u003Cspan style=\"color: red;\">红色\u003C\u002Fspan>文字\u003C\u002Fp>\n```\n\n**区别：**\n- `div`：块级元素，独占一行\n- `span`：行内元素，不独占一行\n\n---\n\n## 四、文本格式化\n\n### 4.1 文本样式\n\n```html\n\u003C!-- 粗体 -->\n\u003Cstrong>重要文本\u003C\u002Fstrong>\n\u003Cb>粗体文本\u003C\u002Fb>\n\n\u003C!-- 斜体 -->\n\u003Cem>强调文本\u003C\u002Fem>\n\u003Ci>斜体文本\u003C\u002Fi>\n\n\u003C!-- 下划线 -->\n\u003Cu>下划线文本\u003C\u002Fu>\n\n\u003C!-- 删除线 -->\n\u003Cdel>删除文本\u003C\u002Fdel>\n\u003Cs>删除线文本\u003C\u002Fs>\n\n\u003C!-- 上标和下标 -->\nH\u003Csub>2\u003C\u002Fsub>O\nX\u003Csup>2\u003C\u002Fsup>\n\n\u003C!-- 小号文本 -->\n\u003Csmall>小号文本\u003C\u002Fsmall>\n\n\u003C!-- 标记文本 -->\n\u003Cmark>高亮文本\u003C\u002Fmark>\n\n\u003C!-- 代码 -->\n\u003Ccode>console.log('Hello');\u003C\u002Fcode>\n\u003Cpre>格式化文本\u003C\u002Fpre>\n\u003Ckbd>Ctrl\u003C\u002Fkbd> + \u003Ckbd>C\u003C\u002Fkbd>\n\n\u003C!-- 引用 -->\n\u003Cblockquote>这是一段引用\u003C\u002Fblockquote>\n\u003Cq>行内引用\u003C\u002Fq>\n\n\u003C!-- 缩写 -->\n\u003Cabbr title=\"HyperText Markup Language\">HTML\u003C\u002Fabbr>\n```\n\n### 4.2 特殊字符\n\n```html\n\u003C!-- 空格 -->\n \n\n\u003C!-- 小于号 -->\n<\n\n\u003C!-- 大于号 -->\n>\n\n\u003C!-- 版权符号 -->\n©\n\n\u003C!-- 注册商标 -->\n®\n\n\u003C!-- 商标符号 -->\n™\n\n\u003C!-- 人民币符号 -->\n¥\n\n\u003C!-- 欧元符号 -->\n€\n\n\u003C!-- 美元符号 -->\n$\n```\n\n---\n\n## 五、列表\n\n### 5.1 无序列表\n\n```html\n\u003Cul>\n    \u003Cli>列表项1\u003C\u002Fli>\n    \u003Cli>列表项2\u003C\u002Fli>\n    \u003Cli>列表项3\u003C\u002Fli>\n\u003C\u002Ful>\n```\n\n**type 属性：**\n- `disc`：实心圆（默认）\n- `circle`：空心圆\n- `square`：实心方块\n\n### 5.2 有序列表\n\n```html\n\u003Col>\n    \u003Cli>第一项\u003C\u002Fli>\n    \u003Cli>第二项\u003C\u002Fli>\n    \u003Cli>第三项\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003C!-- 指定起始值 -->\n\u003Col start=\"5\">\n    \u003Cli>第五项\u003C\u002Fli>\n    \u003Cli>第六项\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003C!-- 指定类型 -->\n\u003Col type=\"A\">\n    \u003Cli>第一项\u003C\u002Fli>\n    \u003Cli>第二项\u003C\u002Fli>\n\u003C\u002Fol>\n```\n\n**type 属性值：**\n- `1`：数字（默认）\n- `A`：大写字母\n- `a`：小写字母\n- `I`：大写罗马数字\n- `i`：小写罗马数字\n\n### 5.3 定义列表\n\n```html\n\u003Cdl>\n    \u003Cdt>HTML\u003C\u002Fdt>\n    \u003Cdd>超文本标记语言\u003C\u002Fdd>\n    \n    \u003Cdt>CSS\u003C\u002Fdt>\n    \u003Cdd>层叠样式表\u003C\u002Fdd>\n    \n    \u003Cdt>JavaScript\u003C\u002Fdt>\n    \u003Cdd>脚本语言\u003C\u002Fdd>\n\u003C\u002Fdl>\n```\n\n### 5.4 嵌套列表\n\n```html\n\u003Cul>\n    \u003Cli>\n        一级菜单\n        \u003Cul>\n            \u003Cli>二级菜单1\u003C\u002Fli>\n            \u003Cli>二级菜单2\u003C\u002Fli>\n        \u003C\u002Ful>\n    \u003C\u002Fli>\n    \u003Cli>一级菜单2\u003C\u002Fli>\n\u003C\u002Ful>\n```\n\n---\n\n## 六、表格\n\n### 6.1 基本表格\n\n```html\n\u003Ctable>\n    \u003Cthead>\n        \u003Ctr>\n            \u003Cth>姓名\u003C\u002Fth>\n            \u003Cth>年龄\u003C\u002Fth>\n            \u003Cth>邮箱\u003C\u002Fth>\n        \u003C\u002Ftr>\n    \u003C\u002Fthead>\n    \u003Ctbody>\n        \u003Ctr>\n            \u003Ctd>张三\u003C\u002Ftd>\n            \u003Ctd>25\u003C\u002Ftd>\n            \u003Ctd>zhangsan@example.com\u003C\u002Ftd>\n        \u003C\u002Ftr>\n        \u003Ctr>\n            \u003Ctd>李四\u003C\u002Ftd>\n            \u003Ctd>30\u003C\u002Ftd>\n            \u003Ctd>lisi@example.com\u003C\u002Ftd>\n        \u003C\u002Ftr>\n    \u003C\u002Ftbody>\n    \u003Ctfoot>\n        \u003Ctr>\n            \u003Ctd colspan=\"3\">共2条记录\u003C\u002Ftd>\n        \u003C\u002Ftr>\n    \u003C\u002Ftfoot>\n\u003C\u002Ftable>\n```\n\n### 6.2 表格属性\n\n```html\n\u003Ctable border=\"1\" cellpadding=\"10\" cellspacing=\"0\" width=\"100%\">\n    \u003C!-- border：边框宽度 -->\n    \u003C!-- cellpadding：单元格内边距 -->\n    \u003C!-- cellspacing：单元格间距 -->\n    \u003C!-- width：表格宽度 -->\n\u003C\u002Ftable>\n```\n\n### 6.3 单元格合并\n\n```html\n\u003Ctable>\n    \u003Ctr>\n        \u003C!-- 跨列合并 -->\n        \u003Ctd colspan=\"2\">合并两列\u003C\u002Ftd>\n        \u003Ctd>普通单元格\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n        \u003C!-- 跨行合并 -->\n        \u003Ctd rowspan=\"2\">合并两行\u003C\u002Ftd>\n        \u003Ctd>普通单元格\u003C\u002Ftd>\n        \u003Ctd>普通单元格\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n        \u003Ctd>普通单元格\u003C\u002Ftd>\n        \u003Ctd>普通单元格\u003C\u002Ftd>\n    \u003C\u002Ftr>\n\u003C\u002Ftable>\n```\n\n### 6.4 表格样式\n\n```html\n\u003Ctable class=\"table\">\n    \u003Cthead>\n        \u003Ctr>\n            \u003Cth>姓名\u003C\u002Fth>\n            \u003Cth>年龄\u003C\u002Fth>\n        \u003C\u002Ftr>\n    \u003C\u002Fthead>\n    \u003Ctbody>\n        \u003Ctr>\n            \u003Ctd>张三\u003C\u002Ftd>\n            \u003Ctd>25\u003C\u002Ftd>\n        \u003C\u002Ftr>\n    \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n\u003Cstyle>\n.table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.table th,\n.table td {\n    border: 1px solid #ddd;\n    padding: 8px;\n    text-align: left;\n}\n\n.table th {\n    background-color: #f5f5f5;\n}\n\n.table tr:hover {\n    background-color: #f9f9f9;\n}\n\u003C\u002Fstyle>\n```\n\n---\n\n## 七、表单\n\n### 7.1 表单标签\n\n```html\n\u003Cform action=\"\u002Fsubmit\" method=\"POST\">\n    \u003C!-- 表单控件 -->\n\u003C\u002Fform>\n```\n\n**常用属性：**\n- `action`：提交地址\n- `method`：请求方法（GET, POST）\n- `enctype`：编码类型\n  - `application\u002Fx-www-form-urlencoded`（默认）\n  - `multipart\u002Fform-data`（文件上传）\n  - `text\u002Fplain`\n- `target`：响应显示位置\n- `autocomplete`：自动完成（on, off）\n- `novalidate`：禁用验证\n\n### 7.2 输入控件\n\n```html\n\u003C!-- 文本输入 -->\n\u003Cinput type=\"text\" name=\"username\" placeholder=\"请输入用户名\">\n\n\u003C!-- 密码输入 -->\n\u003Cinput type=\"password\" name=\"password\" placeholder=\"请输入密码\">\n\n\u003C!-- 邮箱输入 -->\n\u003Cinput type=\"email\" name=\"email\" placeholder=\"请输入邮箱\">\n\n\u003C!-- 数字输入 -->\n\u003Cinput type=\"number\" name=\"age\" min=\"0\" max=\"120\" step=\"1\">\n\n\u003C!-- 电话输入 -->\n\u003Cinput type=\"tel\" name=\"phone\" placeholder=\"请输入电话\">\n\n\u003C!-- URL 输入 -->\n\u003Cinput type=\"url\" name=\"website\" placeholder=\"请输入网址\">\n\n\u003C!-- 搜索输入 -->\n\u003Cinput type=\"search\" name=\"search\" placeholder=\"搜索\">\n\n\u003C!-- 日期输入 -->\n\u003Cinput type=\"date\" name=\"birthday\">\n\n\u003C!-- 时间输入 -->\n\u003Cinput type=\"time\" name=\"time\">\n\n\u003C!-- 日期时间输入 -->\n\u003Cinput type=\"datetime-local\" name=\"datetime\">\n\n\u003C!-- 月份输入 -->\n\u003Cinput type=\"month\" name=\"month\">\n\n\u003C!-- 周输入 -->\n\u003Cinput type=\"week\" name=\"week\">\n\n\u003C!-- 颜色选择器 -->\n\u003Cinput type=\"color\" name=\"color\">\n\n\u003C!-- 范围滑块 -->\n\u003Cinput type=\"range\" name=\"volume\" min=\"0\" max=\"100\" value=\"50\">\n\n\u003C!-- 文件上传 -->\n\u003Cinput type=\"file\" name=\"file\" accept=\".jpg,.png,.pdf\">\n\n\u003C!-- 隐藏字段 -->\n\u003Cinput type=\"hidden\" name=\"token\" value=\"abc123\">\n\n\u003C!-- 单选按钮 -->\n\u003Cinput type=\"radio\" name=\"gender\" value=\"male\" id=\"male\">\n\u003Clabel for=\"male\">男\u003C\u002Flabel>\n\u003Cinput type=\"radio\" name=\"gender\" value=\"female\" id=\"female\">\n\u003Clabel for=\"female\">女\u003C\u002Flabel>\n\n\u003C!-- 复选框 -->\n\u003Cinput type=\"checkbox\" name=\"hobby\" value=\"reading\" id=\"reading\">\n\u003Clabel for=\"reading\">阅读\u003C\u002Flabel>\n\u003Cinput type=\"checkbox\" name=\"hobby\" value=\"music\" id=\"music\">\n\u003Clabel for=\"music\">音乐\u003C\u002Flabel>\n\n\u003C!-- 按钮 -->\n\u003Cinput type=\"button\" value=\"普通按钮\">\n\u003Cinput type=\"submit\" value=\"提交按钮\">\n\u003Cinput type=\"reset\" value=\"重置按钮\">\n```\n\n### 7.3 文本域\n\n```html\n\u003Ctextarea \n    name=\"message\" \n    rows=\"5\" \n    cols=\"30\" \n    placeholder=\"请输入留言\"\n    maxlength=\"500\"\n    required>\n\u003C\u002Ftextarea>\n```\n\n### 7.4 下拉列表\n\n```html\n\u003C!-- 基本下拉列表 -->\n\u003Cselect name=\"city\">\n    \u003Coption value=\"beijing\">北京\u003C\u002Foption>\n    \u003Coption value=\"shanghai\">上海\u003C\u002Foption>\n    \u003Coption value=\"guangzhou\">广州\u003C\u002Foption>\n\u003C\u002Fselect>\n\n\u003C!-- 禁用选项 -->\n\u003Cselect name=\"city\">\n    \u003Coption value=\"\">请选择城市\u003C\u002Foption>\n    \u003Coption value=\"beijing\">北京\u003C\u002Foption>\n    \u003Coption value=\"shanghai\" disabled>上海（不可选）\u003C\u002Foption>\n    \u003Coption value=\"guangzhou\">广州\u003C\u002Foption>\n\u003C\u002Fselect>\n\n\u003C!-- 默认选中 -->\n\u003Cselect name=\"city\">\n    \u003Coption value=\"beijing\" selected>北京\u003C\u002Foption>\n    \u003Coption value=\"shanghai\">上海\u003C\u002Foption>\n    \u003Coption value=\"guangzhou\">广州\u003C\u002Foption>\n\u003C\u002Fselect>\n\n\u003C!-- 分组 -->\n\u003Cselect name=\"province\">\n    \u003Coptgroup label=\"华北\">\n        \u003Coption value=\"beijing\">北京\u003C\u002Foption>\n        \u003Coption value=\"tianjin\">天津\u003C\u002Foption>\n    \u003C\u002Foptgroup>\n    \u003Coptgroup label=\"华东\">\n        \u003Coption value=\"shanghai\">上海\u003C\u002Foption>\n        \u003Coption value=\"hangzhou\">杭州\u003C\u002Foption>\n    \u003C\u002Foptgroup>\n\u003C\u002Fselect>\n\n\u003C!-- 多选 -->\n\u003Cselect name=\"cities\" multiple size=\"5\">\n    \u003Coption value=\"beijing\">北京\u003C\u002Foption>\n    \u003Coption value=\"shanghai\">上海\u003C\u002Foption>\n    \u003Coption value=\"guangzhou\">广州\u003C\u002Foption>\n    \u003Coption value=\"shenzhen\">深圳\u003C\u002Foption>\n    \u003Coption value=\"hangzhou\">杭州\u003C\u002Foption>\n\u003C\u002Fselect>\n```\n\n### 7.5 按钮\n\n```html\n\u003C!-- button 标签 -->\n\u003Cbutton type=\"button\">普通按钮\u003C\u002Fbutton>\n\u003Cbutton type=\"submit\">提交按钮\u003C\u002Fbutton>\n\u003Cbutton type=\"reset\">重置按钮\u003C\u002Fbutton>\n\n\u003C!-- 图片按钮 -->\n\u003Cbutton type=\"submit\">\n    \u003Cimg src=\"submit.png\" alt=\"提交\">\n\u003C\u002Fbutton>\n```\n\n### 7.6 标签关联\n\n```html\n\u003C!-- 方式1：使用 for 属性 -->\n\u003Cinput type=\"text\" id=\"username\" name=\"username\">\n\u003Clabel for=\"username\">用户名\u003C\u002Flabel>\n\n\u003C!-- 方式2：嵌套 -->\n\u003Clabel>\n    用户名：\n    \u003Cinput type=\"text\" name=\"username\">\n\u003C\u002Flabel>\n```\n\n### 7.7 表单分组\n\n```html\n\u003Cform>\n    \u003Cfieldset>\n        \u003Clegend>个人信息\u003C\u002Flegend>\n        \u003Clabel>姓名：\u003Cinput type=\"text\" name=\"name\">\u003C\u002Flabel>\n        \u003Clabel>邮箱：\u003Cinput type=\"email\" name=\"email\">\u003C\u002Flabel>\n    \u003C\u002Ffieldset>\n    \n    \u003Cfieldset>\n        \u003Clegend>联系方式\u003C\u002Flegend>\n        \u003Clabel>电话：\u003Cinput type=\"tel\" name=\"phone\">\u003C\u002Flabel>\n        \u003Clabel>地址：\u003Cinput type=\"text\" name=\"address\">\u003C\u002Flabel>\n    \u003C\u002Ffieldset>\n\u003C\u002Fform>\n```\n\n### 7.8 表单验证\n\n```html\n\u003Cform novalidate>\n    \u003C!-- 必填 -->\n    \u003Cinput type=\"text\" name=\"username\" required>\n    \n    \u003C!-- 最小\u002F最大长度 -->\n    \u003Cinput type=\"text\" name=\"username\" minlength=\"3\" maxlength=\"20\">\n    \n    \u003C!-- 最小\u002F最大值 -->\n    \u003Cinput type=\"number\" name=\"age\" min=\"0\" max=\"120\">\n    \n    \u003C!-- 正则表达式 -->\n    \u003Cinput type=\"text\" name=\"phone\" pattern=\"^1[3-9]\\d{9}$\">\n    \n    \u003C!-- 自定义错误提示 -->\n    \u003Cinput type=\"email\" name=\"email\" required>\n    \u003Cspan class=\"error-message\">请输入有效的邮箱地址\u003C\u002Fspan>\n    \n    \u003C!-- 只读 -->\n    \u003Cinput type=\"text\" name=\"readonly\" value=\"只读\" readonly>\n    \n    \u003C!-- 禁用 -->\n    \u003Cinput type=\"text\" name=\"disabled\" value=\"禁用\" disabled>\n\u003C\u002Fform>\n```\n\n---\n\n## 八、多媒体\n\n### 8.1 音频\n\n```html\n\u003C!-- 基本音频 -->\n\u003Caudio src=\"audio.mp3\" controls>\u003C\u002Faudio>\n\n\u003C!-- 多种格式兼容 -->\n\u003Caudio controls>\n    \u003Csource src=\"audio.mp3\" type=\"audio\u002Fmpeg\">\n    \u003Csource src=\"audio.ogg\" type=\"audio\u002Fogg\">\n    您的浏览器不支持音频播放\n\u003C\u002Faudio>\n\n\u003C!-- 自动播放 -->\n\u003Caudio src=\"audio.mp3\" autoplay>\u003C\u002Faudio>\n\n\u003C!-- 循环播放 -->\n\u003Caudio src=\"audio.mp3\" loop>\u003C\u002Faudio>\n\n\u003C!-- 静音 -->\n\u003Caudio src=\"audio.mp3\" muted>\u003C\u002Faudio>\n\n\u003C!-- 预加载 -->\n\u003Caudio src=\"audio.mp3\" preload=\"auto\">\u003C\u002Faudio>\n```\n\n**preload 属性值：**\n- `none`：不预加载\n- `metadata`：只加载元数据\n- `auto`：预加载整个文件\n\n### 8.2 视频\n\n```html\n\u003C!-- 基本视频 -->\n\u003Cvideo src=\"video.mp4\" controls width=\"640\" height=\"480\">\u003C\u002Fvideo>\n\n\u003C!-- 多种格式兼容 -->\n\u003Cvideo controls width=\"640\" height=\"480\">\n    \u003Csource src=\"video.mp4\" type=\"video\u002Fmp4\">\n    \u003Csource src=\"video.webm\" type=\"video\u002Fwebm\">\n    \u003Csource src=\"video.ogv\" type=\"video\u002Fogg\">\n    您的浏览器不支持视频播放\n\u003C\u002Fvideo>\n\n\u003C!-- 自动播放 -->\n\u003Cvideo src=\"video.mp4\" autoplay muted>\u003C\u002Fvideo>\n\n\u003C!-- 循环播放 -->\n\u003Cvideo src=\"video.mp4\" loop>\u003C\u002Fvideo>\n\n\u003C!-- 封面图 -->\n\u003Cvideo src=\"video.mp4\" poster=\"poster.jpg\">\u003C\u002Fvideo>\n\n\u003C!-- 内联播放 -->\n\u003Cvideo src=\"video.mp4\" playsinline>\u003C\u002Fvideo>\n```\n\n### 8.3 嵌入内容\n\n```html\n\u003C!-- 嵌入网页 -->\n\u003Ciframe src=\"https:\u002F\u002Fwww.example.com\" width=\"800\" height=\"600\">\u003C\u002Fiframe>\n\n\u003C!-- 嵌入视频（YouTube） -->\n\u003Ciframe \n    width=\"560\" \n    height=\"315\" \n    src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FVIDEO_ID\"\n    frameborder=\"0\"\n    allowfullscreen>\n\u003C\u002Fiframe>\n\n\u003C!-- 嵌入地图 -->\n\u003Ciframe \n    src=\"https:\u002F\u002Fmaps.google.com\u002Fmaps?q=ADDRESS&output=embed\"\n    width=\"600\" \n    height=\"450\">\n\u003C\u002Fiframe>\n\n\u003C!-- 嵌入 PDF -->\n\u003Cembed src=\"document.pdf\" type=\"application\u002Fpdf\" width=\"100%\" height=\"600px\">\n\n\u003C!-- 嵌入 Flash（已废弃） -->\n\u003Cobject data=\"movie.swf\" type=\"application\u002Fx-shockwave-flash\">\n    \u003Cparam name=\"quality\" value=\"high\">\n\u003C\u002Fobject>\n```\n\n### 8.4 Canvas\n\n```html\n\u003Ccanvas id=\"myCanvas\" width=\"400\" height=\"300\">\n    您的浏览器不支持 Canvas\n\u003C\u002Fcanvas>\n\n\u003Cscript>\n    const canvas = document.getElementById('myCanvas');\n    const ctx = canvas.getContext('2d');\n    \n    ctx.fillStyle = 'red';\n    ctx.fillRect(10, 10, 100, 100);\n\u003C\u002Fscript>\n```\n\n---\n\n## 九、HTML5 语义化标签\n\n### 9.1 页面结构\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"zh-CN\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Ctitle>语义化页面\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003C!-- 页眉 -->\n    \u003Cheader>\n        \u003Ch1>网站标题\u003C\u002Fh1>\n        \u003Cnav>\n            \u003Cul>\n                \u003Cli>\u003Ca href=\"#home\">首页\u003C\u002Fa>\u003C\u002Fli>\n                \u003Cli>\u003Ca href=\"#about\">关于\u003C\u002Fa>\u003C\u002Fli>\n                \u003Cli>\u003Ca href=\"#contact\">联系\u003C\u002Fa>\u003C\u002Fli>\n            \u003C\u002Ful>\n        \u003C\u002Fnav>\n    \u003C\u002Fheader>\n    \n    \u003C!-- 主要内容 -->\n    \u003Cmain>\n        \u003Carticle>\n            \u003Ch2>文章标题\u003C\u002Fh2>\n            \u003Cp>文章内容...\u003C\u002Fp>\n        \u003C\u002Farticle>\n        \n        \u003Caside>\n            \u003Ch3>侧边栏\u003C\u002Fh3>\n            \u003Cp>侧边栏内容...\u003C\u002Fp>\n        \u003C\u002Faside>\n    \u003C\u002Fmain>\n    \n    \u003C!-- 页脚 -->\n    \u003Cfooter>\n        \u003Cp>© 2024 版权所有\u003C\u002Fp>\n    \u003C\u002Ffooter>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### 9.2 语义化标签列表\n\n| 标签 | 作用 | 使用场景 |\n|------|------|----------|\n| `\u003Cheader>` | 页眉 | 网站头部、区块头部 |\n| `\u003Cfooter>` | 页脚 | 网站底部、区块底部 |\n| `\u003Cnav>` | 导航 | 导航菜单 |\n| `\u003Cmain>` | 主要内容 | 页面主要内容 |\n| `\u003Carticle>` | 独立内容 | 文章、博客帖子 |\n| `\u003Csection>` | 区块 | 内容分区 |\n| `\u003Caside>` | 侧边栏 | 侧边栏内容 |\n| `\u003Cfigure>` | 图表 | 图片、图表、代码块 |\n| `\u003Cfigcaption>` | 图表说明 | 图表标题 |\n| `\u003Cdetails>` | 详情 | 可展开的详情 |\n| `\u003Csummary>` | 详情标题 | 详情标题 |\n| `\u003Cmark>` | 标记 | 高亮文本 |\n| `\u003Ctime>` | 时间 | 日期时间 |\n| `\u003Caddress>` | 地址 | 联系地址 |\n| `\u003Cprogress>` | 进度条 | 任务进度 |\n| `\u003Cmeter>` | 度量衡 | 数值显示 |\n\n### 9.3 语义化示例\n\n```html\n\u003C!-- 文章页面 -->\n\u003Carticle>\n    \u003Cheader>\n        \u003Ch1>文章标题\u003C\u002Fh1>\n        \u003Cp>\n            \u003Ctime datetime=\"2024-01-30\">2024年1月30日\u003C\u002Ftime>\n            作者：\u003Caddress>张三\u003C\u002Faddress>\n        \u003C\u002Fp>\n    \u003C\u002Fheader>\n    \n    \u003Csection>\n        \u003Ch2>引言\u003C\u002Fh2>\n        \u003Cp>文章引言内容...\u003C\u002Fp>\n    \u003C\u002Fsection>\n    \n    \u003Csection>\n        \u003Ch2>正文\u003C\u002Fh2>\n        \u003Cp>文章正文内容...\u003C\u002Fp>\n        \n        \u003Cfigure>\n            \u003Cimg src=\"image.jpg\" alt=\"图片说明\">\n            \u003Cfigcaption>图片标题\u003C\u002Ffigcaption>\n        \u003C\u002Ffigure>\n    \u003C\u002Fsection>\n    \n    \u003Cfooter>\n        \u003Cp>标签：\u003Cmark>HTML\u003C\u002Fmark> \u003Cmark>CSS\u003C\u002Fmark> \u003Cmark>JavaScript\u003C\u002Fmark>\u003C\u002Fp>\n    \u003C\u002Ffooter>\n\u003C\u002Farticle>\n\n\u003C!-- 侧边栏 -->\n\u003Caside>\n    \u003Csection>\n        \u003Ch3>热门文章\u003C\u002Fh3>\n        \u003Cul>\n            \u003Cli>\u003Ca href=\"#\">文章1\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"#\">文章2\u003C\u002Fa>\u003C\u002Fli>\n        \u003C\u002Ful>\n    \u003C\u002Fsection>\n    \n    \u003Csection>\n        \u003Ch3>最新评论\u003C\u002Fh3>\n        \u003Cul>\n            \u003Cli>评论1\u003C\u002Fli>\n            \u003Cli>评论2\u003C\u002Fli>\n        \u003C\u002Ful>\n    \u003C\u002Fsection>\n\u003C\u002Faside>\n\n\u003C!-- 详情折叠 -->\n\u003Cdetails>\n    \u003Csummary>查看更多\u003C\u002Fsummary>\n    \u003Cp>更多内容...\u003C\u002Fp>\n\u003C\u002Fdetails>\n\n\u003C!-- 进度条 -->\n\u003Cprogress value=\"70\" max=\"100\">70%\u003C\u002Fprogress>\n\n\u003C!-- 度量衡 -->\n\u003Cmeter value=\"0.6\" min=\"0\" max=\"1\" low=\"0.3\" high=\"0.7\" optimum=\"0.5\">\n    60%\n\u003C\u002Fmeter>\n```\n\n---\n\n## 十、HTML5 新特性\n\n### 10.1 新增表单类型\n\n```html\n\u003C!-- 颜色选择器 -->\n\u003Cinput type=\"color\" name=\"color\">\n\n\u003C!-- 日期选择器 -->\n\u003Cinput type=\"date\" name=\"date\">\n\n\u003C!-- 时间选择器 -->\n\u003Cinput type=\"time\" name=\"time\">\n\n\u003C!-- 日期时间选择器 -->\n\u003Cinput type=\"datetime-local\" name=\"datetime\">\n\n\u003C!-- 月份选择器 -->\n\u003Cinput type=\"month\" name=\"month\">\n\n\u003C!-- 周选择器 -->\n\u003Cinput type=\"week\" name=\"week\">\n\n\u003C!-- 邮箱输入 -->\n\u003Cinput type=\"email\" name=\"email\">\n\n\u003C!-- URL 输入 -->\n\u003Cinput type=\"url\" name=\"url\">\n\n\u003C!-- 电话输入 -->\n\u003Cinput type=\"tel\" name=\"tel\">\n\n\u003C!-- 搜索输入 -->\n\u003Cinput type=\"search\" name=\"search\">\n\n\u003C!-- 数字输入输入 -->\n\u003Cinput type=\"number\" name=\"number\">\n\n\u003C!-- 范围滑块 -->\n\u003Cinput type=\"range\" name=\"range\" min=\"0\" max=\"100\">\n```\n\n### 10.2 新增表单属性\n\n```html\n\u003C!-- 自动完成 -->\n\u003Cinput type=\"text\" name=\"username\" autocomplete=\"on\">\n\n\u003C!-- 自动聚焦 -->\n\u003Cinput type=\"text\" name=\"username\" autofocus>\n\n\u003C!-- 必填 -->\n\u003Cinput type=\"text\" name=\"username\" required>\n\n\u003C!-- 占位符 -->\n\u003Cinput type=\"text\" name=\"username\" placeholder=\"请输入用户名\">\n\n\u003C!-- 只读 -->\n\u003Cinput type=\"text\" name=\"username\" value=\"只读\" readonly>\n\n\u003C!-- 禁用 -->\n\u003Cinput type=\"text\" name=\"username\" value=\"禁用\" disabled>\n\n\u003C!-- 最小\u002F最大值 -->\n\u003Cinput type=\"number\" name=\"age\" min=\"0\" max=\"120\">\n\n\u003C!-- 最小\u002F最大长度 -->\n\u003Cinput type=\"text\" name=\"username\" minlength=\"3\" maxlength=\"20\">\n\n\u003C!-- 正则表达式 -->\n\u003Cinput type=\"text\" name=\"phone\" pattern=\"^1[3-9]\\d{9}$\">\n\n\u003C!-- 多选 -->\n\u003Cselect name=\"cities\" multiple>\n    \u003Coption value=\"beijing\">北京\u003C\u002Foption>\n    \u003Coption value=\"shanghai\">上海\u003C\u002Foption>\n\u003C\u002Fselect>\n\n\u003C!-- 表单关联 -->\n\u003Cinput type=\"text\" name=\"username\" form=\"myform\">\n\u003Cform id=\"myform\">\n    \u003C!-- 表单内容 -->\n\u003C\u002Fform>\n\n\u003C!-- 列表关联 -->\n\u003Cinput type=\"text\" name=\"browser\" list=\"browsers\">\n\u003Cdatalist id=\"browsers\">\n    \u003Coption value=\"Chrome\">\n    \u003Coption value=\"Firefox\">\n    \u003Coption value=\"Safari\">\n\u003C\u002Fdatalist>\n```\n\n### 10.3 新增全局属性\n\n```html\n\u003C!-- 数据属性 -->\n\u003Cdiv data-id=\"1\" data-name=\"张三\">内容\u003C\u002Fdiv>\n\n\u003C!-- 可编辑 -->\n\u003Cdiv contenteditable=\"true\">可编辑内容\u003C\u002Fdiv>\n\n\u003C!-- 隐藏 -->\n\u003Cdiv hidden>隐藏内容\u003C\u002Fdiv>\n\n\u003C!-- 拼写检查 -->\n\u003Ctextarea spellcheck=\"false\">\u003C\u002Ftextarea>\n\n\u003C!-- Tab 键索引 -->\n\u003Cinput type=\"text\" tabindex=\"1\">\n\u003Cinput type=\"text\" tabindex=\"2\">\n\n\u003C!-- 标题提示 -->\n\u003Cdiv title=\"鼠标悬停提示\">内容\u003C\u002Fdiv>\n\n\u003C!-- 类名 -->\n\u003Cdiv class=\"container\">内容\u003C\u002Fdiv>\n\n\u003C!-- ID -->\n\u003Cdiv id=\"main\">内容\u003C\u002Fdiv>\n\n\u003C!-- 样式 -->\n\u003Cdiv style=\"color: red;\">内容\u003C\u002Fdiv>\n```\n\n### 10.4 拖放 API\n\n```html\n\u003C!-- 可拖放元素 -->\n\u003Cdiv draggable=\"true\" id=\"drag1\">可拖放元素\u003C\u002Fdiv>\n\n\u003C!-- 放置区域 -->\n\u003Cdiv id=\"drop1\">放置区域\u003C\u002Fdiv>\n\n\u003Cscript>\n    const drag1 = document.getElementById('drag1');\n    const drop1 = document.getElementById('drop1');\n    \n    drag1.addEventListener('dragstart', (e) => {\n        e.dataTransfer.setData('text', e.target.id);\n    });\n    \n    drop1.addEventListener('dragover', (e) => {\n        e.preventDefault();\n    });\n    \n    drop1.addEventListener('drop', (e) => {\n        e.preventDefault();\n        const data = e.dataTransfer.getData('text');\n        drop1.appendChild(document.getElementById(data));\n    });\n\u003C\u002Fscript>\n```\n\n---\n\n## 十一、文档结构\n\n### 11.1 文档元数据\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"zh-CN\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \n    \u003C!-- 视口设置 -->\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \n    \u003C!-- 页面标题 -->\n    \u003Ctitle>页面标题\u003C\u002Ftitle>\n    \n    \u003C!-- SEO -->\n    \u003Cmeta name=\"description\" content=\"页面描述\">\n    \u003Cmeta name=\"keywords\" content=\"关键词1,关键词2\">\n    \u003Cmeta name=\"author\" content=\"作者\">\n    \n    \u003C!-- 搜索引擎 -->\n    \u003Cmeta name=\"robots\" content=\"index,follow\">\n    \n    \u003C!-- 社交媒体 -->\n    \u003Cmeta property=\"og:title\" content=\"页面标题\">\n    \u003Cmeta property=\"og:description\" content=\"页面描述\">\n    \u003Cmeta property=\"og:image\" content=\"图片URL\">\n    \u003Cmeta property=\"og:url\" content=\"页面URL\">\n    \n    \u003C!-- 图标 -->\n    \u003Clink rel=\"icon\" href=\"favicon.ico\">\n    \u003Clink rel=\"apple-touch-icon\" href=\"apple-touch-icon.png\">\n    \n    \u003C!-- 样式表 -->\n    \u003Clink rel=\"stylesheet\" href=\"style.css\">\n    \n    \u003C!-- 预加载 -->\n    \u003Clink rel=\"preload\" href=\"font.woff2\" as=\"font\">\n    \n    \u003C!-- 预连接 -->\n    \u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fapi.example.com\">\n    \n    \u003C!-- DNS 预解析 -->\n    \u003Clink rel=\"dns-prefetch\" href=\"https:\u002F\u002Fcdn.example.com\">\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003C!-- 页面内容 -->\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### 11.2 文档类型\n\n```html\n\u003C!-- HTML5 -->\n\u003C!DOCTYPE html>\n\n\u003C!-- HTML 4.01 严格模式 -->\n\u003C!DOCTYPE HTML PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Fstrict.dtd\">\n\n\u003C!-- HTML 4.01 过渡模式 -->\n\u003C!DOCTYPE HTML PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01 Transitional\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Floose.dtd\">\n\n\u003C!-- XHTML 1.0 严格模式 -->\n\u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.0 Strict\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-strict.dtd\">\n```\n\n---\n\n## 十二、实战示例\n\n### 12.1 个人简历页面\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"zh-CN\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Ctitle>个人简历\u003C\u002Ftitle>\n    \u003Cstyle>\n        body {\n            font-family: Arial, sans-serif;\n            line-height: 1.6;\n            margin: 0;\n            padding: 20px;\n            background-color: #f5f5f5;\n        }\n        \n        .container {\n            max-width: 800px;\n            margin: 0 auto;\n            background-color: white;\n            padding: 30px;\n            box-shadow: 0 0 10px rgba(0,0,0,0.1);\n        }\n        \n        header {\n            text-align: center;\n            border-bottom: 2px solid #333;\n            padding-bottom: 20px;\n            margin-bottom: 20px;\n        }\n        \n        h1 {\n            margin: 0;\n            color: #333;\n        }\n        \n        .contact-info {\n            margin-top: 10px;\n            color: #666;\n        }\n        \n        section {\n            margin-bottom: 30px;\n        }\n        \n        h2 {\n            color: #333;\n            border-bottom: 1px solid #ddd;\n            padding-bottom: 10px;\n        }\n        \n        .job, .education {\n            margin-bottom: 20px;\n        }\n        \n        .job h3, .education h3 {\n            margin: 0 0 5px 0;\n            color: #333;\n        }\n        \n        .job .date, .education .date {\n            color: #666;\n            font-size: 0.9em;\n        }\n        \n        ul {\n            padding-left: 20px;\n        }\n        \n        li {\n            margin-bottom: 5px;\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Cdiv class=\"container\">\n        \u003Cheader>\n            \u003Ch1>张三\u003C\u002Fh1>\n            \u003Cdiv class=\"contact-info\">\n                \u003Cp>邮箱：zhangsan@example.com | 电话：13800138000\u003C\u002Fp>\n                \u003Cp>地址：北京市朝阳区 | 网站：www.zhangsan.com\u003C\u002Fp>\n            \u003C\u002Fdiv>\n        \u003C\u002Fheader>\n        \n        \u003Csection>\n            \u003Ch2>个人简介\u003C\u002Fh2>\n            \u003Cp>具有5年前端开发经验，精通HTML、CSS、JavaScript，熟悉React、Vue等主流框架。具有良好的团队协作能力和问题解决能力。\u003C\u002Fp>\n        \u003C\u002Fsection>\n        \n        \u003Csection>\n            \u003Ch2>工作经历\u003C\u002Fh2>\n            \u003Cdiv class=\"job\">\n                \u003Ch3>高级前端工程师\u003C\u002Fh3>\n                \u003Cp class=\"date\">2020年 - 至今 | 某科技公司\u003C\u002Fp>\n                \u003Cul>\n                    \u003Cli>负责公司核心产品的前端开发\u003C\u002Fli>\n                    \u003Cli>优化页面性能，提升用户体验\u003C\u002Fli>\n                    \u003Cli>指导初级工程师，进行代码审查\u003C\u002Fli>\n                \u003C\u002Ful>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"job\">\n                \u003Ch3>前端工程师\u003C\u002Fh3>\n                \u003Cp class=\"date\">2018年 - 2020年 | 某互联网公司\u003C\u002Fp>\n                \u003Cul>\n                    \u003Cli>参与多个项目的开发与维护\u003C\u002Fli>\n                    \u003Cli>编写可复用的组件库\u003C\u002Fli>\n                    \u003Cli>配合后端完成接口对接\u003C\u002Fli>\n                \u003C\u002Ful>\n            \u003C\u002Fdiv>\n        \u003C\u002Fsection>\n        \n        \u003Csection>\n            \u003Ch2>教育背景\u003C\u002Fh2>\n            \u003Cdiv class=\"education\">\n                \u003Ch3>计算机科学与技术 本科\u003C\u002Fh3>\n                \u003Cp class=\"date\">2014年 - 2018年 | 某大学\u003C\u002Fp>\n            \u003C\u002Fdiv>\n        \u003C\u002Fsection>\n        \n        \u003Csection>\n            \u003Ch2>技能\u003C\u002Fh2>\n            \u003Cul>\n                \u003Cli>HTML5, CSS3, JavaScript (ES6+)\u003C\u002Fli>\n                \u003Cli>React, Vue.js, Angular\u003C\u002Fli>\n                \u003Cli>Node.js, Express\u003C\u002Fli>\n                \u003Cli>Git, Webpack, Babel\u003C\u002Fli>\n            \u003C\u002Ful>\n        \u003C\u002Fsection>\n    \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### 12.2 登录注册页面\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"zh-CN\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Ctitle>登录注册\u003C\u002Ftitle>\n    \u003Cstyle>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n        \n        body {\n            font-family: Arial, sans-serif;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            min-height: 100vh;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 20px;\n        }\n        \n        .container {\n            background: white;\n            border-radius: 10px;\n            box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n            overflow: hidden;\n            width: 100%;\n            max-width: 400px;\n        }\n        \n        .tabs {\n            display: flex;\n            background: #f8f9fa;\n        }\n        \n        .tab {\n            flex: 1;\n            padding: 15px;\n            text-align: center;\n            cursor: pointer;\n            border: none;\n            background: none;\n            font-size: 16px;\n            transition: all 0.3s;\n        }\n        \n        .tab.active {\n            background: white;\n            color: #667eea;\n            font-weight: bold;\n        }\n        \n        .form-container {\n            padding: 30px;\n        }\n        \n        .form {\n            display: none;\n        }\n        \n        .form.active {\n            display: block;\n        }\n        \n        .form-group {\n            margin-bottom: 20px;\n        }\n        \n        .form-group label {\n            display: block;\n            margin-bottom: 5px;\n            color: #333;\n        }\n        \n        .form-group input {\n            width: 100%;\n            padding: 10px;\n            border: 1px solid #ddd;\n            border-radius: 5px;\n            font-size: 14px;\n        }\n        \n        .form-group input:focus {\n            outline: none;\n            border-color: #667eea;\n        }\n        \n        .form-group .error {\n            color: red;\n            font-size: 12px;\n            margin-top: 5px;\n            display: none;\n        }\n        \n        button[type=\"submit\"] {\n            width: 100%;\n            padding: 12px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n            border: none;\n            border-radius: 5px;\n            font-size: 16px;\n            cursor: pointer;\n            transition: transform 0.3s;\n        }\n        \n        button[type=\"submit\"]:hover {\n            transform: translateY(-2px);\n        }\n        \n        .links {\n            text-align: center;\n            margin-top: 15px;\n        }\n        \n        .links a {\n            color: #667eea;\n            text-decoration: none;\n        }\n        \n        .links a:hover {\n            text-decoration: underline;\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Cdiv class=\"container\">\n        \u003Cdiv class=\"tabs\">\n            \u003Cbutton class=\"tab active\" onclick=\"showTab('login')\">登录\u003C\u002Fbutton>\n            \u003Cbutton class=\"tab\" onclick=\"showTab('register')\">注册\u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n        \n        \u003Cdiv class=\"form-container\">\n            \u003Cform id=\"loginForm\" class=\"form active\">\n                \u003Cdiv class=\"form-group\">\n                    \u003Clabel for=\"loginUsername\">用户名\u003C\u002Flabel>\n                    \u003Cinput type=\"text\" id=\"loginUsername\" name=\"username\" required>\n                    \u003Cspan class=\"error\">请输入用户名\u003C\u002Fspan>\n                \u003C\u002Fdiv>\n                \n                \u003Cdiv class=\"form-group\">\n                    \u003Clabel for=\"loginPassword\">密码\u003C\u002Flabel>\n                    \u003Cinput type=\"password\" id=\"loginPassword\" name=\"password\" required>\n                    \u003Cspan class=\"error\">请输入密码\u003C\u002Fspan>\n                \u003C\u002Fdiv>\n                \n                \u003Cbutton type=\"submit\">登录\u003C\u002Fbutton>\n                \n                \u003Cdiv class=\"links\">\n                    \u003Ca href=\"#\">忘记密码？\u003C\u002Fa>\n                \u003C\u002Fdiv>\n            \u003C\u002Fform>\n            \n            \u003Cform id=\"registerForm\" class=\"form\">\n                \u003Cdiv class=\"form-group\">\n                    \u003Clabel for=\"registerUsername\">用户名\u003C\u002Flabel>\n                    \u003Cinput type=\"text\" id=\"registerUsername\" name=\"username\" required minlength=\"3\">\n                    \u003Cspan class=\"error\">用户名至少3个字符\u003C\u002Fspan>\n                \u003C\u002Fdiv>\n                \n                \u003Cdiv class=\"form-group\">\n                    \u003Clabel for=\"registerEmail\">邮箱\u003C\u002Flabel>\n                    \u003Cinput type=\"email\" id=\"registerEmail\" name=\"email\" required>\n                    \u003Cspan class=\"error\">请输入有效的邮箱地址\u003C\u002Fspan>\n                \u003C\u002Fdiv>\n                \n                \u003Cdiv class=\"form-group\">\n                    \u003Clabel for=\"registerPassword\">密码\u003C\u002Flabel>\n                    \u003Cinput type=\"password\" id=\"registerPassword\" name=\"password\" required minlength=\"6\">\n                    \u003Cspan class=\"error\">密码至少6个字符\u003C\u002Fspan>\n                \u003C\u002Fdiv>\n                \n                \u003Cdiv class=\"form-group\">\n                    \u003Clabel for=\"confirmPassword\">确认密码\u003C\u002Flabel>\n                    \u003Cinput type=\"password\" id=\"confirmPassword\" name=\"confirmPassword\" required>\n                    \u003Cspan class=\"error\">两次密码不一致\u003C\u002Fspan>\n                \u003C\u002Fdiv>\n                \n                \u003Cbutton type=\"submit\">注册\u003C\u002Fbutton>\n            \u003C\u002Fform>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \n    \u003Cscript>\n        function showTab(tab) {\n            const tabs = document.querySelectorAll('.tab');\n            const forms = document.querySelectorAll('.form');\n            \n            tabs.forEach((t, index) => {\n                t.classList.remove('active');\n                if ((tab === 'login' && index === 0) || (tab === 'register' && index === 1)) {\n                    t.classList.add('active');\n                }\n            });\n            \n            forms.forEach(form => {\n                form.classList.remove('active');\n            });\n            \n            document.getElementById(tab + 'Form').classList.add('active');\n        }\n        \n        document.getElementById('loginForm').addEventListener('submit', function(e) {\n            e.preventDefault();\n            alert('登录成功！');\n        });\n        \n        document.getElementById('registerForm').addEventListener('submit', function(e) {\n            e.preventDefault();\n            const password = document.getElementById('registerPassword').value;\n            const confirmPassword = document.getElementById('confirmPassword').value;\n            \n            if (password !== confirmPassword) {\n                alert('两次密码不一致！');\n                return;\n            }\n            \n            alert('注册成功！');\n        });\n    \u003C\u002Fscript>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### 12.3 博客文章页面\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"zh-CN\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Ctitle>博客文章\u003C\u002Ftitle>\n    \u003Cstyle>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n        \n        body {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            line-height: 1.6;\n            background-color: #f5f5f5;\n        }\n        \n        header {\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n            padding: 20px 0;\n            text-align: center;\n        }\n        \n        header h1 {\n            margin: 0;\n        }\n        \n        nav {\n            background: white;\n            padding: 15px 0;\n            box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n        }\n        \n        nav ul {\n            list-style: none;\n            display: flex;\n            justify-content: center;\n            gap: 30px;\n        }\n        \n        nav a {\n            text-decoration: none;\n            color: #333;\n            font-weight: 500;\n        }\n        \n        nav a:hover {\n            color: #667eea;\n        }\n        \n        .container {\n            max-width: 1200px;\n            margin: 30px auto;\n            padding: 0 20px;\n            display: grid;\n            grid-template-columns: 2fr 1fr;\n            gap: 30px;\n        }\n        \n        article {\n            background: white;\n            padding: 30px;\n            border-radius: 10px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n        }\n        \n        article header {\n            background: none;\n            color: #333;\n            padding: 0;\n            text-align: left;\n        }\n        \n        article h1 {\n            font-size: 28px;\n            margin-bottom: 10px;\n        }\n        \n        .meta {\n            color: #666;\n            font-size: 14px;\n            margin-bottom: 20px;\n        }\n        \n        .content {\n            font-size: 16px;\n            line-height: 1.8;\n        }\n        \n        .content p {\n            margin-bottom: 15px;\n        }\n        \n        .content h2 {\n            font-size: 22px;\n            margin: 30px 0 15px 0;\n            color: #333;\n        }\n        \n        .content img {\n            max-width: 100%;\n            border-radius: 5px;\n            margin: 15px 0;\n        }\n        \n        .tags {\n            margin-top: 30px;\n            padding-top: 20px;\n            border-top: 1px solid #eee;\n        }\n        \n        .tags span {\n            display: inline-block;\n            background: #f0f0f0;\n            padding: 5px 10px;\n            border-radius: 15px;\n            font-size: 12px;\n            margin-right: 10px;\n        }\n        \n        aside {\n            background: white;\n            padding: 20px;\n            border-radius: 10px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n        }\n        \n        aside h3 {\n            margin-bottom: 15px;\n            color: #333;\n        }\n        \n        aside ul {\n            list-style: none;\n        }\n        \n        aside li {\n            margin-bottom: 10px;\n        }\n        \n        aside a {\n            text-decoration: none;\n            color: #666;\n        }\n        \n        aside a:hover {\n            color: #667eea;\n        }\n        \n        @media (max-width: 768px) {\n            .container {\n                grid-template-columns: 1fr;\n            }\n        }\n    \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Cheader>\n        \u003Ch1>我的博客\u003C\u002Fh1>\n    \u003C\u002Fheader>\n    \n    \u003Cnav>\n        \u003Cul>\n            \u003Cli>\u003Ca href=\"#\">首页\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"#\">技术文章\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"#\">生活随笔\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"#\">关于我\u003C\u002Fa>\u003C\u002Fli>\n        \u003C\u002Ful>\n    \u003C\u002Fnav>\n    \n    \u003Cdiv class=\"container\">\n        \u003Cmain>\n            \u003Carticle>\n                \u003Cheader>\n                    \u003Ch1>HTML5 语义化标签详解\u003C\u002Fh1>\n                    \u003Cdiv class=\"meta\">\n                        \u003Ctime datetime=\"2024-01-30\">2024年1月30日\u003C\u002Ftime>\n                        | 作者：张三\n                        | 阅读：1234\n                    \u003C\u002Fdiv>\n                \u003C\u002Fheader>\n                \n                \u003Cdiv class=\"content\">\n                    \u003Cp>HTML5 引入了许多新的语义化标签，使得网页结构更加清晰，有利于 SEO 和无障碍访问。\u003C\u002Fp>\n                    \n                    \u003Ch2>什么是语义化标签？\u003C\u002Fh2>\n                    \u003Cp>语义化标签是指具有明确含义的 HTML 标签，通过标签名就能表达其内容的含义。\u003C\u002Fp>\n                    \n                    \u003Ch2>常用的语义化标签\u003C\u002Fh2>\n                    \u003Cp>HTML5 提供了多个语义化标签，包括 header、footer、nav、main、article、section、aside 等。\u003C\u002Fp>\n                    \n                    \u003Ch2>语义化的好处\u003C\u002Fh2>\n                    \u003Cul>\n                        \u003Cli>提高代码可读性\u003C\u002Fli>\n                        \u003Cli>有利于 SEO 优化\u003C\u002Fli>\n                        \u003Cli>提升无障碍访问体验\u003C\u002Fli>\n                        \u003Cli>便于团队协作\u003C\u002Fli>\n                    \u003C\u002Ful>\n                \u003C\u002Fdiv>\n                \n                \u003Cdiv class=\"tags\">\n                    \u003Cspan>HTML5\u003C\u002Fspan>\n                    \u003Cspan>前端开发\u003C\u002Fspan>\n                    \u003Cspan>语义化\u003C\u002Fspan>\n                \u003C\u002Fdiv>\n            \u003C\u002Farticle>\n        \u003C\u002Fmain>\n        \n        \u003Caside>\n            \u003Csection>\n                \u003Ch3>热门文章\u003C\u002Fh3>\n                \u003Cul>\n                    \u003Cli>\u003Ca href=\"#\">CSS Grid 布局指南\u003C\u002Fa>\u003C\u002Fli>\n                    \u003Cli>\u003Ca href=\"#\">JavaScript ES6 新特性\u003C\u002Fa>\u003C\u002Fli>\n                    \u003Cli>\u003Ca href=\"#\">React Hooks 详解\u003C\u002Fa>\u003C\u002Fli>\n                    \u003Cli>\u003Ca href=\"#\">Vue3 组合式 API\u003C\u002Fa>\u003C\u002Fli>\n                \u003C\u002Ful>\n            \u003C\u002Fsection>\n            \n            \u003Csection>\n                \u003Ch3>最新评论\u003C\u002Fh3>\n                \u003Cul>\n                    \u003Cli>\u003Ca href=\"#\">张三：文章写得很棒！\u003C\u002Fa>\u003C\u002Fli>\n                    \u003Cli>\u003Ca href=\"#\">李四：学到了很多\u003C\u002Fa>\u003C\u002Fli>\n                    \u003Cli>\u003Ca href=\"#\">王五：期待更多内容\u003C\u002Fa>\u003C\u002Fli>\n                \u003C\u002Ful>\n            \u003C\u002Fsection>\n        \u003C\u002Faside>\n    \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n---\n\n## 十三、最佳实践\n\n### 13.1 语义化 HTML\n\n```html\n\u003C!-- 好的实践 -->\n\u003Cheader>\n    \u003Cnav>\n        \u003Cul>\n            \u003Cli>\u003Ca href=\"#\">首页\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"#\">关于\u003C\u002Fa>\u003C\u002Fli>\n        \u003C\u002Ful>\n    \u003C\u002Fnav>\n\u003C\u002Fheader>\n\n\u003Cmain>\n    \u003Carticle>\n        \u003Ch1>文章标题\u003C\u002Fh1>\n        \u003Cp>文章内容...\u003C\u002Fp>\n    \u003C\u002Farticle>\n    \n    \u003Caside>\n        \u003Ch3>侧边栏\u003C\u002Fh3>\n    \u003C\u002Faside>\n\u003C\u002Fmain>\n\n\u003Cfooter>\n    \u003Cp>© 2024 版权所有\u003C\u002Fp>\n\u003C\u002Ffooter>\n\n\u003C!-- 不好的实践 -->\n\u003Cdiv class=\"header\">\n    \u003Cdiv class=\"nav\">\n        \u003Cul>\n            \u003Cli>\u003Ca href=\"#\">首页\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"#\">关于\u003C\u002Fa>\u003C\u002Fli>\n        \u003C\u002Ful>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"main\">\n    \u003Cdiv class=\"article\">\n        \u003Cdiv class=\"title\">文章标题\u003C\u002Fdiv>\n        \u003Cdiv class=\"content\">文章内容...\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \n    \u003Cdiv class=\"sidebar\">\n        \u003Cdiv class=\"title\">侧边栏\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"footer\">\n    \u003Cp>© 2024 版权所有\u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\n### 13.2 可访问性\n\n```html\n\u003C!-- 图片添加 alt 属性 -->\n\u003Cimg src=\"logo.png\" alt=\"公司Logo\">\n\n\u003C!-- 表单标签关联 -->\n\u003Clabel for=\"username\">用户名：\u003C\u002Flabel>\n\u003Cinput type=\"text\" id=\"username\" name=\"username\">\n\n\u003C!-- 使用语义化标签 -->\n\u003Cnav aria-label=\"主导航\">\n    \u003Cul>\n        \u003Cli>\u003Ca href=\"#\">首页\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#\">关于\u003C\u002Fa>\u003C\u002Fli>\n    \u003C\u002Ful>\n\u003C\u002Fnav>\n\n\u003C!-- 按钮添加 aria-label -->\n\u003Cbutton aria-label=\"关闭对话框\">×\u003C\u002Fbutton>\n\n\u003C!-- 表单验证提示 -->\n\u003Cinput type=\"email\" name=\"email\" required aria-invalid=\"false\">\n\u003Cspan id=\"email-error\" class=\"error-message\" role=\"alert\">请输入有效的邮箱地址\u003C\u002Fspan>\n\n\u003C!-- 跳过导航链接 -->\n\u003Ca href=\"#main-content\" class=\"skip-link\">跳到主要内容\u003C\u002Fa>\n\u003Cmain id=\"main-content\">\n    \u003C!-- 主要内容 -->\n\u003C\u002Fmain>\n```\n\n### 13.3 SEO 优化\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"zh-CN\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \n    \u003C!-- 页面标题（重要） -->\n    \u003Ctitle>页面标题 - 网站名称\u003C\u002Ftitle>\n    \n    \u003C!-- 页面描述 -->\n    \u003Cmeta name=\"description\" content=\"页面描述，150-160字符\">\n    \n    \u003C!-- 关键词 -->\n    \u003Cmeta name=\"keywords\" content=\"关键词1,关键词2,关键词3\">\n    \n    \u003C!-- 作者 -->\n    \u003Cmeta name=\"author\" content=\"作者名\">\n    \n    \u003C!-- 搜索引擎指令 -->\n    \u003Cmeta name=\"robots\" content=\"index,follow\">\n    \n    \u003C!-- Open Graph（社交媒体） -->\n    \u003Cmeta property=\"og:title\" content=\"页面标题\">\n    \u003Cmeta property=\"og:description\" content=\"页面描述\">\n    \u003Cmeta property=\"og:image\" content=\"图片URL\">\n    \u003Cmeta property=\"og:url\" content=\"页面URL\">\n    \u003Cmeta property=\"og:type\" content=\"article\">\n    \n    \u003C!-- Twitter Card -->\n    \u003Cmeta name=\"twitter:card\" content=\"summary_large_image\">\n    \u003Cmeta name=\"twitter:title\" content=\"页面标题\">\n    \u003Cmeta name=\"twitter:description\" content=\"页面描述\">\n    \u003Cmeta name=\"twitter:image\" content=\"图片URL\">\n    \n    \u003C!-- 规范链接（避免重复内容） -->\n    \u003Clink rel=\"canonical\" href=\"https:\u002F\u002Fwww.example.com\u002Fpage\">\n    \n    \u003C!-- 网站图标 -->\n    \u003Clink rel=\"icon\" href=\"favicon.ico\">\n    \u003Clink rel=\"apple-touch-icon\" href=\"apple-touch-icon.png\">\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003C!-- 使用语义化标签 -->\n    \u003Cheader>\n        \u003Ch1>网站标题\u003C\u002Fh1>\n        \u003Cnav>\n            \u003Cul>\n                \u003Cli>\u003Ca href=\"#\">首页\u003C\u002Fa>\u003C\u002Fli>\n                \u003Cli>\u003Ca href=\"#\">关于\u003C\u002Fa>\u003C\u002Fli>\n            \u003C\u002Ful>\n        \u003C\u002Fnav>\n    \u003C\u002Fheader>\n    \n    \u003Cmain>\n        \u003Carticle>\n            \u003Ch1>文章标题（H1）\u003C\u002Fh1>\n            \u003Ch2>小标题（H2）\u003C\u002Fh2>\n            \u003Cp>文章内容...\u003C\u002Fp>\n        \u003C\u002Farticle>\n    \u003C\u002Fmain>\n    \n    \u003Cfooter>\n        \u003Cp>© 2024 版权所有\u003C\u002Fp>\n    \u003C\u002Ffooter>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n### 13.4 性能优化\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"zh-CN\">\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \n    \u003C!-- 预加载关键资源 -->\n    \u003Clink rel=\"preload\" href=\"critical.css\" as=\"style\">\n    \u003Clink rel=\"preload\" href=\"critical.js\" as=\"script\">\n    \n    \u003C!-- 预连接到第三方域名 -->\n    \u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fcdn.example.com\">\n    \u003Clink rel=\"preconnect\" href=\"https:\u002F\u002Fapi.example.com\">\n    \n    \u003C!-- DNS 预解析 -->\n    \u003Clink rel=\"dns-prefetch\" href=\"https:\u002F\u002Fanalytics.example.com\">\n    \n    \u003C!-- 关键 CSS 内联 -->\n    \u003Cstyle>\n        body { margin: 0; }\n    \u003C\u002Fstyle>\n    \n    \u003C!-- 延迟加载非关键 CSS -->\n    \u003Clink rel=\"preload\" href=\"non-critical.css\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\">\n    \n    \u003C!-- 延迟加载 JavaScript -->\n    \u003Cscript src=\"defer.js\" defer>\u003C\u002Fscript>\n    \u003Cscript src=\"async.js\" async>\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003C!-- 延迟加载图片 -->\n    \u003Cimg src=\"placeholder.jpg\" data-src=\"image.jpg\" alt=\"图片\" loading=\"lazy\">\n    \n    \u003C!-- 响应式图片 -->\n    \u003Cpicture>\n        \u003Csource media=\"(min-width: 768px)\" srcset=\"large.jpg\">\n        \u003Csource media=\"(min-width: 480px)\" srcset=\"medium.jpg\">\n        \u003Cimg src=\"small.jpg\" alt=\"图片\">\n    \u003C\u002Fpicture>\n    \n    \u003C!-- 延迟加载 iframe -->\n    \u003Ciframe src=\"about:blank\" data-src=\"https:\u002F\u002Fwww.example.com\" loading=\"lazy\">\u003C\u002Fiframe>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n---\n\n## 十四、快速参考\n\n### 14.1 常用标签速查\n\n```html\n\u003C!-- 文档结构 -->\n\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Ctitle>标题\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003C!-- 内容 -->\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n\n\u003C!-- 文本 -->\n\u003Ch1>-\u003Ch6> 标题\n\u003Cp> 段落\n\u003Cbr> 换行\n\u003Chr> 水平线\n\n\u003C!-- 链接和图片 -->\n\u003Ca href=\"url\">链接\u003C\u002Fa>\n\u003Cimg src=\"url\" alt=\"描述\">\n\n\u003C!-- 列表 -->\n\u003Cul>\u003Cli> 无序列表\n\u003Col>\u003Cli> 有序列表\n\u003Cdl>\u003Cdt>\u003Cdd> 定义列表\n\n\u003C!-- 表格 -->\n\u003Ctable>\n    \u003Cthead>\u003Ctr>\u003Cth>\n    \u003Ctbody>\u003Ctr>\u003Ctd>\n    \u003Ctfoot>\u003Ctr>\u003Ctd>\n\n\u003C!-- 表单 -->\n\u003Cform>\n    \u003Cinput type=\"text\">\n    \u003Ctextarea>\n    \u003Cselect>\u003Coption>\n    \u003Cbutton>\n\u003C\u002Fform>\n\n\u003C!-- 语义化 -->\n\u003Cheader>\n\u003Cfooter>\n\u003Cnav>\n\u003Cmain>\n\u003Carticle>\n\u003Csection>\n\u003Caside>\n\n\u003C!-- 多媒体 -->\n\u003Caudio>\n\u003Cvideo>\n\u003Ccanvas>\n\u003Ciframe>\n```\n\n### 14.2 常用属性速查\n\n```html\n\u003C!-- 全局属性 -->\nid=\"id\"\nclass=\"class\"\nstyle=\"css\"\ntitle=\"提示\"\ndata-*=\"数据\"\n\n\u003C!-- 链接属性 -->\nhref=\"url\"\ntarget=\"_blank\"\n\n\u003C!-- 图片属性 -->\nsrc=\"url\"\nalt=\"描述\"\nwidth=\"300\"\nheight=\"200\"\n\n\u003C!-- 表单属性 -->\nname=\"name\"\nvalue=\"value\"\nplaceholder=\"提示\"\nrequired\ndisabled\nreadonly\n```\n\n---\n\n**祝学习愉快！掌握 HTML，构建更好的网页！** 🚀\n",null,"1",8,0,1,"2026-04-07T16:09:05.833Z","2026-04-07T16:09:05.836Z","2026-06-11T04:34:14.611Z","0",{"id":28,"categoryName":37,"slug":38,"description":39,"sort":30,"isEnable":31,"createTime":40,"updateTime":41,"deleteTime":30},"前端开发","frontend-engineering","2222","2026-04-03T02:36:11.945Z","2026-04-07T16:38:46.496Z",[],[],[]]