最近这段时间，手上没啥特别要紧的活儿，就寻思着自己捣鼓点东西练练手，巩固一下HTML的基础。脑子里过了一圈，想着搞个什么主题？突然就想到了“七宗罪”这个概念，感觉挺有意思，于是一拍大腿，决定就弄一个“七宗罪HTML官网”出来玩玩。
我也没打算搞得多复杂。就想着，这七宗罪嘛傲慢、嫉妒、暴怒、懒惰、贪婪、暴食、色欲，每一个“罪”都给它创建一个单独的HTML页面。然后再弄一个首页，简单介绍一下，放上七个链接，点哪个就跳到哪个“罪”的详情页去。思路一定，我就开始动手了。
动手搭建框架
我先新建了一个文件夹，名字就叫`seven-sins-website`。然后在里面，第一个创建的就是`*`，这个就算是咱的“官网”首页了。打开编辑器，敲下了``这些基础的玩意儿。首页嘛总得有个标题不是？我就用`
`标签写了个“七宗罪在线浏览”之类的，看着还行。
最关键的就是导航了。我用了一个`
- `无序列表，里面套了七个`
- `列表项，每个列表项里头都准备放一个链接，指向对应的“罪行”页面。比如第一个就是“傲慢”，第二个是“嫉妒”，以此类推。当时还没创建那些页面，链接的`href`就先空着或者写个`#`占位。
分门别类做页面
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
首页的架子搭得差不多了，我就开始挨个创建那七个“罪行”的详情页。比如先搞“傲慢”，我就新建了个`*`。打开之后，也是先来个`
`写上“傲慢之罪”，然后下面用几个`
`标签，随便写了几句对“傲慢”的理解和描述，纯粹是为了填充内容，看看效果。
其他的页面，像是`*`（嫉妒）、`*`（暴怒）等等，我都照着这个葫芦画瓢，一个个创建过来。每个页面都力求简洁，主要就是用`
`做大标题，用`
`放文字内容。有些地方可能需要列点，就用`
- `和`
- `，结构清晰就完事儿了。
在做的过程中，我也琢磨过。比如，我是不是应该在每个“罪行”的页面底部，都加上一个返回首页的链接？想了想，必须得加，这样用户体验好一点嘛每个详情页的末尾，我都补上了一个指向`*`的链接。
实践中遇到的小“坑”
别说，就这么简简单单的HTML，我还真遇到点小迷糊。当时我想在一个行内显示的标签（具体哪个记不清了，好像是``之类的）里面，嵌套一个块级显示的标签（比如`
`或者`
`）。我寻思着这样能控制一小块区域的样式或者结构，结果一刷新浏览器，排版就有点乱套，跟我预想的不一样。我纳闷了，这咋回事？后来上网查了查资料，才知道HTML规范里头，一般是不推荐或者不允许行内元素直接包裹块级元素的。这算是一个不大不小的“坑”，或者说是一种约定俗成的规矩。这也算是给我提了个醒，写HTML不能太随心所欲，还是得按基本法来。这也算是我在实践中发现的一个“HTML自身的小罪过”，哈哈，挺应景的。
最终的成果与感悟
图片、复杂的CSS样式，这些我这回都没怎么弄。我的主要目的就是纯粹用HTML把这个“七宗罪官网”的骨架给搭起来，把页面之间的跳转逻辑理顺。完成的时候，整个网站看起来就是那种光秃秃的，只有文字和链接的原始网页模样。
从`*`首页，到七个独立的“罪行”介绍页面，每一个都能正确地跳转，信息结构也还算清晰。这么一套流程下来，虽然做的东西简单，但我感觉对HTML的各种标签的运用，特别是页面结构的组织，又熟悉了不少。尤其是那个行内元素和块级元素嵌套的问题，算是一次深刻的实践教训。
这回自己动手做“七宗罪HTML官网”的实践还是挺有收获的。甭管东西大小，只要是自己从头到尾琢磨着做出来的，总能学到点下次再搞点啥？还没想哈哈。
相关推荐
- `，结构清晰就完事儿了。