[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fhtml\u002Finfo":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fhtml\u002Finfo":1841,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fhtml\u002Finfo":1863},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":13,"pinned":14,"draft":14,"body":15,"seo":1837,"stem":1838,"id":1839,"extension":1840},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fhtml\u002Finfo","简介","HTML（HyperText Markup Language，超文本标记语言）用于描述网页的结构与语义：标题层级、段落、链接、表单、图片替代文本等。浏览器根据 HTML 构建 DOM，再结合 CSS 呈现样式、JavaScript 实现交互。本文系统梳理语义化、可访问性与现代 HTML 要点。","技能小册",[12],"html","2026-07-23",false,{"type":16,"value":17,"toc":1811},"minimark",[18,21,55,60,109,113,116,272,343,347,388,490,495,520,524,535,632,655,659,672,775,781,877,881,884,888,909,913,992,1015,1022,1037,1041,1068,1072,1092,1173,1177,1180,1239,1243,1246,1254,1324,1328,1331,1493,1506,1510,1519,1523,1585,1589,1632,1636,1673,1677,1696,1699,1702,1808],[19,20,8],"h1",{"id":8},[22,23,24,25,29,30,33,34,39,40,44,45,49,50,54],"p",{},"HTML（HyperText Markup Language，超文本标记语言）用于描述网页的",[26,27,28],"strong",{},"结构与语义","：标题层级、段落、链接、表单、图片替代文本等。浏览器根据 HTML 构建 ",[26,31,32],{},"DOM","，再结合 ",[35,36,38],"a",{"href":37},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fmodel","CSS"," 呈现样式、",[35,41,43],{"href":42},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fjs\u002Fdom-bom","JavaScript"," 实现交互。标签用法见 ",[35,46,48],{"href":47},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fhtml\u002Ftag","标签","，文档元数据见 ",[35,51,53],{"href":52},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fhtml\u002Fhead","Head","。",[56,57,59],"h2",{"id":58},"一html-是什么","一、HTML 是什么",[61,62,63,73,84],"ul",{},[64,65,66,69,70,72],"li",{},[26,67,68],{},"标记语言","：用",[26,71,48],{},"包裹内容，表达「这是什么」，而不是编程逻辑（无变量、循环、条件分支）。",[64,74,75,78,79,83],{},[26,76,77],{},"超文本","：通过 ",[80,81,82],"code",{},"\u003Ca href=\"...\">"," 等链接关联其他资源，是 Web 区别于普通文档的核心特征。",[64,85,86,89,90,93,94,97,98,101,102,101,105,108],{},[26,87,88],{},"与 CSS \u002F JS 的分工","：HTML 管结构与可访问性语义；",[26,91,92],{},"样式","由 CSS 负责；",[26,95,96],{},"行为","由 JavaScript 负责。仅写 HTML 不会出现「点击、拖拽」等交互，除非使用自带控件的元素（如 ",[80,99,100],{},"\u003Cbutton>","、",[80,103,104],{},"\u003Cdetails>",[80,106,107],{},"\u003Cdialog>","）。",[56,110,112],{"id":111},"二文档类型与基本结构","二、文档类型与基本结构",[22,114,115],{},"HTML5 文档推荐骨架：",[117,118,122],"pre",{"className":119,"code":120,"language":12,"meta":121,"style":121},"language-html shiki shiki-themes material-theme-lighter github-light github-dark","\u003C!DOCTYPE html>\n\u003Chtml lang=\"zh-CN\">\n    \u003Chead>\n        \u003Cmeta charset=\"UTF-8\" \u002F>\n        \u003Ctitle>页面标题\u003C\u002Ftitle>\n    \u003C\u002Fhead>\n    \u003Cbody>\n        \u003C!-- 页面可见内容 -->\n    \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","",[80,123,124,144,170,181,205,227,237,247,254,263],{"__ignoreMap":121},[125,126,129,133,137,141],"span",{"class":127,"line":128},"line",1,[125,130,132],{"class":131},"sP7_E","\u003C!",[125,134,136],{"class":135},"sQzsp","DOCTYPE",[125,138,140],{"class":139},"s9AJx"," html",[125,142,143],{"class":131},">\n",[125,145,147,150,152,155,158,162,166,168],{"class":127,"line":146},2,[125,148,149],{"class":131},"\u003C",[125,151,12],{"class":135},[125,153,154],{"class":139}," lang",[125,156,157],{"class":131},"=",[125,159,161],{"class":160},"sjJ54","\"",[125,163,165],{"class":164},"s_sjI","zh-CN",[125,167,161],{"class":160},[125,169,143],{"class":131},[125,171,173,176,179],{"class":127,"line":172},3,[125,174,175],{"class":131},"    \u003C",[125,177,178],{"class":135},"head",[125,180,143],{"class":131},[125,182,184,187,190,193,195,197,200,202],{"class":127,"line":183},4,[125,185,186],{"class":131},"        \u003C",[125,188,189],{"class":135},"meta",[125,191,192],{"class":139}," charset",[125,194,157],{"class":131},[125,196,161],{"class":160},[125,198,199],{"class":164},"UTF-8",[125,201,161],{"class":160},[125,203,204],{"class":131}," \u002F>\n",[125,206,208,210,213,216,220,223,225],{"class":127,"line":207},5,[125,209,186],{"class":131},[125,211,212],{"class":135},"title",[125,214,215],{"class":131},">",[125,217,219],{"class":218},"su5hD","页面标题",[125,221,222],{"class":131},"\u003C\u002F",[125,224,212],{"class":135},[125,226,143],{"class":131},[125,228,230,233,235],{"class":127,"line":229},6,[125,231,232],{"class":131},"    \u003C\u002F",[125,234,178],{"class":135},[125,236,143],{"class":131},[125,238,240,242,245],{"class":127,"line":239},7,[125,241,175],{"class":131},[125,243,244],{"class":135},"body",[125,246,143],{"class":131},[125,248,250],{"class":127,"line":249},8,[125,251,253],{"class":252},"sutJx","        \u003C!-- 页面可见内容 -->\n",[125,255,257,259,261],{"class":127,"line":256},9,[125,258,232],{"class":131},[125,260,244],{"class":135},[125,262,143],{"class":131},[125,264,266,268,270],{"class":127,"line":265},10,[125,267,222],{"class":131},[125,269,12],{"class":135},[125,271,143],{"class":131},[273,274,275,288],"table",{},[276,277,278],"thead",{},[279,280,281,285],"tr",{},[282,283,284],"th",{},"部分",[282,286,287],{},"作用",[289,290,291,306,320,333],"tbody",{},[279,292,293,299],{},[294,295,296],"td",{},[80,297,298],{},"\u003C!DOCTYPE html>",[294,300,301,302,305],{},"启用",[26,303,304],{},"标准模式","（Standards Mode）；须为第一行，否则浏览器可能进入怪异模式（Quirks Mode），导致盒模型等行为异常",[279,307,308,313],{},[294,309,310],{},[80,311,312],{},"\u003Chtml lang=\"...\">",[294,314,315,316,319],{},"根元素；",[80,317,318],{},"lang"," 利于翻译、读屏与字体选择，缺失会被无障碍工具判定为错误",[279,321,322,327],{},[294,323,324],{},[80,325,326],{},"\u003Chead>",[294,328,329,330,332],{},"元数据：编码、标题、样式表、脚本引用等（见 ",[35,331,53],{"href":52},"）",[279,334,335,340],{},[294,336,337],{},[80,338,339],{},"\u003Cbody>",[294,341,342],{},"用户可见的主要内容",[56,344,346],{"id":345},"三元素标签与属性","三、元素、标签与属性",[61,348,349,358,369],{},[64,350,351,354,355,54],{},[26,352,353],{},"元素","：由开始标签、结束标签（或空元素）与内容组成，如 ",[80,356,357],{},"\u003Cp>段落\u003C\u002Fp>",[64,359,360,362,363,101,366,54],{},[26,361,48],{},"：标记元素边界的语法，如 ",[80,364,365],{},"\u003Cp>",[80,367,368],{},"\u003C\u002Fp>",[64,370,371,374,375,378,379,101,382,101,385,108],{},[26,372,373],{},"属性","：写在开始标签上，",[80,376,377],{},"name=\"value\""," 形式，为元素提供附加信息（如 ",[80,380,381],{},"href",[80,383,384],{},"alt",[80,386,387],{},"type",[117,389,391],{"className":119,"code":390,"language":12,"meta":121,"style":121},"\u003Ca href=\"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fhtml\u002Ftag\" title=\"标签参考\">标签文档\u003C\u002Fa>\n\u003Cimg src=\"logo.png\" alt=\"站点 Logo\" width=\"120\" height=\"40\" \u002F>\n",[80,392,393,433],{"__ignoreMap":121},[125,394,395,397,399,402,404,406,408,410,413,415,417,420,422,424,427,429,431],{"class":127,"line":128},[125,396,149],{"class":131},[125,398,35],{"class":135},[125,400,401],{"class":139}," href",[125,403,157],{"class":131},[125,405,161],{"class":160},[125,407,47],{"class":164},[125,409,161],{"class":160},[125,411,412],{"class":139}," title",[125,414,157],{"class":131},[125,416,161],{"class":160},[125,418,419],{"class":164},"标签参考",[125,421,161],{"class":160},[125,423,215],{"class":131},[125,425,426],{"class":218},"标签文档",[125,428,222],{"class":131},[125,430,35],{"class":135},[125,432,143],{"class":131},[125,434,435,437,440,443,445,447,450,452,455,457,459,462,464,467,469,471,474,476,479,481,483,486,488],{"class":127,"line":146},[125,436,149],{"class":131},[125,438,439],{"class":135},"img",[125,441,442],{"class":139}," src",[125,444,157],{"class":131},[125,446,161],{"class":160},[125,448,449],{"class":164},"logo.png",[125,451,161],{"class":160},[125,453,454],{"class":139}," alt",[125,456,157],{"class":131},[125,458,161],{"class":160},[125,460,461],{"class":164},"站点 Logo",[125,463,161],{"class":160},[125,465,466],{"class":139}," width",[125,468,157],{"class":131},[125,470,161],{"class":160},[125,472,473],{"class":164},"120",[125,475,161],{"class":160},[125,477,478],{"class":139}," height",[125,480,157],{"class":131},[125,482,161],{"class":160},[125,484,485],{"class":164},"40",[125,487,161],{"class":160},[125,489,204],{"class":131},[491,492,494],"h3",{"id":493},"空元素void-elements","空元素（void elements）",[22,496,497,498,101,501,101,504,101,507,101,510,513,514,516,517,54],{},"无结束标签、无内容，例如 ",[80,499,500],{},"\u003Cbr>",[80,502,503],{},"\u003Cimg>",[80,505,506],{},"\u003Cinput>",[80,508,509],{},"\u003Cmeta>",[80,511,512],{},"\u003Clink>","。HTML 中写作 ",[80,515,500],{}," 即可；XML 兼容写法为 ",[80,518,519],{},"\u003Cbr \u002F>",[56,521,523],{"id":522},"四块级-行内与语义","四、「块级 \u002F 行内」与语义",[22,525,526,527,530,531,534],{},"日常说的「块级标签」「行内标签」多指",[26,528,529],{},"默认显示","（由 CSS 用户代理样式决定），并非 HTML 里的官方分类。规范使用",[26,532,533],{},"内容类别","（如 flow content、phrasing content、interactive content）描述元素可出现在哪里。",[273,536,537,550],{},[276,538,539],{},[279,540,541,544,547],{},[282,542,543],{},"常见说法",[282,545,546],{},"典型元素",[282,548,549],{},"说明",[289,551,552,581,606],{},[279,553,554,557,574],{},[294,555,556],{},"默认占满一行",[294,558,559,101,562,101,564,567,568,101,571],{},[80,560,561],{},"\u003Cdiv>",[80,563,365],{},[80,565,566],{},"\u003Ch1>","–",[80,569,570],{},"\u003Ch6>",[80,572,573],{},"\u003Cul>",[294,575,576,577,580],{},"可用 CSS 改为 ",[80,578,579],{},"display: inline"," 等",[279,582,583,586,597],{},[294,584,585],{},"默认同行排列",[294,587,588,101,591,101,594],{},[80,589,590],{},"\u003Cspan>",[80,592,593],{},"\u003Ca>",[80,595,596],{},"\u003Cstrong>",[294,598,599,601,602,605],{},[80,600,503],{}," 为",[26,603,604],{},"替换元素","，可设宽高",[279,607,608,611,625],{},[294,609,610],{},"语义结构",[294,612,613,101,616,101,619,101,622],{},[80,614,615],{},"\u003Cmain>",[80,617,618],{},"\u003Cnav>",[80,620,621],{},"\u003Carticle>",[80,623,624],{},"\u003Csection>",[294,626,627,628,631],{},"应用 ",[26,629,630],{},"HTML5 语义标签","，利于 SEO 与无障碍",[22,633,634,635,101,639,101,643,647,648,651,652,654],{},"布局与对齐请用 ",[35,636,638],{"href":637},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fdisplay","CSS display",[35,640,642],{"href":641},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex","Flex",[35,644,646],{"href":645},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fgrid","Grid","，不要仅靠 ",[80,649,650],{},"\u003Ctable>"," 或大量 ",[80,653,561],{}," 拼版。",[56,656,658],{"id":657},"五为什么要写语义化-html","五、为什么要写语义化 HTML",[22,660,661,662,665,666,668,669,671],{},"「语义化」指选用",[26,663,664],{},"含义匹配","的标签，而不是「视觉上像什么就用什么」。例如按钮应该用 ",[80,667,100],{},"，而不是加了点击事件的 ",[80,670,561],{},"。语义化带来的收益是多方面的：",[273,673,674,684],{},[276,675,676],{},[279,677,678,681],{},[282,679,680],{},"维度",[282,682,683],{},"语义化的收益",[289,685,686,699,720,738,762],{},[279,687,688,693],{},[294,689,690],{},[26,691,692],{},"可访问性",[294,694,695,696,698],{},"屏幕阅读器、语音助手依赖标签本身的隐含语义（如 ",[80,697,618],{}," 会被读作「导航」），无需额外 ARIA 标注即可正确播报",[279,700,701,706],{},[294,702,703],{},[26,704,705],{},"SEO",[294,707,708,709,567,711,713,714,716,717,719],{},"搜索引擎依据 ",[80,710,566],{},[80,712,570],{}," 标题层级、",[80,715,621],{},"\u002F",[80,718,624],{}," 结构理解页面主题与重要程度",[279,721,722,727],{},[294,723,724],{},[26,725,726],{},"可维护性",[294,728,729,716,732,716,734,737],{},[80,730,731],{},"\u003Cheader>",[80,733,615],{},[80,735,736],{},"\u003Cfooter>"," 等标签本身即是文档，团队成员和未来的自己都更容易理解结构",[279,739,740,745],{},[294,741,742],{},[26,743,744],{},"默认行为",[294,746,747,748,750,751,716,755,758,759,761],{},"语义元素常自带浏览器默认行为，如 ",[80,749,100],{}," 天然支持键盘 ",[752,753,754],"kbd",{},"Enter",[752,756,757],{},"Space"," 触发、",[80,760,593],{}," 天然可被 Tab 聚焦",[279,763,764,769],{},[294,765,766],{},[26,767,768],{},"样式钩子更稳定",[294,770,771,772,774],{},"结构清晰后，CSS 选择器可以更多依赖标签与语义类名，减少无意义的 ",[80,773,561],{}," 嵌套（俗称「div 汤」，div soup）",[22,776,777,780],{},[26,778,779],{},"反例对比","：",[117,782,784],{"className":119,"code":783,"language":12,"meta":121,"style":121},"\u003C!-- 不推荐：纯样式驱动，无语义，键盘用户无法聚焦，屏幕阅读器无法识别为按钮 -->\n\u003Cdiv class=\"btn\" onclick=\"submitForm()\">提交\u003C\u002Fdiv>\n\n\u003C!-- 推荐：原生语义、默认可聚焦、默认支持键盘操作 -->\n\u003Cbutton type=\"submit\">提交\u003C\u002Fbutton>\n",[80,785,786,791,837,843,848],{"__ignoreMap":121},[125,787,788],{"class":127,"line":128},[125,789,790],{"class":252},"\u003C!-- 不推荐：纯样式驱动，无语义，键盘用户无法聚焦，屏幕阅读器无法识别为按钮 -->\n",[125,792,793,795,798,801,803,805,808,810,813,815,817,821,824,826,828,831,833,835],{"class":127,"line":146},[125,794,149],{"class":131},[125,796,797],{"class":135},"div",[125,799,800],{"class":139}," class",[125,802,157],{"class":131},[125,804,161],{"class":160},[125,806,807],{"class":164},"btn",[125,809,161],{"class":160},[125,811,812],{"class":139}," onclick",[125,814,157],{"class":131},[125,816,161],{"class":160},[125,818,820],{"class":819},"sGLFI","submitForm",[125,822,823],{"class":164},"()",[125,825,161],{"class":160},[125,827,215],{"class":131},[125,829,830],{"class":218},"提交",[125,832,222],{"class":131},[125,834,797],{"class":135},[125,836,143],{"class":131},[125,838,839],{"class":127,"line":172},[125,840,842],{"emptyLinePlaceholder":841},true,"\n",[125,844,845],{"class":127,"line":183},[125,846,847],{"class":252},"\u003C!-- 推荐：原生语义、默认可聚焦、默认支持键盘操作 -->\n",[125,849,850,852,855,858,860,862,865,867,869,871,873,875],{"class":127,"line":207},[125,851,149],{"class":131},[125,853,854],{"class":135},"button",[125,856,857],{"class":139}," type",[125,859,157],{"class":131},[125,861,161],{"class":160},[125,863,864],{"class":164},"submit",[125,866,161],{"class":160},[125,868,215],{"class":131},[125,870,830],{"class":218},[125,872,222],{"class":131},[125,874,854],{"class":135},[125,876,143],{"class":131},[56,878,880],{"id":879},"六可访问性accessibility-a11y要点","六、可访问性（Accessibility \u002F a11y）要点",[22,882,883],{},"可访问性不是额外附加的「特效」，而是尽量让所有用户（包括使用屏幕阅读器、键盘导航、放大镜、色弱用户）都能正常使用页面。HTML 是可访问性的第一道防线。",[491,885,887],{"id":886},"_1-语义地标landmark帮助跳过导航","1. 语义地标（Landmark）帮助跳过导航",[22,889,890,101,892,101,894,101,896,101,899,901,902,904,905,908],{},[80,891,731],{},[80,893,618],{},[80,895,615],{},[80,897,898],{},"\u003Caside>",[80,900,736],{}," 等元素会被浏览器映射为对应的 ARIA landmark role（如 ",[80,903,618],{}," → ",[80,906,907],{},"navigation","），屏幕阅读器用户可以通过快捷键在地标间跳转，不必逐行听完整页内容。",[491,910,912],{"id":911},"_2-表单必须有可编程关联的标签","2. 表单必须有可编程关联的标签",[117,914,916],{"className":119,"code":915,"language":12,"meta":121,"style":121},"\u003Clabel for=\"email\">邮箱\u003C\u002Flabel>\n\u003Cinput id=\"email\" name=\"email\" type=\"email\" required \u002F>\n",[80,917,918,948],{"__ignoreMap":121},[125,919,920,922,925,928,930,932,935,937,939,942,944,946],{"class":127,"line":128},[125,921,149],{"class":131},[125,923,924],{"class":135},"label",[125,926,927],{"class":139}," for",[125,929,157],{"class":131},[125,931,161],{"class":160},[125,933,934],{"class":164},"email",[125,936,161],{"class":160},[125,938,215],{"class":131},[125,940,941],{"class":218},"邮箱",[125,943,222],{"class":131},[125,945,924],{"class":135},[125,947,143],{"class":131},[125,949,950,952,955,958,960,962,964,966,969,971,973,975,977,979,981,983,985,987,990],{"class":127,"line":146},[125,951,149],{"class":131},[125,953,954],{"class":135},"input",[125,956,957],{"class":139}," id",[125,959,157],{"class":131},[125,961,161],{"class":160},[125,963,934],{"class":164},[125,965,161],{"class":160},[125,967,968],{"class":139}," name",[125,970,157],{"class":131},[125,972,161],{"class":160},[125,974,934],{"class":164},[125,976,161],{"class":160},[125,978,857],{"class":139},[125,980,157],{"class":131},[125,982,161],{"class":160},[125,984,934],{"class":164},[125,986,161],{"class":160},[125,988,989],{"class":139}," required",[125,991,204],{"class":131},[61,993,994,1004],{},[64,995,996,999,1000,1003],{},[80,997,998],{},"\u003Clabel for>"," 与 ",[80,1001,1002],{},"\u003Cinput id>"," 关联后，点击文字也能聚焦控件，屏幕阅读器会读出「邮箱，可编辑文本」。",[64,1005,1006,1007,1010,1011,1014],{},"仅用 ",[80,1008,1009],{},"placeholder"," 代替 ",[80,1012,1013],{},"\u003Clabel>","是常见误区：占位文字在开始输入后消失，且部分屏幕阅读器不会持续播报。",[491,1016,1018,1019,1021],{"id":1017},"_3-图片的-alt-是强制思考项而非可选项","3. 图片的 ",[80,1020,384],{}," 是强制思考项，而非可选项",[61,1023,1024,1030],{},[64,1025,1026,1027,1029],{},"有信息的图片：",[80,1028,384],{}," 描述图片传达的内容，而非「图片」「photo」等空话。",[64,1031,1032,1033,1036],{},"纯装饰性图片：",[80,1034,1035],{},"alt=\"\"","（空字符串），让屏幕阅读器直接跳过，而不是读出文件名。",[491,1038,1040],{"id":1039},"_4-键盘可达性","4. 键盘可达性",[61,1042,1043,1051],{},[64,1044,1045,1046,101,1048,1050],{},"交互元素优先用原生可聚焦标签（",[80,1047,593],{},[80,1049,100],{},"、表单控件），它们自带 Tab 顺序和键盘事件。",[64,1052,1053,1054,1056,1057,1060,1061,999,1064,1067],{},"若必须用 ",[80,1055,561],{}," 模拟交互（不推荐），需要手动补 ",[80,1058,1059],{},"tabindex=\"0\"","、键盘事件、",[80,1062,1063],{},"role",[80,1065,1066],{},"aria-*","，工作量远大于直接使用语义标签。",[491,1069,1071],{"id":1070},"_5-aria-的定位补充而非替代","5. ARIA 的定位：补充，而非替代",[22,1073,1074,1075,101,1077,101,1080,1083,1084,1087,1088,1091],{},"ARIA（Accessible Rich Internet Applications）属性（如 ",[80,1076,1063],{},[80,1078,1079],{},"aria-label",[80,1081,1082],{},"aria-expanded","）用于",[26,1085,1086],{},"补充","原生 HTML 语义不足以表达的场景（如自定义下拉菜单、标签页组件）。业界准则「",[26,1089,1090],{},"No ARIA is better than Bad ARIA","」：优先用原生语义标签，只有确实没有对应原生元素时才手写 ARIA。",[117,1093,1095],{"className":119,"code":1094,"language":12,"meta":121,"style":121},"\u003C!-- 自定义可展开面板，需要手动补充状态 -->\n\u003Cbutton aria-expanded=\"false\" aria-controls=\"panel1\">更多信息\u003C\u002Fbutton>\n\u003Cdiv id=\"panel1\" hidden>面板内容…\u003C\u002Fdiv>\n",[80,1096,1097,1102,1143],{"__ignoreMap":121},[125,1098,1099],{"class":127,"line":128},[125,1100,1101],{"class":252},"\u003C!-- 自定义可展开面板，需要手动补充状态 -->\n",[125,1103,1104,1106,1108,1111,1113,1115,1118,1120,1123,1125,1127,1130,1132,1134,1137,1139,1141],{"class":127,"line":146},[125,1105,149],{"class":131},[125,1107,854],{"class":135},[125,1109,1110],{"class":139}," aria-expanded",[125,1112,157],{"class":131},[125,1114,161],{"class":160},[125,1116,1117],{"class":164},"false",[125,1119,161],{"class":160},[125,1121,1122],{"class":139}," aria-controls",[125,1124,157],{"class":131},[125,1126,161],{"class":160},[125,1128,1129],{"class":164},"panel1",[125,1131,161],{"class":160},[125,1133,215],{"class":131},[125,1135,1136],{"class":218},"更多信息",[125,1138,222],{"class":131},[125,1140,854],{"class":135},[125,1142,143],{"class":131},[125,1144,1145,1147,1149,1151,1153,1155,1157,1159,1162,1164,1167,1169,1171],{"class":127,"line":172},[125,1146,149],{"class":131},[125,1148,797],{"class":135},[125,1150,957],{"class":139},[125,1152,157],{"class":131},[125,1154,161],{"class":160},[125,1156,1129],{"class":164},[125,1158,161],{"class":160},[125,1160,1161],{"class":139}," hidden",[125,1163,215],{"class":131},[125,1165,1166],{"class":218},"面板内容…",[125,1168,222],{"class":131},[125,1170,797],{"class":135},[125,1172,143],{"class":131},[491,1174,1176],{"id":1175},"_6-颜色与内容不能画等号","6. 颜色与内容不能画等号",[22,1178,1179],{},"不要用「红色文字表示错误」作为唯一提示方式（色弱用户无法区分），应同时提供文字或图标：",[117,1181,1183],{"className":119,"code":1182,"language":12,"meta":121,"style":121},"\u003Cp class=\"error\">\u003Cspan aria-hidden=\"true\">⚠\u003C\u002Fspan> 密码至少 8 位\u003C\u002Fp>\n",[80,1184,1185],{"__ignoreMap":121},[125,1186,1187,1189,1191,1193,1195,1197,1200,1202,1205,1207,1210,1212,1214,1217,1219,1221,1224,1226,1228,1230,1233,1235,1237],{"class":127,"line":128},[125,1188,149],{"class":131},[125,1190,22],{"class":135},[125,1192,800],{"class":139},[125,1194,157],{"class":131},[125,1196,161],{"class":160},[125,1198,1199],{"class":164},"error",[125,1201,161],{"class":160},[125,1203,1204],{"class":131},">\u003C",[125,1206,125],{"class":135},[125,1208,1209],{"class":139}," aria-hidden",[125,1211,157],{"class":131},[125,1213,161],{"class":160},[125,1215,1216],{"class":164},"true",[125,1218,161],{"class":160},[125,1220,215],{"class":131},[125,1222,1223],{"class":218},"⚠",[125,1225,222],{"class":131},[125,1227,125],{"class":135},[125,1229,215],{"class":131},[125,1231,1232],{"class":218}," 密码至少 8 位",[125,1234,222],{"class":131},[125,1236,22],{"class":135},[125,1238,143],{"class":131},[56,1240,1242],{"id":1241},"七html-与-cssjavascript-的关系","七、HTML 与 CSS、JavaScript 的关系",[22,1244,1245],{},"三者常被称为 Web 前端的「三大支柱」，各司其职、松耦合协作：",[117,1247,1252],{"className":1248,"code":1250,"language":1251},[1249],"language-text","HTML（结构与语义） ──构建──▶ DOM（文档对象模型）\n                                   │\nCSS（样式）        ──应用──▶  渲染树 \u002F 视觉呈现\n                                   │\nJavaScript（行为） ──操作──▶  动态修改 DOM \u002F CSSOM，响应事件\n","text",[80,1253,1250],{"__ignoreMap":121},[61,1255,1256,1262,1281,1297,1303],{},[64,1257,1258,1261],{},[26,1259,1260],{},"HTML → DOM","：浏览器解析 HTML 文本生成 DOM 树，这是 CSS 和 JS 操作的对象。",[64,1263,1264,780,1267,101,1270,1273,1274,1277,1278,54],{},[26,1265,1266],{},"CSS 如何介入",[80,1268,1269],{},"\u003Clink rel=\"stylesheet\">",[80,1271,1272],{},"\u003Cstyle>"," 或行内 ",[80,1275,1276],{},"style"," 属性提供样式规则，浏览器结合 DOM 生成渲染树并布局绘制。详见 ",[35,1279,1280],{"href":37},"CSS 盒模型",[64,1282,1283,780,1286,1289,1290,1293,1294,54],{},[26,1284,1285],{},"JS 如何介入",[80,1287,1288],{},"\u003Cscript>"," 通过 DOM API（如 ",[80,1291,1292],{},"document.querySelector","）读写元素、监听事件，动态增删节点或切换 class，从而驱动交互。详见 ",[35,1295,1296],{"href":42},"DOM \u002F BOM",[64,1298,1299,1302],{},[26,1300,1301],{},"渐进增强的分层思路","：先保证纯 HTML 语义清晰、内容可读（即使 CSS\u002FJS 加载失败或被禁用），再叠加样式与交互——而不是反过来用 JS「拼」出本该由 HTML 表达的结构。",[64,1304,1305,780,1308,1310,1311,1314,1315,716,1318,1321,1322,108],{},[26,1306,1307],{},"脚本位置影响解析",[80,1309,1288],{}," 默认会阻塞 HTML 解析，通常建议放在 ",[80,1312,1313],{},"\u003C\u002Fbody>"," 前，或使用 ",[80,1316,1317],{},"defer",[80,1319,1320],{},"async","（详见 ",[35,1323,53],{"href":52},[56,1325,1327],{"id":1326},"八现代-html-要点","八、现代 HTML 要点",[22,1329,1330],{},"HTML Living Standard 持续演进，除去经典标签，以下是近年常用、容易被忽略的能力：",[273,1332,1333,1342],{},[276,1334,1335],{},[279,1336,1337,1340],{},[282,1338,1339],{},"特性",[282,1341,549],{},[289,1343,1344,1361,1374,1388,1405,1420,1430,1440,1454,1464,1477],{},[279,1345,1346,1350],{},[294,1347,1348],{},[80,1349,107],{},[294,1351,1352,1353,1356,1357,1360],{},"原生模态\u002F非模态对话框，配合 ",[80,1354,1355],{},".showModal()"," 自动处理焦点陷阱与 ",[80,1358,1359],{},"Esc"," 关闭",[279,1362,1363,1371],{},[294,1364,1365,1367,1368],{},[80,1366,104],{}," \u002F ",[80,1369,1370],{},"\u003Csummary>",[294,1372,1373],{},"原生折叠面板，无需 JS 即可实现手风琴效果",[279,1375,1376,1381],{},[294,1377,1378],{},[80,1379,1380],{},"\u003Ctemplate>",[294,1382,1383,1384,1387],{},"存放不会被立即渲染的标记片段，配合 JS ",[80,1385,1386],{},"content.cloneNode()"," 高效批量插入 DOM",[279,1389,1390,1399],{},[294,1391,1392,1395,1396],{},[80,1393,1394],{},"\u003Cpicture>"," + ",[80,1397,1398],{},"\u003Csource>",[294,1400,1401,1402],{},"依据视口、格式支持情况提供不同图片资源，见 ",[35,1403,1404],{"href":47},"标签 · 响应式图片",[279,1406,1407,1412],{},[294,1408,1409],{},[80,1410,1411],{},"loading=\"lazy\"",[294,1413,1414,716,1416,1419],{},[80,1415,503],{},[80,1417,1418],{},"\u003Ciframe>"," 原生懒加载，无需额外 JS 库",[279,1421,1422,1427],{},[294,1423,1424],{},[80,1425,1426],{},"decoding=\"async\"",[294,1428,1429],{},"提示浏览器异步解码图片，减少主线程阻塞",[279,1431,1432,1437],{},[294,1433,1434],{},[80,1435,1436],{},"inert",[294,1438,1439],{},"将一整块区域及其子元素标记为「不可交互、不可聚焦」，常用于被遮罩的背景内容",[279,1441,1442,1447],{},[294,1443,1444],{},[80,1445,1446],{},"popover",[294,1448,1449,1450,1453],{},"新的原生弹出层属性（结合 ",[80,1451,1452],{},"popovertarget","），浏览器自动管理层级、外部点击关闭等行为",[279,1455,1456,1461],{},[294,1457,1458],{},[80,1459,1460],{},"contenteditable",[294,1462,1463],{},"使任意元素可编辑，是富文本编辑器的基础能力之一",[279,1465,1466,1474],{},[294,1467,1468,1367,1471],{},[80,1469,1470],{},"enterkeyhint",[80,1472,1473],{},"inputmode",[294,1475,1476],{},"优化移动端虚拟键盘的回车键文案与键盘类型",[279,1478,1479,1482],{},[294,1480,1481],{},"Web Components（自定义元素）",[294,1483,1484,1485,1488,1489,1492],{},"通过 ",[80,1486,1487],{},"customElements.define()"," 注册的 ",[80,1490,1491],{},"\u003Cmy-component>"," 标签，可在 HTML 中直接使用，是框架无关的组件化方案",[22,1494,1495,1496,1499,1500,54],{},"不存在名为「HTML6」的官方版本号；新特性以",[26,1497,1498],{},"独立模块","形式持续加入 living standard，浏览器实现速度不一，使用前建议查 ",[35,1501,1505],{"href":1502,"rel":1503},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FHTML",[1504],"nofollow","MDN 兼容性表",[56,1507,1509],{"id":1508},"九注释","九、注释",[117,1511,1513],{"className":119,"code":1512,"language":12,"meta":121,"style":121},"\u003C!-- 注释不会显示在页面上，仍会出现在「查看源代码」中，勿写敏感信息 -->\n",[80,1514,1515],{"__ignoreMap":121},[125,1516,1517],{"class":127,"line":128},[125,1518,1512],{"class":252},[56,1520,1522],{"id":1521},"十标准与版本","十、标准与版本",[273,1524,1525,1534],{},[276,1526,1527],{},[279,1528,1529,1532],{},[282,1530,1531],{},"名称",[282,1533,549],{},[289,1535,1536,1546,1565,1575],{},[279,1537,1538,1543],{},[294,1539,1540],{},[26,1541,1542],{},"HTML Living Standard",[294,1544,1545],{},"由 WHATWG 维护的现行规范，浏览器实现以此为主",[279,1547,1548,1553],{},[294,1549,1550],{},[26,1551,1552],{},"HTML5",[294,1554,1555,1556,101,1559,1562,1563],{},"指约 2014 年前后定稿的一批新语义与 API（",[80,1557,1558],{},"\u003Cvideo>",[80,1560,1561],{},"\u003Ccanvas>"," 等），日常说「HTML5 文档」即 ",[80,1564,298],{},[279,1566,1567,1572],{},[294,1568,1569],{},[26,1570,1571],{},"XHTML",[294,1573,1574],{},"基于 XML 语法的 HTML，现多用于 SVG\u002FMathML 等嵌入场景，一般 Web 页面不必写 XHTML",[279,1576,1577,1582],{},[294,1578,1579],{},[26,1580,1581],{},"HTML 4.01",[294,1583,1584],{},"历史版本；新项目应使用 HTML5 文档类型",[56,1586,1588],{"id":1587},"十一兼容性与有效性","十一、兼容性与有效性",[61,1590,1591,1603,1613],{},[64,1592,1593,1596,1597,1602],{},[26,1594,1595],{},"有效性","：使用符合规范的标签嵌套与属性（可用 ",[35,1598,1601],{"href":1599,"rel":1600},"https:\u002F\u002Fvalidator.w3.org\u002F",[1504],"validator.w3.org"," 校验）。",[64,1604,1605,1608,1609,1612],{},[26,1606,1607],{},"浏览器差异","：少数属性\u002F元素支持度不同，查 ",[35,1610,1505],{"href":1502,"rel":1611},[1504]," 或规范。",[64,1614,1615,1618,1619,1622,1623,1627,1628,1631],{},[26,1616,1617],{},"渐进增强","：先保证语义 HTML 与核心内容可读，再叠加 CSS\u002FJS；旧环境用 ",[80,1620,1621],{},"@supports","、特性检测等（见 ",[35,1624,1626],{"href":1625},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fnew-css","CSS 现代特性","），而非依赖已废弃的「CSS Hack」解决 ",[26,1629,1630],{},"HTML"," 问题。",[56,1633,1635],{"id":1634},"十二学习路径建议","十二、学习路径建议",[1637,1638,1639,1648,1659,1666],"ol",{},[64,1640,1641,1642,1644,1645,54],{},"掌握文档骨架、",[80,1643,178],{}," 元数据、",[35,1646,1647],{"href":47},"常见标签",[64,1649,1650,1651,1653,1654,54],{},"理解表单、链接、",[80,1652,384],{},"、标题层级，并结合本文「可访问性」一节实践 ",[35,1655,1658],{"href":1656,"rel":1657},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002Ftutorials\u002Fpage-structure\u002F",[1504],"无障碍教程",[64,1660,1661,1662,54],{},"配合 CSS 布局与 ",[35,1663,1665],{"href":1664},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fresponsive","响应式 viewport",[64,1667,1668,1669,1672],{},"再学习 JavaScript 的 ",[35,1670,1671],{"href":42},"DOM \u002F BOM 操作","，理解三者如何协作驱动一个真实页面。",[56,1674,1676],{"id":1675},"十三小结","十三、小结",[61,1678,1679,1682,1685,1693],{},[64,1680,1681],{},"HTML 负责结构与语义，CSS 负责样式，JavaScript 负责行为，三者应保持关注点分离。",[64,1683,1684],{},"语义化标签不仅是「规范要求」，直接影响可访问性、SEO 与代码可维护性。",[64,1686,1687,1688,1690,1691,54],{},"可访问性的核心是：能用原生语义标签就不要用 ",[80,1689,561],{}," 模拟；表单控件必须有关联标签；图片必须思考 ",[80,1692,384],{},[64,1694,1695],{},"现代 HTML 已内置大量曾经需要 JS 库实现的能力（对话框、折叠面板、懒加载、弹出层等），优先使用原生特性可以减少代码量与运行时开销。",[56,1697,1698],{"id":1698},"参考文献",[22,1700,1701],{},"以下链接在编写时均可正常访问：",[273,1703,1704,1713],{},[276,1705,1706],{},[279,1707,1708,1711],{},[282,1709,1710],{},"资料",[282,1712,549],{},[289,1714,1715,1726,1738,1750,1762,1774,1785,1796],{},[279,1716,1717,1723],{},[294,1718,1719],{},[35,1720,1722],{"href":1502,"rel":1721},[1504],"MDN：HTML",[294,1724,1725],{},"中文参考与教程入口",[279,1727,1728,1735],{},[294,1729,1730],{},[35,1731,1734],{"href":1732,"rel":1733},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FHTML\u002FContent_categories",[1504],"MDN：HTML 内容类别",[294,1736,1737],{},"元素分类（非块级\u002F行内二分）",[279,1739,1740,1747],{},[294,1741,1742],{},[35,1743,1746],{"href":1744,"rel":1745},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FAccessibility",[1504],"MDN：无障碍开发指南",[294,1748,1749],{},"可访问性总览",[279,1751,1752,1759],{},[294,1753,1754],{},[35,1755,1758],{"href":1756,"rel":1757},"https:\u002F\u002Fhtml.spec.whatwg.org\u002F",[1504],"WHATWG：HTML Living Standard",[294,1760,1761],{},"现行规范（英文）",[279,1763,1764,1771],{},[294,1765,1766],{},[35,1767,1770],{"href":1768,"rel":1769},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml52\u002F",[1504],"W3C：HTML 5.2",[294,1772,1773],{},"W3C 快照（英文）",[279,1775,1776,1782],{},[294,1777,1778],{},[35,1779,1781],{"href":1599,"rel":1780},[1504],"W3C Markup Validation Service",[294,1783,1784],{},"文档校验",[279,1786,1787,1793],{},[294,1788,1789],{},[35,1790,1792],{"href":1656,"rel":1791},[1504],"W3C WAI：页面结构教程",[294,1794,1795],{},"语义与无障碍（英文）",[279,1797,1798,1805],{},[294,1799,1800],{},[35,1801,1804],{"href":1802,"rel":1803},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FARIA\u002Fapg\u002F",[1504],"W3C WAI-ARIA 权威指南",[294,1806,1807],{},"ARIA 设计模式（英文）",[1276,1809,1810],{},"html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":121,"searchDepth":146,"depth":146,"links":1812},[1813,1814,1815,1818,1819,1820,1829,1830,1831,1832,1833,1834,1835,1836],{"id":58,"depth":146,"text":59},{"id":111,"depth":146,"text":112},{"id":345,"depth":146,"text":346,"children":1816},[1817],{"id":493,"depth":172,"text":494},{"id":522,"depth":146,"text":523},{"id":657,"depth":146,"text":658},{"id":879,"depth":146,"text":880,"children":1821},[1822,1823,1824,1826,1827,1828],{"id":886,"depth":172,"text":887},{"id":911,"depth":172,"text":912},{"id":1017,"depth":172,"text":1825},"3. 图片的 alt 是强制思考项，而非可选项",{"id":1039,"depth":172,"text":1040},{"id":1070,"depth":172,"text":1071},{"id":1175,"depth":172,"text":1176},{"id":1241,"depth":146,"text":1242},{"id":1326,"depth":146,"text":1327},{"id":1508,"depth":146,"text":1509},{"id":1521,"depth":146,"text":1522},{"id":1587,"depth":146,"text":1588},{"id":1634,"depth":146,"text":1635},{"id":1675,"depth":146,"text":1676},{"id":1698,"depth":146,"text":1698},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002Fhtml\u002Finfo","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fhtml\u002Finfo.md","md",{"items":1842},[1843,1845,1847,1851,1855,1859],{"path":52,"title":53,"description":1844,"category":10,"score":229},"存放元数据：字符编码、标题、样式与脚本引用、SEO 与社交分享标签、hreflang 多语言与 JSON-LD 结构化数据等；内容一般不在页面正文中直接显示（ 显示在浏览器标签栏）。HTML 基础见 简介，可见结构见 标签。",{"path":47,"title":48,"description":1846,"category":10,"score":229},"HTML 标签用于表达内容的语义与结构。应优先选用与含义匹配的元素（如 而非 ），并遵守内容模型（哪些子元素合法）。概念见 简介；head 内元标签见 Head。",{"path":1848,"title":1849,"description":1850,"category":10,"score":128},"\u002Fknowledge\u002Fbooklet\u002Fend\u002Fbasics","后端入门概览","本目录覆盖 JavaScript\u002FTypeScript 服务端运行时与框架、数据存储，以及 Rust 系统编程入门，提供从零到部署的完整学习路径。前置建议：JavaScript 基础、工程化 · 环境变量。",{"path":1852,"title":1853,"description":1854,"category":10,"score":128},"\u002Fknowledge\u002Fbooklet\u002Fend\u002Fbun\u002Fbase","Bun 基础与核心命令","Bun 是用 Zig 编写的 JavaScript 运行时，内置包管理（bun install）、打包（bun build）、测试（bun test）等，并持续兼容 Node.js API。本文介绍核心特点、安装方式，以及日常最常用的命令与包管理功能。见 运行时对比。",{"path":1856,"title":1857,"description":1858,"category":10,"score":128},"\u002Fknowledge\u002Fbooklet\u002Fsql","数据存储导读","本目录覆盖关系型数据库 MySQL 与内存数据库 Redis，从概念、安装到数据操作、性能优化、备份与缓存实践，面向后端开发与运维入门。与 NestJS 数据库、后端入门 等应用层文档配合阅读。",{"path":1860,"title":1861,"description":1862,"category":10,"score":128},"\u002Fknowledge\u002Fbooklet\u002Fsql\u002Fredis\u002Fredis","Redis 入门：概念、安装与数据类型","从「是什么\u002F为什么用」到 Docker\u002F本机安装、基本 CLI，再到五大基础类型命令、持久化与过期键机制、与 MySQL 的选型对比，以及常见踩坑，全面梳理 Redis 入门知识。",{"series":1864,"title":12,"items":1865,"index":128,"prev":1870,"next":1871},"booklet\u002Fweb\u002Fhtml",[1866,1867,1868],{"path":52,"title":53,"date":13,"pinned":14},{"path":7,"title":8,"date":13,"pinned":14},{"path":47,"title":48,"date":1869,"pinned":14},"2020-08-14",{"path":52,"title":53,"date":13,"pinned":14},{"path":47,"title":48,"date":1869,"pinned":14}]