从今天开始,尝试写一些博客,内容无关紧要,后期慢慢改。
前端出发的第一步。
整理本周笔记。
day-01
1.W3C( World Wide Web Consortium )万维网联盟
ECMA制定了行为(DOM(文档对象模型),ECMAScript)标准
WHATWG网页超文本应用技术工作小组是:
一个以推动网络HTML 5 标准为目的而成立的组织。
2.HTML:超文本标记语言 (Hyper Text Markup Language)
3.shift+alt+a:注释选中部分
4.h1:块级元素,p:块级元素(存有上下间距),img:行内块元素
5.img属性:alt:未显示提示;title:图片名称,鼠标在上时显示。
6.行内元素进行换行可以用块级元素套,或者使用br,
br无样式换行,hr直线换行,含间距。
7.strong:强调作用加粗,b:无强调作用加粗;em:倾斜强调,i:仅倾斜;del:删除线;s:删除线。
8.ul:独占一行,上下间距,左边内边距;li:独占一行,无边距。ul无序列表,ol有序列表。ol两个属性,type:排序类型,start:第几个开始
9.a:行内元素,属性target:blank:新窗口打开,默认值self:当前页打开。本身没有宽高,如果加了float会变为行内块元素可以设置宽高。
10.div:独占一行,块容器,span:行级容器。
11.“& nbsp;”:空格。
day02
1.>:大于号>;<:小于号<,©;©。
2.input必须和form组合使用,块级元素。
3.除了img和input之外,块级元素不能任意设置宽高。
4.正常顺序为:a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;
5.为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中; 例如:a{color:red;} a:hover{color:green;} 表示超链接的初始和访问过后的状态一样,鼠标划过的状态和点击时的状态一样。
day03
1.em:父元素等比例缩放字体大小
2.rgba(0,0,0,0.5):最后一个值代表透明度。
3.font-weight:normal:取消加粗。
4.font-style:italic;oblique;normal:文本倾斜与通常。
5.text-align:center;left;right;justify。居中对齐,左右对齐,两端对齐。仅对文本和图片生效。
6.行高line-height单位省略时,默认为em。
7.vertical-line:垂直对齐方式。top;bottom;middle,baseline(基线),多用于图片旁内容对齐。
8.text-decoration:none;去掉原有文本样式。
9.text-indent:首行缩进,值:可以是px和em,只对块元素生效,对行内元素无效。
10.list-style:none:清除列表默认样式。
11.背景属性的简写方式background:red url(img/img01.jpg) no-repeat left bottom;
12.outline:none;:去除input标签输入内容时候存在的边框。
day04
1.图片下面的文字或块与图片存在间距,把img转换为块元素即可。或者给图片的父元素添加font-size为0。
2.列表样式可以用背景图用精灵图加定位。
3.列表小箭头放上去改变可以通过hover后改变背景精灵图定位实现。
4.background-size:cover:背景图充满,contain:背景图百分百显示,可能未铺满,以长边等比例缩放为容器边距。
5.浮动会半脱离标准文档流,但是不会遮挡文档里的文字,图片,表单元素。
6.换行元素被卡住,一般是左上角的元素高度超出。
7.父元素不写高度,所有子元素浮动,父元素高度为0,可以通过设置父元素的高度或者overflow:hidden解决。
8.在浮动的所有元素最后一个元素添加clear:both,清除前面浮动造成的影响,也可以起到一样的效果。
9.为行内元素添加浮动,会自动转换为块元素。
10.空格:后代选择器。大于号子代选择器(第一代)。
11.两个元素的下上外边距会重叠(不一样大取最大值)。左右边距不重叠。
12.子元素添加margin-top。会把父元素带下来,处理方法:(1):用父元素的margin-top代替,(2).加浮动(父元素和子元素都可,注意元素浮动后会半脱离标准文档流)。(3)为父元素加边框。
13.padding值对于行内元素左右正常,上下只有视觉效果,没有实际效果。margin值左右正常,上下没有效果。
day05
1.text-overflow:clip:默认值,ellipsis:显示省略标记。
2.显示省略号时需要同时设置以下声明,(1)容器宽度,(2)强制文本在一行内显示:white-space:nowrap;(3)溢出内容为隐藏:overflow:hidden.
3.overflow:auto:如果溢出有滚动条,否则内容正常显示。
4.overflow-x:hidden和overflow-y:auto可以实现单项滚动条。
5.white-space:normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白;
6.行内元素(内联元素):行内逐个显示,不能定义宽高,如果加了float变为行内块元素,内联元素会遵循盒模型,左右有效,上下只有视觉效果,无实际布局功能。如(a,span,i,em,s)
7.display:none:隐藏元素,flex:弹性元素,grid:网格布局。
8.当元素设置了float属性后,就相当于该元素加了display:block
9.pre:预格式化文本:保留空格,tap,回车。有pre标签和属性。
10.nowrap:不换行;pre:显示空格,回车,不换行,pre-wrap:显示空格,回车,换行。pre-line:显示回车,不显示空格,换行。
11.p标签里面不能放块级元素,父子关系会变为兄弟关系。