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高度的时候,浮动元素也参与计算

弊端:会隐藏一些定位到外面的元素

原文地址:https://www.cnblogs.com/hanguidong/p/8961940.html