html是超文本标记语言！
基本结构
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<title>这里是标题</titel>
<meta charset="UTF-8">
</head>
<body>这是内容</body>
</html>标签+文本+属性=html
声明文档解析类型，他是告诉浏览器用那个版本的html
HTML 4.01 与 HTML5 之间的差异
在 HTML 4.01 中有三种 声明。在 HTML5 中只有一种：
<!DOCTYPE html>
常用的 DOCTYPE 声明
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"><pre>预格式的文本，通常这里会保留 空格符，换行符。文本保留原来的格式</pre>选择器：需要被改变样式的html元素
css 是会继承的
# ：id选择器
* ：通配符---》比如#myclas * {} 就是myclass下所有的元素
. ：class 选择器
直接写html标签名： 元素选择器
.classone.classtwo : 连在一起的class（后面的点没有空格）
.father .childe : 后代选择器，（两个class之间有空格），所有的子
.father>.childe : 子层选择器，（仅仅对儿子，不玩孙子） >仅仅是下一层
.one + .two : 相邻兄弟选择器(紧贴着的，并且在后面的)
.one ~ .two : 通用兄弟选择器( 父类里兄弟 ，并且在后面的)
逗号隔开的：表示群组
:first-child 第一个
:last-child 最后一个
:nth-child(2) 从第一个开始数，第二个 ，2可以用表达式比如 2N+1 表示1,3,5.... even或者odd 表示偶数或者奇数
:nth-last-child(3) 从最后开始数，倒数第三个
:first-line 首行
:first-letter 首个字符
:before p:before 在每个 <p> 元素的内容之前插入内容。插入内容用 content：“插入的内容”
:after p:after 在每个 <p> 元素的内容之后插入内容。
块级元素：会占一行显示，并占据一定矩形空间，可以通过设置高度，宽度，，内外边距来调整
行内元素：可以一行并排显示，直至放不下才另起一行
给行内元素设置高宽 内外边框属性效果无效
让一个元素可以设置高宽，又想让他以行内形式展示 用display: inline-block;
left 于margin-left 的区别在于 margin-left 占空间，
left不占空间
z-index
在兄弟节点之间，两者都设置了position
z-index越大，该节点就在越上层
父层不可能覆盖子
父1
父2
父2的子1
想要 父1 覆盖 子1 仅仅把 父1 z-index>父2 z-index 就行
float
如果 父没有设置 width 或height
子设置了float 那么父由于没有子（设置了float的子块被当做不存在） 就被当做不存在，而消失。 （div之类的没有子元素 会不占空间）
块会把 设置了 float的 块当不存在，但是 行内元素还是会把设置了float的当做存在
overflow和 float的配合使用： 把块当成存在–
opacity和visibility的区别：
display:none 删除–
{ display: none; /* 不占据空间，无法点击 */ }
{ visibility: hidden; /* 占据空间，无法点击 */ }
小结如下：
1 opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
2 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
3 display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样
超出点点点
overflow:hidden
text-overflow : clip | ellipsis
用chrome 浏览器开发
跨域问题
–args –disable-web-security
手机适应
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">app
head 高度 一般 46px
tab 56px
button 56px
