html5学习笔记

html学习思维导图：

padding和margin的选择：

父容器与子容器的距离控制用子容器的margin；

父容器内的文字距离用padding控制。

选择器的种类：

第一 id   #xxx
第二 class   .xxx
第三 标签  div  p  body 等
第四 后代  div p{}    .a .b{} 等 表示所有空格后面的选择器生效
第五 子代   div > p  只有大于号后面的选择器生效 不继承下去了
第六 群组选择   div,p,a{} 记住 是逗号 不是小数点，表示div p a标签都生效
第七 伪选择器  比如 a:link  让鼠标放上去的时候生效

伪类选择器
a:link就是a，表示unvisited(a:link在低版本IE浏览器无法识别，所以一般用a就可以了)
a:visited
a:hover
a:active
注意顺序(LVHA)，否则不发生作用

第八 通用选择器 比如 p *{}  表示p标签后面的所有标签都生效
第九 相邻选择器  比如 p+div{}  表示 p后面的第一个div生效  后面的 都无效
第十 属性选择器  比如 p[title='aa'] {} 表示 p标签里面是否有title等于aa的属性 有的话就生效

margin的重叠现象：
相邻的普通元素，上下边距不是简单的相加，而是取其中较大的边距。
但是浮动元素例外，没有重叠现象。因此水平边距永远不会重叠

父子级别的元素会出现竖直方向的margin的重叠现象

块级元素和内联元素：

块级元素（div）独占一行，能设置宽高
内联元素（span）不独占一行，不能设置宽高，竖直方向没有padding和margin

替换元素：
替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。
比如：<input /> type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样
(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。