html知识点
---------------------------day1 html简介------------------------------------------------------------------
1.web标准 结构（xhtml xml） 表现（css） 行为(dom，ECMAscript)
2.html超文本标记语言 xhtml可扩展的超文本标记语言（语法更加严谨，大小写敏感）
3.自定义列表 dl dt（title写名词）dd(data 写名词解释)
3. img标签的必须有的两个属性 src和alt
4.相对路径，../ 返回上一层 ../../返回上两层
5.表格合并 先合并行在合并列
html语法：分为单标记(没有关闭标签)和双标记，尖括号第一个是标记，空格后面是属性="属性值"
web标准 html xhtml 语法更严格
---------------------------day2 css简介------------------------------------------------------------------
1. /*css注释*/
/*css代码必须放在css样式表里面！！！*/
/*
px : 像素
*/
2. <link rel="stylesheet" type="text/css" href="css/demo2.css">
rel="stylesheet" 建立关联性
type 定义文档类型
href css外部样式表的路径
@import和link的区别：
1、本质区别：link 属于 xhtml标签 @import > css提供的方法
2、加载顺序:link:结构和样式同时加载 @import先加载结构网速慢的情况下会导致没有样式
3、link的兼容性比较好
4、使用dom控制css样式的差别。
3. 样式表的权重关系：
内联样式的权重（优先级）最高！
内部样式表和外部样式表的权重和书写顺序有关（放在后面的权重比较高）
被覆盖的只是相同的属性！
4.ID选择符 定义页面结构
5 权重
内联样式表(1000) > id(100) > class(10) 、伪类选择符（10）> 类型选择符(1)
包含选择符的权重为选择符之和
6 选择符：
类型选择 id选择符 class选择符 特殊选择符
特殊选择符: 群组选择符 包含选择符 伪类选择符 通配符
---------------------------day3 css属性------------------------------------------------------------------------------
1.css样式清除边距，取消标签默认样式:
*{margin:0;padding:0}
ul,ol,li{list-style:none;}
2.margin:0 auto;让当前元素在父元素里面左右居中 0（上下边距）auto(左右自动)
4 css文本属性
4.1 font-size 字体大小 默认16px=1em 9pt=12px
4.2 color 颜色
4.3 font-family 文本字体 "汉字字体使用双引号" "有空格的字体使用双引号"
4.4 font-weight 文字加粗 取消加粗 font-weight:noemal <b></b><strong></strong>文字加粗标签
4.5 font-style 文字倾斜样式 取消倾斜 font-style:normal <i></i><em></em>文字倾斜标签
4.6 text-align 水平对齐方式 left right
4.7line-height 文字行高
4.8 文本修饰 text-decoration 文本修饰（下划线样式） text-decoration:none 取消下划线 <u></u> <a></a>带有下划线标签
4.9 text-indent 首行缩进 可以取负值 text-indent:2em
4.10 letter-spacing 字间距 中文英文适用
4.11 word-spacing 词间距 英文适用 中文不适用
font简写：字体大小 行高 字体 font:12px/24px "宋体"
5 css列表属性
list-style:none 去掉列表符号
6 css浮动属性
float:left right
只要子元素有浮动。父元素必须设置height!!!
只要设置浮动，必须外边嵌套一个父元素
---------------------------day4 padding和margin用法------------------------------------------------------------------------------
padding的用法：
1：padding是长在盒子里面的（内容和边框之间的距离）
2：padding会把盒子撑大。
3：如果想让盒子保持原有的大小，必须在宽高的基础上减去padding的值。
4：padding是用来调整子元素（文字、图片、元素...）在父元素里面的位置关系
5:给单一某个方位添加padding值 padding-left/right/top/bottom:
6:padding值得设置方式：
四个值：上 右 下 左
三个值：上 左右 下
二个值：上下 左右
一个值：四个方向
7：padding不会对背景图造成影响！！！
margin的用法：
1：margin长在元素外面的
2：margin调整的是元素与元素之间的位置关系
3：margin-left/right/top/bottom:
4:
四个值：上 右 下 左
三个值：上 左右 下
二个值：上下 左右
一个值：四个方向
5:margin容易出现的问题
a:两个上下排列的元素之间的margin值不会叠加，会按照较大值设置
b:长在父元素里面的第一个元素如果有margin-top:会错误的添加在父元素上面
---------------------------day8 高度自适应用法------------------------------------------------------------------------------
高度自适应的两个目的：
1：内容多的时候，让内容撑开父元素高度
2：内容少或者没有内容的时候，让父元素保持最小高度
min-height IE6不支持 _height下划线属性ie6能识别，非ie6浏览器不能识别
height属性 在IE6中默认解析的就是最小高度
如果考虑IE6的情况下最小高度的设置：
1：_height:value;min-height:value;
2:min-height:value;height:auto!important;height:value;
高度塌陷问题：
/*
高度塌陷：
出现高度塌陷的场景：当子元素有浮动，并且父元素没有高度或者是设置最小的高度的时候，父元素会出现高度坍塌的BUG.
解决高度塌陷的方法：
1：给高度塌陷的元素添加overflow:hidden;
原理：overflow:hidden;触发了一个BFC
bfc布局规则：计算BFC高度的时候，浮动元素也参与计算
弊端：会隐藏一些定位到外面的元素
