PC端静态网页开发项目

本次静态网页开发的心得体会

文章输出来源：拉勾教育前端就业急训营

这次课程老师给我们一步步示范一个静态网页搭建起来所经历的流程。以往自己也有试过拿一些网页的模板对照这来搭建一个静态网页，但那时也没有什么思考或者说动手搭建前的统筹，往往拿到图就开始敲代码。但是这样下来，往往很容易造成混乱，这就使得网页搭建下来效率低还不够美观。
经过这次的实战，我总结出来，我们拿到设计图的时候，首先要观察页面的布局结构，大概拆分成哪几部分，各个部分里面又有些什么盒子，盒子与盒子之间是怎样的关系。然后再看每个盒子里面应该有哪些元素，既能够提高SEO搜索引擎优化，也能使html文档结构清晰。然后再观察页面当中有哪些元素的样式是共有的，这样我们可以设置公共样式，减少代码量，提高开发效率。然后我们才开始动手敲代码。
开发的过程当中，要随时查看网页渲染出来的效果与预期是否相符，可以通过开发者工具修改样式并及时查看效果。
一定要多动手去实践，才能更好的掌握方方面面的知识点，发现一些比较隐藏的盲区。
下面就是以下我在这次实战当中总结出静态网页开发的方法和我个人一些知识的盲区

规范化开发

1. 网页header当中的title必须要存在且有意义，这对搜索引擎优化SEO非常重要。
2. 在正式编写body之前需要引入一个reset.css文档，将一些标签默认的样式属性给去除掉。这个reset.css文档是不能够修改的。但每个html文档都要有它的存在。
3. 需要有base.css文档，这个文档设置的是一些绝大多数元素共有的样式属性。
4. 分层的设置css样式，能够提高效率，并使每个css文档代码不会过于冗长。

个人知识盲点

1. 当一个元素A定位为absolute时，它会以离它最近的具有定位的祖先级元素B为参考元素。而一个盒子具有width、height、padding、border、margin，那么A参考的是是B的哪里呢？
   **注：**参考的是B元素的width+height+padding区域，不包括border和margin区域
2. 将超出盒子内容区域的的文字显示成…

   
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;