准备搞点新花样
昨儿晚上刷论坛，瞅见好多人问做静态页面咋入门老踩坑。我就寻思着，干脆把新手最容易犯的那些低级错误，整成个“七宗罪”合集，用最土味的HTML写出来，让大家瞅一眼就懂。
翻箱倒柜找素材
先得把“罪状”定下来。我打开电脑翻了翻旧笔记，又去翻了几个新手求助帖，总结出这七个祖宗：
- 乱套的标签（div里塞div再套div）
- 自闭玩失踪（img不写斜杠/）
- 挤成一坨shi（代码不换行）
- 名字瞎胡起（class随便叫div1、aaa）
- 手机不认人（忘了viewport）
- 样式打群架（CSS不缩进）
- 聋子放音乐（img没alt文字）
新建文件夹开搞
桌面右键唰唰新建文件夹，名字就敲“新手七宗罪”。打开VS Code，新建文件保存成，顺手打了个!号调出基础骨架，这玩意真是救命键。
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
往骨架塞肉
盯着空荡荡的body发愁三秒，决定先整个大标题镇场子：
<h1>HTML新手七宗罪</h1>
<p>踩中一条就能气死老司机</p>
写完手贱按了保存，打开浏览器一看——好家伙，标题跟副标题黏成一块了！赶紧在p标签前面敲了个回车，这才喘上气。
祖宗排队上墙
掏出之前列的七条罪状，用ul配li摆了个阵：
<ul>
<li>乱套的标签</li>
<li>自闭玩失踪</li>
...（剩下五条照抄）
</ul>
刷新页面一看，列表前头自带黑点点，丑是丑点但够清楚，先忍了。
每条罪都得游街示众
光列名字不行！我挨个给每条罪加了案例。比如第一条直接现场作案：
<div>
<div>
<div>看我套娃！</div>
</div>
</div>
第二条故意写了个<img src=”凉了.jpg”>，截图时候手抖真用了不存在的图——浏览器上裂开的小图标简直完美现身说法。
加点颜色区分
所有案例一股脑用pre标签包起来，灰底白字挺显眼。结果第七条的图片案例也灰了，看着像裹了层泥巴。赶紧单独给它拆出来裸奔，alt文字特意写成“此处本有图但作者忘了写alt”，自黑到位。
手机也得能看清
突然想起第六宗罪就是不响应手机！赶紧在head里塞了这段：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
手机预览时把页面搓扁揉圆，确认字没挤爆才放心。
收尾总结
拉到页面最底下，用红色strong标签写了一行警告：“犯三条以上建议重开”。顺手在代码里把第七条的img标签补了，毕竟自己不能打自己脸嘛
完工检查
把文件丢进不同浏览器遛了一圈：Chrome规规矩矩，Firefox列表缩进大了点，Safari…算了反正没报错！拍大腿决定今天就发这个，毕竟——丑得真实才是新手教学！
