[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Fresource\u002Fdocument\u002Flist?undefined":3,"\u002Fresource\u002Fdocument\u002Fquery\u002Fnjol93fs34gfwuzf?undefined":462,"\u002Fresource\u002Fadvertise\u002Flist?type=all?undefined":467},{"data":4,"status":460,"success":461},[5,148,202,291,332,370,420],{"books":6,"desc":145,"id":8,"image":146,"title":147},[7,40,63,78,93,105,117],{"cateId":8,"chapters":9,"desc":36,"id":11,"time":37,"title":38,"video":39},1,[10,15,18,21,24,27,30,33],{"bookId":11,"id":12,"indexOrder":13,"name":14},24,"8egfulw98v3h680j",0,"JavaSE 笔记（一）走进Java语言",{"bookId":11,"id":16,"indexOrder":13,"name":17},"pew6po6wrou23pk3","JavaSE 笔记（二）面向过程编程",{"bookId":11,"id":19,"indexOrder":13,"name":20},"eldst1fgrbdkmfs7","JavaSE 笔记（三）面向对象基础",{"bookId":11,"id":22,"indexOrder":13,"name":23},"48zphgkpjto8cath","JavaSE 笔记（四）面向对象高级篇",{"bookId":11,"id":25,"indexOrder":13,"name":26},"6r4llai92yc15j98","JavaSE 笔记（五）泛型程序设计",{"bookId":11,"id":28,"indexOrder":13,"name":29},"k6fmxd6qabgkwm9i","JavaSE 笔记（六）集合类与IO",{"bookId":11,"id":31,"indexOrder":13,"name":32},"qrd0xfttsz32gpqg","JavaSE 笔记（七）多线程与反射",{"bookId":11,"id":34,"indexOrder":13,"name":35},"td5tgn04nqmkrryt","JavaSE 笔记（八）GUI程序开发","基于Java25全新录制的SE课程",2025,"JavaSE 核心内容","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV163GGz2E8c",{"cateId":8,"chapters":41,"desc":59,"id":8,"time":60,"title":61,"video":62},[42,44,46,49,51,53,55,57],{"bookId":8,"id":43,"indexOrder":13,"name":14},"ibeeuwsbbi00undq",{"bookId":8,"id":45,"indexOrder":13,"name":17},"dncxjecdv4wciqcp",{"bookId":8,"id":47,"indexOrder":13,"name":48},"jviyz2hsht9ete5k","JavaSE 笔记（三）面向对象基础篇",{"bookId":8,"id":50,"indexOrder":13,"name":23},"qb9i6q9fap7bg1cc",{"bookId":8,"id":52,"indexOrder":13,"name":26},"hnkrjrkm3hjzeq6s",{"bookId":8,"id":54,"indexOrder":13,"name":29},"erpm32wduoaaqmrx",{"bookId":8,"id":56,"indexOrder":13,"name":32},"lfqtvxr7azumcwja",{"bookId":8,"id":58,"indexOrder":13,"name":35},"qs7gqok56gzc6idr","2022年制作的JavaSE版本",2022,"JavaSE 22年旧版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1YP4y1o75f\u002F",{"cateId":8,"chapters":64,"desc":75,"id":66,"time":60,"title":76,"video":77},[65,69,72],{"bookId":66,"id":67,"indexOrder":13,"name":68},2,"g96k66kczovvbm1i","JVM 笔记（一）走进JVM",{"bookId":66,"id":70,"indexOrder":13,"name":71},"ydd7n3jg8unc3clg","JVM 笔记（二）内存管理",{"bookId":66,"id":73,"indexOrder":13,"name":74},"r9dq37de0kaeauoi","JVM 笔记（三）类与类加载","了解Java的底层运作机制","Java JVM 虚拟机","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Er4y1r7as\u002F",{"cateId":8,"chapters":79,"desc":90,"id":81,"time":60,"title":91,"video":92},[80,84,87],{"bookId":81,"id":82,"indexOrder":13,"name":83},3,"asncyye9ya18gfar","JUC 笔记（一）再谈多线程",{"bookId":81,"id":85,"indexOrder":13,"name":86},"5tr1sm4ho6ygpt9q","JUC 笔记（二）并发编程核心",{"bookId":81,"id":88,"indexOrder":13,"name":89},"1scf51z5300mzxkh","JUC 笔记（三）并发编程进阶","你也可以成为多线程的主宰者","Java JUC 并发编程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1JT4y1S7K8\u002F",{"cateId":8,"chapters":94,"desc":102,"id":96,"time":60,"title":103,"video":104},[95,99],{"bookId":96,"id":97,"indexOrder":13,"name":98},4,"eedesc445ygiqhil","NIO 笔记（一）基础内容",{"bookId":96,"id":100,"indexOrder":13,"name":101},"ndz9t0uunrmfmv4n","NIO 笔记（二）Netty框架专题","编写畅快的高性能网络服务器","Java NIO 网络编程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1ar4y1J7mC\u002F",{"cateId":8,"chapters":106,"desc":114,"id":108,"time":60,"title":115,"video":116},[107,111],{"bookId":108,"id":109,"indexOrder":13,"name":110},5,"9890i8ofuadpwy2b","[扩展篇] Java 9-17新特性介绍",{"bookId":108,"id":112,"indexOrder":13,"name":113},"tsrkqvb6zpmtwh0n","[扩展篇] JavaSE关键字总结 笔记","精彩仍在继续，不要停止脚步","其他内容","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1tU4y1y7Fg\u002F",{"cateId":8,"chapters":118,"desc":141,"id":120,"time":142,"title":143,"video":144},[119,123,126,129,132,135,138],{"bookId":120,"id":121,"indexOrder":13,"name":122},6,"4db9h32opv7imszh","JavaSE 笔记（一）面向过程编程",{"bookId":120,"id":124,"indexOrder":13,"name":125},"c93u3v37br7hgn1q","JavaSE 笔记（二）面向对象基础篇",{"bookId":120,"id":127,"indexOrder":13,"name":128},"yglsjde9gi1jxkcb","JavaSE 笔记（三）泛型与集合类",{"bookId":120,"id":130,"indexOrder":13,"name":131},"ilhi987n986rmvo3","JavaSE 笔记（四）异常机制",{"bookId":120,"id":133,"indexOrder":13,"name":134},"pqv38vexmenglk4k","JavaSE 笔记（五）IO",{"bookId":120,"id":136,"indexOrder":13,"name":137},"jiq41n87i9ia7ilw","JavaSE 笔记（六）多线程",{"bookId":120,"id":139,"indexOrder":13,"name":140},"wn7x2mge9ws79zps","JavaSE 笔记（七）反射","此版本为早期录制的旧版本",2021,"JavaSE 21年旧版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Gv411T7pi\u002F","包含JavaSE基础路线全部教程笔记，打下坚实的基础","https:\u002F\u002Fpic2.zhimg.com\u002F80\u002Fv2-bf1a927f037a79f4d57d9ae543430a0d_1440w.webp","JavaSE 系列笔记 ☕️",{"books":149,"desc":199,"id":66,"image":200,"title":201},[150,166,178],{"cateId":66,"chapters":151,"desc":162,"id":153,"time":163,"title":164,"video":165},[152,156,159],{"bookId":153,"id":154,"indexOrder":13,"name":155},21,"iqbc2haub31bwqtz","Lombok 极速上手",{"bookId":153,"id":157,"indexOrder":13,"name":158},"ijay2hay19kn1k031","Mybatis 快速上手",{"bookId":153,"id":160,"indexOrder":13,"name":161},"ru4ogh2waocpn4jo","Maven 快速上手","JavaWeb阶段必须扩展知识点",2024,"常用知识讲解","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1gb421J7ok\u002F",{"cateId":66,"chapters":167,"desc":175,"id":169,"time":163,"title":176,"video":177},[168,172],{"bookId":169,"id":170,"indexOrder":13,"name":171},22,"ek20yvb6huhxizx7","JavaWeb 笔记（一）计算机网络基础",{"bookId":169,"id":173,"indexOrder":13,"name":174},"pgevws6w2krkffa4","JavaWeb笔记（二）Java与数据库","全面升级的JavaWeb课程","JavaWeb 网站开发","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1kS421X7rq\u002F",{"cateId":66,"chapters":179,"desc":196,"id":181,"time":142,"title":197,"video":198},[180,184,187,190,193],{"bookId":181,"id":182,"indexOrder":13,"name":183},7,"ggwwj09j2vkfftvd","JavaWeb 笔记（一）Java网络编程",{"bookId":181,"id":185,"indexOrder":13,"name":186},"sauvq105istskjaz","JavaWeb 笔记（二）数据库基础",{"bookId":181,"id":188,"indexOrder":13,"name":189},"xgbeasmvrhxx9tn4","JavaWeb 笔记（三）Java与数据库",{"bookId":181,"id":191,"indexOrder":13,"name":192},"k7dfwua3bsezvw9q","JavaWeb 笔记（四）前端基础",{"bookId":181,"id":194,"indexOrder":13,"name":195},"ycpagby2v7j4p728","JavaWeb 笔记（五）后端开发","搭建属于自己的Web网站","JavaWeb 旧版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1CL4y1i7qR\u002F","包含JavaWeb路线全套笔记，从零开始搭建自己的网站！","https:\u002F\u002Fpic3.zhimg.com\u002F80\u002Fv2-df3b38e3012258ed70c23b586309e3f6_1440w.webp","JavaWeb 系列笔记 🚛",{"books":203,"desc":288,"id":81,"image":289,"title":290},[204,220,235,255,273],{"cateId":81,"chapters":205,"desc":216,"id":207,"time":217,"title":218,"video":219},[206,210,213],{"bookId":207,"id":208,"indexOrder":13,"name":209},8,"h7sjo5oy0l03607e","SSM笔记（一）Spring基础",{"bookId":207,"id":211,"indexOrder":13,"name":212},"eve8gq72qmdb46sg","SSM笔记（二）SpringMvc基础",{"bookId":207,"id":214,"indexOrder":13,"name":215},"63v73g0zh1qlr6fk","SSM笔记（三）SpringSecurity基础","Spring的探索之路从这里开始",2023,"JavaSSM 基础部分","[\"https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Kv4y1x7is\u002F\", \"https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Lh4y1M7kx\u002F\", \"https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1fV411M7aS\u002F\"]",{"cateId":81,"chapters":221,"desc":232,"id":223,"time":217,"title":233,"video":234},[222,226,229],{"bookId":223,"id":224,"indexOrder":13,"name":225},16,"0k66v5r6slsfuog4","SpringBoot笔记（一）核心内容",{"bookId":223,"id":227,"indexOrder":13,"name":228},"bqlrnc2yvkaxo8s1","SpringBoot笔记（二）数据交互",{"bookId":223,"id":230,"indexOrder":13,"name":231},"wci9lb9tgea866jt","SpringBoot笔记（三）前后端分离","SpringBoot全新重制版","SpringBoot 新版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1xu4y1m7UP\u002F",{"cateId":81,"chapters":236,"desc":252,"id":238,"time":60,"title":253,"video":254},[237,240,243,246,249],{"bookId":238,"id":239,"indexOrder":13,"name":225},9,"e43gl1ilygps032v",{"bookId":238,"id":241,"indexOrder":13,"name":242},"emnmd8nzfdb3hr50","SpringBoot笔记（二）Git版本控制",{"bookId":238,"id":244,"indexOrder":13,"name":245},"jjlolj5igvttvyhv","SpringBoot笔记（三）Redis数据库",{"bookId":238,"id":247,"indexOrder":13,"name":248},"skgr4ivb5curdoux","SpringBoot笔记（四）其他框架介绍",{"bookId":238,"id":250,"indexOrder":13,"name":251},"le91fqhu4dqui1k4","SpringBoot笔记（五）Linux系统","逐步走向企业级开发","SpringBoot 旧版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1UL411V7f3\u002F",{"cateId":81,"chapters":256,"desc":270,"id":258,"time":60,"title":271,"video":272},[257,261,264,267],{"bookId":258,"id":259,"indexOrder":13,"name":260},10,"oejzo0l77zeb6a7e","SpringCloud笔记（一）微服务基础",{"bookId":258,"id":262,"indexOrder":13,"name":263},"f6eya9taaelsl35p","SpringCloud笔记（二）微服务进阶",{"bookId":258,"id":265,"indexOrder":13,"name":266},"35v1hbsfcdgagdnw","SpringCloud笔记（三）微服务应用",{"bookId":258,"id":268,"indexOrder":13,"name":269},"a782u84512tyuo1m","SpringCloud笔记（四）消息队列","体验微服务架构带来的魅力","SpringCloud 进阶","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1AL4y1j7RY\u002F",{"cateId":81,"chapters":274,"desc":285,"id":276,"time":142,"title":286,"video":287},[275,278,280,282],{"bookId":276,"id":277,"indexOrder":13,"name":209},11,"efjw75u8a251qxk5",{"bookId":276,"id":279,"indexOrder":13,"name":212},"guc134xb7sl78vju",{"bookId":276,"id":281,"indexOrder":13,"name":215},"u8ekxxucowr2b1tm",{"bookId":276,"id":283,"indexOrder":13,"name":284},"vkpmw9wbej21nei6","SSM笔记（四）MySQL进阶","此教程为2021年旧版教程","JavaSSM 旧版","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1xL4y1H7Tq\u002F","包含Spring全套框架笔记，从开始到Spring Boot，以及众多运维小知识。","https:\u002F\u002Fpic4.zhimg.com\u002F80\u002Fv2-28c3144421220d7c048703281bc34f63_1440w.webp","Spring 系列笔记 🍏",{"books":292,"desc":329,"id":96,"image":330,"title":331},[293,308],{"cateId":96,"chapters":294,"desc":305,"id":296,"time":60,"title":306,"video":307},[295,299,302],{"bookId":296,"id":297,"indexOrder":13,"name":298},12,"jd3e8u5cmvx5gco6","C语言（一）计算机思维导论",{"bookId":296,"id":300,"indexOrder":13,"name":301},"lqv77apvx82nkkio","C语言（二）基础语法",{"bookId":296,"id":303,"indexOrder":13,"name":304},"xb0b9t37gyv96xns","C语言（三）高级特性","包含高等院校需要教授的全部内容","C语言程序设计","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Cr4y137os\u002F",{"cateId":96,"chapters":309,"desc":326,"id":311,"time":60,"title":327,"video":328},[310,314,317,320,323],{"bookId":311,"id":312,"indexOrder":13,"name":313},13,"8a046ps2e4w6k4py","数据结构与算法（一）线性结构篇",{"bookId":311,"id":315,"indexOrder":13,"name":316},"3ma8db91f9zrnkja","数据结构与算法（二）树形结构篇",{"bookId":311,"id":318,"indexOrder":13,"name":319},"0lsjm59k7cgu4tpr","数据结构与算法（三）散列表篇",{"bookId":311,"id":321,"indexOrder":13,"name":322},"0qzy7bogo0g2pusa","数据结构与算法（四）图结构篇",{"bookId":311,"id":324,"indexOrder":13,"name":325},"6gmcxcikcilyxblj","数据结构与算法（五）排序算法篇","虽然很难，但是它是考研必学科目","数据结构与算法","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV13W4y127Ey\u002F","你的内心一直有一个坚定的声音在告诉你，一定要考上一名研究生，向着未来前进吧！","https:\u002F\u002Fpic2.zhimg.com\u002F80\u002Fv2-ac128404efb29ce1c9d1ccc61024f1d1_1440w.webp","C语言 系列笔记 🥬",{"books":333,"desc":367,"id":108,"image":368,"title":369},[334,349,358],{"cateId":108,"chapters":335,"desc":346,"id":337,"time":163,"title":347,"video":348},[336,340,343],{"bookId":337,"id":338,"indexOrder":13,"name":339},17,"urw2e6gg1lprv65w","Kotlin（一）基础语法",{"bookId":337,"id":341,"indexOrder":13,"name":342},"t7lnl87f74f3v1ju","Kotlin（二）类与对象",{"bookId":337,"id":344,"indexOrder":13,"name":345},"v1zzvki0knb1xvml","Kotlin（三）高级特性","包含Kotlin语言完整基础部分","Kotlin程序设计基础","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1P94y1c7tV\u002F",{"cateId":108,"chapters":350,"desc":355,"id":352,"time":163,"title":356,"video":357},[351],{"bookId":352,"id":353,"indexOrder":13,"name":354},18,"ovbzpe7065bye1st","Kotlin扩展（一）","包含Kotlin额外扩展知识","Kotlin扩展篇","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Hg4y1m7Ca\u002F",{"cateId":108,"chapters":359,"desc":364,"id":361,"time":163,"title":365,"video":366},[360],{"bookId":361,"id":362,"indexOrder":13,"name":363},19,"3at7ybv04dmjc0wp","Gradle基础教程","Gradle配置教程（Kotlin）","Gradle教程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Fc411x7xF\u002F","Kotlin让JVM平台焕发新的生机，让语言的表达更加优美","https:\u002F\u002Fpic2.zhimg.com\u002F80\u002Fv2-be815568f7c79c64cdaa171b0409786d_1440w.webp","Kotlin 系列笔记 ☘️",{"books":371,"desc":418,"id":120,"title":419},[372,391,403],{"cateId":120,"chapters":373,"desc":387,"id":375,"time":388,"title":389,"video":390},[374,378,381,384],{"bookId":375,"id":376,"indexOrder":13,"name":377},26,"zjf5qapwqtqiohcn","JavaScript笔记（一）基础语法",{"bookId":375,"id":379,"indexOrder":13,"name":380},"95jc6sjyjwcp9pvp","JavaScript笔记（二）核心知识",{"bookId":375,"id":382,"indexOrder":13,"name":383},"j35cdc1qz8dzq7pn","JavaScript笔记（三）进阶知识",{"bookId":375,"id":385,"indexOrder":13,"name":386},"sdhodlihphnpcg37","JavaScript笔记（四）前端基础","包含JavaScript最新语法规范讲解",2026,"JavaScript教程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1xq6gBgESU",{"cateId":120,"chapters":392,"desc":400,"id":394,"time":37,"title":401,"video":402},[393,397],{"bookId":394,"id":395,"indexOrder":13,"name":396},23,"bsisgazdftiz3o9c","HTML5笔记（一）基础内容",{"bookId":394,"id":398,"indexOrder":13,"name":399},"njol93fs34gfwuzf","HTML5笔记（二）高级内容","包含HTML基础内容和相关知识点","HTML5核心教程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1BrBiYNEWg",{"cateId":120,"chapters":404,"desc":415,"id":406,"time":37,"title":416,"video":417},[405,409,412],{"bookId":406,"id":407,"indexOrder":13,"name":408},25,"jo74ciirtg8wh90y","CSS笔记（一）基础入门",{"bookId":406,"id":410,"indexOrder":13,"name":411},"ap5ixyomoejuw4ue","CSS笔记（二）盒模型和布局",{"bookId":406,"id":413,"indexOrder":13,"name":414},"4djgk5xy1lzpiuf2","CSS笔记（三）变换和过渡","包含CSS3基础内容和相关知识点","CSS3核心教程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1sQeEzFEKi","包含Web前端学习路径全部教程笔记，打下坚实的基础","Web前端 系列笔记",{"books":421,"desc":458,"id":423,"image":368,"title":459},[422,432,450],{"cateId":423,"chapters":424,"desc":429,"id":426,"time":163,"title":430,"video":431},100,[425],{"bookId":426,"id":427,"indexOrder":13,"name":428},20,"o0ab271mkdsas87","Markdown基础语法","编写简洁而又优美的文档","Markdown教程","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1eJ4m157kC",{"cateId":423,"chapters":433,"desc":447,"id":435,"time":60,"title":448,"video":449},[434,438,441,444],{"bookId":435,"id":436,"indexOrder":13,"name":437},14,"6386mh7anqt4tzyv","设计模式（一）面向对象设计原则",{"bookId":435,"id":439,"indexOrder":13,"name":440},"8ftkb38wfn6ox0ug","设计模式（二）创建型",{"bookId":435,"id":442,"indexOrder":13,"name":443},"i1msql1k8y70etey","设计模式（三）结构型",{"bookId":435,"id":445,"indexOrder":13,"name":446},"5434a3cyyjvwhs8s","设计模式（四）行为型","使你的编码水平得到质的飞跃","设计模式系列","https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1u3411P7Na\u002F",{"cateId":423,"chapters":451,"desc":456,"id":453,"time":60,"title":457},[452],{"bookId":453,"id":454,"indexOrder":13,"name":455},15,"zj9uvg0sp3b0sok8","Docker 容器技术 笔记","这里包含其他中间件课程笔记","其他中间件笔记","我们对知识的探索从未停止，只有不断地学习，才能走向美好的未来！","其他笔记分类 🌽",200,true,{"data":463,"status":460,"success":461},{"bookId":394,"content":464,"id":398,"indexOrder":66,"introduction":465,"lastUpdate":466,"name":399},"![image-20241128010924534](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F28\u002FAeBr4Hd5m7CoZxU.png)\n\n# HTML5 高级内容\n\n这一部分我们接着来讲解HTML5的高级内容，包括表单、矢量图和无障碍。\n\n## HTML表单\n\n在我们常见的一些网站中，存在着各种各样的表单，比如我们登录一个网站时，需要填写登录表单、在网上购物时，需要填写收货信息表单、申请助学金时，需要填写助学金信息表单。表单是一个采集用户数据非常好的途径，也是很多网站都需要用到的功能。\n\n![image-20241123195159784](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F23\u002FZmqK4YHSw72zDdj.png)\n\n这一部分我们就来学习一下表单的编写，和之前的表格一样，表单需要使用`form`标签来作为最外层：\n\n```html\n\u003Cform>\n\u003C!-- 各种表单组件 -->\n\u003C\u002Fform>\n```\n\n表单中出现的各种输入框，选择框都有对应的标签来表示，我们依次来认识一下。\n\n### 文本输入框\n\n文本输入框是我们使用频率非常高的一种表单组件，几乎99%的场景都会用到它。我们可以使用`input`标签来表示一个文本输入框，它和`img`一样都是行内块元素（CSS阶段会详细介绍）它是一个单标签，直接加就完事：\n\n```html\n\u003Cform>\n  \u003Cinput>\n\u003C\u002Fform>\n```\n\n![image-20241123205146741](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F23\u002F7zKhbfaYS96tHle.png)\n\n可以看到，在页面中出现了一个可以输入内容的文本框，很简单吧？\n\n> 输入框并不是必须在form中编写，根据情况也可以在页面的任何位置插入，后续学习的其他表单组件也是同理。\n\n我们接着来认识一下`value`属性，它可以用于设置输入框的默认值，比如：\n\n```html\n\u003Cform>\n  \u003Cinput value=\"牛魔的\">\n\u003C\u002Fform>\n```\n\n![image-20241123232512710](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F23\u002FqawAYkLBVEhGxMm.png)\n\n我们在什么都不输入的情况下，输入框会展示默认的文本。然后是`size`属性，它可以控制输入框的长度，单位是一个英文字符的宽度：\n\n```html\n\u003Cform>\n  \u003Cinput value=\"牛魔的\" size=\"10\">\n\u003C\u002Fform>\n```\n\n不过这个属性我们一般使用的得比较少，控制宽度一般都是使用CSS来调整。还有一个`maxlength`属性，它可以控制输入框内文本的最大长度限制：\n\n```html\n\u003Cform>\n  \u003Cinput value=\"牛魔的\" maxlength=\"5\">\n\u003C\u002Fform>\n```\n\n这样，当我们输入的字数超过指定的长度时将无法继续输入。有些时候我们可能还需要在用户未输入任何内容时添加一些提示信息来告诉用户这个输入框需要填写什么，我们可以使用`placeholder`属性：\n\n```html\n\u003Cform>\n  \u003Cinput placeholder=\"用户名\">\n\u003C\u002Fform>\n```\n\n![image-20241124000338111](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F24\u002F6TqD5ZvjxkhSl34.png)\n\n此时输入框就会出现提示词。有些时候我们可能希望输入框里面的内容不可被修改，那么也可以为其添加`disbaled`属性：\n\n```html\n\u003Cform>\n  \u003Cinput value=\"你干嘛\" disabled>\n\u003C\u002Fform>\n```\n\n与其相似的还有`readonly`属性，它同样可以使一个输入框的内容只读，只不过它相比`disbaled`来说，可以被选中但不能编辑，且在表单提交时会包含在内，有关表单提交我们会在后面进行介绍。\n\n> HTML某些属性被称为**布尔属性**（boolean attributes）。这些属性的特点是它们的存在与否决定了属性的值，而不需要显式地设置为特定的值。例如，`checked`、`disabled`、`readonly`等属性就是布尔属性。\n>\n> 由于这些属性只有启用和不启用两种情况，因此上面我们使用`disabled`就直接代表我们要启用某个功能，不用和其他属性那样还要编写具体结果。\n>\n> 对于布尔属性，如果在标签中使用该属性，那么它的值就被视为`true`。因此，`checked`和`checked=\"checked\"`在HTML中是等效的。\n\n除了这种普通文本框之外，我们还可以将文本框设置为多种类型的，比如我们输入密码时，往往需要使用`*`来代替真正的密码字符，从而防止用户的密码直接出现在屏幕上，保证一定的安全性。我们可以使用`type`属性来修改文本框的类型，默认情况下`type`属性为`text`，密码的话就是：\n\n```html\n\u003Cform>\n  \u003Cinput type=\"password\">\n\u003C\u002Fform>\n```\n\n![image-20241124001539239](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F24\u002FMBqKOUv4CLtRiak.png)\n\n当然除了密码和数字之外，还有很多类型，这里我们全部列举出来：\n\n- `email`：电子邮件地址输入，支持格式验证\n- `url`：URL输入，支持格式验证\n- `tel`：电话号码输入\n- `number`：数字输入，可以使用上下箭头进行增减\n- `range`：范围输入，通常以滑块形式呈现\n- `date`：日期选择输入，通常显示日期选择器\n- `time`：时间选择输入，通常显示时间选择器\n- `datetime-local`：本地日期和时间输入\n- `month`：月份选择输入\n- `week`：周选择输入\n- `color`：颜色选择输入，通常显示颜色选择器\n- `file`：文件选择输入，允许用户上传文件\n- `hidden`：隐藏输入，不在页面上显示\n- `search`：搜索框输入，通常在样式上有所不同\n- `button`：普通按钮\n- `submit`：提交按钮\n- `reset`：重置按钮\n\n其中大部分类型都是普通的文本输入，比如`tel`、`email`、`url`，不过这些会携带一定的格式验证。\n\n```html\n\u003Cform>\n  \u003Cinput type=\"email\">\n\u003C\u002Fform>\n```\n\n不过这种格式验证只会在提交表单时进行校验。还有一些比较重要的输入框类型，我们会在接下来几节中进行详细介绍。\n\n### 表单的提交\n\n在继续介绍其他类型的输入框之前，我们先来讲解一下表单的提交。这里我们可以编写一个简单的登录表单：\n\n```html\n\u003Cform>\n  电子邮件: \u003Cinput type=\"email\">\n  密码: \u003Cinput type=\"password\">\n\u003C\u002Fform>\n```\n\n不过我们发现，`input`标签一直都有一个警告，说表单输入没有相关的label，那么这个是什么东西呢？这其实HTML的一种规范，它要求所有的输入框都要被一个`label`标签囊括或是指向，以实现更明确的语义化，它也是一个行内元素：\n\n```html\n\u003Cform>\n  \u003Clabel>电子邮件: \u003Cinput type=\"email\">\u003C\u002Flabel>\n  \u003Clabel>密码: \u003Cinput type=\"password\">\u003C\u002Flabel>\n\u003C\u002Fform>\n```\n\n![image-20241125164124310](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F25\u002FJ2zgiHxmvZjcp9w.png)\n\n实际上`label`标签加与不加，在展示效果上都是一样的。当然，此标签对于元素的选中有一定效果，当我们点击输入框前面的文本时，也可以激活输入框，包括后续的各种样式输入框也是支持这种效果的。\n\n除了上面这种写法之外，为了更加灵活，我们也可以使用`for`属性来指定一个输入框：\n\n```html\n\u003Cform>\n  \u003Clabel for=\"username\">电子邮件: \u003C\u002Flabel>\n  \u003Cinput id=\"username\" type=\"email\">\n  \u003Clabel>密码: \u003Cinput type=\"password\">\u003C\u002Flabel>\n\u003C\u002Fform>\n```\n\n注意这里的`for`必须填写对应`input`标签的`id`名称，这与上面直接包含的写法是一样的。\n\n我们接着来看表单，当用户填写好自己的用户名和密码后，实际上需要将填写的数据提交给后端进行校验，可能各位小伙伴对于前后端的概念还不是很熟悉，这里我们简单介绍一下：\n\n> 在一个网站中，前端和后端是两个重要的组成部分，它们各自承担着不同的职责和功能。\n>\n> * **前端**：用户直接与之交互的部分，通常指网站的视觉和交互元素。它涉及到网页的布局、设计、以及用户体验。\n> * **后端**：后端是用户看不见的部分，负责处理应用逻辑、数据库交互和服务器操作。\n\n因此，我们作为前端开发来说，只需要考虑页面制作和用户操作逻辑即可，而登录验证以及数据的获取，则都是后端的工作，这里的登录实际上也是将数据提交给后端进行处理。\n\n那怎么才能完成这样的一个提交操作呢？首先我们需要为所有的输入框命名，这样才能明确填写的表单项名称，我们需要指定`name`属性：\n\n```html\n\u003Cform>\n  \u003Clabel>电子邮件: \u003Cinput name=\"username\" type=\"email\">\u003C\u002Flabel>\n  \u003Clabel>密码: \u003Cinput name=\"password\" type=\"password\">\u003C\u002Flabel>\n\u003C\u002Fform>\n```\n\n接着，当我们在完成表单的填写之后，我们可以使用一个类型为`submit`类型的输入框作为登录按钮使用：\n\n```html\n\u003Cform>\n  \u003Cdiv>\n    \u003Clabel>用户名: \u003Cinput name=\"username\" type=\"email\">\u003C\u002Flabel>\n  \u003C\u002Fdiv>\n  \u003Cdiv>\n    \u003Clabel>密码: \u003Cinput name=\"password\" type=\"password\">\u003C\u002Flabel>\n  \u003C\u002Fdiv>\n  \u003Cinput type=\"submit\">\n\u003C\u002Fform>\n```\n\n![image-20241125174517648](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F25\u002Ftj5Ds7S46rMpPUh.png)\n\n这种类型的输入框会直接显示为一个按钮的形式，当我们点击时也会触发一次表单提交操作。注意这种类型的输入框可以不需要配合`label`标签使用。\n\n同样的，`button`标签也可以实现这样的效果，它代表一个按钮，是一个双标签且也是行内块元素：\n\n```html\n\u003Cbutton>你干嘛\u003C\u002Fbutton>\n```\n\n接着我们将其`type`属性设置为`submit`类型，这样就可以作为表单的提交按钮了：\n\n```html\n\u003Cbutton type=\"submit\">你干嘛\u003C\u002Fbutton>\n```\n\n按钮标签可以编写更灵活的表单提交按钮样式，比如名称可以自定义，不过在我们学习JavaScript之前使用率不会很高，但是一定要记住有这样一个标签。\n\n当然除了点击按钮之外，也可以通过敲击回车的方式提交表单，在表单提交前，如果您输入的内容与表单类型不符或校验未通过，那么将会弹出警告信息，比如我们这里的类型是`email`，但是输入内容并不是一个合法的电子邮件地址：\n\n![image-20241125173749558](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F25\u002FSapiChlJDufjV3L.png)\n\n> 我们还可以为`input`标签添加`required`属性来要求此输入框必须填写内容才可以提交表单。\n>\n> ![image-20241126011755753](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F26\u002FSqyt16EKOgiRA8k.png)\n>\n> 这同样适用于之后讲解的`textarea`和`select`标签。\n\n当输入内容无误时提交，使用F12打开开发者工具，看到旁边的“网络”板块出现了一个新的请求，且页面刷新了：\n\n![image-20241125174057791](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F25\u002Fr2o3FI8UtATgaLP.png)\n\n此时我们就成功向后端发起了一个GET方法的表单登录请求，只不过由于现在我们没有学习后端相关知识和HTTP协议相关知识点，因此不需要深入研究，只做了解即可。\n\n有些时候我们可能还希望重置表单内容，比如用户发现自己填写的内容有问题，我们可以提供一个`reset`类型的输入框或是`reset`类型的按钮来作为重置按钮，它可以直接将表单中填写的所有内容清除：\n\n```html\n\u003Cform>\n  \u003Cdiv>\n    \u003Clabel>用户名: \u003Cinput name=\"username\" type=\"email\">\u003C\u002Flabel>\n  \u003C\u002Fdiv>\n  \u003Cdiv>\n    \u003Clabel>密码: \u003Cinput name=\"password\" type=\"password\">\u003C\u002Flabel>\n  \u003C\u002Fdiv>\n  \u003Cdiv>\n    \u003Cinput type=\"submit\">\n    \u003Cinput type=\"reset\">\n  \u003C\u002Fdiv>\n\u003C\u002Fform>\n```\n\n![image-20241125175428868](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F25\u002FuYapeQM8O6j3Igz.png)\n\n当我们点击重置按钮时，表单中的数据就自动被清除了，还是很简单吧？\n\n当然，可能有些时候我们的输入框并没有写到`form`标签之内，但是我们又希望它可以关联到某个表单那该怎么办呢，只需要使用`form`属性指定其id即可：\n\n```html\n\u003Cinput form=\"666\">\n\u003Cform id=\"666\">\n  \n\u003C\u002Fform>\n```\n\n这种规则同样适用于后续学习的`select`和`textarea`标签。\n\n最后我们再来认识一下`form`标签中的一些属性，其实都是与表单提交相关，些常用属性列表如下：\n\n1. **action**：指定表单数据提交的目标 URL。\n2. **method**：指定表单提交方法。常用值包括 `GET` 和 `POST`。\n3. **enctype**：指定表单数据编码类型，特别是在文件上传时。常用值包括 `application\u002Fx-www-form-urlencoded`、`multipart\u002Fform-data` 和 `text\u002Fplain`。\n4. **target**：指定表单提交后响应的目标窗口或框架。常用值包括 `_self`、`_blank`、`_parent`和 `_top`。\n5. **name**：为表单指定名称，便于在 JavaScript 中引用。\n6. **id**：为表单指定唯一标识符，便于在 CSS 和 JavaScript 中引用。\n7. **autocomplete**：指定表单是否启用自动完成功能。取值可以是 `on` 或 `off`。\n8. **novalidate**：禁用表单的默认验证。\n\n比如下面的代码：\n\n```html\n\u003Cform action=\"\u002Flogin\" method=\"post\" novalidate>\n  \u003Cdiv>\n    \u003Clabel>用户名: \u003Cinput name=\"username\" type=\"email\">\u003C\u002Flabel>\n  \u003C\u002Fdiv>\n  \u003Cdiv>\n    \u003Clabel>密码: \u003Cinput name=\"password\" type=\"password\">\u003C\u002Flabel>\n  \u003C\u002Fdiv>\n  \u003Cinput type=\"submit\">\n\u003C\u002Fform>\n```\n\n此时会发送一个地址为`\u002Flogin`的`POST`登录请求：\n\n![image-20241125181137736](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F25\u002FOWYJZLIEkGSNR3P.png)\n\n当然不出意外肯定会返回404，同样的，这里仅做了解即可。\n\n### 日期选择\n\n日期选择在很多时候都需要，这里有很多种类型的日期格式供选择，比如我们只希望选择时间，可以使用`time`：\n\n![image-20241124011026428](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F24\u002F2hURBDow5Ceju1P.png)\n\n它可以让我们选择一个时间点作为结果，不过比较拉胯的是，它只能选择时分，不能选择秒。当然也有选择日期的`date`类型输入框：\n\n```html\n\u003Cform>\n  \u003Cinput type=\"date\">\n\u003C\u002Fform>\n```\n\n我们也可以选择一个更强大的`datetime-local`类型，它不仅包含一个时间点，还包含一个具体的日期：\n\n![image-20241124011559843](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F24\u002FjWI6bvDZuwh842O.png)\n\n它可以进行日期和时间的完整选择。除此之外，还有单独的周数选择、月份选择：\n\n```html\n\u003Cform>\n  \u003Cinput type=\"week\">\n  \u003Cinput type=\"month\">\n\u003C\u002Fform>\n```\n\n![image-20241124012441135](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F24\u002FAvFaN1TMhogmBzq.png)\n\n不过这些日期选择框，在一些浏览器下并未完全适配，而且选择框的样式也无法修，因此我们在实际开发中也很少会用到日期相关的输入框，一般都是使用第三方组件来实现，这里仅做了解即可。\n\n### 数字和范围选择\n\n有些时候我们可能会要求用户只输入数字，可以使用`number`类型：\n\n```html\n\u003Cform>\n  \u003Cinput type=\"number\">\n\u003C\u002Fform>\n```\n\n![image-20241124112934730](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F24\u002FhIKYqPcnAM9xamT.png)\n\n这种类型的输入框无法接受除了数字之外的其他字符，并且在输入框的右边有按钮可以调整输入的数字。\n\n除了简单设置为数字类型之外，我们还可以限制数字输入的范围，使用`max`和`min`进行控制：\n\n```html\n\u003Cform>\n  \u003Cinput type=\"number\" max=\"100\" min=\"0\">\n\u003C\u002Fform>\n```\n\n![image-20241124115247955](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F24\u002Fkrzg9ibBfoTvm8W.png)\n\n此时当我们点击右边的按钮进行数字调整时，达到最小或最大值时，将无法调整。\n\n此外，我们还可以通过`step`属性来控制调整按钮的步长，也就是点击一次变化的差值，默认为1：\n\n```html\n\u003Cform>\n  \u003Cinput type=\"number\" max=\"100\" min=\"0\" step=\"2\">\n\u003C\u002Fform>\n```\n\n除了数字输入框之外，我们也可以使用一个范围选择器，来选择一个数字范围：\n\n```html\n\u003Cform>\n  \u003Cinput type=\"range\">\n\u003C\u002Fform>\n```\n\n![image-20241124135054907](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F24\u002F52tzQXlUY3nBdJD.png)\n\n我们同样也可以，为其设置一个最大范围：\n\n```html\n\u003Cform>\n  \u003Cinput type=\"range\" max=\"100\" min=\"0\" step=\"2\">\n\u003C\u002Fform>\n```\n\n这样就只能在范围内拖动了，只不过这里并没有显示具体数值，有点不太好看，这个类型的输入框也不是很常用，只做了解就行了。\n\n### 单选框和多选框\n\n我们接着来介绍一个使用频率非常高的输入框类型，单选按钮。我们可以使用`radio`来表示一个单选框：\n\n```html\n\u003Cinput type=\"radio\">\n```\n\n![image-20241124181937305](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F24\u002Ff8G9JhdXxU5TvVC.png)\n\n接着就出现了一个小圆点，我们可以使用鼠标点击它使其变成选中状态。当然，像这样直接编写小圆点不太好看，我们可以为其丰富一下内容：\n\n```html\n\u003Cform>\n  \u003Cdiv>请选择您的高考毕业礼物：\u003C\u002Fdiv>\n  \u003Cinput type=\"radio\"> 100万元现金\n  \u003Cinput type=\"radio\"> 清华大学录取通知书\n\u003C\u002Fform>\n```\n\n![2a9cee0b5fc8ec3a09ca71c3ff095073](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F24\u002FMvPQyUKbmGfq3E9.png)\n\n不过我们发现，这两个选项明明是单选框，但是为什么两个都可以同时个勾选呢？~~因为小孩子才做选择，我全都要~~，这是因为我们没有为其设置`name`属性，它是输入框的名称，其中一个作用是之前说到的提交表单时的表单项目的名称，还有一个作用就是为单选框进行分组，同一组单选框的`name`属性必须为同一个值：\n\n```html\n\u003Cform>\n  \u003Cdiv>请选择您的高考毕业礼物：\u003C\u002Fdiv>\n  \u003Cinput type=\"radio\" name=\"test\"> 100万元现金\n  \u003Cinput type=\"radio\" name=\"test\"> 清华大学录取通知书\n\u003C\u002Fform>\n```\n\n![image-20241124184131034](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F24\u002FysFTBYS3IOPwKpH.png)\n\n我们还是可以通过`checked`属性来默认勾选某个单选框：\n\n```html\n\u003Cform>\n  \u003Cdiv>请选择您的高考毕业礼物：\u003C\u002Fdiv>\n  \u003Cinput type=\"radio\" name=\"test\"> 100万元现金\n  \u003Cinput type=\"radio\" name=\"test\" checked> 清华大学录取通知书\n\u003C\u002Fform>\n```\n\n我们还需要为单选框设置一个`value`属性作为其表单提交的值：\n\n```html\n\u003Cform>\n  \u003Cdiv>请选择您的高考毕业礼物：\u003C\u002Fdiv>\n  \u003Cinput type=\"radio\" name=\"test\" value=\"a\"> 100万元现金\n  \u003Cinput type=\"radio\" name=\"test\" value=\"b\" checked> 清华大学录取通知书\n\u003C\u002Fform>\n```\n\n这样表单就可以提交我们当前所选中的值对应的`value`作为结果了。\n\n很多时候可能我们并不是做单选题，我们也需要能够多选的表单。我们可以使用`checkbox`作为类型，但是同样需要和单选框一样使用相同的`name`用于分组，还有`value`作为值：\n\n```html\n\u003Cform>\n  \u003Cdiv>感谢您参与本次校园招聘，请选择您的毕业Offer意向：\u003C\u002Fdiv>\n  \u003Cinput type=\"checkbox\" name=\"test\" value=\"a\"> Java后端开发工程师|月薪2K\n  \u003Cinput type=\"checkbox\" name=\"test\" value=\"b\"> 全干开发工程师996|月薪3K\n  \u003Cinput type=\"checkbox\" name=\"test\" value=\"c\"> 服务器运维24小时随叫随到|月薪2K\n  \u003Cinput type=\"checkbox\" name=\"test\" value=\"d\"> 美团大厂外卖骑手|1单5-10块\n\u003C\u002Fform>\n```\n\n![image-20241125233904018](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F25\u002F6vqOkPfidar5uHe.png)\n\n可以看到，我们可以自由选择喜欢的选项。在同时选择多个选项时，提交表单的值会同时携带勾选的所有属性：\n\n![image-20241125234649370](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F25\u002FBNFtfVozvLSwdMi.png)\n\n有关勾选框相关介绍就到这里。\n\n### 下拉列表\n\n虽然使用单选或多选框可以帮助我们解决选项类输入的问题，但是当选项很多时，将所有选项全部展示出来可能对用户来说并不友好，此时我们可以考虑另一种选择的方案，下拉选择框。\n\n使用`select`标签来表示一个下拉选择框：\n\n```html\n\u003Cform>\n  \u003Cselect>\n    \n  \u003C\u002Fselect>\n\u003C\u002Fform>\n```\n\n不过光有一个选择框还不行，我们还要为其添加选项，所有的选项需要编写在`select`标签内部，并使用`option`标签囊括起来：\n\n```html\n\u003Cform>\n  \u003Cselect>\n    \u003Coption>Java入门到入土\u003C\u002Foption>\n    \u003Coption>C++就业到裁员\u003C\u002Foption>\n    \u003Coption>C#的虚空岗位\u003C\u002Foption>\n    \u003Coption>Web前端被AI取代\u003C\u002Foption>\n  \u003C\u002Fselect>\n\u003C\u002Fform>\n```\n\n![image-20241126005213958](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F26\u002FliHkWV8Frgu4YLy.png)\n\n可能各位小伙伴会比较疑惑下拉框样式问题，这是因为不同操作系统的下拉框样式不同。实际上很多网站为了统一样式一般都是使用第三方组件库实现下拉框。\n\n选项的展示值也可以使用`label`属性指定，效果和直接编写到标签内部是一样的：\n\n```html\n\u003Cform>\n  \u003Cselect>\n    \u003Coption label=\"Java入门到入土\">\u003C\u002Foption>\n    \u003Coption label=\"C++就业到裁员\">\u003C\u002Foption>\n    \u003Coption label=\"C#的虚空岗位\">\u003C\u002Foption>\n    \u003Coption label=\"Web前端被AI取代\">\u003C\u002Foption>\n  \u003C\u002Fselect>\n\u003C\u002Fform>\n```\n\n不过这种写法并不推荐，我们还是建议直接写到标签内部。除了单选之外，我们也可以为其添加`multiple`属性，来使得其可以多选：\n\n![image-20241126005440495](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F26\u002FkWwADpcSjvl5E6J.png)\n\n此时下拉框会自动变成上图的样式，我们可以按住Ctrl键，来点击实现多选。当然，如果选项比较多，全部展示出来不太好，我们也可以限制多选模式下展示的数量，使用`size`即可：\n\n```html\n\u003Cform>\n  \u003Cselect size=\"3\" multiple>\n    \u003Coption>Java入门到入土\u003C\u002Foption>\n    \u003Coption>C++就业到裁员\u003C\u002Foption>\n    \u003Coption>C#的虚空岗位\u003C\u002Foption>\n    \u003Coption>Web前端被AI取代\u003C\u002Foption>\n  \u003C\u002Fselect>\n\u003C\u002Fform>\n```\n\n> 比较有意思的是，`size`属性如果被设置，即使没有启用multiple也会展示为滚动框形式，只是无法进行多选。\n\n和前面的多选框一样，我们必须要为每一个选择设置其`value`属性来作为表单提交的值：\n\n```html\n\u003Cselect size=\"3\">\n  \u003Coption value=\"a\">Java入门到入土\u003C\u002Foption>\n  \u003Coption value=\"b\">C++就业到裁员\u003C\u002Foption>\n  \u003Coption value=\"c\">C#的虚空岗位\u003C\u002Foption>\n  \u003Coption value=\"d\">Web前端被AI取代\u003C\u002Foption>\n\u003C\u002Fselect>\n```\n\n当我们想要默认选中某个值时，可以使用`selected`属性，将其直接写到需要作为默认值的`option`标签上即可：\n\n```html\n\u003Cform>\n  \u003Cselect size=\"3\">\n    \u003Coption value=\"a\">Java入门到入土\u003C\u002Foption>\n    \u003Coption value=\"b\">C++就业到裁员\u003C\u002Foption>\n    \u003Coption value=\"c\" selected>C#的虚空岗位\u003C\u002Foption>\n    \u003Coption value=\"d\">Web前端被AI取代\u003C\u002Foption>\n  \u003C\u002Fselect>\n\u003C\u002Fform>\n```\n\n有关下拉列表相关内容就介绍到这里。\n\n### 文本域\n\n单行文本框只能输入一行内容，这在很多时候都显得有点不太好使，比如我们想要编写一段200字的个人简介或者是一篇文章，此时使用普通输入框就感觉有点局限了。\n\n`textarea`用于表示一个文本域，它可以实现多行文本的输入，它是一个双标签，也是一个行内块元素：\n\n```html\n\u003Cform>\n  \u003Ctextarea>\u003C\u002Ftextarea>\n\u003C\u002Fform>\n```\n\n![image-20241126000509244](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F26\u002FhUIEHGDzebxsKL1.png)\n\n我们可以使用`rows`属性来控制文本域的默认行数，用`col`控制文本域默认的列数：\n\n```html\n\u003Ctextarea rows=\"5\" cols=\"10\">\u003C\u002Ftextarea>\n```\n\n这样当文件域创建时会自动以5行10列的形式展示。\n\n我们之前用在普通输入框`input`上的所有属性，在文本域中也可以使用，比如限制最大输入长度：\n\n```html\n\u003Cform>\n  \u003Ctextarea maxlength=\"20\">\u003C\u002Ftextarea>\n\u003C\u002Fform>\n```\n\n包括我们之前设置的提示词`placeholder`属性：\n\n```html\n\u003Cform>\n  \u003Ctextarea placeholder=\"请输入您的个人简介...\">\u003C\u002Ftextarea>\n\u003C\u002Fform>\n```\n\n包括`disabled`和`readonly`属性，也是可以使用的：\n\n```html\n\u003Cform>\n  \u003Ctextarea placeholder=\"请输入您的个人简介...\" disabled>\u003C\u002Ftextarea>\n\u003C\u002Fform>\n```\n\n不过需要注意的是，如果我们需要填写`textarea`的默认值，需要直接填写到标签内部：\n\n```html\n\u003Cform>\n  \u003Ctextarea placeholder=\"请输入您的个人简介...\">我是默认值\u003C\u002Ftextarea>\n\u003C\u002Fform>\n```\n\n![image-20241126003405678](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F26\u002FsOtyhUv1SXncZeu.png)\n\n至此，有关表单相关的标签至此就全部介绍完毕，其中`file`类型的`input`输入框，我们会在JavaScript阶段在进行介绍，它可以选择我们本地的一个文件，一般用于文件上传。\n\n## HTML矢量图\n\n**注意：** 从这部分开始全部作为选学内容，如果时间不是很充裕可以直接跳过。\n\n我们接着来看HTML中有关图相关的扩展内容，学习这些知识有助于各位小伙伴对于一些不常用功能的见解。\n\n### svg标签\n\nSVG（Scalable Vector Graphics）是一种用于描述二维图形的XML（可扩展标记语言）格式。前面我们介绍了位图（像素图）格式，它是按照像素点的形式进行存储的，但是存在一个很大的问题就是放大就会失真。而矢量图就很好的解决了这个问题，它针对的是图片的形状进行存储，浏览器在展示矢量图的时候，就可以根据形状特征进行绘制，这样无论如何也不会出现失真问题。\n\n我们可以使用XML语法（与HTML类似）来编写一个SVG矢量图，首先需要编写一个`svg`标签：\n\n```xml\n\u003Csvg>\n\n\u003C\u002Fsvg>\n```\n\n接着，我们就可以在`svg`中定义我们需要绘制的图形了，我们先来看最简单的矩形绘制，使用`rect`标签即可：\n\n```xml\n\u003Csvg>\n  \u003Crect\u002F>\n\u003C\u002Fsvg>\n```\n\n不过需要注意的是，在XML语法中单标签需要在最后添加一个`\u002F`来完成自闭合。\n\n此时我们发现页面上好像并没有出现什么内容，这是因为我们还需要为这个矩形设置一些属性，首先是矩形的宽高，使用`width`和`height`属性来设置：\n\n```xml\n\u003Csvg>\n  \u003Crect width=\"30\" height=\"30\"\u002F>\n\u003C\u002Fsvg>\n```\n\n此时页面上就会出现一个长宽都为30的正方形：\n\n![image-20241127172754470](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F27\u002F8AVP2JmdOthjcYo.png)\n\n整个`svg`元素会在页面中占据一个300x150的区域作为整块画布大小，我们可以在这个画布内自由发挥，注意svg也是一个行内块元素：\n\n![image-20241127180437268](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F27\u002FlGYtyLCXeSx1HAi.png)\n\n通过对`svg`设置`width`和`height`属性，可以对画布大小进行修改：\n\n```xml\n\u003Csvg width=\"100\" height=\"100\">\n  \u003Crect width=\"30\" height=\"30\" \u002F>\n\u003C\u002Fsvg>\n```\n\n我们还可以使用`fill`属性来修改正方形的填充颜色：\n\n```xml\n\u003Csvg>\n  \u003Crect width=\"30\" height=\"30\" fill=\"orange\"\u002F>\n\u003C\u002Fsvg>\n```\n\n这里的颜色支持一些比较常见色彩的英文单词，比如`blue`、`red`、`yellow`等，或是使用`transparent`来代表透明色，如果需要更加自定义化的颜色类型，可以使用16进制颜色代码来表示，我们会在后续的CSS阶段进行介绍。\n\n除了绘制基本形状外，我们也可以使用`stroke-width`来设置边框绘制宽度，并使用`stroke`来设置边框颜色：\n\n```xml\n\u003Csvg>\n  \u003Crect width=\"30\" height=\"30\" fill=\"orange\" stroke=\"red\" stroke-width=\"3\"\u002F>\n\u003C\u002Fsvg>\n```\n\n![image-20241127181032126](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F27\u002F6MFgzEDRL2O5Zdu.png)\n\n不过我们发现，这个图形的左上角好像被遮住了一部分，这是因为我们添加了边框之后，导致一部分内容超出了画布，我们可以使用`x`和`y`来设置图形左上角在画布上的坐标：\n\n```xml\n\u003Csvg>\n  \u003Crect y=\"10\" x=\"10\" width=\"30\" height=\"30\" fill=\"orange\" stroke=\"red\" stroke-width=\"3\"\u002F>\n\u003C\u002Fsvg>\n```\n\n注意这里的坐标与我们数学里学习的平面直角坐标系的坐标不太一样，这里的X轴是从左往右，而Y轴是从上往下。\n\n我们还可以调整矩形的圆角，使用`rx`和`ry`属性进行控制：\n\n```xml\n\u003Csvg>\n  \u003Crect y=\"10\" x=\"10\" width=\"30\" height=\"30\" rx=\"5\" ry=\"5\"\n        fill=\"orange\" stroke=\"red\" stroke-width=\"3\"\u002F>\n\u003C\u002Fsvg>\n```\n\n![image-20241127182010830](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F27\u002F5s2oRLfAQFknEBP.png)\n\n看完了矩形，我们接着来看圆形如何绘制，方式也很简单，使用`circle`标签即可，其中`r`属性表示圆的半径：\n\n```xml\n\u003Csvg>\n  \u003Ccircle r=\"20\"\u002F>\n\u003C\u002Fsvg>\n```\n\n![image-20241127182957168](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F27\u002FLWUh9oavQNim1HP.png)\n\n不过这个图形绘制出来，可以看到只显示出了四分之一的大小，这是因为默认情况下圆形是以中心为原点，且默认为0，所以就跑到左上角去了。我们可以使用`cx`和`cy`来调整圆心坐标：\n\n```xml\n\u003Csvg>\n  \u003Ccircle cx=\"20\" cy=\"20\" r=\"20\"\u002F>\n\u003C\u002Fsvg>\n```\n\n当然我们在圆形中也可以使用之前介绍的`fill`和`stroke`来设置，这里就不多说了。除了圆形之外，椭圆形也可以绘制的，我们可以使用`ellipse`来表示一个椭圆形：\n\n```xml\n\u003Csvg>\n  \u003Cellipse cx=\"20\" cy=\"20\" rx=\"20\" ry=\"12\"\u002F>\n\u003C\u002Fsvg>\n```\n\n除了简单绘制一个图形外，我们还可以将不同图形给组合起来：\n\n```xml\n\u003Csvg>\n  \u003Cellipse cx=\"20\" cy=\"20\" rx=\"20\" ry=\"12\" fill=\"red\"\u002F>\n  \u003Ccircle r=\"10\" cx=\"40\" cy=\"15\" fill=\"orange\"\u002F>\n  \u003Cellipse cx=\"30\" cy=\"30\" rx=\"20\" ry=\"12\" fill=\"green\"\u002F>\n\u003C\u002Fsvg>\n```\n\n![image-20241127184700454](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F27\u002F7ST4kpm3gejb9X6.png)\n\n如果多个图形叠放，想要提现出更强烈的层级效果，我们还可以为其设置`opacity`属性表示透明度：\n\n```xml\n\u003Csvg>\n  \u003Cellipse cx=\"20\" cy=\"20\" rx=\"20\" ry=\"12\" fill=\"red\"\u002F>\n  \u003Ccircle r=\"10\" cx=\"40\" cy=\"15\" fill=\"orange\" opacity=\"0.5\"\u002F>\n  \u003Cellipse cx=\"30\" cy=\"30\" rx=\"20\" ry=\"12\" fill=\"green\" opacity=\"0.5\"\u002F>\n\u003C\u002Fsvg>\n```\n\n![image-20241127184739689](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F27\u002FuIs2jHfGN78E3nC.png)\n\n除了上述介绍的规则图形外，还有一些不规则图形也可以很轻松地定义和绘制。\n\n绘制一段直线可以使用`line`标签，我们需要指定直线的起始点和结束点：\n\n```xml\n\u003Csvg>\n  \u003Cline x1=\"0\" y1=\"0\" x2=\"20\" y2=\"20\" stroke=\"blue\" stroke-width=\"2\"\u002F>\n\u003C\u002Fsvg>\n```\n\n![image-20241127185246606](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F27\u002FHLay32e96tOqjrU.png)\n\n其中`x1`和`y1`表示起点，`x2`和`y2`表示终点，因此这里会绘制一个斜线。\n\n我们还可以使用`polyline`来绘制一个多段线条，它用起来稍微有些麻烦：\n\n```html\n\u003Csvg>\n  \u003Cpolyline points=\"0,0 20,20 60,20\" stroke=\"yellow\"\u002F>\n\u003C\u002Fsvg>\n```\n\n这里我们需要使用`points`属性来指定多段线条的各个点，接着浏览器会自动连接这些点形成一个多段直线：\n\n![image-20241127185921258](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F27\u002F6C7j9wWfYplR4T2.png)\n\n但是我们发现这里内容被填充了，我们可以使用`transparent`或是`none`取消掉它的默认填充色：\n\n```xml\n\u003Csvg>\n  \u003Cpolyline points=\"0,0 20,20 60,20\" fill=\"none\" stroke-width=\"2\" stroke=\"yellow\"\u002F>\n\u003C\u002Fsvg>\n```\n\n![image-20241127190043617](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F27\u002FLXGg4b7QRUKVACJ.png)\n\n同理，我们也可以使用`polygon`来绘制一个多边形：\n\n```xml\n\u003Csvg>\n  \u003Cpolygon points=\"0,0 20,50 200,10 150,0\" stroke=\"blue\" stroke-width=\"3\" \u002F>\n\u003C\u002Fsvg>\n```\n\n![image-20241127190209608](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F27\u002Ft7ZkIHMB2PmO5v8.png)\n\n有关svg的更多用法和绘制图形，请参考：https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FSVG\n\n### map标签\n\n前面基础部分中我们为大家介绍了`img`标签，其中有一个`usemap`属性，可以设置“图像映射”，图像映射允许你将一个图片分成多个区域，每个区域可以链接到不同的页面或位置。\n\n我们先来创建一个简单的图片：\n\n```html\n\u003Cimg src=\"assets\u002Ftest.png\" width=\"218\" height=\"218\" alt=\"测试图片\">\n```\n\n接着我们可以为其编写一个`map`标签，来表示图像映射配置：\n\n```html\n\u003Cimg src=\"assets\u002Ftest.png\" width=\"218\" height=\"218\" usemap=\"#test\" alt=\"测试图片\">\n\u003Cmap name=\"test\">\n  \n\u003C\u002Fmap>\n```\n\n我们需要使用`name`属性为`map`标签命名，接着在`img`标签中使用`usemap`来指定一个图像映射。接着就可以在`map`标签中使用`area`来设置图片的每个独立区域，比如现在我们想要把这个图片的三个圆形区域单独作为一个可点击交互的区域：\n\n![image-20241127192747223](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F27\u002F8q3SKkEXDdetR6m.png)\n\n我们可以在`map`中指定三个圆形区域，`area`标签具有多种形状可供选择，圆形我们可以使用`circle`：\n\n```html\n\u003Cimg src=\"assets\u002Ftest.png\" width=\"218\" height=\"218\" usemap=\"#test\" alt=\"测试图片\">\n\u003Cmap name=\"test\">\n  \u003Carea shape=\"circle\" coords=\"33,33,25\" href=\"https:\u002F\u002Fwww.baidu.com\" title=\"左上角区域\">\n\u003C\u002Fmap>\n```\n\n这里`coords`是用于指定区域图形的相关属性，具体格式依赖于 `shape` 属性的值：\n\n- 对于 `rect`，格式为 `x1,y1,x2,y2`（左上角和右下角的坐标）\n- 对于 `circle`，格式为 `x,y,r`（圆心坐标和半径）\n- 对于 `poly`，格式为 `x1,y1,x2,y2,...`（一系列点的坐标）\n\n而`herf`则是点击之后跳转的链接，它与`a`标签一样，可以自由设置连接，以及对应的`target`属性。\n\n使用 `\u003Cmap>` 和 `\u003Carea>` 标签可以为图像添加交互性，使得用户可以通过点击不同区域访问不同的内容。这在创建图形导航、图形链接等场景中非常有用。\n\n## HTML无障碍\n\nHTML无障碍（Accessibility）是指网站和应用程序设计的方式，使其能够被所有人使用，包括那些有视觉、听觉、运动或认知障碍的用户。无障碍设计不仅符合道德标准，也是法律要求的一部分，尤其在某些国家和地区。\n\n简单来说，我们学习无障碍，就是为了让一些残疾人也可以轻松使用网站，让他们也可以体验到互联网带来的便利。\n\n![image-20241127194158493](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F27\u002FIdYCFGTaqr3BoJm.png)\n\n在很多大型公司的网站上，都有明确标注支持残疾人使用，这不仅是大厂的一种能力的体现，也是一种社会责任和担当。\n\n### 无障碍简单体验\n\n这里我们开启系统中的一些残障人士辅助工具来简单体验一下无障碍功能。\n\n在Windows系统下，我们可以开启系统的讲述人功能：\n\n![image-20241128000350322](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F28\u002FO4Qwjosl9MXuUIq.png)\n\nMac系统下可以在设置中打开“旁白”：\n\n![image-20241128001029273](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F28\u002FaLwrYOX6CKegVhx.png)\n\n打开系统的辅助功能后，恭喜你们成功解锁了盲人模式，现在你只要聚焦在系统的任意一个区域，都会有实时的朗读声音，以及介绍。\n\n比如这里我们打开百度，无需使用鼠标，只需使用键盘上的方向键和Tab键即可控制：\n\n![image-20241128001300117](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F28\u002F3evW6CAJg7TUHY1.png)\n\n讲述人会在旁边实时对内容进行讲解，这样盲人也可以知道现在聚焦的是什么元素，这对于一些残疾人来说提供了非常大的帮助，让更多的人也可以体验网上冲浪的感觉。\n\n### WAI-AIRA相关属性\n\n前面我们简单体验了一下无障碍功能，系统辅助工具之所以能够非常精准地识别页面上的元素，很大程度上都是因为我们使用了语义化标签导致的：\n\n![image-20241128002228004](https:\u002F\u002Fs2.loli.net\u002F2024\u002F11\u002F28\u002FujfmeNZIyRlTE1X.png)\n\n当讲述人在遇到`a`标签时，会自动将其朗读为链接、遇到`img`标签时，会自动将其朗读为图片。所以，从HTML整套课程的开头我们就一直在说到语义化的重要性，它在很多地方都起着非常重要的作用。\n\n我们也可以在自己编写的页面中体验一下使用语义化标签和不使用语义化标签对于辅助工具的重要性：\n\n```html\n\u003Cdiv>1. 我是第一项\u003C\u002Fdiv>\n\u003Cdiv>2. 我是第二项\u003C\u002Fdiv>\n\u003Col type=\"a\">\n    \u003Cli>我是第一项\u003C\u002Fli>\n    \u003Cli>我是第二项\u003C\u002Fli>\n\u003C\u002Fol>\n```\n\n当我们使用讲述人阅读上面不使用语义化标签实现的列表时，只会简单朗读其内容，而并未告诉我们这是一个列表。当我们阅读到下面的列表时，讲述人会明确告知我们，这里是有序列表的第一项。\n\n不仅仅是标签，实际上一些属性也可以为辅助工具提供额外的信息，比如图片：\n\n```html\n\u003Cimg src=\"assets\u002Ftest.png\">\n\u003Cimg src=\"assets\u002Ftest.png\" alt=\"我是自定义的描述文本，哈哈\">\n```\n\n在朗读添加了`alt`属性和未添加的图片时，讲述人可以为我们更清楚地介绍我们为图片添加的自定义信息。\n\n当然，如果我们的页面上存在一些不具备语义化的内容但是我们又希望它语义更明确，这时该怎么办呢？我们可以使用WAI-ARIA，它专门用于对页面上的一些语义不明确的标签提供额外的语义化。\n\n>  [WAI-ARIA](https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.1\u002F) 是 W3C 编写的规范，定义了一组可用于其他元素的 HTML 特性，用于提供额外的语义化以及改善缺乏的无障碍。以下是规范中三个主要的特性：\n\n这对于一些第三方使用JavaScript实现的组件库来说，非常重要，因为这些组件库往往都不会使用HTML提供的原生标签去实现某些功能，比如悬浮按钮或是其他的组件，此时使用WAI-ARIA就可以弥补因为使用非语义化标签导致的语义不明确问题。\n\n这里我们还是以列表为例：\n\n```html\n\u003Cdiv>1. 我是第一项\u003C\u002Fdiv>\n\u003Cdiv>2. 我是第二项\u003C\u002Fdiv>\n```\n\n我们可以使用`role`属性来为其明确指定一个HTML标签所代表的角色，比如列表就是`list`，列表中的每一项就是`listitem`，WebStorm会自动给我们提示：\n\n```html\n\u003Cdiv role=\"list\">\n    \u003Cdiv role=\"listitem\">1. 我是第一项\u003C\u002Fdiv>\n    \u003Cdiv role=\"listitem\">2. 我是第二项\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n通过我们为其自行赋予角色，讲述人就可以明确知道这里使用的是列表。\n\n除了使用`role`来指定标签的角色外，我们还可以使用`aira-*`来指定此标签所具有的某个属性，比如我们之前在使用输入框时可以使用`readonly`来表示输入框只读。而我们也可以通过对应的`aira-readonly`属性为一个不支持此属性的标签添加只读的语义：\n\n```html\n\u003Cinput value=\"我是只读内容\" readonly>\n\u003Cdiv role=\"textbox\" aria-readonly=\"true\">我是只读内容\u003C\u002Fdiv>\n```\n\n这两个标签虽然写法不同，但是在讲述人看来就是同样的一个只读属性的输入框。\n\n有关更多`aria-*`的属性，可以参考：https:\u002F\u002Fwww.w3.org\u002FTR\u002Fwai-aria-1.1\u002F#state_prop_def","这一部分我们接着来讲解HTML5的高级内容，包括表单、矢量图和无障碍。","2025-07-04 23:45:45",{"data":468,"status":460,"success":461},[469,474],{"id":8,"image":470,"link":471,"name":472,"type":473},"\u002Fimage\u002Fadv\u002Frainyun-2025-06.webp","https:\u002F\u002Fwww.rainyun.com\u002Fitbaima_","雨云优惠购","cloud",{"id":66,"image":475,"link":476,"name":477,"type":478},"\u002Fimage\u002Fadv\u002Fsimcard-2025-11.webp","https:\u002F\u002Fmall.itbaima.cn","号卡优惠","simcard"]