千里之行，始于足下

从今天开始，尝试写一些博客，内容无关紧要，后期慢慢改。

前端出发的第一步。

整理本周笔记。

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.&gt：大于号>;&lt：小于号＜，&copy；©。

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标签里面不能放块级元素，父子关系会变为兄弟关系。