1.html老标签
<meta charset=”UTF-8”>//设置网页字体编码
<meta http-equiv="refresh" content="300">//300后页面刷新
<meta http-equiv="refresh" content="0;URL=链接">//0秒后页面跳转到链接的页面
<img src="" alt="鼠标移上出现一个文本框显示这里面的内容">
2.html新增标签
<strong></strong>加粗字体 相当于font-weight:bold bolder
<em></em>斜体
<big></big>放大字体
<small></small>缩小字体
<q></q>默认在头尾分别加上双引号
<cite></cite>默认显示为斜体
<header></header>页头，头部区域
<nav></nav>导航菜单，标签内用列表。这个标签放在<header>中
<section></section>定义文档中某一章节或某一部分，段落
<article></article>一篇文章，放在<section>中
<time datetime=””></time>
<aside></aside>侧边栏
<footer></footer>页脚
<figure><figcaption>文字</figcaption></figure>用于展示图片插画、图表、代码列表等figcaption可以自动换行
<main></main>主要内容。每一张页面只能有一个<main>
<label></label>标签
<input type=”text” placeholder=”请输入….” required="required">//placeholder占位符，显示那个字但是不是文本框的值required="required" 设置必填
type属性新取值：
tel 电话，移动端的话，输入法变为纯数字
email 电子邮箱，移动端下只显示与邮箱地址相关的英文字母和字符
date 选择日期
4.canvas画东西的步骤、画线，画圆，画矩形
canvas画布（先有元素再有API）
<canvas id=”myCanvas” width=”600” height=”400”></canvas> //元素的宽高用样式表更精确
（1）画线条
<script type=”text/javascript”>
var a = document.getElementById(“myCanvas”);
var c = canvas.getContext(“2d”); // getContext(“2d”)获取上下文
c.strokeStyle = ‘#E74C3C’; //线条颜色为红色。stroke画笔，设置画笔颜色，不能跟rgb
c.linewidth = 5; //粗细为5像素，不能加px，只接受整数类型，不能有小数点
c.moveTo(100,100); //线条起点坐标为100,100 从左上开始定位
c.lineTo(200,200); //从起点创建一条路径到200,200的坐标点。起点与终止点是对应的
c.stroke(); //为以上路径描边（没有这行语句的话就不能画，只有路径）。如果没有更换画笔颜色，全文可以只有这一个stroke
</script>
（2）画矩形
第一步，矩形框（空心矩形）
c.strokeRect(左,上,宽,高); //左，上是坐标点。根据那个坐标点然后向右向下延长宽高。
c.stroke();
第二步，填充矩形（实心矩形）
c.fillStyle=’#000’; //设置填充颜色
c.fillRect(左,上,宽,高); //左上是坐标，然后根据那个然后填充。如果和空心矩形不一样大就不填充满。也可以单独使用，不画空心矩形
c.stroke();
（3）画圆
c.beginPath(); //圆起点到圆终点画一条直线
c.arc(450, 150, 50, 0, Math.PI * 2); //画圆（最多六个参数）。
//格式：arc(左, 上, 半径, 起始弧度, 终止弧度, 顺/逆);//左、上 圆心定位。弧度=角度×π÷180°。False = 顺时针，true = 逆时针。按时钟（顺时针）来确定起始和终止的弧度
c.closePath(); //圆终点
c.stroke();
补充：
c.fill();填充效果
.restore()恢复
.rotate(2deg)旋转
.save()保存当前canvas状态
.fillText()填充文字
.strokeText()空心字
.drawImage(变量名, 起始x, 起始y) 画图片，图片有多大画多大//先创建一个图像对象，然后img.src(路径)
5.圆角
border-radius
一个值：四个角 当值为50%时，是一个圆
两个值（对角线）：第一个值1、3，第二个值控制2、4
三个值：第一个值控制1，第二个控制2、4，第三个控制3.
四个值：一个值控制一个角
四个值以后加个/表示可以加第五个值
这个属性可以有八个值：border-radius: 1-4 length|% / 1-4 length|%;每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
例：
border-radius: 30px 10px 60px 20px/70px 30px 50px 10px;
6.阴影
（1）box-shadow盒子阴影，块状元素阴影
box-shadow:10px 10px 10px 20px rgba(0, 0, 0, .5);
//box-shadow四个属性值：
第一个参数：水平方向 默认从左投影，影子在右边。负数时影子在左边
第二个参数：垂直方向 默认从上投影，影子在下边。负数时影子在上边
第三个参数：像素
第四个参数：颜色
第五个参数：（可选）内外阴影 默认为外部阴影（outset）。内部阴影（inset）
内部阴影：从左投影，从上投影
//box-shadow六个属性值：x方向的阴影位移，y方向的阴影位移，阴影模糊距离（扩散）阴影模糊程度，阴影的尺寸，阴影的颜色，将外部阴影（outset）改为内部阴影（inset）
（2）text-shadow字体阴影
text-shadow:0 8px 5px rgba(0, 0, 0, .5);
//text-shadow四个参数值：x方向的阴影位移，y方向的阴影位移，阴影模糊程度，阴影的颜色。不做内部阴影
第一个参数：像素越大，越往右偏移。可以设置负数
第二个参数：像素越大，越往下偏移。可以设置负数
第三个参数：像素越小，阴影越实，越大，阴影越模糊，可以模糊到看不出来有阴影。不可以设置负数。0为和字体一样实。
第四个参数：设置阴影颜色
使用多行阴影参数可以让字体变得立体
7.css选择器
（1）元素（标签）选择器
<body></body>
body{
css样式语句
};
（2）class（类）选择器
<div class=”qwe”></div>
.qwe{
css样式语句
};
（3）id选择器
<div id=”uio”></div>
#uio{
css样式语句
};
（4）通配符选择器
*{
css样式语句
};
（5）选择器
选择标签中带有class属性且属性值为…的
h1.red{ //选择 <h1>标签中带有class属性，且属性值为red的 例：<h1 class=”red”></h1>
css样式语句
};
并列关系（群组选择器）
h1, div, p{
css样式语句
};
找父元素中的子元素（后代选择器）
section h1{ //选择<section>下的<h1>
css样式语句
};
section .red{ //选择<section>下的<h1 class=”red”>
css样式语句
};
（6）伪类选择器
8.box-sizing
允许您以特定的方式定义匹配某个区域的特定元素
box-sizing:border-box;//为元素设定的宽度和高度决定了元素的边框盒。该div设置了宽度，那么使用这个，总宽度不会改变。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
box-sizing:content-box;//默认值。指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 从父元素继承box-sizing属性的值
9.拖放
对元素的拖（Drag）放（Drop）
阻止默认行为说明：
该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。
例：将logo拖入box中
<div id=”logo”></div>
<div id=”box”></div>
var logo1 = document.getElementById(“logo”);
logo.draggable = true;//设置logo可以拖动
var box1 = document.getElementById(“box”);
box1.ondragover = function(event){ //event事件
event.preventDefault();//去除（阻止）事件的默认行为。
}
box1.ondrop = function(event){
box1.appendChild(logo1);//在box1中添加logo1
}
可以在css中设置overflow:hidden 超出的内容不显示
10.jquery选择器
jQuery是js query（js查询）
导入jQuery：
<script src=”文件路径文件名或者http路径”></script>
jquery-2.1.4.min.js jQuery提供两个版本，一个压缩一个没压缩。min压缩。
相当于window.onload(){};
格式一：
$(document).ready(function(){ //执行$(document)找document元素
//代码
});
格式二：
$(function(){
//代码
});
（1）标签选择器
$(‘body’)
（2）id选择器
$(‘#id’)
（3）类选择器
$(‘.class’)
（4）复合选择器
并列关系
$(‘.white.small’) //一个标签中既有white类，又有small类
（5）匹配选择器
$(‘.white:first’) //多个带有white类的中的第一个white类
$(‘.white:last’) //最后一个
$(‘.white:even’) //偶数个
$(‘.white:odd’) //奇数个
$(‘.white:eq(1)’) //选择某个索引值对应的元素，索引值从0开始
或者关系：多个表达式之间加上逗号，可以将多种选择方式的结果组合到一起
$(‘a,b’)
$(‘.class,#id’)
11.jquery改属性
.width(“500px”) 设置宽度
.height(“200px”) 设置高度
.innerWidth() //设置内边距
.innerHeight()
.offset() //得到偏移量 使用：.offset().left获得left一侧的值，用object对象输出
.addClass(“borderwhite”) //首先定义一个类样式，然后使用这个给标签赋予class，给标签增加一个类
.hasClass(“white”) //检查标签是否拥有某个类
.removeClass(“border”) //去掉类
.toggleClass(“white”) //检测元素中是否存在某个类，存在删除，不存在添加
.attr(‘href’) //获得属性的值
.attr(‘href’,’123.jpg’) //修改属性的值
.before(‘<span>123</span>’) //在查找到的之前添加一段内容
.appendChild(‘<span>123</span>’) //在查找到的标签中添加
.unwrap() //将父亲<div>去掉
.wrap(‘<div id=”out”></div>’) //创建一个节点再度将内部div包裹起来。行元素不能包块元素，<span>不能包<div>
.append(‘<div>new div</div>’) //在外围的div中添加新的节点
.prepend(‘<div>new div</div>’) //将新节点添加到内部div之前
.remove() //去掉该标签
12.jquery改样式
.css(“background-color”,”red”);
13.jquery改文本内容
.html(“文本内容”)
14.javascript函数的定义
格式：
function 函数名(){
//代码
}
function myFunction(){
//代码
}
调用myFunction();
function can(id){
//代码
}
调用can(123);
function r(id){
//代码
return id;//有返回值的，也可以返回其他的
}
15.javascript匿名函数
var testID = function(id) {
//语句
}
调用testID(125);
(function(){})()自行执行的匿名函数
(function(参数名){
//语句
}(传入的参数值));
var btn = document.getElementById("btn");//把按钮存放在变量中
btn.onclick = function (){
alert("hello!");
};//匿名函数，就是不用起名字的函数
16.颜色
rgb(红, 绿, 蓝);
rgba(红, 绿, 蓝, 透明度); 0.5透明度可以用 .5 表示[opacity](https://www.baidu.com/link?url=J-gkODqbQXI8dwJL4wuXdYvqSxJN5mzg5MlfzbyzC7Vnq-NiwCnxxwL1YUqbg9-ayUBqW88ytIkHnNGTDaYQ9q&wd=&eqid=9b04dc5a00175177000000065e004c49)透明度0-1
\#ff0000 十六进制
\#f00 十六进制
英文单词
17.伪类
选择器与关键字用英文状态一个冒号” : ”隔开
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
:first-child选择元素的第一个子元素
:last-child 选择元素的最后一个子元素
:lang 向带有指定 lang 属性的元素添加样式。
nth-child(odd){} // 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。参数下标从1开始。具体某个数字，odd奇数列，even奇数列。还可以使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
18.伪元素(用于向某些选择器设置特殊效果)
伪元素选择器：选择器与关键字以英文状态两个冒号” :: ”隔开
before选择器：在段落文本开头添加
p::before{ /* 在p标签前添加了一行this is before */
content:”this is before”;
};
::after选择器：在段落文本末尾添加
::first-line向文本的首行添加特殊样式
::first-letter向文本的第一个字母添加特殊样式。
19.过渡效果
transition:all .5s;//过渡。动画属性为all，动画的时间为0.5秒
transition有四个过渡属性
第一个 需要过渡的css属性的名称
第二个 过渡效果时间，默认为0
第三个 规定过渡效果的时间曲线，默认是ease。
第四个 过渡效果开始时间，默认为0
linear匀速动画，ease缓慢，ease-in、ease-out、ease-in-out
20.弹性布局
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
21.常用事件onclick、onload
window.onload = function (){}; 页面加载完成事件，期末可能会考
onblur 元素失去焦点
onfocus 元素获得焦点
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onmousedown 鼠标按键按下
onmouseup 鼠标按键松开
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onchange 内容发生改变
22.字体定义
@font-face{
//声明一种自定义字体
font-family:Lato; //字体名字，调用的时候可以使用
src:url(‘lato-regular.ttf’),
url(‘lato-regular’),
url(‘lato-regular.woff’);
//src属性引入字体的储存路径。.ttf是Windows自带。url是在网页中建个文件的路径一般是/font/….
};
CSS中使用：font-family:Lato;
可以在一个font声明中快捷地设置所有字体属性。例：font:italic bold 50px/150% arial;//斜体 加粗 字体大小/行距1.5倍 字体名称
23.关键帧
@keyframes spin{
from{
//from关键字指定动画的初始状态
transform:rotate(0deg);
}to{ //to关键字来指定动画的结束状态
transform:rotate(360deg);
}
}
调用，在css中 animation:关键帧名 动画时长 速度曲线;
infinite无限循环
alternate反向播放（顺时针一次，逆时针一次无限循环）
24.2D转换
transform: translate(x, y);//x水平，y垂直。相当于translateX()加上translateY()
transfrom:rotate(90deg); //转换角度，deg度
transfrom:scale(1.2,1.6); //缩放，第一个值是水平缩放，第二个值是垂直缩放
transfrom:rotateX(30deg) rotateY(120deg); //转换角度。水平转换，垂直转换。绕着x轴或y轴旋转
25.html5列表(datalist)
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
26.容器内水平居中
margin:auto;
display:flex; flex-direction: column;align-items:center; justify-content:space-around;
flex-direction默认值是row
align-items定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
父元素使用display:flex;子元素使用margin:auto;
27.div垂直居中
line-height:center;//行高小于高度，可以装多行。当行高与高度相同，只能一行所以居中
28.div水平垂直居中
框是300px
设置文字为 30px/300px是居中
text-align:center;line-height:center;
text-align:center;vertical-align:middle
29.线性渐变
background-image:linear-gradient(to bottom, 颜色1, 颜色2)线性渐变，从上到下，上为颜色1
30.SVG(ellipse、circle、rect、polygon)
SVG又被成为可缩放矢量图形
（1）rect矩形
<svg height=”1000px” width=”1000px”>//相当于之前的画布
<rect id=”myRect1” height=”100px” width=”200px” fill=”red” /> //fill填充颜色，css中也是fill属性，且css优先级更高
<rect id=”myRect2” height=”100px” width=”200px” y=”100px” fill=”blue” />//y表示y轴，向下移100px
</svg>
（2）circle圆
<svg height=”1000px” width=”1000px”>
<circle cx=”300” cy=”300” r=”150” id=”circle” />//cx是x轴，cy是y轴，r是半径。cx，cy是从左上角开始，然后固定的坐标点为圆心。css样式表中使用fill和stroke填充颜色，stroke设置边框颜色，没有设置颜色的话默认为黑色。stroke-width设置边框大小
</svg>
（3）ellipse椭圆形
<svg height=”1000px” width=”1000px”>
<ellipse cx=”圆点的x坐标” cy=”圆点的y坐标” rx=”水平半径，x轴那个” ry=”垂直半径，y轴” />
</svg>
（4）line线条
<line x1=”线条开始的x坐标” y1=”线条开始的y坐标” x2=”结束的x坐标” y2=”结束的y坐标”>
（5）polygon多边形
<svg height=”1000px” width=”1000px”>
<polygon fill=”blue” stroke=”red” id=”polygon” points=”0,0, 200,0, 200,350, 0,250” />//points设置点，八个参数就是四个点（还可以增加更多参数），两个点为一组坐标点。还可以用多边形画矩形
</svg>
