一、HTML基础
1、web的组成
结构（HTML、XHTML）表现（css）行为（js）
2、W3c万维网联盟
3、Ecma欧洲电脑厂商联合会
4、HTML超文本标记语言
5、编辑器dw
新建：Ctrl+n 保存：ctrl+s 另存为：ctrl+shift+s 打开：ctrl+o
查找替换：ctrl+f 首选项参数面板：ctrl+u 边距窗口切换：ctrl+tab
显示隐藏面板：f4 浏览页面：f12
6、Ps快捷键
新建：Ctrl+n 保存：ctrl+s 另存为：ctrl+shift+s 打开：ctrl+o
撤销：ctrl+z 选框工具：m 吸管工具：i 移动工具：v 抓手工具：h
标尺：ctrl+r 自由变换：ctrl+t
截图：选框工具选中——ctrl+c——ctrl+n——enter——ctrl+v——ctrl+alt+shift+s
7、命名规则：
以英文字母开头、可以使用数字、下划线，不能使用中文空格特殊字符。
8、站点建立（便于资源整合）
站点——新建站点——名称（遵循命名规则）、找到存储路径
9、HTML5的基本结构
<!doctype html>声明文档类型
10、修改编码格式：
修改——页面属性——标题/编码
11、HTML的基本语法(标签可以叫做元素、标记)
单标签<标签 属性=”属性值”>
双标签<标签 属性=”属性值”></标签>
12、HTML的标签
标题字体
段落标签
空格
版权图标©
大于号>
小于号<
加粗：
倾斜：
下划线：
删除线：
上标：
下标：
强制换行：
水平线：
13、列表
无序列表：
有序列表：
自定义列表：
14、出入图片
<img src=”图片路径” title=”提示信息” alt=”替换文本” border=”边框” width=”宽” height=”高”
三种相对路径：
当当前文件与目标文件在同一目录下直接写 文件名+拓展名
当当前文件与目标文件所在文件夹在同一目录下 目标文件夹名+文件名+拓展名
当当前文件所在文件夹与目标文件所在文件夹在同一目录下 …/目标文件夹名+文件名+拓展名
15、超链接
Target=”_blank” 在新窗口打开
Target=”_self” 在当前窗口打开（默认值）
16、表格
表格列标题 把td换成th
表格标题
Border:边框
Width：宽
Height：高
Cellspacing：单元格与单元格之间的距离
Cellpadding：单元格与内容之间的距离
Colspan：合并列
Rowspan：合并行
Align：水平对齐方式（如果写在table里边指整个表格居中，写在tr里指整行内容居中，写在td里指单元格内容居中）
17、表单
表单的目的：收集用户信息
表单框（表单域）
Method提交方式方法：get、post
Get：从服务器上获取数据 post向服务器上传数据，post相对安全
表单控件
类型（type）：text文本框
Password密码框
Radio单选按钮（name同一组一定要一致 默认选中checked 禁用disabled）
Checkbox复选框
Button按钮
Submit提交按钮
Reset重置按钮
下拉菜单
多行文本
二、Css基础
1、css层叠样式表
2、Css的语法：由选择器和声明组成，声明由属性和属性值组成
选择器{属性:属性值;}
3、Css的三种样式表
内联样式表（行内样式）
内部样式表：
外部样式表：
创建在HTML的外部需要引用才能生效
引用方式：
三种样式表的优先级：
内联样式表优先级最高，内部和外部样式表与顺序有关，谁在后边谁生效
4、Link与@import的区别：
A、老祖宗区别：link是XHTML提供的@import由css提供，link可以引用其他文件，@import只能引用css文件
B、加载顺序的区别：link与HTML同时加载，@import当HTML加载完成之后再加载
C、兼容性区别：@import由css2.1提出的只有在ie5以上才能支持，link无此要求
D、控制dom时：link支持@import不支持
5、标签选择器
HTML标签{属性:属性值;}
6、Class选择器
.class名称{属性:属性值;}
7、Id选择器
#id名称{属性:属性值;}
8、通配符
*{属性:属性值;}
9、伪类选择器(注意顺序问题)
A:link{属性:属性值;}
A:visited{属性:属性值;}
A:hover{属性:属性值;}
A:active{属性:属性值;}
10、群组选择器
选择器1,选择器2…{属性:属性值;}
11、包含选择器
选择器1 选择器2{属性:属性值;}
12、选择器的权重问题
内联样式表权重1000
Id选择器权重0100
Class选择器权重0010
标签选择器权重0001
继承权重0000
伪类选择器权重0010
包含选择器权重为两者之和
群组为自身的权重
13、Css注释/注释/
三、Css的核心属性
1、字体属性
设置字体：font-family（中文要用引号，多个用逗号隔开，多个英文单词组成用引号，一个英文不用引号）
设置大小：font-size（px、pt、em、rem）
9pt=12px 1em=16px 0.75em=12px 网页中常用的文字大小为偶数
设置文字颜色：color：#f00;
设置行间距：line-height（单行文本的行间距等于元素高度可以实现垂直方向的居中， 可以设置单位，不设置单位指的是倍数关系）
设置文字是否加粗：font-weight（bold加粗 normal不加粗）
设置文字是否倾斜：font-style（italic倾斜 normal不倾斜）
设置小写字母变成小型的大写字母：font-variant（small-caps）
复合式写法：font：style variant weight size/line-height family
Font:size/line-height family;
2、文本设置：
水平对齐方式：text-align（left、right、center、justify）
垂直对齐方式：vertical-align（top、middle、bottom）只能与img连用
文本修饰：text-decoration（none没有线 underline下划线 overline上划线 line-through删除线）
首行缩进：text-indent（取值取决于字体大小，可以设置负值）
字符间距：letter-spacing
词间距：word-spacing
英文单词大小写：text-transform（capitalize首字母大写 uppercase全大写 lowercase全小写）
文本阴影：text-shadow（水平偏移 垂直偏移 模糊度 阴影颜色 css3.0）
3、背景设置
背景颜色：background-color
背景图片：background-image：url(图片路径);
背景图片重复方式：background-repeat（repeat、no-repeat、repeat-x、repeat-y）
背景图片的位置：background-position（左右 上下）
可以是方向值left center right top center bottom
如果上下左右都是居中只写一个center即可
值还可以是具体数值：负值向左向上
复合式写法：background：color image repeat position
背景的固定：background-attachment（scroll滚动 fixed固定）
4、边框设置
综合性写法：border：颜色 粗细 线型（无顺序要求）
线型：solid实线 dashed虚线 dotted点状线 double双实线
可以单独设置某一边border-top/bottom/left/right
可以单独修改某一边的粗细border-top-width
可以单独修改某一边的线型border-top-style
可以单独修改某一边的颜色border-top-color
5、列表的设置
去掉列表符号：list-style/list-style-type
6、浮动float（none、left、right）
浮动的三大特征：浮动的元素脱离正常的文档流，会占据自身的空间，当宽度不够时会制动换行显示，后边的紧跟着前边显示。
元素浮动之后可以在一排显示
7、清除浮动clear（left、right、both）
8、
四、盒模型
1、盒模型的组成：margin（外边距、外补丁） padding（内边距、内补丁） border（边框） 内容（宽、高）
2、Padding
一个值代表：上下左右
两个值代表：上下 左右
三个值代表：上 左右 下
四个值代表： 上 右 下 左
3、Margin（可以设置负值）
一个值代表：上下左右
两个值代表：上下 左右
三个值代表：上 左右 下
四个值代表： 上 右 下 左
4、背景颜色或者背景图片不能延伸到margin 区域
5、Margin-top不生效解决方式
A、给父元素添加边框（会影响实际大小）
B、给父元素添加padding（会影响实际大小）
C、给父元素添加overflow：hidden（会裁切隐藏超出内容）
D、给父元素添加float（会影响布局）
E、给自身添加float
6、盒子的实际高度宽度的算法
宽=margin-left+margin-right+border-left+border-right+padding-left+padding-right+width
高=margin-top+margin-bottom+border-top+border-bottom+padding-top+padding-bottom+height
7、
五、溢出
1、容器的溢出overflow
Hidden：隐藏超出内容，且不可见
Scroll：以滚动条形式显示超出内容
Auto：自动，当超出时显示滚动条，不超出不显示
2、空白空间white-space
Pre：保留空白空间，不会换行
Pre-line：保留空白，会换行
Pre-wrap：保留空白符，遇到边距换行
Nowrap：强制在一排显示
3、文本溢出text-overflow
Clip：裁切
Ellipsis：显示省略号
4、单行文本溢出显示省略号
A、宽度 width
B、强制在一排显示white-space：nowrap
C、容器溢出隐藏：overflow：hidden
D、文本溢出显示省略号：text-overflow：ellipsis
六、元素类型
1、元素分类
内联元素、块状元素、可变元素
2、元素类型的转换display（18个属性值）
3、Block转换成块状
4、Inline转换成内联
5、Inline-block行内块（只有行内块才能与vertical-align连用 img input）
6、None隐藏
7、List-item列表元素（li的默认类型）
8、内联元素与块状元素的区别（div与span）
A、div为块状元素，span为内联元素
B、块状元素可以设置宽高，内联元素不可以
C、块状元素自上而下排列，内联元素自左向右排列
D、内联元素遵循和模型，可以设置margin、padding、border但是有些属性不能正常显示
9、置换元素和非置换元素
置换元素：指通过属性来决定显示效果 img、 input textarea select
非置换元素：内容直接表现在浏览器中
七、元素定位
Position：static relative absolute fixed
Static：默认值
Relative：相对定位，相对自身默认的位置
Absolute：绝对定位，如果父元素有定位，根据父元素定，如果没有根据浏览器（会脱离正常文档流，不占据空间）
Fixed：固定定位，根据浏览器
固定宽高div如何实现水平垂直居中
设置绝对定位或者固定定位，距离上边50%，距离左边50%，margin-top负的高的一半，margin-left负的宽的一半。
定位可以造成层叠效果，谁在后边谁在上边显示，要想改变显示顺序用z-index
Z-index必须与定位连用才生效，值越大越在上边显示，可以设置负值，必须是整数
设置锚点：作用在同一页面的不同位置进行跳转
想跳到哪里去就给谁添加id=“名称” 然后a标签里href属性写上id名称，前边的#不能丢。
透明属性：filter:alpha(opacity=值)值的取值0-100，opacity：值，值的取值0-1
八、图片整合
1、图片整合的原理、优势（好处）
利用背景图片可移动性（background-position），将小图标整合在一起，减小图片的体积，提高页面加载速度，提高用户体验度
减少向服务器的请求次数，提高页面加载速度
避免图片的命名冲突
2、滑动门
元素的背景图片可以叠加性，制作兼容传统导航布局，还可以实现高效扩展性的导航。
九、宽高自适应
1、最小高度自适应的解决方法
A、min-height：value；_height:value;
B、Min-height:value; height:auto !important; height:value;
2、浮动元素的父元素高度自适应（高度塌陷）解决方式方法：
A、给父元素添加overflow：hidden 优点：简单易记 缺点：溢出内容被裁切
B、在浮动的元素下边添加一个空div{clear:both; height:0; overflow:hidden;}
优点：溢出不会被裁切 缺点：div的增加影响结构，不利于搜索引擎的优化
C、万能清除法
父元素:after{content:”.”; clear:both; display:block; height:0; overflow:hidden; visibility:hidden;}
优点：超出之后不会被裁切，不会影响结构。缺点：代码复杂不便于记忆
3、Visibility:hidden与display：none的区别：
两者都能实现隐藏，visibility隐藏后空间会保留，display是彻底隐藏，空间不会保留。
4、元素高度自适应窗口高度
Html,body{height:100%} 元素本身设置{height:100%;}
5、伪对象选择符
:after{content:”文本”;} 在内容之后
:before{content:url(路径)} 在内容之前
：first-letter第一个字符
：first-line 第一行
::selection选中的状态
十、浏览器的兼容
1、五大浏览器内核及其代表作
Trident：ie，市场份额最大，不开源
Gecko：火狐，跨平台性，开源
Webkit：谷歌，苹果，开源
Presto：欧朋，排版引擎渲染速度最快
Blink：谷歌和欧朋共同开发的排版引擎
2、常见的兼容问题
A、图片会撑大3像素（将图片变成块状，不换行在一排上写（ie6支持））
B、Ie6的双边距问题（给浮动的元素添加display:inline）
C、Ie6的默认高度问题（font-size：0/overflow:hidden;）
D、表单行高不一致（float：left）
E、按钮大小不一致（单独设置高度/用a 标签代替/在外边添加一个标签将按钮样式清空/做背景图片）
F、百分比（清除右浮动clear：right）
G、透明：（filter：alpha（opacity=value）；opacity：value）
H、鼠标指针变成小手（cursor：pointer）
3、过滤器
A、*支持ie6、ie7
B、下划线支持ie6
C、！Important关键字，将属性权重设置最大
D、\9ie浏览器支持
十一、表单表格高级及css统筹
1、表单的组成：表单域form 表单控件input 提示信息label
2、表单字段集：fieldset
3、字段集标题：legend
4、表格数据行组成：表头thead 表体tbody 表尾tfoot
5、表格的分组rules=”groups” 时与col和colgroup连用
6、用css合并单元格之间的间距border-spacing
7、合并相邻单元格边框border-collapse：collapse
8、当单元格无内容时隐藏empty-cells：hide
186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
