你是不是打开Dreamweaver就头晕？看着满屏的尖括号怀疑人生？别慌！去年有个大学生用记事本写HTML，结果忘记闭合标签，整个页面像被狗啃了一样。今天咱们就用最接地气的方式，把HTML这点事儿掰扯明白！
工具选对成功一半
千万别信什么"专业工具才牛逼"的鬼话！新手推荐VS Code+Live Server插件，装好就能实时预览效果。记住这两个快捷键：Ctrl+Alt+L快速格式化代码、Alt+Shift+↓**当前行。亲测比用Dreamweaver快三倍不止！
来看个工具对比表：
| 工具 | 启动速度 | 自动补全 | 适合人群 |
|---|---|---|---|
| 记事本 | 闪电 | 无 | 找虐型选手 |
| VS Code | 快 | 智能 | 正常人首选 |
| Sublime Text | 中等 | 基础 | 极简主义者 |
基础结构别搞错
记住这个万能模板：
html运行**DOCTYPE html><html><head> <title>页面标题title>head><body> 这里写正文body>html>
重点提醒：body标签里才是你看得见的内容！有个学员把CSS样式写在title后面，结果折腾三小时没效果，差点砸电脑。
排版标签用对就赢
别再滥用div了！这些语义化标签才是王道：
- 网页头部
- 导航栏
- 主要内容
- 独立文章
- 底部信息
去年给餐馆做官网，用语义化标签后，搜索引擎排名直接从第5页窜到第1页。老板乐得请我吃了三顿小龙虾！
图片插入三大铁律
- 必须加alt属性：
- 尺寸用CSS控制，别在HTML里写width/height
- 优先用WebP格式，体积比JPG小45%
血泪教训：某同学把10MB的婚纱照直接放网页，结果页面加载要18秒，新娘差点悔婚！
- 在新窗口打开：加
target="_blank" - 链接到页面锚点：
href="#section2" - 打电话：
href="tel:***********"
重点提醒：外部链接必须加nofollow！，不然SEO要扣分！
表单设计防呆指南
记住这个注册表单模板：
html运行**<form> <label for="email">邮箱：label> <input type="email" id="email" required> <label for="pass">密码：label> <input type="password" id="pass" minlength="8"> <button type="submit">注册button>form>
关键点：input类型选email会自动验证格式！上次有个妹子把type写成text，结果用户乱输QQ号也没提示。
CSS引入的正确姿势
千万别在标签里写style属性！正确做法是在head里加：
html运行**<link rel="stylesheet" href="style.css">
有个铁头娃非要在HTML里写200行样式，后来改版时差点哭晕在厕所。记住：HTML管结构，CSS管颜值！
移动端适配生死线
在head里必须加这个元标签：
html运行**<meta name="viewport" content="width=device-width, initial-scale=1.0">
漏掉这句话，手机上看网页就像拿放大镜看蚂蚁！某健身房的课程表页面因此损失70%移动端用户。
教你们个绝招：用Chrome开发者工具的Device Toolbar模拟手机显示，F12键一按，所有设备尺寸随便换！
调试必杀技
遇到页面**别急着删代码！按F12打开开发者工具：
- 看Console报错信息
- 用Elements检查DOM结构
- Network标签查资源加载
上周有个小哥把写成
干了十年网页开发，最想说的是：HTML就像搭积木，标签闭合是底线，语义化是尊严。那些在细节处死磕的页面，最终都活成了别人家的网站。记住，好的代码不是用来炫技而是让后来维护的人想给你发红包！
