前端第一次作业点评

这次看了几个同学提交的作业，有值得圈点的地方，也有许多值得改进的地方。

1.编辑器-推荐使用VS Code

即写代码用的软件，推荐使用VS Code，小巧轻便而且不止可以写HTML，像什么markdown，python等等都可以写，这一次不会有人用记事本写的吧，不会吧不会吧，我希望不会。VS Code里面有大量的插件提供下载，像什么自动补全提示，代码高亮等等会使你写代码变得更加简单容易。

在这里可以搜索各种插件，可以上网搜搜前端常用的插件。

2.关于代码风格

为了让你写的代码结构清晰，让别人易读，我们需要采取缩进的格式。

这次交上来的作业基本是这样的：

这不是一个好习惯，简单点的代码还好，以后写大型前端代码，那就真成祖传代码了，阅读难度太大。正确写法可以参考如下：

一定要采用缩进！！一定要采用缩进！！一定要采用缩进！！

class的命名问题，class的命名如同给变量命名一样，除了临时变量，一定要采用有意义的命名方式，让别人一看到你这个类的名字就知道你这个类是做什么的，接下来学习的js函数命名也是如此。

3.页面内插入图片

一般插入图片都是用<img src="url" />，这个url可以是链接（即网络图片），也可是自己本地图片，一般采用相对路径，这样你把照片和html文件打包给别人，别人就能在网页中看到你的照片了。不然图片就会裂开。

至于相对路径如何写：

1.图片和html文件在同一个文件夹下：

那么插入图片：<img src="image.png" />

2.图片在html文件夹的外面：

那么插入图片：<img src="../image.png" />

3.图片位于文件夹images中：

那么插入图片：<img src="../images/image.png" />

4.页面布局思路问题：

标签中最常用的是：<div></div>，块标签，用来给你的整个网页划分范围，可以看作是一个容器，这个容器本身没有任何属性，只是为了布局方便把功能相近的部分划分到一起，即装到一个div里面。div当然也可以嵌套，接下来将以Limfx网页为例，来讲如何进行布局。

这是limfx主页我们可以看到他由几部分组成：菜单，文章列表，项目列表，用户列表。那么这每个部分就可以分别装到一个div中去

这样有什么好处呢，我们可以在不同的div上添加类来达到和其他div实现分离，移动，或者是添加点底纹边框什么的，在以后的Vue.js中也会学习到其实这一个div可以重复利用，减少代码的冗余程度。

在每个div下又可以继续细分，例如文章列表：

也可以看做是多个div堆叠而成，这些div其实除了内容不同，其余样式都相同，这就是代码重复利用的体现，这个以后会讲到。

本次作业因为大家都是初入门，所以还需要花一些时间去熟悉标签，class的写法，尤其是盒子模型，但是也有做的比较好的。这是韩笑宇同学的个人博客，虽然也存在一些问题，但是总体上看的还是比较舒服的，供大家参考学习学习。

采用了锚定位来进行页面索引，整体布局大方干净。