在刚接触到HTML时,我对这样一个IT技术是一点都不了解的,我也不知道是否会对这个感兴趣,最开始只知道我学的是Web前段。通过老师一步步解析HTML每一个字母的含义后,我开始对怎样一项技术有了初步的了解。在页面简单编写的过程中,逐渐找到了自信,也发现这项技术是我喜欢的,以前就很喜欢PS还有视频剪辑,虽然技术方式不同,但是都是作为前端展现形式的。
接下来总结一下自己在一阶段所学到的所有知识,以及对不足进行总结,最后拟定复习计划。
如下:
一、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标签里面)
3.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.一阶段所有单词已经整合在一起,每天在早上起床,地铁路上,读读背背,主要是家里比较远只能利用碎片时间。
2.一阶段所有课程以及笔记已经整理完毕,每周六作业做完抽时间进行统一复习,虽然这一阶段有很多东西现阶段已经很熟练,但是不代表不会忘。
3.通过一阶段的学习适应,计划第二阶段的学习方法和学习节奏。
总结以上,送自己一句话,希望四个月后发现是另一个优秀的自己,fighting!
相关文章
了解千锋动态
关注千锋教育服务号
扫一扫快速进入
千锋移动端页面
扫码匿名提建议
直达CEO信箱