如何把设计稿还原成真实网页
所谓的前端是指什么呢？前端（front-end）是相对后端（back-end）而言的
而我们通常所说的「前端」，一般是指web前端，可以理解为网页的界面样式和视觉呈现。所以，前端设计一般视作网站的视觉设计，前端开发则是视觉设计的代码实现。
你可以把网页想象成一间房子。HTML决定了网页的框架结构——有几间房间、作什么用途、里面摆放什么东西，CSS决定了网页的样式——房间是如何装潢的（如墙壁是什么颜色的），JavaScript则决定了网页上的用户交互和数据处理——用遥控器遥控电视。
HTML是一种网页标记语言。它主要是利用标签来告诉浏览器，标签之间的东西是什么——是标题、段落、图片还是链接等。浏览器则会根据HTML标签，相应地作出显示
<h1>这是1级标题</h1>
<p>这是段落</p>
<ahref=“这是链接地址”>这是链接的文字</a>
<imgsrc=“这是图片的路径或链接地址”/>
CSS中文名叫做「层叠样式表」，从名字里就可以看出，它是一种声明样式的文档。我们可以通过链接外部css文档，或者将样式写在HTML文档的<head></head>标签中，抑或在HTML标签中内嵌属性style=""来实现对样式的定义。举个例子，我们要让<p>这个段落</p>的背景变成灰色，就可以用以下三种方法实现
记住：网页上的所有东西都盛放在框中
开发者工具
Chrome开发者工具是对前端开发最有用的神器； Firefox也可以。
框化视觉稿
把设计稿上你能看到的所有元素都放进框中，实际上，一个HTML的标签（例如<p>123</p>）就是一个框。
框是可以嵌套的。所以，要框化这个视觉稿，你首先应该找出一个包括整个页面的最大的框，然后再找出将页面明显分成几块的次大框，再找更小的框，一直找下去，直到无法再分下去。
框化后的代码实现
等你把所有元素都框化以后，就可以着手开始写代码还原设计稿了。顺序是从最外面的框写起，不断往里面写。这里面有的框是并列关系，比如：
<p>我是段落一，也是框一，我和二是并列哒</p>
<p>我是段落二，也是框二，我和一是并列哒</p>
也可能是包含关系：
<div>
<p>我是段落方框，我被外面的div层的框所包围</p>
</div>
前端开发的流程
有了工具和方法，那网页设计稿的实现具体是怎样操作的呢？步骤可以概括如下：
- 从设计师那里（或者自己设计好）拿到网页的设计稿
- 分析设计稿，找到那些现成的框
- 找出那些样式重复的元素（或框）——如1级标题、2级标题、段落等
- 写HTML代码，把内容盛放进框中
- 写CSS代码，定义元素（或框）的样式（从大的样式特征——如框的宽度，到小的——如字体字重）
- 保存代码，在浏览器中打开，检查和设计稿的差距，调整代码
- 重复4-6步直到还原设计稿
腾讯云开发者
