1. 为什么HTML值得你花一个下午认真过一遍很多人第一次接触网页开发脑子里冒出来的第一个念头是“我要学一门编程语言”然后一头扎进Python或者JavaScript的教程里。结果折腾了两周连一个像样的页面都摆不出来。问题出在哪儿出在跳过了HTML这个地基。HTML不是编程语言它是标记语言。这个区别很关键。编程语言处理的是逻辑、计算、判断而HTML处理的是结构和语义。你可以把它理解成盖房子时的钢筋骨架——它不负责装修好不好看也不负责水电怎么走但没有它后面所有东西都挂不上去。CSS是装修JavaScript是水电和智能家居HTML就是那个决定“哪里是墙、哪里是门、哪里是窗”的骨架系统。我见过太多人学HTML的方式是打开一个教程从头到尾把标签列表抄一遍然后关掉教程发现自己还是不知道怎么写一个完整的页面。这种学法的问题在于标签是散的没有场景。你知道table是表格但不知道什么时候该用表格、什么时候该用列表你知道div是容器但不知道它和section、article到底有什么区别。这篇内容要解决的就是这个问题。我会把HTML的核心结构、常用标签、语义化实践、表单处理、以及实际开发中最容易踩的坑用一条完整的线索串起来。不管你是完全零基础还是写过一些页面但总觉得结构乱糟糟都能从中找到可以直接用的东西。读完你至少能做到独立写出结构清晰、语义正确、可维护的HTML页面并且知道为什么这样写。2. 从一个空白文件到完整页面HTML文档的骨架拆解2.1 文档声明和根元素那些你每次都复制但没搞懂的东西打开任何一个网页右键查看源代码第一行大概率是!DOCTYPE html。很多人写HTML时习惯性复制这一行但从没想过它是干什么的。这行代码叫文档类型声明它的作用是告诉浏览器“这个页面用HTML5标准来解析”。在HTML4时代这行声明长得像天书一样因为要引用一个DTD文件。HTML5把它简化成了现在这个样子浏览器看到它就会用标准模式渲染页面而不是用兼容旧页面的怪异模式。紧接着是html标签它是整个文档的根元素。所有其他元素都必须是它的后代。html标签上通常会带一个lang属性比如langzh-CN。这个属性对搜索引擎和屏幕阅读器都很重要——它告诉它们这个页面的主要语言是什么。如果你做的是多语言站点这个属性还会影响浏览器选择哪种语言的字体来渲染。html里面只有两个直接子元素head和body。这个结构不能乱。head放的是页面的元信息body放的是用户能看到的内容。我见过有人在head里写div浏览器虽然不会报错但这是明显的结构错误会导致一些意料之外的渲染问题。2.2 head里的关键配置不只是title和metahead里面最核心的几个元素是title、meta、link和script。title定义的是浏览器标签页上显示的文字也是搜索引擎结果里那个可点击的蓝色标题。写title有个经验法则把最重要的关键词放在前面整体控制在60个字符以内因为搜索引擎结果页大概只能显示这么多。meta charsetUTF-8这行必须写在head的最前面。为什么因为浏览器需要先知道用什么字符集来解析后面的内容。如果这行写在title后面而title里恰好有中文浏览器可能会先用默认字符集解析一遍发现乱码后再回头用UTF-8重新解析这个过程会造成页面闪烁。虽然现代浏览器已经优化了很多但养成这个习惯没坏处。meta nameviewport contentwidthdevice-width, initial-scale1.0这行是做移动端适配的标配。没有它手机浏览器会默认按照桌面宽度通常是980px来渲染页面然后缩小显示结果就是字小得看不清。加上这行之后页面的宽度会等于设备的逻辑宽度配合CSS的响应式写法才能做出真正适配手机的页面。meta namedescription content...虽然对排名的影响越来越小但它仍然是搜索结果里那段描述文字的来源。写得好能提高点击率写得不好搜索引擎就自己从页面里抓一段抓出来的内容可能完全不是你想要的。2.3 body里的内容组织从语义出发而不是从样式出发body里面才是真正的内容。新手最容易犯的错误是拿到一个设计稿看到哪里是一个块就写一个div然后给div加类名来控制样式。这样做出来的页面结构上是一堆没有意义的div嵌套搜索引擎看不懂屏幕阅读器也读不出来。正确的做法是先想清楚这块内容在语义上是什么。是页头用header。是导航用nav。是独立的一篇文章用article。是侧边栏用aside。是页脚用footer。这些语义化标签在浏览器里的默认表现和div几乎一样但它们的价值在于给内容赋予了含义。举个例子一个典型的博客页面结构大概是这样body header h1站点名称/h1 nav ul lia href/首页/a/li lia href/archive归档/a/li /ul /nav /header main article h2文章标题/h2 p文章正文.../p /article aside h3相关推荐/h3 ul.../ul /aside /main footer p版权信息/p /footer /body这个结构里每个标签都在表达“我是什么”。搜索引擎爬虫读到article就知道这是一篇独立的内容读到nav就知道这是导航链接。屏幕阅读器用户可以用快捷键在各个article之间跳转体验比一堆div好得多。3. 文本、链接、图片日常开发中最高频的三种内容3.1 标题和段落的层级逻辑h1到h6这六个标题标签代表的是内容的层级关系不是字体大小。很多人因为h3默认字体大小刚好符合设计稿就把本该用h2的地方写成h3这是典型的“用样式思维代替结构思维”。正确的做法是先按内容逻辑确定层级再用CSS去调整视觉大小。一个页面通常只有一个h1它代表这个页面的主题。h2是主要章节h3是章节下的小节以此类推。不要跳级使用比如从h1直接跳到h3这会让依赖标题层级来理解页面结构的工具感到困惑。p标签用来包裹段落。浏览器会在p前后自动加间距这个间距可以用CSS的margin来调整。注意p里面不能嵌套块级元素比如你不能在p里面放div。浏览器虽然会容错处理但解析出来的DOM结构可能和你写的不一样。3.2 链接的四种典型用法和两个容易忽略的属性a标签是HTML里最重要的交互元素之一。最基本的用法是a hrefhttps://example.com链接文字/a。但链接不只是跳转到外部页面还有几种常见场景第一种是锚点链接用来跳转到页面内的某个位置。比如a href#section-2跳到第二节/a然后在目标位置写h2 idsection-2第二节/h2。这个在长文档里做目录导航非常实用。第二种是邮件链接a hrefmailto:someoneexample.com发邮件/a。点击后会打开默认的邮件客户端。还可以加subject参数预设主题mailto:someoneexample.com?subject咨询。第三种是电话链接a hreftel:8613800138000拨打电话/a。在手机上点击会直接调起拨号界面这个在移动端落地页里很常用。第四种是下载链接a href/files/report.pdf download下载报告/a。加上download属性后浏览器会尝试下载而不是直接打开。有两个属性经常被忽略但很有用。一个是target_blank在新标签页打开链接。但要注意使用target_blank时最好同时加上relnoopener noreferrer否则新页面可以通过window.opener访问到原页面的对象存在安全隐患。另一个是title属性鼠标悬停时显示提示文字对可访问性有一定帮助但不能替代链接文字本身的清晰表达。3.3 图片的alt属性不是可选项img标签的核心属性是src和alt。src指向图片文件alt是图片的替代文字。很多人写alt或者干脆不写这是不对的。alt文字在图片加载失败时会显示出来屏幕阅读器会朗读它搜索引擎也用它来理解图片内容。什么时候可以用alt只有当图片纯粹是装饰性的不承载任何信息时。比如一个纯背景纹理图读出来反而干扰用户理解内容这时候alt是合理的。但只要图片传达了信息比如一张产品图、一个图标按钮、一张图表就必须写有意义的alt文字。写alt的原则是假设你看不到这张图你希望别人怎么描述给你听。不要写“图片”“照片”这种废话直接描述内容。比如alt红色连衣裙正面展示图就比alt产品图片好得多。另外img的width和height属性最好都写上。这不是为了控制显示大小那是CSS的事而是为了让浏览器在图片加载之前就预留出正确的空间避免页面布局在图片加载时发生跳动。这个体验细节在移动端尤其重要。4. 列表、表格、表单结构化数据的三种呈现方式4.1 无序列表和有序列表的选择逻辑ul和ol的区别不是“有没有圆点”而是“顺序是否重要”。导航菜单用ul因为菜单项之间没有先后顺序。操作步骤用ol因为第一步、第二步、第三步的顺序不能乱。这个语义区别对屏幕阅读器用户很重要——读ol时屏幕阅读器会播报“第1项共5项”帮助用户理解进度。列表可以嵌套。比如一个多级导航菜单外层是ul每个li里面再放一个ul。嵌套时要注意子列表必须放在li里面不能直接放在ul下面。这是HTML规范的要求虽然浏览器会容错但结构上是不正确的。dl是定义列表用来展示“术语-解释”这种键值对结构。比如词汇表、FAQ、元数据展示。dt是术语dd是解释。一个dt可以对应多个dd这在展示一个词条的多个义项时很有用。4.2 表格的正确打开方式表格在早期网页设计中被滥用用来做页面布局。现在这种做法已经被彻底淘汰了表格只应该用来展示真正的表格数据。什么叫真正的表格数据就是那些行和列都有明确含义的数据比如成绩单、价格对比、日程安排。一个完整的表格结构包括table、thead、tbody、tfoot、tr、th、td。thead放表头行tbody放数据行tfoot放汇总行。th是表头单元格默认加粗居中td是数据单元格默认左对齐。th上可以加scope属性告诉屏幕阅读器这个表头是管一列的scopecol还是管一行的scoperow。对于复杂的表格还可以用id和headers属性来建立表头和数据单元格之间的关联。这些属性在视觉上没有任何效果但对可访问性至关重要。还有一个经常被忽略的caption标签用来给表格加标题。它必须紧跟在table开始标签之后。加上caption之后屏幕阅读器用户能先听到表格的标题再听具体数据理解起来容易得多。4.3 表单从用户那里拿数据的标准姿势表单是HTML里交互性最强的部分。一个完整的表单包括form容器、各种输入控件、标签、以及提交按钮。form的两个核心属性是action和method。action指定数据提交到哪个地址method指定用GET还是POST。GET会把数据拼在URL后面适合搜索这类不敏感、可分享的操作。POST把数据放在请求体里适合登录、注册、支付这类涉及隐私的操作。每个输入控件都应该有对应的label。label的for属性要等于输入控件的id。这样点击标签文字时焦点会自动跳到对应的输入框用户体验更好屏幕阅读器也能正确关联标签和控件。不要用placeholder代替label因为placeholder在输入内容后就消失了用户回头检查时不知道这个框是填什么的。input的type属性决定了输入框的行为和键盘类型。typeemail在手机上会弹出带符号的键盘typetel弹出数字键盘typenumber弹出数字键盘并限制只能输入数字。typedate会调出日期选择器。用对type能大幅提升移动端的填写体验。required属性让字段变成必填pattern属性可以用正则表达式限制输入格式minlength和maxlength控制输入长度。这些原生验证虽然不能替代服务端验证但能在用户提交之前就给出反馈减少无效请求。5. 语义化标签和可访问性让页面对所有人可用5.1 为什么div不是万能的div和span是HTML里的“万能容器”它们没有任何语义。div是块级元素span是行内元素。在找不到更合适的语义标签时用它们是合理的。但如果有更具体的标签能用就应该优先用更具体的。比如一个按钮用div classbtn点击/div也能做出视觉效果但用button点击/button更好。为什么因为button天生支持键盘操作Tab聚焦、Enter/Space触发屏幕阅读器会把它识别为按钮并播报“按钮”而div需要手动加tabindex、role、键盘事件监听才能达到同样的效果。用原生标签这些能力都是免费的。再比如一个折叠面板用details和summary就能实现不需要写一行JavaScript。details是容器summary是始终可见的标题点击summary会展开或收起details里的内容。浏览器原生支持键盘可操作屏幕阅读器能正确识别。5.2 ARIA属性的使用边界ARIA是一套用来增强可访问性的属性比如role、aria-label、aria-hidden、aria-expanded等。但ARIA有个著名的原则“不要用ARIA除非你非用不可”。因为原生HTML标签已经内置了正确的语义和交互行为而手动加ARIA属性很容易出错。举个例子div rolebutton虽然告诉屏幕阅读器这是一个按钮但它不会自动获得键盘焦点也不会响应Enter和Space键。你还需要加tabindex0和键盘事件处理。而直接用button这些全都有了。ARIA真正有用的场景是当你不得不用div或span来实现某个复杂组件而HTML没有对应的原生标签时。比如一个自定义的下拉选择框、一个标签页组件、一个模态对话框。这时候用ARIA来补充语义信息是合理的。aria-label用来给元素提供一个屏幕阅读器可读的名称当元素本身没有可见文字时特别有用。比如一个只有图标的关闭按钮可以写button aria-label关闭×/button。aria-hiddentrue用来把纯装饰性的元素从可访问性树里隐藏掉比如图标字体里的装饰性符号。5.3 键盘导航和焦点管理可访问性不只是给屏幕阅读器用的也包括键盘用户。有些用户因为身体原因无法使用鼠标完全靠键盘操作。你的页面能不能只用Tab、ShiftTab、Enter、Space、方向键来完整操作检查方法很简单打开你的页面把鼠标拔掉只用键盘走一遍所有交互流程。能不能打开菜单能不能填写表单能不能提交能不能关闭弹窗如果任何一个环节卡住了就说明键盘可访问性有问题。焦点管理是另一个容易被忽略的点。当用户点击一个按钮打开模态框时焦点应该自动移到模态框里。当模态框关闭时焦点应该回到打开它的那个按钮上。如果不做这个处理键盘用户关闭模态框后会迷失焦点不知道当前在页面的哪个位置。6. 从写出来到写得好HTML编码的实战经验6.1 代码格式化与可读性HTML代码的可读性直接影响后期维护成本。我见过一个页面所有标签挤在一行嵌套层级全靠数空格来分辨改一个地方要花十分钟找对应的闭合标签。这种代码写的时候省了几秒钟维护的时候要还回去几个小时。格式化HTML有几个基本原则。第一嵌套层级用两个空格缩进不要用Tab不同编辑器Tab宽度不一样换编辑器就乱了。第二块级元素每个占一行行内元素可以放在同一行。第三属性值用双引号包裹虽然单引号也合法但统一用双引号能避免和JavaScript字符串混淆。属性顺序也有讲究。我习惯按重要性排class放最前面因为最常用来做样式钩子然后是id然后是src、href、type这类功能属性最后是title、>!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content一篇关于HTML快速入门的实战教程涵盖文档结构、常用标签、语义化和可访问性实践。 titleHTML快速教程及使用范例 - 实战指南/title /head body header h1前端学习笔记/h1 nav aria-label主导航 ul lia href/首页/a/li lia href/html aria-currentpageHTML/a/li lia href/cssCSS/a/li lia href/jsJavaScript/a/li /ul /nav /header main article header h2HTML快速教程及使用范例/h2 p time datetime2025-01-152025年1月15日/time 作者某开发者 /p /header section h3为什么从HTML开始/h3 pHTML是网页的骨架学习曲线平缓但上限很高.../p /section section h3文档结构拆解/h3 p一个标准的HTML文档包含文档声明、根元素、头部和主体.../p /section /article aside section h3关于作者/h3 p某开发者多年一线开发经验专注前端工程化.../p /section section h3相关文章/h3 ul lia href/css-basicsCSS布局入门/a/li lia href/js-domJavaScript操作DOM/a/li /ul /section /aside /main footer pcopy; 2025 前端学习笔记. 保留所有权利./p /footer /body /html逐段说明几个关键点。nav上的aria-label主导航是为了区分页面里可能存在的其他导航区域比如页脚导航屏幕阅读器会播报“主导航”来帮助用户定位。当前页面的链接加了aria-currentpage屏幕阅读器会播报“当前页面”视觉上也可以用CSS的[aria-currentpage]选择器来加高亮样式。time标签的datetime属性用YYYY-MM-DD格式这是机器可读的标准格式。页面上显示的是“2025年1月15日”但搜索引擎和辅助工具读到的是标准格式两边都照顾到了。article里面又套了一个header这是合法的。header不只能用在页面顶部也可以用在article或section里面表示这个区块的头部信息。同理footer也可以用在article里面表示文章末尾的标签、版权等信息。7.3 这个范例里藏着的几个细节第一个细节是main的使用。main代表页面的主要内容区域一个页面只应该有一个main而且它不应该被包含在header、nav、footer、aside里面。它的作用是让屏幕阅读器用户可以快速跳到主要内容跳过导航和侧边栏。第二个细节是section和div的选择。section表示一个主题性的内容区块通常应该有一个标题h2到h6。如果一块内容没有标题或者纯粹是为了样式布局用div更合适。不要为了“看起来更语义化”而滥用section。第三个细节是copy;这个实体字符它渲染出来是版权符号©。类似的还有amp;、lt;、gt;、nbsp;不换行空格。nbsp;要慎用它会影响文本的正常换行只在确实需要保持两个词不分开时使用。第四个细节是aria-label在nav上的应用。如果页面上有多个nav元素每个都应该有不同的aria-label来区分。比如“主导航”“面包屑导航”“页脚导航”。这样屏幕阅读器用户才能知道当前在哪个导航区域。8. 写HTML这件事慢就是快我刚开始写HTML的时候总觉得这东西太简单了标签就那么几个半天就学完了。后来做项目多了才发现写出能跑的HTML很容易写出结构清晰、语义正确、可维护、可访问的HTML需要刻意练习。每次写HTML之前花两分钟想一下结构比写完再改要省时间。每次用div之前问一下自己“有没有更合适的标签”能避免大量无意义的嵌套。每次写完用验证工具跑一遍能提前发现很多低级错误。HTML的容错性很强写错了浏览器也能渲染出来。这既是好事也是坏事——好事是新手不会因为一个小错误就卡住坏事是错误被隐藏了积累多了就变成技术债。养成严谨的习惯从每一个标签的语义开始从每一个属性的正确使用开始。这些东西不会立刻让你的页面变好看但会让你的代码在三个月后自己回头看时还能看懂、还能改。
1. 为什么HTML值得你花一个下午认真过一遍很多人第一次接触网页开发脑子里冒出来的第一个念头是“我要学一门编程语言”然后一头扎进Python或者JavaScript的教程里。结果折腾了两周连一个像样的页面都摆不出来。问题出在哪儿出在跳过了HTML这个地基。HTML不是编程语言它是标记语言。这个区别很关键。编程语言处理的是逻辑、计算、判断而HTML处理的是结构和语义。你可以把它理解成盖房子时的钢筋骨架——它不负责装修好不好看也不负责水电怎么走但没有它后面所有东西都挂不上去。CSS是装修JavaScript是水电和智能家居HTML就是那个决定“哪里是墙、哪里是门、哪里是窗”的骨架系统。我见过太多人学HTML的方式是打开一个教程从头到尾把标签列表抄一遍然后关掉教程发现自己还是不知道怎么写一个完整的页面。这种学法的问题在于标签是散的没有场景。你知道table是表格但不知道什么时候该用表格、什么时候该用列表你知道div是容器但不知道它和section、article到底有什么区别。这篇内容要解决的就是这个问题。我会把HTML的核心结构、常用标签、语义化实践、表单处理、以及实际开发中最容易踩的坑用一条完整的线索串起来。不管你是完全零基础还是写过一些页面但总觉得结构乱糟糟都能从中找到可以直接用的东西。读完你至少能做到独立写出结构清晰、语义正确、可维护的HTML页面并且知道为什么这样写。2. 从一个空白文件到完整页面HTML文档的骨架拆解2.1 文档声明和根元素那些你每次都复制但没搞懂的东西打开任何一个网页右键查看源代码第一行大概率是!DOCTYPE html。很多人写HTML时习惯性复制这一行但从没想过它是干什么的。这行代码叫文档类型声明它的作用是告诉浏览器“这个页面用HTML5标准来解析”。在HTML4时代这行声明长得像天书一样因为要引用一个DTD文件。HTML5把它简化成了现在这个样子浏览器看到它就会用标准模式渲染页面而不是用兼容旧页面的怪异模式。紧接着是html标签它是整个文档的根元素。所有其他元素都必须是它的后代。html标签上通常会带一个lang属性比如langzh-CN。这个属性对搜索引擎和屏幕阅读器都很重要——它告诉它们这个页面的主要语言是什么。如果你做的是多语言站点这个属性还会影响浏览器选择哪种语言的字体来渲染。html里面只有两个直接子元素head和body。这个结构不能乱。head放的是页面的元信息body放的是用户能看到的内容。我见过有人在head里写div浏览器虽然不会报错但这是明显的结构错误会导致一些意料之外的渲染问题。2.2 head里的关键配置不只是title和metahead里面最核心的几个元素是title、meta、link和script。title定义的是浏览器标签页上显示的文字也是搜索引擎结果里那个可点击的蓝色标题。写title有个经验法则把最重要的关键词放在前面整体控制在60个字符以内因为搜索引擎结果页大概只能显示这么多。meta charsetUTF-8这行必须写在head的最前面。为什么因为浏览器需要先知道用什么字符集来解析后面的内容。如果这行写在title后面而title里恰好有中文浏览器可能会先用默认字符集解析一遍发现乱码后再回头用UTF-8重新解析这个过程会造成页面闪烁。虽然现代浏览器已经优化了很多但养成这个习惯没坏处。meta nameviewport contentwidthdevice-width, initial-scale1.0这行是做移动端适配的标配。没有它手机浏览器会默认按照桌面宽度通常是980px来渲染页面然后缩小显示结果就是字小得看不清。加上这行之后页面的宽度会等于设备的逻辑宽度配合CSS的响应式写法才能做出真正适配手机的页面。meta namedescription content...虽然对排名的影响越来越小但它仍然是搜索结果里那段描述文字的来源。写得好能提高点击率写得不好搜索引擎就自己从页面里抓一段抓出来的内容可能完全不是你想要的。2.3 body里的内容组织从语义出发而不是从样式出发body里面才是真正的内容。新手最容易犯的错误是拿到一个设计稿看到哪里是一个块就写一个div然后给div加类名来控制样式。这样做出来的页面结构上是一堆没有意义的div嵌套搜索引擎看不懂屏幕阅读器也读不出来。正确的做法是先想清楚这块内容在语义上是什么。是页头用header。是导航用nav。是独立的一篇文章用article。是侧边栏用aside。是页脚用footer。这些语义化标签在浏览器里的默认表现和div几乎一样但它们的价值在于给内容赋予了含义。举个例子一个典型的博客页面结构大概是这样body header h1站点名称/h1 nav ul lia href/首页/a/li lia href/archive归档/a/li /ul /nav /header main article h2文章标题/h2 p文章正文.../p /article aside h3相关推荐/h3 ul.../ul /aside /main footer p版权信息/p /footer /body这个结构里每个标签都在表达“我是什么”。搜索引擎爬虫读到article就知道这是一篇独立的内容读到nav就知道这是导航链接。屏幕阅读器用户可以用快捷键在各个article之间跳转体验比一堆div好得多。3. 文本、链接、图片日常开发中最高频的三种内容3.1 标题和段落的层级逻辑h1到h6这六个标题标签代表的是内容的层级关系不是字体大小。很多人因为h3默认字体大小刚好符合设计稿就把本该用h2的地方写成h3这是典型的“用样式思维代替结构思维”。正确的做法是先按内容逻辑确定层级再用CSS去调整视觉大小。一个页面通常只有一个h1它代表这个页面的主题。h2是主要章节h3是章节下的小节以此类推。不要跳级使用比如从h1直接跳到h3这会让依赖标题层级来理解页面结构的工具感到困惑。p标签用来包裹段落。浏览器会在p前后自动加间距这个间距可以用CSS的margin来调整。注意p里面不能嵌套块级元素比如你不能在p里面放div。浏览器虽然会容错处理但解析出来的DOM结构可能和你写的不一样。3.2 链接的四种典型用法和两个容易忽略的属性a标签是HTML里最重要的交互元素之一。最基本的用法是a hrefhttps://example.com链接文字/a。但链接不只是跳转到外部页面还有几种常见场景第一种是锚点链接用来跳转到页面内的某个位置。比如a href#section-2跳到第二节/a然后在目标位置写h2 idsection-2第二节/h2。这个在长文档里做目录导航非常实用。第二种是邮件链接a hrefmailto:someoneexample.com发邮件/a。点击后会打开默认的邮件客户端。还可以加subject参数预设主题mailto:someoneexample.com?subject咨询。第三种是电话链接a hreftel:8613800138000拨打电话/a。在手机上点击会直接调起拨号界面这个在移动端落地页里很常用。第四种是下载链接a href/files/report.pdf download下载报告/a。加上download属性后浏览器会尝试下载而不是直接打开。有两个属性经常被忽略但很有用。一个是target_blank在新标签页打开链接。但要注意使用target_blank时最好同时加上relnoopener noreferrer否则新页面可以通过window.opener访问到原页面的对象存在安全隐患。另一个是title属性鼠标悬停时显示提示文字对可访问性有一定帮助但不能替代链接文字本身的清晰表达。3.3 图片的alt属性不是可选项img标签的核心属性是src和alt。src指向图片文件alt是图片的替代文字。很多人写alt或者干脆不写这是不对的。alt文字在图片加载失败时会显示出来屏幕阅读器会朗读它搜索引擎也用它来理解图片内容。什么时候可以用alt只有当图片纯粹是装饰性的不承载任何信息时。比如一个纯背景纹理图读出来反而干扰用户理解内容这时候alt是合理的。但只要图片传达了信息比如一张产品图、一个图标按钮、一张图表就必须写有意义的alt文字。写alt的原则是假设你看不到这张图你希望别人怎么描述给你听。不要写“图片”“照片”这种废话直接描述内容。比如alt红色连衣裙正面展示图就比alt产品图片好得多。另外img的width和height属性最好都写上。这不是为了控制显示大小那是CSS的事而是为了让浏览器在图片加载之前就预留出正确的空间避免页面布局在图片加载时发生跳动。这个体验细节在移动端尤其重要。4. 列表、表格、表单结构化数据的三种呈现方式4.1 无序列表和有序列表的选择逻辑ul和ol的区别不是“有没有圆点”而是“顺序是否重要”。导航菜单用ul因为菜单项之间没有先后顺序。操作步骤用ol因为第一步、第二步、第三步的顺序不能乱。这个语义区别对屏幕阅读器用户很重要——读ol时屏幕阅读器会播报“第1项共5项”帮助用户理解进度。列表可以嵌套。比如一个多级导航菜单外层是ul每个li里面再放一个ul。嵌套时要注意子列表必须放在li里面不能直接放在ul下面。这是HTML规范的要求虽然浏览器会容错但结构上是不正确的。dl是定义列表用来展示“术语-解释”这种键值对结构。比如词汇表、FAQ、元数据展示。dt是术语dd是解释。一个dt可以对应多个dd这在展示一个词条的多个义项时很有用。4.2 表格的正确打开方式表格在早期网页设计中被滥用用来做页面布局。现在这种做法已经被彻底淘汰了表格只应该用来展示真正的表格数据。什么叫真正的表格数据就是那些行和列都有明确含义的数据比如成绩单、价格对比、日程安排。一个完整的表格结构包括table、thead、tbody、tfoot、tr、th、td。thead放表头行tbody放数据行tfoot放汇总行。th是表头单元格默认加粗居中td是数据单元格默认左对齐。th上可以加scope属性告诉屏幕阅读器这个表头是管一列的scopecol还是管一行的scoperow。对于复杂的表格还可以用id和headers属性来建立表头和数据单元格之间的关联。这些属性在视觉上没有任何效果但对可访问性至关重要。还有一个经常被忽略的caption标签用来给表格加标题。它必须紧跟在table开始标签之后。加上caption之后屏幕阅读器用户能先听到表格的标题再听具体数据理解起来容易得多。4.3 表单从用户那里拿数据的标准姿势表单是HTML里交互性最强的部分。一个完整的表单包括form容器、各种输入控件、标签、以及提交按钮。form的两个核心属性是action和method。action指定数据提交到哪个地址method指定用GET还是POST。GET会把数据拼在URL后面适合搜索这类不敏感、可分享的操作。POST把数据放在请求体里适合登录、注册、支付这类涉及隐私的操作。每个输入控件都应该有对应的label。label的for属性要等于输入控件的id。这样点击标签文字时焦点会自动跳到对应的输入框用户体验更好屏幕阅读器也能正确关联标签和控件。不要用placeholder代替label因为placeholder在输入内容后就消失了用户回头检查时不知道这个框是填什么的。input的type属性决定了输入框的行为和键盘类型。typeemail在手机上会弹出带符号的键盘typetel弹出数字键盘typenumber弹出数字键盘并限制只能输入数字。typedate会调出日期选择器。用对type能大幅提升移动端的填写体验。required属性让字段变成必填pattern属性可以用正则表达式限制输入格式minlength和maxlength控制输入长度。这些原生验证虽然不能替代服务端验证但能在用户提交之前就给出反馈减少无效请求。5. 语义化标签和可访问性让页面对所有人可用5.1 为什么div不是万能的div和span是HTML里的“万能容器”它们没有任何语义。div是块级元素span是行内元素。在找不到更合适的语义标签时用它们是合理的。但如果有更具体的标签能用就应该优先用更具体的。比如一个按钮用div classbtn点击/div也能做出视觉效果但用button点击/button更好。为什么因为button天生支持键盘操作Tab聚焦、Enter/Space触发屏幕阅读器会把它识别为按钮并播报“按钮”而div需要手动加tabindex、role、键盘事件监听才能达到同样的效果。用原生标签这些能力都是免费的。再比如一个折叠面板用details和summary就能实现不需要写一行JavaScript。details是容器summary是始终可见的标题点击summary会展开或收起details里的内容。浏览器原生支持键盘可操作屏幕阅读器能正确识别。5.2 ARIA属性的使用边界ARIA是一套用来增强可访问性的属性比如role、aria-label、aria-hidden、aria-expanded等。但ARIA有个著名的原则“不要用ARIA除非你非用不可”。因为原生HTML标签已经内置了正确的语义和交互行为而手动加ARIA属性很容易出错。举个例子div rolebutton虽然告诉屏幕阅读器这是一个按钮但它不会自动获得键盘焦点也不会响应Enter和Space键。你还需要加tabindex0和键盘事件处理。而直接用button这些全都有了。ARIA真正有用的场景是当你不得不用div或span来实现某个复杂组件而HTML没有对应的原生标签时。比如一个自定义的下拉选择框、一个标签页组件、一个模态对话框。这时候用ARIA来补充语义信息是合理的。aria-label用来给元素提供一个屏幕阅读器可读的名称当元素本身没有可见文字时特别有用。比如一个只有图标的关闭按钮可以写button aria-label关闭×/button。aria-hiddentrue用来把纯装饰性的元素从可访问性树里隐藏掉比如图标字体里的装饰性符号。5.3 键盘导航和焦点管理可访问性不只是给屏幕阅读器用的也包括键盘用户。有些用户因为身体原因无法使用鼠标完全靠键盘操作。你的页面能不能只用Tab、ShiftTab、Enter、Space、方向键来完整操作检查方法很简单打开你的页面把鼠标拔掉只用键盘走一遍所有交互流程。能不能打开菜单能不能填写表单能不能提交能不能关闭弹窗如果任何一个环节卡住了就说明键盘可访问性有问题。焦点管理是另一个容易被忽略的点。当用户点击一个按钮打开模态框时焦点应该自动移到模态框里。当模态框关闭时焦点应该回到打开它的那个按钮上。如果不做这个处理键盘用户关闭模态框后会迷失焦点不知道当前在页面的哪个位置。6. 从写出来到写得好HTML编码的实战经验6.1 代码格式化与可读性HTML代码的可读性直接影响后期维护成本。我见过一个页面所有标签挤在一行嵌套层级全靠数空格来分辨改一个地方要花十分钟找对应的闭合标签。这种代码写的时候省了几秒钟维护的时候要还回去几个小时。格式化HTML有几个基本原则。第一嵌套层级用两个空格缩进不要用Tab不同编辑器Tab宽度不一样换编辑器就乱了。第二块级元素每个占一行行内元素可以放在同一行。第三属性值用双引号包裹虽然单引号也合法但统一用双引号能避免和JavaScript字符串混淆。属性顺序也有讲究。我习惯按重要性排class放最前面因为最常用来做样式钩子然后是id然后是src、href、type这类功能属性最后是title、>!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 meta namedescription content一篇关于HTML快速入门的实战教程涵盖文档结构、常用标签、语义化和可访问性实践。 titleHTML快速教程及使用范例 - 实战指南/title /head body header h1前端学习笔记/h1 nav aria-label主导航 ul lia href/首页/a/li lia href/html aria-currentpageHTML/a/li lia href/cssCSS/a/li lia href/jsJavaScript/a/li /ul /nav /header main article header h2HTML快速教程及使用范例/h2 p time datetime2025-01-152025年1月15日/time 作者某开发者 /p /header section h3为什么从HTML开始/h3 pHTML是网页的骨架学习曲线平缓但上限很高.../p /section section h3文档结构拆解/h3 p一个标准的HTML文档包含文档声明、根元素、头部和主体.../p /section /article aside section h3关于作者/h3 p某开发者多年一线开发经验专注前端工程化.../p /section section h3相关文章/h3 ul lia href/css-basicsCSS布局入门/a/li lia href/js-domJavaScript操作DOM/a/li /ul /section /aside /main footer pcopy; 2025 前端学习笔记. 保留所有权利./p /footer /body /html逐段说明几个关键点。nav上的aria-label主导航是为了区分页面里可能存在的其他导航区域比如页脚导航屏幕阅读器会播报“主导航”来帮助用户定位。当前页面的链接加了aria-currentpage屏幕阅读器会播报“当前页面”视觉上也可以用CSS的[aria-currentpage]选择器来加高亮样式。time标签的datetime属性用YYYY-MM-DD格式这是机器可读的标准格式。页面上显示的是“2025年1月15日”但搜索引擎和辅助工具读到的是标准格式两边都照顾到了。article里面又套了一个header这是合法的。header不只能用在页面顶部也可以用在article或section里面表示这个区块的头部信息。同理footer也可以用在article里面表示文章末尾的标签、版权等信息。7.3 这个范例里藏着的几个细节第一个细节是main的使用。main代表页面的主要内容区域一个页面只应该有一个main而且它不应该被包含在header、nav、footer、aside里面。它的作用是让屏幕阅读器用户可以快速跳到主要内容跳过导航和侧边栏。第二个细节是section和div的选择。section表示一个主题性的内容区块通常应该有一个标题h2到h6。如果一块内容没有标题或者纯粹是为了样式布局用div更合适。不要为了“看起来更语义化”而滥用section。第三个细节是copy;这个实体字符它渲染出来是版权符号©。类似的还有amp;、lt;、gt;、nbsp;不换行空格。nbsp;要慎用它会影响文本的正常换行只在确实需要保持两个词不分开时使用。第四个细节是aria-label在nav上的应用。如果页面上有多个nav元素每个都应该有不同的aria-label来区分。比如“主导航”“面包屑导航”“页脚导航”。这样屏幕阅读器用户才能知道当前在哪个导航区域。8. 写HTML这件事慢就是快我刚开始写HTML的时候总觉得这东西太简单了标签就那么几个半天就学完了。后来做项目多了才发现写出能跑的HTML很容易写出结构清晰、语义正确、可维护、可访问的HTML需要刻意练习。每次写HTML之前花两分钟想一下结构比写完再改要省时间。每次用div之前问一下自己“有没有更合适的标签”能避免大量无意义的嵌套。每次写完用验证工具跑一遍能提前发现很多低级错误。HTML的容错性很强写错了浏览器也能渲染出来。这既是好事也是坏事——好事是新手不会因为一个小错误就卡住坏事是错误被隐藏了积累多了就变成技术债。养成严谨的习惯从每一个标签的语义开始从每一个属性的正确使用开始。这些东西不会立刻让你的页面变好看但会让你的代码在三个月后自己回头看时还能看懂、还能改。
