## css&html
1.切片后导出web格式导出图片
2.tinypng.com(压缩图片的网站)
3.<img src="image/图片名.jpg(图片地址)" alt"图像说明">(alt只有在图片加载失败时才出现)（alt利于对图片进行搜索）
4.overflow:hidden;(超出隐藏)
5.
< a href="网址" target="_black">
网站首页
</a>
(超链接)(_black在新窗口打开页面)（网址要写全）
6.a{
text-decoration:none;
}
(去掉超链接的下划线)
7.f12（快速查看网页原代码）
8.nav_ul a{
color:#333;
}
(将超链接的颜色改为黑色)
9.nav_ul a:hover{
}
(当鼠标移动到超链接上时改变超链接的颜色和背景)
10.ctrl+ '+'放大PS画布
11.line-height:行高;(使单行文字上下居中)
12.block标签：块级标签（独霸一行；设置宽高）
inline标签：行内标签 内敛标签（共处一行；设置宽高）
inline-block:行内块（共处一行；方便设置宽高）
display:inline-block;(改变板块属性，轻易改变宽高)
13.text-align:center;(内容水平居中)
14.英文：Arial,Verdana
中文：微软雅黑（Microsoft Yahei），宋体（Simsun），黑体，苹方
font-family:....;(英文字体在前，中文字体在后，中文字体要打引号)
font-size:16px;(设置字体大小)
(字体设置)安全字体
15.transition(过渡动画)（谁发生了改变就写在谁上面）
transition:all 0.5s;(过渡动画的时间)（只适用数值变化：例如宽高等）
如果不是数值变化，则可以利用opacity=0;opacity=1;分别写在两个标签来实现数值变化
为某个标签添加动画：
（1）首先在css文件中为这个标签添加样式（
animation:动画名称(随便取) 动画时间 linear（使之匀速运动）数字（动画执行次数，不写默认为1，
如果用infinite代替数字，则将无限次执行这个动画）alternate（使该标签在执行完动画后原路返回）;
）
（2）再在css文件中添加样式：
@keyframes 动画名称(和(1)中的动画名称相同){
0%{
原始位置;
}
20%{
过渡位置；
}
..............
100%{
结束动画位置;
}
}
（3）animation-delay:时间 infinite（无限运动）alternate（来回运动）;（写在相应的css文件的动画标签中，表示延迟相应时间在开始动画）
16.span标签（让少量文字具有指定样式）
17.隐藏标签(隐藏后依然存在) display:none;
.nav-ul a:hover{
display:none;
}
显示标签 display:inline/block/inline-block;
18.改变标签的方法之一 margin-top:-150px;(将某个标签向上移动150个像素)
margin-bottom:....;(向下移动)
19.缩放 transform(变形)
前提：写在哪个上面那个上面要用超出隐藏才行
transform:scale(1,1);(水平方向，垂直方向放大一倍)
（可以改变1的值来进行放大和缩小）
旋转 transform:(rotateX)(180deg);//绕着x轴旋转180度
transform:(rotateY)(180deg);//绕着y轴旋转180度
transform:(rotateZ)(180deg);//绕着z轴旋转180度
改变旋转原点
tranform-origin：0 480px;（x轴，y轴）
透视（近大远小）
perspective:500px;
20.CSS3 滤镜（改变图片颜色，网上搜索）
21.公用样式引用要在内容引用前面
22.alt+右键（快速选中图层）
23.导出图片时看jpg和png的大小，选小的；如果一样大，则选png
24.对内容进行超出隐藏应该把overflow:hidden;写在图片上，不能写在超链接上
25.p标签：表示一个段落（文字是否独立成行，成块）
26.定位：position（要通过left和top来控制标签的位置）
position:static;(静态定位)默认
absolute;(绝对定位)不占位 可以在浏览器里到处乱跑（能盖住其他标签）
fixed;（固定定位，相当于浏览器窗口而言，通过left,top来固定在浏览器中的位置）
relative;(相对定位)管绝对定位的子标签，孙标签
z-index:数值;（凡是定位标签，都具有z-index值，默认为0。越大，可以盖住越小的标签，对静态定位无效）
使一个标签紧贴在页面的外部(可以通过改变right和top值来改变标签的位置)：z-index:数值;
right:50%;
top:50%;
margin-right:-（页面宽度+标签宽度）;
27.“>符号”只能连接子标签
28.透明和半透明（改变透明度）
opacity:0~1;（0.8比较好）
filter:alpha(opacity=0~100);//老旧的浏览器（IE8等）
29.颜色透明
rgb(0~255,0~255,0~255);
rgba(0~255,0~255,0~255,0~1);
可以利用png图片直接把背景图片切下来也可以达到效果
30.ul和li是block元素（不用写宽度也可以横向铺满）
31.页面中的图标样式
（1）img标签：内容图片才使用（不推荐）
（2）css背景添加装饰性的图片，包括图标（i标签：italic斜体文字）
font-style:italic;(斜体字)
（3）i标签：图标（它是一个内敛inline标签）
（4）伪对象，伪标签：（标签:before 标签:after（在标签的最前方加一个before标签）
（要想看得见before标签要在里面加一个connet:"";））
其功能相当于内敛标签
32.单行文本超出隐藏并显示省略号
缺一不可
width:标签限制宽度;
overflow:hidden;
white-space:nowrap;(强制不换行)
text-overflow:ellipsis;(如果文本溢出，就出现省略号)
33.h1标签（`<h1> 新闻动态</h1>`）(新闻标题标签)
34.border-bottom: 1px dashed #333;使li标签下方呈现一个厚度为1px颜色为黑色的虚线
35.翻页标签：一个div标签下几个li标签
div标签：text-align:center;
a标签：display:inline-block;
36.Math.floor() （向下取整）
Math.ceil() (向上取整)
Math.round() (四舍五入)
# js
类的优先级高于标签
1.控制台输出（console.info();）
2.x>y?(console.info(x)):(console.info(y));（输出最大值）（如果x>y输出x的值，否则输出y的值）
3.向下取整（Math.floor(25.4);）等于25
向上取整（Math.ceil(25.4);）等于26
4.NaN(not a number)
5.函数参数
函数自带一个参数对象，内置的！
arguments "参数"
arguments.length 参数的个数
arguments[0] 获取具体的参数
6.clink 点击事件
7.四句真言（js）
找标签
1.找自己(事件所在的标签)：onclick 里面写 this
2.事件函数里内置了一个对象：event 事件对象
event.target 事件的目标，事件所在的标签（在js文件里）
3.通过id找标签
document 文档对象，特指页面
在html的相应标签用id="mydiv"控制起来
var mydiv=document.getElementById("mydiv");(js文件)
获取，更改标签内容
获取：xx.innerHTML 标签里的html内容
div onclick="this.innerHTML='he\'llo'"你好/div(点击你好，则你好变为hello)
更改：xx.innerHTML='新的内容';
\的作用：1.去掉特殊含义： 符号 \' \"
2.添加特殊含义： 字母
获取，更改标签属性
获取：标签.属性
更改：标签.属性=新属性；
【自定义属性】自己写自己的属性
var y=xx.getAttribute("属性名")；（获取它的属性）
xx.setAttribute("属性名","属性值")；
更改标签的样式（必须先找到标签）（然后在id.onmouseover=fu）
（1）标签.style.属性="属性值";（直接更改）（适用少量更改）
xx.style.background="#f00";
（2）（改变之前的class的类名来更改样式）
xx.className+=" 新的类名";
（必须css文件中写好新类名的样式）
（新的类名前的空格不可少）
最经典的做法：（不会改变原有样式）
var classZz=/\b新类名\b/;（\b不会替换之前就有的同类名的样式，\b新类名\b不是独立的单词）
var cN=xx.className;
xx.classNam=cN.replace(classZz,"");
（正则：\b单词的开头和结尾）
8.按钮标签（应该放在表单标签的里面）
input标签：`<input type="button" value="-">`（单标签；“-”表示按钮内容)
（button为普通按钮）（submit为提交按钮：提交数据）
文本框：`<input type="text" value="文本框上的文字">`
<input type="text" value="文本框上的文字" placeholder="文本框上提示的文字，例如：请输入密码：">
密码框：`<input type="password" value="密码">`
9.表单元素
表单：form标签
1.接受用户【输入内容】：点击鼠标，键盘，语音......
数据会放在表单元素里
2.对数据进行处理：交给后台程序进行处理
<form action="后台处理的地址">
<input type="button" value="-">
</from>
10.js中把字符串转换成数值型
parseInt(string)（把字符串转换成int型数据）（只能找到整数）（查到非int型停止读取数据）
从字符串左边开始查找数据
parseFloat(string)(把字符串转换成float型数据)（可以找到小数）
Number(string)（强制转换）
11.判断数据是否是NaN
isNaN(num) 是则为true,错为false
12.二级菜单：（前提：先把一级菜单做好）
//让二级标签盖住其它标签
二级菜单一定要有绝对定位
一级菜单一定要有相对定位
var li=id名.getElementsByTagName("li");（可能找到多个变量li，本质数组）
（可以避开大量的id）找id名下面所有的指定标签
var li=id名.children;（找到一级菜单的所有li）
li:nth-child(1)（li标签下的第一个li）
找标签：qyerySelector函数
13.var mytime = new Date();（可以在()中指定时间点：年月日时分秒用,隔开）（获取执行的一瞬间的代码）（当前时间）（电脑中获取的月份要少一个月：电脑中月份从0到11）
（月份超出11，自动跨年）
14.名字=setInterval（启动计时器）
clearInterval(名字)（终止计时器）
15.通栏导航（要写一个min-width:....;）
16.var num=Math.random();（随机生成0-1的数）
17.防止点击超链接后跳转页面
<a href="javascript:void(0)">
</a>
18.内容靠右
text-align:right;
19.获取索引值
在循环中：数组名[i].名字（自己取）=i;//存储索引值
console.info(this.名字);//获取索引值
20.获取浮点数a的数值
parseFloat(a.value)
21.判断标签或属性是否存在：
if(标签名.属性名){
}
22.var student={};
student.name="";
student["name"]="";
23.调用函数一定要在函数名后写括号
24.清空数组
数组名=[];
## 经典语句
公用样式：
*{
margin:0;
padding:0;
}
.clears{
clear:both;
height:0;
line-height:0;
font-size:0;
overflow: hidden;
}
body{
font-family:Arial,Verdana,"Microsoft YaHei","Simsun";
}
a{
text-decoration:none;
color: #000;
}
img{
border:none;
/*图片放在超链接里一些老的浏览器（ie）会有一个蓝色的边框*/
}
ul,li,ol{
list-style:none;
}
<meta name="Keywords" content="（用英文逗号隔开）" />
<meta name="Description" content="（一句完整的话。）" />
1./*清除浮动*/
.clears{
clear:both;
height:0;
line-height:0;
font-size:0;
overflow: hidden;
}
2.background:url(../images/nav_bg.png) repeat-x;
/*使nav的背景由图片nav_bg.png横向铺满*/
3.line-height: 82px;/*使文字上下居中*/
4./*当鼠标移动到超链接上时改变超链接的颜色和背景*/
.nav_ul a:hover{
background:url(../images/nav_hover_bg.png) repeat-x;
}
5.
/*id="num";js中实现加减法*/
/*
jia.onclick = function(){
var number = num.innerHTML ;
number = Number(number) + 1;
num.innerHTML = number ;
}
jian.onclick = function(){
var number = num.innerHTML ;
number = Number(number) - 1;
num.innerHTML = number ;
}
*/
7.正则表达式：
正则表达式的书写：var zz=/规则/；
正则表达式的运用：
var zz=/he/i;（i表示忽略规则字符串中的大小写）（没有i的话就要区分大小写）
var zz=/he/g;（g代表全局查找）
var str="hehe";（引号中的是要检测的内容）
alert(zz.test(str));（判断是否满足规则，默认满足为true,不满足为false）
var zz=/abc*/i;（*代表至少有0个c，至多可以有无穷个c）
var zz=/abc+/i;（+代表至少有1个c，至多可以有无穷个c）
var zz=/abc?/i;（?代表c可有可无，如果有c则只能有一个c）
var zz=/he|xyz/i;（|代表只要有he和xyz其中一个）
var zz=/abc{2}/i;（{2}代表要有两个连续的c在一起）
var zz=/abc{2,}/i;（{2,}代表至少要有两个连续的c在一起）
var zz=/(abc){2}/i;（{2}代表要有两个连续的abc在一起）
var zz=/abc{2,4}/i;（{2,4}代表至少要有两个c在一起，至多只能有4个c在一起）
var zz=/[abc]/i;（[abc]代表至少要有一个a或一个b或一个c）
var zz=/[^abc]/i;（[^abc]代表至少要有一个除了a,b,c之外的字母）
var zz=/[a-z]/i;（[a-z]代表至少要有一个a到z的字母）
var zz=/[^a-z]/i;（[^a-z]代表至少要有一个除了a到z之外的字母）
var zz=/\w（小写）/i;（\w代表字母，数字，下划线）
var zz=/\S（大写）/i;（\S代表不能为空格）
var zz=/\b......\b/;（必须是一个单独的单词，不能有其他的）
var zz=/^abc/i;（^abc代表要以abc为开头）
var zz=/abc$/i;（abc$代表要以abc为结尾）
8.实现心脏跳动的动画
.red{
background: #f00;
font-size:30px;
animation: ani 0.5s infinite;
}
@keyframes ani{
0%{
transform:scale(1,1);
}
80%{
transform:scale(1.5,1.5);
}
100%{
transform:scale(1,1);
}
}
9.终止函数运行
return false;（返回任何值都可以）