网页前端学习总结（一）

　　上个月因为想要在学校的内网搭建一个网站，主要提供资源下载和文章分享等内容，买了一个树莓派B+。把基本的环境搭建好后，寒假一开始我就奋战在网页设计的一线上了。几天的时间虽然不长，也谈不上收获，但也有一些小小的心得总结，写在这里和大家分享一下，也给自己留个记录，以供日后参考。

一、注意代码风格

　　这个问题可谓老生常谈，不但是网络前端语言，几乎各类计算机语言的学习指导里都少不了这句话，可见其重要性。代码的个人风格固然体现个性，但有些方面我认为是每个人都应该做到的。

1、缩进

　　例如不同级别的标签相邻要缩进，有从属关系的标签要缩进等等。这些缩进不但能够增加代码的美观性，而且也大大方便了日后的修改工作，也让别人能够很容易接手你的工作，提高团队效率。编写时敲击一个Tab键的时间能省下以后代码堆里查找目标内容的大把时间。

2、换行

　　对于一个较短的标签内容，可以在标签结束后再换行。而当标签中内容较多，例如一个段落、一个块级元素的内容，应该尽量考虑使用开始标签一行，内容一行，结束标签一行的格式，而且内容行应当使用缩进，以示从属关系。这也是改进代码风格的一个重要方面。

3、注释

　　在内容繁杂，不能很容易找出一个功能块时，应该使用注释标出功能块范围，并使用简洁、浅显的语言说明该块的内容。以使代码文件层次清晰。

　　同时代码注释还可以用于代码测试。对于两段待测试的代码，可以将其中一段注释掉，测试另一段，测试完毕后再反过来（笨办法，如有其他方法欢迎讨论）。

二、提高代码重用率

　　代码重用是提高代码编写效率，增加程序可读性和可写性的重要手段。比如CSS的出现就大大解放了网页前端设计的劳动力。在代码重用这一点上要特别注意语言中自带的特性并充分利用。比如CSS中派生类可以覆盖基类中相同属性的值，而当同时使用多个CSS文件时，后调用文件中的能属性够覆盖前面文件中相同的属性等等。具有类似特性的网页元素可以使用相同的id或class等，再把不同的地方分别写出或加以覆写。

　　顺便提到，对于一些代码中重复出现，而又无法用其他方法加以抽象并自动化输出的，可以将其共同项复制出来并注释掉。一旦需要复制使用时可以直接从注释中复制，省却了重新写一遍或者从文档中提取的麻烦。

三、善用CSS选择器

　　CSS的选择器给我们的代码赋予了极大的灵活性。我比较常用的有类选择器、id选择器和属性选择器等。选择器除了对提高代码重用率有贡献以外，还能灵活地对不同特性的”集合“的”交集“进行属性设定，能够在赋予元素”共性“的同时又设定”个性“，非常好用。

四、”块“思想

　　在网页元素的规划时，有些人可能对页面中的一个个方块直接排列。这种方法看似简单，但是在面对屏幕宽高比变化或者一个简单的修改时往往会造成元素次序混乱，而且很难找到头绪。这个时候就需要我们运用”块“的思想。HTML元素中不但有div和table等小”块“，还可以根据页面的大致规划划出较大的”块“。比如，对所有页面元素规定一个宽度恒定的container类，来防止页面宽度变化造成的影响。又比如，当我们要为页面设定一个有多个小方块的浮动的导航栏时，大可不必将每个方块设定单独的位置，直接将导航栏封装到一个类中，直接对类的位置进行设定，会方便很多。类似的思想能够大大减轻前端工作量。

五、人性化设计

　　人性化设计的想法实现起来并不难，但是往往不容易想到。比如，当我设计一个Metro风格的网页时，一开始是将方块中的文字设定为超链接，结果实际使用时人们习惯点击方块，造成超链接失效的假象，带来了很大的不方便，还不如直接将超链接的标签放到div的外部；又比如，在div显示字体时，为了文字清晰地显示不会因为和边界混在一起，可以自定义内边距padding；还有对于手机网页，小字体的超链接往往容易点错，这时就不如使用方块状的带背景色的div作为一个按钮。

　　以上是本人近期做网页前端的一些小小的心得总结。限于经验和文字水平难免错漏。希望广大网友给出意见，一起讨论学习。