一、html
1、锚链接
（1）用法：
从A页面的甲位置跳转到本页面中的已位置（同一页面）
从A页面的甲位置跳转到B页面中的乙位置（两个页面）
（2）创建步骤：
a. 创建跳转标记
<a name="marker">乙位置</a>
b.创建跳转链接
<a href="#marker">甲位置</a>
2、html列表
<!--实心小圆点列表 无序列表 也是默认状态--> <ul style="disc"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> <!--实心矩形列表--> <ul style="square"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> <!--空心列表--> <ul style="circle"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> <!--列表的嵌套--> <ul> <li>列表1 <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> </li> <li>列表2</li> <li>列表3</li> </ul> <!--有序列表--> <ol style="A"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ol> <ol style="a"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ol> <ol style="I"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ol> <!-- 定义列表--> <dl> <dt>水果</dt> <dd>苹果</dd> <dd>香蕉</dd> <dd>橘子</dd> </dl>
3、表单
（1）关联表单元素
语法：
<label for = "关联元素ID"></label>
栗子：
<label for = "username" > 姓名：</label> <input name = "name" id = "username" size = "20" />
或
<label>姓名：<input name = "name" size = "20" /></label>
（2）只读属性
readonly: 希望某个框内的内容只允许用户看，不能修改
（3）禁用属性
disabled:因没达到使用的条件，限制用户使用
栗子：
<input type = "text" name = "" value = "123" readonly = "readonly" />
<input type = "button" name = "" value = "点击" disabled = "disabled" />
4、表格
（1）表格常用属性
width/height :表格的宽/高，单位可以为像素（px）或百分比（%）
border :默认为表格边框为0（无边框），可设置为数值
cellspacing :控制单元格之间的间距，可设置为数值
cellpadding :控制单元格边框和其内容的间距，可设置为数值
align :设置文本的水平对齐方式，可为left,center,right
valign :设置文本的竖直方向对齐方式，可为top,middle,bottom
bgcolor :设置背景色
<table border="1" width="100%" cellspacing="0" cellpadding="0" bgcolor="red"> <tr> <td align="center">第一个单元格</td> <td>第二个单元格</td> </tr> <tr> <td align="center">第一个单元格</td> <td>第二个单元格</td> </tr> </table>
（2）表格高级标签
a、表格的分组标签
<table width="100%" cellpadding="0" cellspacing="0" border="1"> <caption>年终数据报表</caption> <thead bgcolor="#99ffff"> <tr> <th>月份</th> <th>收入</th> </tr> </thead> <tbody bgcolor="#009966"> <tr> <td>1月</td> <td>100</td> </tr> <tr> <td>2月</td> <td>100</td> </tr> <tr> <td>3月</td> <td>100</td> </tr> <tr> <td>4月</td> <td>100</td> </tr> <tr> <td>5月</td> <td>100</td> </tr> <tr> <td>6月</td> <td>100</td> </tr> </tbody> <tfoot bgcolor="#ffff00"> <tr> <td>平均月收入</td> <td>196.67</td> </tr> <tr> <td>总计</td> <td>1180</td> </tr> </tfoot> </table>
b、表格的跨行与跨列
跨列：
<td>标签的colspan 属性，值为数字，表示合并几列；
跨行：
<td>标签的rowspan 属性，值为数字，表示合并几行；
<table width="400" cellpadding="0" cellspacing="0" border="1"> <tr> <th colspan="3">学生成绩</th> </tr> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> <tr> <td rowspan="2">李四</td> <td>语文</td> <td>88</td> </tr> <tr> <td>数学</td> <td>91</td> </tr> </table>
5、XHTML框架结构
（1）<iframe>标签
作用：创建文档的内联框架
属性：
src（需引入的文档路径）
width/height（设定框架的宽与高）
scrolling（是否显示滚动条，auto | yes | no）
frameborder（是否要边框，1显示，0不显示）
name（内联框架的名称）
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
二、css
1、css复合选择器
（1）并集选择器
（2）交集选择器
（3）后代选择器
2、css中的优先级
（1）行内样式 > 内部样式表 > 外部样式表（后两者就近原则）
（2）ID选择器 > 类选择器 > 标签选择器
3、css的属性
（1）文字、文本属性
font-style :设置字体风格；
font-weight :设置字体粗细；
font-size :设置字体的尺寸；
font-family :设置字体系列；
font :简写属性，作用是把所有针对字体的属性设置在一个声明中（注意顺序）
font : font-style || font-variant || font-weight || font-size / line-height || font-family
文本属性：
color : 设置文本的颜色；
line-height : 设置文本的行高；
text-align : 设置文本的对齐方式，left 、center 、right；
text-decoration : 设置文本装修，underline 、none 、line-through；
（2）背景属性
background-color : 背景色；
background-image : 背景图片，如：background-image:url("./images/bg.png");
background-position : 背景开始位置，包括水平方向（X轴）和竖直方向（Y轴）的设置
X轴取值： left ，center，right 或像素值或百分比；
Y轴取值：top ，center ，bottom 或像素值或百分比；
background-repeat : 背景填充方式，取值：repeat-x | repeat-y | no-repeat ；
background : 合写方式，如 background: #fff url(bg.png) left top no-repeat;
（3）列表属性
list-style-image : 将列表设置为列表标志； list-style-image:url("./arrow.gif");
list-style-type : 设置列表项标志的类型：disc（实心圆）| circle（空心圆） | square（正方形）；
list-style : 以上属性的合并简写，或none去掉默认属性设置；
（4）超链接伪类
a:link {color:red} /*未访问的链接*/
a:visited {color:blue} /*已访问的链接*/
a:hover {color:green} /*当有鼠标悬停在链接上*/
a:active {color: yellow} /*被选择的链接*/
用法：love hate！
（5）鼠标形状控制：
cursor属性：
url : 需使用自定义光标的URL;
default : 默认光标；
pointer : 超链接的指针；
wait : 指示程序正在忙；
heip : 指示可用的帮助；
text : 指示文本；
crosshair : 鼠标呈现十字状；
move : 对象可被移动；
（6）盒子模型
margin : 外边距；
padding : 内边距；
border : 边框；
margin : 0 auto; 盒子在页面居中显示；
盒子模型总尺度 = border + padding +margin + 内容尺寸（宽/高）
块元素才能完全适用于盒子模型：
使用display 属性来互相转化：
none : 元素隐藏，不可见，不占据空间；
visibility : hidden; （元素隐藏，但占据空间）
block : 转为块级元素，独占一行；
inline : 转为内联元素，不换行；
inline-block : 行内块元素；
（7）浮动属性
float 属性：
取值：left，right，none
作用：
a、块元素同行排列显示，一般用于排版、分栏显示；
b、设置浮动属性后，脱离文档流向指定的左边或右边对齐，直到父元素的边界或浮动的元素；
注意：
使用浮动后要及时清除，以免影响其后的网页元素；
清除浮动的方法：
几个并列的合资同时加浮动，它们的父级盒子出现如下情况：
a、背景不能显示；
b、边框不能撑开；
清除浮动方法一：
添加新元素，应用 clear : both;
清除浮动方法二：
父级添加： overflow : auto; zoom : 1;
//zoom : 1; 是在处理兼容性问题；
清除浮动方法三：（据说是最高大上的方法 :after 方法）
（注意：作用于浮动元素的父级）
#box{ zoom : 1;} /* ==for IE6/7 Maxthon2 == */
#box : after{ clear : both;content : '.' ;display : block; width : 0; height: 0;visibility:hidden;} /* ==for FF/chrome/opera/IE8== */
注意： 内联元素添加浮动后，元素自动转化为块级元素；
（8）overflow 属性
作用：定义溢出元素内容区的内容会如何处理；
取值：
visible （默认）
auto （自动超出部分有滚动条）
hidden （多余的隐藏）
scroll （即使没有超出的部分，也有滚动条）
（9）定位属性
position 属性：
a、relative （相对定位）
相对它原来的位置，通过指定偏移，到达新的位置；
仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响；
b、absolute（绝对定位）
脱离文档流；
相对已设定非static定位属性的父元素计算偏移量；
绝对定位会找到与自己最近的父类来定位，不是自己的父类与自己无关；
绝对定位找到了自己的父类之后，要看这个父类是否进行了相对定位，没有相对定位的话就不会找这个父类来定位;
绝对定位会寻找一个 距离自己最近的 父类 ，并且这个父类进行了 相对定位，那么这个盒子就会找这个已经有了相对定位的父类来定位。
c、fixed （相对浏览器固定定位，IE6不支持）
d、static（默认）
偏移量设置；
X轴（left、right 属性）与Y轴 （top 、bottom 属性）
可取值：像素或百分比；
e、设置定位盒子的层级：（数字越大层级越高，越在上层）
z-index:2; （数字之后没有单位，数字可以设置为负值）
（10）盒子水平垂直居中：（盒子上的盒子）
给盒子样式：
width:200px;
height:200px;
background-color:red;
position:absolute;
top:50%;
left:50%;
margin-left: -100px; 数值为宽度的一半；
margin-top: -100px; 数值为高度的一半；
三、网页布局：
（1）TABLE表格布局：
优点：简单易懂，位置很规矩；
缺点：加载速度慢，结构固定不灵活，不利于维护和SEO；
（2）框架布局：
多页面加载在同一页面，如<iframe>标签；
（3）DIV+CSS方式布局：（最合理的布局方式）
a、HTML标签：<div>标签；
b、CSS样式：float浮动和盒子模型；
优点：
a、<div>标签“干净”，网页更小，打开更快；
b、结构清晰，便于维护，利于SEO;
c、<div>标签更灵活，更好控制页面元素；
d、样式与结构相分离，更好的结构重组；
e、表现与内容相分离，利于分工协作；
（4）分区实现：
分别实现每个区域的内容：
a、重复对大区块下进行切分布局：
浮动布局；
自动居中布局；
定位布局（相对定位属性和绝对定位属性相结合）
b、确定采用合适的HTML标签：
遵循语义性标签优先原则；
结构性容器一般采用<DIV>标签；
小图标、小部件一般采用内联元素<span>标签；
列表形式的内容一般采用<UL>、<OL>标签；
表单、表格标签元素有针对性使用；
合理运用<img>标签或背景图片；
（5）完善细节：
对结构细节进行完善：
a、采用图片处理工具（ps）确定元素的大小和位置；
b、利用盒子模型调整元素之间的位置，精确到1个像素
（原则上是与UI 效果图一致）
c、对内容有预判处理：
内容超出范围的自动隐藏或换行；
图片大小或无图片情况处理；
尽量采用自动适应的方式处理；
（6）性能优化：
对制作的网页进行优化处理：
a、多采用类选择器方式，减少CSS代码；
b、压缩CSS文件代码，减小CSS文件大小；
c、减少图片的请求；
d、减少外部文件的引用；
四、倒三角和css sprite制作
（1）实现倒三角方法：
方法一：用图片背景；（背景图片可定位）
background : url(images/bg.png) no-repeat 60px -7px;
方法二：用border制作倒三角；
结构： <div class="box">我的账号<i></i></div>
样式： body,div{margin:0;padding:0;}
.box{ position: relative;width:90px;height:20px;margin:20px auto;}
.box i{ position:absolute; top:5px;width:0;height:0;border-width:9px;border-style:solid; border-color: #000 #fff #fff #fff ;}
方法三：特殊符号
结构： <div class="box">我的账号<span><i>
样式： body,div{margin:0;padding:0;}
.box{position:relative;width:90px;margin: 20px auto;}
.box span{position；absolute;top:5px;overflow:hidden;}
.box span i{ display: inline-block;width:18px;height:18px;font-style:normal;margin-top:-8px;}
（2）CSS精灵：
a、简介：
CSS精灵，又称为CSS Sprites或者CSS雪碧，是一种网页图片应用处理方式；
b、原理：
CSS精灵其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”,"background-repeat","background-position"的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置；
c、css精灵使用：
c-1、必须设置大小；
c-2、background-image:背景图片；
c-3、background-repeat:背景是否重复；
c-4、background-position:背景定位；
简写：background:url("1.png") no-repeat -10px -20px;
ps:图片垂直居中：vertical-align:middle;
d、应用场景：
d-1、网页中有很多icon小图标的情况下；
d-2、网页中的一些特殊字体用图片展示；