HTML+CSS项目总结(建议学习三周后)

在学习三个星期学习中，基本掌握了HTML+CSS的用法和特性。
　　 拿到了一个静态的实战项目，并且要求在3-4天内完成，我和我小组成员不惜废寝忘食，在紧迫的时间内大致地完成了，但是有些效果不能像想象中的那样实现出来，毕竟时间有限，能力有限。经过了这次的实战之后，我对此有各方面的总结：

一：技术总结

1.在拿到项目设计图时，把项目设计图出从头到尾看一遍，注意每个细节，例如hover效果的变化，边框边角等等。相同的部分，例如头尾，侧方固定栏等等相同的地方，提取出来，应用到相同的页面中，更够提升开发效率。
2.开发过程中，与小组组员做好商议，很多重复的css样式可以编写到一个css文件里面，作用是重置默认样式和提供通用样式。不过在团队开发中，当然最好就是每个成员都用同一套reste.css，这样更容易理解，以提高团队开发的效率。
以下是我个人初步用的一套reste.css：

/*
    @ 重置默认样式
*/

/* 去除默认内外边距 */
* {
    margin: 0;
    padding: 0;
}
/* 去除默认边框 */
img {
    border: none;
}
/* 根据要求设定默认字体 */
body {
    font-family: "微软雅黑";
}

/*
    @ 提供通用样式
*/

/* 设置左浮动 */
.fl {
    float: left;
}
/* 设置右浮动 */
.fr {
    float: right;
}
/* 清除浮动 */
.clear {
    clear: both;
}
/* 去掉列表前的标识 */
.li-none {
    list-style: none;
}
/* 去掉a链接下划线 */
.a-none {
    text-decoration: none;
}
/* 设置行内块级元素 */
.in-bl {
    display: inline-block;
}

3.HTML的编码规范：在遵循HTML标准和语义的前提下，尽量使用最少的标签并保持最小的复杂度。
例如：如果单独引入一张图片可以直接用<img>标签，而不需要再用一个<div>标签去包着这个<img>标签。
4.关于CSS的编码规范，我在这里说几个比较实用的：
　　　　①有多项选择器时，将选择器单独放在一行。
　　　　②为了代码的易读性，在每个声明块的左花括号前加一个空格，每一个声明块的右花括号单独成行，每条声明独占一行。
　　　　③以逗号分隔的属性值，每个逗号后面都应该插入一个空格。
　　　　④省略小于1的小数前面的0 （如：用.5代替0.5）。
　　　　⑤当值为0时，省略单位 （如：margin: 0;）
5.代码注释：
在我的理解中，注释分为两种，一种是用于划分内容区块，一种是对某些代码进行描述。编写代码注释，更方便于后期维护，并且易于他人理解 ，可以减少项目整合的时间。
举个例子：

/* content 开始 */
#content {
/*content的宽高均为500px*/
    width:500px;    
    height: 500px;
}
/* content 结束 */

6.至于class和id的命名，最好还是用英文单词吧，千万不要用拼音和纯数字。如果英文单词过长，可以用缩写，不过要在别人都能理解的情况下使用缩写。如果一个类有多项的时候，可以用英文单词+数字，比如（.box01 .box02 .box03等等）。

二、心态总结

1.在长时间编写代码的时候，难免会感到烦躁，甚至抓狂。如果不调整好心态，就很难继续下去。还有些时候，会被周围的环境影响到自己。我呢，平时在编写代码时，会带上耳机，听着音乐，与世隔绝。
2.不够有耐心，总想一蹴而就。还有就是在建立项目目录中需要层层建立，使项目素材能够快速的找到。对于css建立样式经常会显得有些着急，经常会出现继承不能稳定地实现。
3.自己不够细心，在实战项目中标签使用的越多就会出现嵌套不正确，往往会使一个标签嵌套到另一个标签中，这种错误经常会使整个项目布局出现凌乱，使页面效果不能达到预期。