一、HTML基础
1、web的组成（结构HTML/XHTML表现css行为js）
2、工具的使用
Dw快捷键
复制ctrl+c 粘贴ctrl+v 全选ctrl+a 剪切ctrl+x 保存ctrl+s 另存为ctrl+shift+s
查找替换ctrl+f 撤销ctrl+z 新建ctrl+n 打开ctrl+o 预览f12 首选项参数面板ctrl+u 显示或隐藏面板f4
Ps快捷键
复制ctrl+c 粘贴ctrl+v 全选ctrl+a 剪切ctrl+x 保存ctrl+s 另存为ctrl+shift+s
撤销ctrl+z 新建ctrl+n 打开ctrl+o 标尺ctrl+r 选框工具m 裁切c 吸管i 抓手h 缩放z 前景色背景色切换x 自由变换ctrl+t 查看信息f8
截图用选框工具选中m——ctrl+c——ctrl+n——enter——ctrl+v——ctrl+shift+alt+s
3、文件命名规范
用小写英文字母数字下划线，不能用中文也不能以数字开头
4、测试工具浏览器的f12 谷歌浏览器可以测试移动端
5、HTML超文本标记语言
6、HTML5的基本结构
<!doctype html>声明文档类型
<html>html的根标签
<head> 头部区域
<meta charset=”utf-8”>声明编码格式
<title>标题</title>
</head>
<body></body>内容区域
</html>
7、HTML的基本语法
单标签（空标签）<标签 属性=”属性值”>
双标签（常规标签）<标签 属性=”属性值”></标签>
标签是尖括号里的第一个单词，标签又叫标记、元素
属性与属性之间用空格隔开，属性与属性值之间用等号链接，属性值必须写在引号里，属性与标签之间用空格隔开，属性与属性不分先后顺序
8、HTML常用标签
标题：h1-h6
段落：p
加粗：b strong
倾斜：i em
下划线：u
删除线：del
水平线：hr
上角标：sup
下角标：sub
强制换行：br
空格：
大于或：>
小于号：<
版权图标：©
布局标签：div span
注释<!---->
9、列表
有序列表<ol><li></li></ol>
无序列表<ul><li></li></ul>
自定义列表<dl><dt>只能有一个</dt><dd>可以有多个</dd></dl>
10、超链接<a href=”路径” target=”超链接的打开方式_blank在新的窗口打开”>内容</a>
11、三种相对路径
当当前文件与目标文件在同一目录下：文件名+拓展名
当当前文件与目标文件所在文件夹在同一目录下：目标文件夹名称/文件名+拓展名
当当前文件所在文件夹与目标文件所在文件夹在同一目录下：../目标文件夹名称/文件名+拓展名
12、如何插入图片<img src=”图片路径” width=”宽” height=”高” border=”边框” title=”提示信息” alt=”替换文本”>
13、 表格<table><tr><td></td></tr></table>
边框border
宽度width
高度height
单元格与单元格的间距cellspacing
内容与单元格的间距cellpadding
水平对齐方式align=”left center right”
垂直对齐方式valign=”top middle bottom”
行合并rowspan
列合并colspan
列标题把td变成th
表格标题caption
14、表单<form></form>
表单域<form name=”名称” method=”提交方式方法get/post” action=”提交路径”></form>
Get:是从服务器获取数据 post：向服务器上传数据，post相对于get安全
表单控件<input type=”类型”>
文本框：text
密码框：password
单选按钮：radio
复选框：checkbox
下拉菜单<select><option></option></select>
多行文本<textarea cols=”宽” rows=”高”></textarea>
提交按钮：submit
按钮：button
重置按钮：reset
15、
二、Css基础
1、css层叠样式表
2、css的基本语法：
Css由选择器和声明组成：其中声明又包括属性和属性值
选择器名称{属性:属性值;}
属性与属性值用冒号链接，用分号结束，属性与属性之间有无空格都可以，最后一个属性分号可以省略，建议不要省略
3、css的注释/*注释内容*/
4、Css的常用选择器
标签选择器：（一般用于改变某一类标签的默认样式）
HTML标签{属性:属性值;}
类选择器：需要引用才能生效 在标签里写class=“class名称”可以引用多个用空格隔开
.class名称{属性:属性值;}
Id选择器：唯一的，一般用于网页的外围结构
#id名称{属性:属性值;}
通配符：一般用于重置样式
*{属性:属性值;}
伪类选择器（顺序link visited hover active）
A:link{属性:属性值;}
A:visited{属性:属性值;}
A:hover{属性:属性值;}
A:active{属性:属性值;}
群组选择器:一般用于改变不同类型设置相同样式时
选择器1,选择器2,...{属性:属性值;}
嵌套（包含、后代）选择器：
选择器1 选择器2{属性:属性值;}
5、选择器的权重问题
继承的权重最小0000
标签选择器权重0001
Class选择器权重0010
Id选择器权重0100
内联样式表权重1000
嵌套选择器权重为选择器权重之和
6、三种样式表
内联样式（行内、行间）直接写在HTML标签里
例如<p style=”color:#f00;”></p>
内部样式：写在head与head之间
<style>
Css样式
</style>
外部样式：需要引用才能生效
<link rel=”stylesheet” type=”text/css” href=”路径”>
<style>
@import url(路径)
</style>
7、两种外部样式表引用的区别（link与@import的区别）
老祖宗区别：link由HTML提供，@import由css提供，link可以引用其他文件，@import只能引用css文件
加载顺序的区别：link与HTML同时被加载，@import在HTML完全加载完成之后再加载这样用户体验度不好
兼容性的区别：@import是css2.1提出，只能在ie5以上才能支持，link无此要求
控制dom时区别：link支持@import不支持
8、三种样式表的优先级
内联样式表优先级最高，内部和外部与书写顺序有关，谁在后边谁生效
9、
三、Css的核心属性
1、文字的设置
文字大小：font-size（常用字号 12、14、16、18...偶数）
常用单位：pc端 px
Em pt rem 1em=16px; 0.75em=12px; 9pt=12px;
文字字体：font-family
如果是中文需要加引号，由一组英文单词组成需要加引号，一个英文单词组成不需要，如果设置多个字体用逗号隔开（一般会设置常用字体：宋体 黑体 微软雅黑）
文字加粗：font-weight
文字倾斜：font-style
文字的行间距：line-height
可以是具体的倍数（不需要加单位）
文字颜色：color
常用六个十六进制数 可以用英文单词 三原色rab(255,0,0) rgba(255,255,0,0.5)a代表透明度取值0-1
小写字母变成小型的大写字母：font-variant
复合式写法：font:style variant weight size/line-height family
Font:size/line-height family
2、文本的设置
水平对齐方式text-align
垂直对齐方式vertical-align（和图片连用才能生效）
首行缩进text-indent（可以设置负值）
字间距letter-spacing
词间距word-spacing
文本修饰text-decoration
英文字母大小写text-transform
文本阴影text-shadow:水平偏移 垂直偏移 模糊程度 阴影颜色
3、背景设置
Background:颜色 图片 重复方式 位置
背景颜色background-color
背景图片background-image
背景重复background-repeat
背景位置background-position：值1 值2（先左右后上下，可以是方向也可以是具体数值）
背景图片固定background-attachment：fixed
4、边框的设
Border：粗细 线型（实线solid 点状线dotted 虚线dashed 双实线double） 颜色
Border-left/right/top/bottom
5、列表设置
去掉列表符号：list-style list-style-type
6、浮动float
浮动的元素会脱离正常的文档流，后边的紧跟着前边的浮动，可以使元素在一排（自左向右）显示，浮动的元素会占据自身的空间，可以造成文字环绕的效果
7、清除浮动的影响clear（left、right、both）
四、盒模型
1、盒模型的组成：margin border padding width/height
2、内边距内填充内补丁padding（padding-left/top/right/bottom）
一个值：上下左右
两个值：上下 左右
三个值：上 左右 下
四个值：上 右 下 左
3、外边距外填充外补丁margin(padding-left/top/right/bottom 可以设置负值)
一个值：上下左右
两个值：上下 左右
三个值：上 左右 下
四个值：上 右 下 左
4、Margin和padding的使用规则：能用padding不用margin
5、背景不会出现在margin区域
6、Margin-top不生效的解决方法：
给父元素添加边框（会影响盒子的实际大小）
给父元素添加padding（会影响盒子的实际大小）
给父元素添加float（会影响布局结构）
给父元素添加overflow:hidden（超出的部分会被裁切）
给自身添加float（会脱离正常的文档流）
7、盒子实际宽高的算法
宽=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
高=margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom
8、
五、溢出属性
1、容器溢出overflow
Hidden：溢出裁切，裁切的内容不可见
Scroll:溢出之后以滚动条形式显示，内容可见
Auto:如果超出显示滚动条，不超出不显示
2、空白空间white-space
Nowrap:强制在一排显示
3、文本溢出text-overflow
Clip：裁切
Ellipsis:以省略号形式显示
4、单行文本溢出显示省略号的条件：
宽度width：value
强制在一排显示：white-space：nowrap
溢出裁切：overflow：hidden
显示省略号：text-overflow:ellipsis
5、
六、元素类型
1、元素的分类：块状元素、内联元素、可变元素
2、块状元素与内联元素的区别（div与span）
块状元素可以设置宽高，内联不可以；块状元素自上向下排列，内联元素自左向右排列；块状和内联都遵循盒模型，可以设置border、margin、padding、background等但是内联元素有些属性不能正常显示。
3、元素类型的转换display（18个属性值）
变成块状：display：block（将元素设置float属性相当于变成块状）
变成内联：display：inline
变成内联块：display：inline-block(img,input 只有此元素类型可以和vertical-align连用)
隐藏：display：none
列表元素：display：list-item(li的默认元素类型)
4、大多数块状元素的display属性值为block，li的默认类型为list-item
5、大多数内联元素的display属性值为inline，img/input默认类型为inline-block
6、常用的内联元素：a span em i b strong
7、置换元素与非置换元素
置换元素是指通过属性值决定其显示效果的元素例如img input select
非置换元素是通过元素本身决定其显示的效果，HTML大部分都属于非置换元素
8、
七、元素定位
1、定位属性position
Static：静态的默认值
Relative：相对定位（不会脱离正常文档流，一直相对于自身原来位置的偏移）
Absolute：绝对定位（会脱离正常文档流，根据父元素进行定位，如果父元素没有定位则根据body、HTML或浏览器进行定位）
Fixed：固定定位（无论是否出现滚动条都会处在当前位置不动）
2、设置显示顺序z-index（必须和定位连用才能生效）
可以设置负值，值越大越在上边显示，可以无穷大无穷小，必须是整数，如果不设置z-index其显示效果是谁在后边谁在上边显示
3、固定宽高div如何实现水平垂直居中
用固定定位(出现滚动条仍然不变)或者用绝对定位(出现滚动条会发生改变)，距离上边50%；距离左边50%;距离上边距是高度的一半且是负值，距离左边距是宽度的一半且是负值
Width：200px; height:300px; position:absolute/fixed; top:50%; left:50%; margin-top:-150px; margin-left:-100px;
4、如果想子元素根据父元素进行定位，那么父元素需要写定位，如果父元素有margin：0 auto居中的话，父元素一定是相对定位，如果想用定位即便宽度时百分百也要写上
5、锚点
作用：在同一页面的不同位置进行跳转
<div id=”top”></div> <a href=”#top”></a>
6、透明设置
Opacity：value（取值0-1）;
Filter:alpha(opacity=值)（取值0-100）;
7、
八、图片整合
1、图片整合是什么（精灵图、雪碧图）
将一些有规律的小图标整合在一张图片上，利用背景图片的可以移动性实现背景图片的一个切换效果，利用background-position实现
2、图片整合的优势（好处）
减少向服务器的请求次数，减少网络带宽，提高网页加载速度，提高用户体验度
减小图片的体积
3、高度塌陷（浮动元素的父元素（没有高度时）会造成高度塌陷）
解决办法：
1、给父元素添加overflow：hidden
优点：简单易记 缺点：父元素有内容溢出会被裁切
2、在浮动的元素后边添加一个空div设置css样式：clear:both;
height:0; overflow:hidden;
优点：父元素有溢出不会被裁切 缺点：会影响整个网页结构，不利于SEO搜索引擎优化
3、万能清除法：
父元素：after{content:””;display：block; height:0; overflow:hidden; clear:both; visibility:hidden;}
优点：父元素有内容溢出不会被裁切，也不会影响网页结构
却点：复杂不利于记忆
4、
4、Display:none与visibility:hidden的区别：
两者都能实现隐藏，display是彻底隐藏不会占据空间，visibility内容隐藏会占据空间，留出空白
5、
九、宽高自适应
1、最小高度自适应兼容性解决办法：
Min-height:value; _height:value;
Min-height:value; height:auto !important; height:value;
2、元素的高度自适应窗口的高度
Html,body{height:100%;} 元素自上{height:100%}
3、伪对象选择符
标签：after{content:””;}在内容之后
:before{content:””;}在内容之前
First-letter:第一个字符
First-line：第一行
：：selection选中的状态
4、
十、兼容性
1、五大浏览器内核及其代表作
Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器
代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于windows平台，且是不开源的。
Gecko(壁虎)：代表作品Mozilla Firefox 是开源的,它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行。
Webkit : 代表作品Safari、Chrome ， 是一个开源项目。
Presto : 代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。
Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。
2、常见浏览器的兼容性及解决方式方法
1）、图片间隙 为图片设置display：block
2）、ie6的双边距问题，给浮动的元素添加display：inline
3）、ie6 的默认高度问题，添加font-size：0/overflow：hidden
4）、表单行高不一致：添加float
5）、按钮大小不一致：用a标签去代替，给按钮单独设置宽高、用背景图片、在外部添加一个标签
6）、百分比：清除右浮动clear:right;
7）、背景透明：filter:alpha(opacity=value); opacity:value
8）、鼠标指针：cursor:pointer(将鼠标变成小手型)
9）、_ie6
10）、*ie6 ie7
11）！Important将优先级设置最大
12）、\9ie浏览器
3、页面制作步骤及需要注意事项
一、写页面的框架（测量时按照内容的宽度去设置网页的宽度，当其背景颜色是占整个页面宽度时只设置高度及背景颜色，里边写一个固定宽高的div使其处于居中位置）
二、Css先去掉浏览器解析的默认值：margin：0; padding：0; 超链接去掉下划线，列表去掉列表符号，图片去掉边框
三、如果两个元素想在一排显示：都写浮动（如果一个不写，在低版本浏览器里将不显示在一排。）
四、上边元素有浮动下边一定要清除浮动
五、Input框里默认值需要添加line-height（不添加ie浏览器将不处于居中位置）
六、写页面时一定要做好相关注释，以便后期维护
七、起名时要尽量语义化、结构化
4、
十一、表单表格的高级
1、表单的组成：表单域form 表单控件input 提示信息label（表单字段集fliedset 字段集标题legend）
2、表格按数据行分组：表头thead 表体tbody 表尾tfoot
3、单元格与单元格的间距属性border-spacing
4、合并相邻单元格边框border-collapse：collapse
5、单元格无内容时隐藏empty-cells：hide
6、Css统筹（网页的优化方式）
文件的划分（结构、标签、类型、设备）
头部关键字、描述信息、作者
内容的超链接添加title属性不用flash动画不用图片热点
插入图片添加alt和title属性
为网站做个网站地图
多用静态页面少用动态页面
提高pr值（交换友情链接）
代码结构简单清晰，标签正确嵌套，取名字要语义化、结构化
7、Bfc相关内容（bfc文档）
浙公网安备 33010602011771号