HTML基础详解下：新手必看的核心标签+实战技巧终于讲透了

再讲form和input——上个月帮做求职网站的阿杰调表单，他说用户总抱怨“点‘用户名’文字没反应，得精准点输入框”。我看了他的代码，发现他写的是“用户名”——没给label加for属性，也没给input加id。我跟他说：“你得把label和input‘绑’起来，比如用户名”——这样用户点文字就能激活输入框，特别是移动端，手指点文字比点小输入框方便多了。阿杰改了之后，用户反馈“表单好用多了”，一周内表单提交量涨了20%。这里要讲个原理：label不是“装饰”，是“增强交互”——MDN web docs（Mozilla开发的权威Web文档）说过，label元素关联表单控件后，能提高可访问性，比如屏幕阅读器会读label的内容，帮助视障用户理解输入框的用途。

还有img标签——我表妹做穿搭博主，上个月传图片总显示“破碎的小图标”，急得来找我。我看了她的代码，发现她写的是“”——这是“绝对路径”，只能在她电脑上显示，传到服务器上就找不到了。我跟她说：“你得用‘相对路径’，比如把图片放在网站根目录的images文件夹里，然后写src=”images/outfit1.jpg””。还有，别忘了加alt属性，比如alt=”白色连衣裙搭配棕色短靴”——谷歌官方博客（Google Search Central Blog）说过，alt文本有助于搜索引擎理解图片内容，还能在图片加载失败时显示文字，帮用户知道图片是什么。表妹改了之后，图片再也没碎过，而且她的穿搭文章在谷歌图片搜索里的排名还上升了——你看，一个小属性就能帮你提升SEO。

为了让你更清楚这些标签的区别，我整理了一张“常见HTML元素类型对比表”，保存下来查起来比翻教程快：

HTML布局的2个实战技巧：用div+class搭框架，避开3个新手必踩的坑

讲完标签，再给你讲“布局”——这是新手从“会写标签”到“能做完整页面”的关键一步。我帮5个新手做项目后， 了“2个实战技巧”和“3个必踩坑”，都是亲测有效的。

第一个技巧：用div+class搭框架，我 成了“3步走”——第一步，先把页面分成3个大区块：header（页眉，放logo、导航）、main（主体，放文章内容、产品列表）、footer（页脚，放版权、联系方式），用div包起来，比如