前言

我身边一些非程序员的朋友，偶尔看我转发到朋友圈的文章，会表示出一定的兴趣。前段时间，有朋友问我公众号的问题，所以我来了灵感，做了一个小功能叫做「给不懂技术的朋友简单演示代码是怎么写的」。拿给朋友演示的时候，都说挺有意思的。

莎翁说“学问必须合乎自己的兴趣,方可得益。”所以我就想写个趣学前端系列，适用于零基础、新手前端或者想把编程当做兴趣培养的人。

如何开篇

第一篇写什么，我其实挺纠结的。讲发展史？没有口才支撑讲得生动有趣。直接讲知识点，第一次接触的人不容易进入状态。我代入了一下自己是一个前端新人，怎样从学习中既学习了知识又获得了乐趣且有动力支持自己不断学习进步呢？

记住它、掌握它，今后会用它。这样的良性循环，会使得知识越积累越多，能力越来越强，动力越来越强。

我至今还记得第一次用CSS3动画实现摩天轮转动的效果，成就感满满。

所以趣学前端第一篇，我们来探索一下前端技术之日常浏览的页面是怎么做出来的。

「趣学前端」系列，会由浅入深，将前端技术呈现出来。

一个页面

想了想，还是以掘金首页为例，讲一讲掘金首页是如何实现。

页面布局

掘金首页内容挺多的，我将它简化了，大致结构如下：

页面实现

我把完整代码放在线预览平台了，可以看一下效果。

知识点

HTML 是用来描述网页的一种语言，HTML 使用标记标签来描述网页。就像是搭乐高积木，可以用不同形状的积木块拼搭出图纸上的形状，标记标签就像一快快积木，用不同标记标签共同组成一个网页页面。

标签介绍

以下知识点来自于w3school

敲代码

代码演示

看完上面的实现和知识点，可能新手还是有点茫然，对页面实现不是很理解。其实一个很好的学习方式是实践出真知。

前端学习中帮助提升能力的一个方法便是学习完知识点，一定要自己实际的把学习的知识点敲出来。所以我把实现代码和对应的功能模块一一对应，对应的代码都展示出来了，可以照着在IDE中敲出来。

讲解代码放到了在线预览平台。

复制代码

第一步

选中一个想查看代码的功能项，比如顶部模块(header标签)。

第二步

将查看的功能的代码进行复制。

<headerclass="header"><divclass="header-container"><ahref="https://juejin.cn/"class="logo"><imgsrc="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"alt="稀土掘金"class="image-block"/></a><navclass="header-nav"><ulclass="nav-list"><liclass="nav-item active"><ahref="https://juejin.cn/">首页</a></li><liclass="nav-item"><ahref="https://juejin.cn/pins">沸点</a></li></ul><imgsrc="https://p6-passport.byteacctimg.com/img/user-avatar/c6c1a335a3b48adc43e011dd21bfdc60~300x300.image"class="avatar"alt="叶一一的头像"/></nav></div></header>

第三步

将代码粘贴到一个空档html文档中。

第四步

运行这个新建的html文档，刚才的顶部模块功能就出来啦。

一个小作业

撘模型的时候需要有设计图，通过代码实现一个页面之前，也要先想好如何布局。前端有很多经典的布局，比如品字型布局，如下图，这个布局是怎么实现的呢？答案会在下篇文章中给出。

结束语

第一次写适合零基础的朋友看的技术文章，写的不妥的地方，欢迎大家帮忙指出并提供建议。

每篇文章结尾留一个小作业，第二篇文章开头会给出实现方案。