上篇文章，我们对项目进行了需求分析，明确了项目所需的各个功能模块，产出了页面的原型设计图。
这篇文章我们将进入实战编码环节，大致内容结构如下：
- HTML简介
- 如何划分页面结构
- 页面样式优化
- 下期预告
一、HTML简介
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML是页面的骨架，构成了一个页面的大体结构。学习HTML，就是掌握HTML常用标签的用法，了解它们的属性。
在实际的学习和工作当中，使用最频繁的标签就是 div 标签了。标签之间的区别主要有以下几种：
- 语义上的区别
- 功能上的区别
- 默认样式的区别
语义上的区别？
比如 header 标签和 div 标签，虽然默认的样式没有区别，但是 header 标签有具体的语义，表示的是头部。
功能上的区别？
比如 img 标签、input 标签、video 标签和 audio 标签等等，这些标签都有实际的功能，和 div 标签这种仅仅只是在页面上创建一个区块有很大的区别。
默认样式的区别？
比如 span 标签和 div 标签，前者是行内标签，后者是块级标签，两者的默认样式有区别。
接下来请思考一个问题，如果给你一张设计稿，你将如何划分它的 HTML 结构？
先思考几分钟，在第二节我将讲讲我自己在实际工作中运用的方法。
二、页面结构划分
页面结构划分的一个基本原则就是从整体到局部。
第一步，我们将页面划分为两个主要的区块，页眉区和主题内容区。
此时我们的页面结构应该长这样：
<body><div class="container"><!-- 页眉区 --><div class="header"></div><!-- 主体内容区 --><div class="main-content"></div></div></body>上一步，我们总整体角度对我们的页面进行了划分，接下来就是对各个区块进行细分。先来细分页眉区域。
页眉区域大体分为两个主要区块，导航区块和搜索区块。
此时我们的页面结构应该长这样：
<body><div class="container"><!-- 页眉区 --><div class="header"><!-- 导航区 --><div class="nav"><div class="nav-item"><a href="./index.html"><img src="https://s2.ax1x.com/2019/11/03/KXtOUA.png" /></a></div><div class="nav-item"><a href="./index.html">首页</a></div><div class="nav-item"><a href="./search.html">搜索页</a></div></div><!-- 搜索区 --><div class="search"><input placeholder="请输入" /><button>确定</button></div></div><!-- 主体内容区 --><div class="main-content"></div></div></body>接下来就是细分主体内容区部分了，主体内容区大致分为两部分，推荐区和信息区。
最终，我们得到了我们页面大致的 HTML 骨架：
<body><div class="container"><!-- 页眉区 --><div class="header"><!-- 导航区 --><div class="nav"><div class="nav-item"><a href="./index.html"><img src="https://s2.ax1x.com/2019/11/03/KXtOUA.png" /></a></div><div class="nav-item"><a href="./index.html">首页</a></div><div class="nav-item"><a href="./search.html">搜索页</a></div></div><!-- 搜索区 --><div class="search"><input placeholder="请输入" /><button>确定</button></div></div><!-- 主体内容区 --><div class="main-content"><!-- 推荐区 --><div class="recommend"><!-- 诗文列表 --><ul class="poetry-list">诗文列表</ul></div><!-- 信息区 --><div class="info-container"><!-- 作者列表 --><ul class="poet-list">作者列表</ul><!-- 标签列表 --><ul class="tag-list">标签列表</ul></div></div></div></body>来看下实际的页面展示效果：
我们可以看到，页面的大体结构是没有太多的问题，但是有以下两点问题：
- 页面元素位置和设计稿不一致。
- 是不是优点丑啊。。。
是非常丑呀！！！
下一节，我们来给我们的页面加点样式吧！
三、页面样式优化
如果说 HTML 是网页的骨架，那么 CSS（Cascading Style Sheets） 就是网页的样式了。
CSS，中文名为层叠样式表，是一种用来表现 HTML 等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
网上关于 CSS 的入门教程非常多且详细，这里就不大篇幅介绍具体的属性和用法了。我们接下来将使用 flex 布局对页面进行布局，对 flex 布局还不太熟悉的同学需要先详细阅读下边两篇教程，弄明白 flex 布局是什么和 flex 布局的常用属性。
Flex 布局教程：语法篇 - 阮一峰的网络日志www.ruanyifeng.com
布局
1.页面整体内容居中，限定内容宽度为 900px
.container {width: 900px;margin-left: auto;margin-right: auto;
}看看此时页面的效果，可以看到内容正常居中了。
2.页眉添加 flex 布局，设置 logo 宽度
/* 页眉添加 flex 布局 */
.container > .header {display: flex;align-items: center;justify-content: space-between;
}/* 导航区添加 flex 布局 */
.container > .header > .nav {display: flex;align-items: center;width: 400px;justify-content: space-around;
}/* 设置 logo 宽度 */
.container > .header img {width: 100px;
}
看看此时页面的效果，可以看到页眉区元素布局没问题了。
3.主题内容区添加 flex 布局
/* 主体内容区添加 flex 布局 */
.main-content {display: flex;
}/* 设置推荐区宽度为 500px */
.main-content > .recommend {width: 500px;
}/* 设置信息区宽度为 400px */
.main-content > .info-container {width: 400px;
}看看此时页面的效果，可以看到主体内容区元素布局没问题了。
由此，我们完成了页面的布局工作，接下来还需要做的就是优化我们页面的样式。
样式优化
1.优化导航区链接样式
/* 导航区链接样式 */
.container > .header a {text-decoration: none;color: #71777c;
}.container > .header a:hover {color: #69ed8b;
}链接样式优化后：
2.优化导航区搜索框样式
/* 导航区搜索框样式 */
.container > .header input {box-sizing: border-box;height: 36px;padding: 0.5em 0.6em;display: inline-block;border: 1px solid #ccc;box-shadow: inset 0 1px 3px #ddd;border-radius: 4px;vertical-align: middle;
}.container > .header input:focus {outline: 1px solid #69ed69;
}搜索框样式优化后：
3.优化导航区确定按钮样式
/* 导航区确定按钮样式 */
.container > .header button {box-sizing: border-box;height: 36px;width: 60px;cursor: pointer;color: white;padding: 0.5em 0.6em;background: #80ea80;border-radius: 2px;
}.container > .header button:hover {background: #69ed69;
}确定按钮样式优化后：
4.页眉和主体内容添加分界线
/* 页眉和主体内容添加分界线 */
.container > .header {padding-bottom: 10px;border-bottom: 1px solid #71777c;
}添加分界线之后：
到此我们首页的布局和样式优化就完成了，对比一下前后页面的变化：
我想，还是好看了那么一丢丢吧。。。
四、下期预告
这篇文章详细介绍了首页的静态页面的制作过程，其中很重要的一点就是如何划分一个页面的页面结构——从整体到局部。
下篇文章将重点介绍 JS 的部分，实现每个区块的交互行为。
如果对这个系列感兴趣的同学欢迎关注一波～，可以收到最新的文章通知。
对前端入门感兴趣的小伙伴欢迎加入我们的前端学习交流群：
- qq群：948805468
- 微信群：加我微信（a1127502049），我拉你进群
