我最近帮一个朋友改网站，他的页面是十年前做的，采用 table 布局，字体还是宋体 12 号。打开一看，满屏的表格嵌套，改一行代码要翻半天。我说这网站该重做了，他却不乐意，觉得能跑就行。这让我想起一个扎心的真相：很多人做了十几年网站，却连最基本的 HTML 是怎么工作的都没弄明白。HTML 不是把一堆标签随意堆上去就完事了，它是有生命的骨架，结构对了，后面加 CSS、加 JavaScript 才顺。我见过太多人一上来就纠结样式，结果布局全是 div 套 div，语义标签一个不使用，需求一改，整个页面就像一团乱麻。

说到语义化，你可能觉得这个词太装，但其实并非如此。比如一个导航菜单，用 ul + li 写，搜索引擎就知道这是菜单；而用一堆 div 加 class="nav" ，它只能猜。再比如文章标题，h1 到 h6 按层级来，不光好看，读屏软件也能识别。这不是高大上的理论，而是实实在的可用性问题。我有个盲人客户，他用读屏软件上网，最怕的就是那些用 div 堆出来的网站，读出来全是“区块 区块 区块”，连标题和正文都分不清。你说网站再好看，对这部分用户来说也是废的。所以写 HTML 时，多想想：这个标签是不是最合适的？它能不能告诉浏览器和辅助工具“我是谁”？

表单是另一个重灾区。很多人觉得表单就是几个输入框加一个提交按钮，随便写写就行。但你试试看，一个 label 没有绑定 input 的表单，用键盘 Tab 键切换焦点时，常会跳到莫名其妙的地方。还有必填字段的验证，很多人直接在 JavaScript 里写 alert 弹窗，用户填了半天，一提交就弹出“姓名不能为空”，所有数据又被清空。这种体验，十年前或许还能忍，现在用户会立刻离开。正确的做法是： label 用 for 属性绑定 input 的 id，必填字段使用 required 属性，错误提示用 aria-describedby 关联到具体的输入框。这些都不是新东西，HTML 规范里写得明明白白，只是太多人懒得去看。

链接和图片也有讲究。a 标签的 href 属性，很多人写成 javascript:void(0) ，或者干脆用 span 加点击事件。这会导致什么问题？右键在新标签页打开功能失效，搜索引擎爬虫也抓不到。真的需要按钮时，用 button 标签，而不是让 a 假装是按钮。再说图片，alt 属性不是可有可无的，它是对图片内容的文字描述。你放一张产品图，alt 写“产品图片”，跟没写一样。应该写“蓝色圆领 T 恤，正面印有白色卡通猫图案”。这样读屏软件用户能了解图片内容，搜索引擎也能正确索引。别小看这个细节，电商网站的流量，很多都是从图片搜索来的。

表格的问题更大。很多人还在用 table 做布局，这都什么年代了？table 是用来展示表格数据的，不是用来排版页面的。就算是做数据表格，也要注意表头用 th，数据用 td， caption 给表格加标题， scope 属性标明表头对应的方向。这样读屏软件用户在朗读表格时，才能知道哪一列对应什么数据。我见过一个财务报表网站，表格做得花里胡哨，却连最基本的表头都没有，盲人用户听数据时只能听到一串数字，根本分不清收入和支出。这种网站，说好听点是设计失误，说难听点就是歧视。

响应式设计这块，很多人以为只要加个 viewport meta 标签，然后写几个媒体查询就行。根本在于 HTML 结构本身。比如导航菜单，手机上要折叠，你不能光靠 CSS 把列表隐藏，还需要 button 控制展开收起，并用 aria-expanded 属性同步状态。再比如图片，使用 picture 标签配合 source 元素，可以根据屏幕宽度加载不同分辨率的图片，而不是仅仅给 img 加 max-width: 100%。这些细节决定了网站在不同设备上的体验是及格还是优秀。我做过的项目里，HTML 结构扎实的，响应式改动都很快；那些全靠 JavaScript 和 CSS 硬撑的，每次适配新设备都像在拆炸弹。

性能优化也得从 HTML 下手。很多人只顾压缩图片、合并 CSS，却忽视了 HTML 本身。比如 script 标签放在 head 里，页面渲染就得等脚本加载完，用户看到的就是白屏。正确的做法是把脚本放在 body 底部，或者使用 defer 和 async 属性。再比如 link 标签的 rel="preload"，可以提前加载关键资源。还有那些不必要的嵌套，一个 div 套一个 div，浏览器解析 DOM 树的时间就会变长。这些都是实打实的性能杀手。我优化过一个电商首页，光是去掉多余的 div 、调整脚本加载顺序，首屏加载时间就快了 1.2 秒。别小看这 1 秒，亚马逊的测试显示，每慢 100 毫秒，销售额就下降约 1%。

说说框架和工具。现在前端框架多如牛毛，Vue、React、Angular，各有各的粉丝。但无论用多牛的框架，最终生成的还是 HTML。很多人学框架学得飞起，却连最基本的 HTML 规范都不清楚。框架只是工具，HTML 才是根本。我见过用 React 写的网站，组件化做得很好，但生成的 HTML 里全是 div，语义标签一个没有，aria 属性也几乎为空。这就像你盖了一栋大楼，结构再好，却用了豆腐渣材料，能住人吗？所以我的建议是：不管是否使用框架，先把原生 HTML 吃透。懂了语义化、表单规范、可访问性，再去看框架，你会发现自己能写出更干净、更健壮的代码。