刚来千锋武汉Web前端培训机构接触到HTML时，我对这样一个IT技术是一点都不了解的，我也不知道自己是否会对这个感兴趣，最开始只知道我学的是Web前端。通过千锋武汉Web前端培训老师解析HTML每一个字母的含义后，我开始对Web前端这项技术有了初步了解。在页面简单编写的过程中，逐渐找到了自信，也发现这项技术是我喜欢的。以前就很喜欢PS还有视频剪辑，虽然它们的技术方式不同，但是都是作为前端展现形式的。

       接下来总结一下自己在千锋武汉Web前端培训班一阶段所学到的所有知识，以及对不足进行总结，最后拟定复习计划。

       千锋武汉Web前端培训班一阶段学习总结如下：

       一、HTML架构

       1.大标签

       标题标签、段落标签、块标签、表格标签

       2.小标签

       加粗标签、倾斜标签、文本节点标签、超链接标签

       3.特殊标签

       图片标签

       4.其他标签

       换行标签、水平线标签、空格符号；无序、有序、自定义列表；标签单标签、输入框标签、密码输入框、按钮输入框、重置按钮。

       二、CSS样式

       1.内部样式

       <style></style>

       2.外部样式

       <link rel="stylesheet" type="text/css" href="css路径"/>（主流-写在head里面）

       @import url(CSS路径);（没有link加载快，网络不好的时候只会先加载HTML。）

       3.内联样式（代码需求较多时，无法实现代码分离效果）

       style="需要的CSS代码"(直接写到需要添加效果的HTML标签里面）

       4.CSS各类属性

       文本属性、背景属性、其他属性、盒子模型、溢出属性

       5.样式权重有各类选择器

       内联样式 1000

       id选择器 100

       class选择器 10

       伪类选择器 10

       元素选择器和通配符 1

       三、CSS3新增

       CSS学习到的东西很多很多，可以解决很多问题，这里就不一一总结，只要总结几个特别实用的。

       1.盒子撑大像素问题，这个是页面最常见的，解决方法：

       （1）给图片添加 vertical-align:top/middle/bottom;

       （2）给图片添加 display:block;

       （3）给图片或者给父元素添加 float:left;（如果给图片加需要给父元素加高）

       （4）给body添加font-size:0;

       2.高度塌陷问题，很多时候页面需要添加元素需要父元素高度自适应，这时候子元素浮动很容易出现高度塌陷问题，解决方法：

       高度塌陷问题：

       问题描述：当给子元素添加浮动的时候，父元素没有给高，会出现高度为0的情况

       解决方案：

       （1）给父元素添加高度height; 遇到高自适应的时候就不好用了

       （2）给父元素添加属性 overflow:hidden/auto/scroll; 遇到定位就不太好用了

       （3）给浮动的元素的下方添加一个空的块元素（非浮动元素），给块元素添加clear:both; 会造成代码的冗余（太多空标签）

       （4）万能清除法(重点）

       给父元素添加公共类 class="clear"

       .clear:after{

       content:"";

       display:block;

       clear:both;

       height:0;

       overflow:hidden;

       visibility:hidden;

       }

       .clear{

       zoom:1;

       }

       （5）给父元素添加浮动。会带来新的浮动问题 做了解

       （6）给父元素添加display:table; 会产生未知bug

       3.BFC，最大优势可以实现两栏布局、三栏布局、还有圣杯布局

       BFC（Block formatting contexe)直译为“块级格式化上下文”。它是一个独立的渲染区域，具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。

       触发条件：

       （1）根元素html

       （2）float属性不为none

       （3）position为absolute或fixed

       （4）display为inline-block,table-cell,table-caption,flex,inline-flex

       （5）overflow不为visible

       四、以下是我最喜欢的，也会自己没有学好的内容。

       分别为：过渡动画transition、animation、转换transifoem、3D。

       主要是自己英语基础很差，再加上这里动画的实现需要记住很多运用方法，是加在自身产生效果还是被hover元素下，以及动画引入等等。这些还需要自己下功夫多去熟悉，单词多去记忆。

       五、复习计划

       1.千锋武汉Web前端培训班一阶段的所有单词已经整合在一起，每天早上起床后，地铁路上，读读背背，主要是家里比较远只能利用碎片时间。

       2.千锋武汉Web前端培训班一阶段的所有课程以及笔记已经整理完毕，每周六作业做完抽时间进行统一复习，虽然一阶段有很多东西现阶段已经很熟练，但是不代表不会忘。

       3.通过一阶段的学习适应，计划千锋武汉Web前端培训二阶段的学习方法和学习节奏。

       总结以上，送自己一句话，希望四个月后发现是另一个优秀的自己，fighting！