www--万维网（环球信息网）简称web
分为web客户端和web服务器程序
www可以让web客户端（常用游览器）访问游览web服务器上的页面
w3c--万维网联盟
文件名的命名规范：
不能数字开头
在项目不可用汉字命名
不能出现特殊字符
html
概念：
1.描述网页的语言
2.超文本标记语言，由一套标签组成
3.不是编程语言
声明：告诉游览器用什么标准解析网页
网页的组成部分：结构层，表示层，行为层
标签：
概念:
1.由<>包围的关键词
2.标签通常成对出现，分为标签开头和标签结尾
3.有部分标签是没有结束标签，称为单标签，单标签必须用 / 结尾
组成：
标签名 标签内容 标签属性
语义化标签：
概念：根据标签名就能判断出标签内容
作用：
1.网页结构层次更清晰
2.更容易被搜索引擎收录
3.更容易让屏幕阅读器读出网页内容
注：页面中所有的内容，都要放在HTML标签中
标签的内容可以是其他标签
2html元素
Document
标题标签
标题1
标题2
标题3
标题4
标题5
标题6
段落标签
段落标签
换行标签
水平线
强调标签
倾斜
倾斜
加粗
加粗
图片标签
超链接
邮箱
列表标签
Document
css
概念：css全称层叠样式表，它主要是用于定义HTML内容在游览器内的显示样式
引入方式：
1.外部样式引入
link
@import
2.内部样式
代码通常放在标签内
3.内联样式
语法：css样式由选择器和声明组成，而声明又由属性和值组成
选择符{属性：值}例：p{color:red}
选择符：又称选择器。指明网页中要应用样式 规则的元素
选择器：
标签选择器
类选择器
di选择器
通配符选择器
后代选择器
子元素选择器
群组选择器
伪类选择器
背景：
背景颜色:backgroup-color
背景图片:backgroup-image
背景图片位置:backgroup-position
背景图片重复:backgroup-repeat
背景图片定位:backgroup-attachment:scroll/fixed
简写
backgroup：#fff url(../) no-repeat fixed center
考点：
1.link和@import的区别（无样式闪烁问题FOUC）
@import是css提供的语法规则，只有导入样式表的作用：link是html提供的标签
不仅可以加载css文件，还可以定义RSS，rel连接属性等。
加载页面时，link标签引入的css被同时加载：@import引入的css将在页面加载完毕后被加载
@import是css2.1才有的语法，故只可在IES才能识别；link标签作为HTML元素，不存在兼容性问题
2.三种引入样式的优先级
3.选择符的优先级
通配符 0 标签 1 类/伪类/属性 10 ID 100 行内样式 1000 important(无限大)
Document
基本样式:
宽 高 鼠标样式 可见样式（display：none不占空间;visibility:hidden占空间的；opacity(透明度):0） 溢出隐藏（overflow:scroll 溢出出现滚动条） 透明度
字体样式:
字体 font-family
字号 font-size
字的样式:font-style
字的粗细:font-weight
字的颜色:color
文本属性:
行高:line-height
文本修饰:text-decoration
缩进:text-indent
字符间距:letter-spacing
空白间距:word-spacing（主要应用于英语文章，中间有个空格）
英语大小写:text-transform:capitalize/uppercase/lowercase
文字水平对齐方式:text-align
文本所在行高垂直对齐方式:vertical-align
5css盒模型
Document
盒模型：
组成部件：外边距+边框+内边距+内容
IE盒模型和标准盒模型切换
box-sizing:border-box;(IE盒模型)
元素分类
块级元素
1.每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2.元素的高度，宽度，行高以及顶和底边距都可设置。
3.元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度
-
6css浮动
Document
浮动原理：
1.浮动使元素脱离文档普通流，漂浮在普通流之上的。（所谓的脱离文档流，就是不占空间）
2.浮动元素依然按照在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘
遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。
3.浮动会产生块级框（相当于设置了display：blink），而不管该元素本身是什么
- 1
- 2
- 3
- 4
Document
相对定位（相对于原位置）
1，需要设置position:releative(相对定位)
2.它通过left,right,top,bottom属性确定在正常文档流中的偏移位置
3.相对于原位置移动，移动的方向和幅度由left,right,top,bottom属性确定，偏移前的位置保留不动
4.z-index层级设置
绝对定位（相对于父类）
1.需要设置position:absolute(绝对定位)
2.使用left,right，top,bottom属性相对于对其最接近的一个具有定位属性的父包含块进行绝对定位
3.如果不存在这样的包含块，则相对于body元素，即相对游览器窗口
4.z-index层级设置
固定定位（相对于网页窗口）
与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随游览器的元素
会始终位于游览器窗口内视图的某个位置，不会受文档流动影响，这与backgroup-attachmet:fixed属性的功能相同。
4.z-index层级设置
8页面布局
Document
布局思路：
从外向里
从上至下
从左到右
样式编写顺序：
1.定位（float postition）
2.宽，高，边距
3.文字样式
4.背景样式
5.过渡 动画
样式书写规范：
1.0.5可以写.5 0可以省略
2.对于可以简写的属性尽量简写
3.给予元素添加样式前些父级类名
4.布局是尽量使用类，不要使用id
问题：
1.乱码问题 编码
2.样式引入无效问题（属性丢失，路径错误）
3.清除浮动问题
4.定位乱的问题---找绝对定位的父级添加相对定位
5.a标签鼠标经过无效问题--：a:link a:visited a:hover a:active 顺序乱了，鼠标经过无效
兼容性问题（css HACK）
概念：css hack 是通过在css样式中加入一些特殊的符号，让不同的游览器识别不同的符号
css属性Hack,css选择器hack以及IE条件注释hack, hack主要针对IE游览器
1.属性和hack:
ie6能识别下划线“_”和星号“*”，
ie7能识别星号“*”，但不能识别下划线“_”,
而firefox俩个都不能认识
2.选择符级hack：
ie6能识别*html .class{},
ie7能识别*+html .class{}或者*：first-child+html .class{}
3.ie条件注释hack
