第一章笔记：
网页的组成：结构（图片，文字，视频等），表现（样式css），行为(人机交互)。
Web标准：制作网页的标准，是一个标准的集合体，一系列标准的集合。 结构-> HTML语言 （W3C标准） 表现-> CSS语言 （W3C标准） 行为-> JavaScript (ECMA)
HTML （超文本标记语言）。 HTML5 第五次重大修改的版本。 HTML 文件的后缀名可以是 .html , .htm 。
<u></u>：下划线标签。
<i></i>:字体倾斜标签。
<sup></sup>:上标。
<sub></sub>:下标。
<span></span>:代表一个字符或者一小段文本。
<p></p>:文本标签。该标签里面不能嵌套<h1></h1>到<h7></h7>这些标题标签。
 :打印一个空格。
<ol type="">
<li></li>
</ol>
: 属性：htef 跳转到目标网址。 target 是否弹出新窗口打开。
:src 是图片路径；alt属性： 当图片加载不出来的时候，显示的文本信息。 alt里面的文本小于100个字符。 alt属性是img标签必须的属性，如果没有提示信息，空着即可。 搜索引擎是检索不到的图片上面的文字的，alt是用来做优化的。
title属性的作用：增加用户体验，鼠标移动上去，会显示相应的提示信息。
相对路径的写法：
1 同级文件找同级文件：。/目标文件.后缀 2 父级文件找子级文件：。/进入文件夹的名称/目标.后缀 3 子级文件找父级文件：。。/目标.后缀
表格中的单元格的合并：colspan 合并列
rowspan 合并行。
如果既合并行又合并列，优先合并列，再合并行。
表格中的标签，可以用作列标题，默认的样式是字体加粗，文字居中。
表格还有
<thead><tbody><tfoot>
```--数据行分组。
form标签中的fieldset的用法，label的用法
当form和table嵌套使用时，把form标签放到table外面。
第二章笔记：CSS
css 层叠样式表，给网页做样式渲染。 外部样式表开头要写一个@charset "utf-8"
内联样式表权重最大，内部样式表和外部样式表权重一样，仅和标签顺序有关。后写的会把前面的覆盖掉，而且仅覆盖相同的属性，不同属性的样式会继续执行。
一个标签可以拥有多个类名。
<div class="a1 a2"></div>
a1,a2之间需要空一格。
群组选择符： 选择符1，选择符2，选择符3{ width:""; height:""; }
选择符权重 id（权重100）>class（10）>标签（1） 复合的选择符权重等于他们自己的权重之和。 伪类选择符权重10. 在属性后面加上!important 权重最高。
第三章:
font-size 默认文本大小为16px，文本大小最好设置成偶数。最好不低于12px。
单位：px，pt（磅），em。 9pt=12px，em 相对大小单位，根据父元素大小制定。 rem:相对大小单位，根据html的font-size值制定 默认smal=13px，midium=16px，large=19px。 文字的顶线，中线，基线，底线。
颜色：color 颜色值用16进制表示。 表示方法：#3个或者6个16进制符。 0 ->f 颜色逐渐由暗到亮。000（黑）fff（白）。 rgb（ ， ，），rgba（ 255， ，0-1（透明））
字体：font-family 如果设置多个字体的时候，属性之间用逗号隔开。
font-weight：“” bold，bolder，normal。 font-style：
行高：line-height：100px，意思是在100px的高度上，让文本在100px的高度上上下居中。 将line-height设置成文字大小，可以消除间距带来的误差。
text-align：justify 两端对齐。center。left。 text-decoration：none，underline，overline text-indent：2em。缩进。
letter-spacing：字间距 word-spacing：字间距
列表部分: list-style-image：url（） list-style:none
背景：background-image：url（图片的路径） 控制背景图是否平铺：background-repeat：“” repeat 平铺，no-repeat 不平铺，repeat-x 横向平铺，repeat-y 纵向平铺。
控制背景图的位置：background-position:;属性值为两个，第一个控制左右，第二个控制上下。第一个第二个还可以写成left，right，center。
背景图的固定：background-attachment： 属性值：scrolled，fixed。 关于设置背景的好几个属性可以简写到一行。例如颜色，边框等。
表格消除内部的层叠线时，在table中设置border-collapse：collapse。
将表格的布局固定 属性：table-layout：fixed
第四章：
padding：10px 四周， 10px 20px 上下 左右
10px 20px 30px 上 左右 下
1px 2px 3px 3px 上 右 下 左。
让一个元素在父元素里面左右居中 margin：0 auto。
慎用 margin-top，多用padding解决布局问题。
两个同级元素之间的上下margin值不会叠加，会按照最大的值进行设置。左右会进行叠加。
控制子元素的位置最好用padding，元素之间的位置用margin。
按钮的边框是往里面扩展的。所以在用按钮的时候为了使按钮符合一定的样式，可以在其外面添加一个div套住它。
list-style-image:url(图片路径)定义列表前面的图片。
overflow：scroll（滚动条）hidden（隐藏）auto（一个滚动条）
white-space：；空白空间的处理。 属性值：pre，pre-wrap，nowrap（重要）不换行。
文本溢出省略号显示： white-space：nowrap overflow：hidden text-overflow：ellipsis width：（需要加宽度）
让一个块元素在一个div中上下居中的方法：
首先将div：{
width：“”；
height：“”
text-align:"”；
}
让要居中的元素设置样式为
{
display：inline-block
vertical-align:middle
}
在该元素后面同级加上一个span标签，并且设置它的样式为
{
width：0px;
height:100%;
display:inline-block;
vertical-align:middle;
}
从另一个角度对标签分类：置换元素与非置换元素。 置换元素：通过属性或者标签的类型来决定在页面中的显示状态，因为置换元素在页面渲染的过程中生成一个框，这个框是能添加宽高的。
过渡和高度塌陷问题
transition属性（过度）必须通过事件触发。 例如：
transition：width 1s（宽度的变化需要一秒）。
transition：width 1s 2s（延迟两秒后，宽度再在一秒中完成变化。）
transition：width 1s，background 1s；（宽度一秒变化，背景一秒变化。） 属性值：参与过度的属性（默认为all），时间（过度的时间 s，ms）延迟时间 s，ms。运动的类型 linear（匀速）。贝塞尔曲线属性。
opacity属性需要了解。设置透明度：opacity：0-1（范围）
position：fixed 固定定位。以浏览器窗口为参照。脱离文档流，不占据空间。
让一个元素在浏览器窗口左右上下居中的方法： 1：position：fixed；left：50%；top：50%；margin：-高度一半 0 0 -宽度一半。 2：position：fixed；left：0；right：0；top：0；bottom：0；margin：auto。（推荐）
让一个元素在父元素窗口左右上下居中的方法：
父元素：position：relative；子元素：position：absolute；left：0；right：0；top：0；bottom：0；margin：auto
position：sticky（吸顶效果）。当添加粘性定位的元素，没有超出浏览器窗口的时候，执行的是position：relative，当超出浏览器窗口的时候，执行的是position：sticky。 使用时在相应的元素加position：sticky；top：0；（该效果在PC端有一定的兼容性）
<标签 id=“a1”></标签>
<a href="#a1"><a/>
锚点--在页面内实现跳转。
宽度自适应：（day9pm）
如果一个元素没设置宽度，并且设置了绝对定位、浮动、固定定位、让元素脱离文本流，宽度是内容撑开的宽度。
高度塌陷出现的场景： 当父元素没有设置高度，子元素添加浮动，父元素会出现高度塌陷，即使给子元素设置height或者min-height 浮动了的子元素也不会撑开父元素的高度。 高度塌陷的解决办法：
1：给高度塌陷的元素添加 over-flow：hidden；原理是over-flow：hidden触发了BFC（布局逻辑）。BFC规定：计算元素高度的时候，里面的浮动元素也参与计算。 弊端：over-flow：hidden会隐藏掉父元素以外的内容。
2：在浮动元素的最下方，添加一个空的div 并且给
div{
clear：both；
}
clear：left，right，both。分别是清除左，右，两侧浮动。闭合上方浮动元素留出的预留空间。 弊端：会产生大量的代码冗余。
3：万能清除法
高度塌陷的元素：after{
content：“”
display：block
height：0
overflow：hidden
clear：both
visibility：hidden（隐藏元素，但是还占据空间。）
}
：after{}伪对象选择器。在当前元素之后添加内容。
：before{}在当前元素之前添加一段内容。
