一:HTML(Hyper Text Markup Language)
1.网站：指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
2.网页：通常是HTML格式的文件，通过浏览器阅读（是构成网站的基本元素）
3.浏览器内核(渲染引擎)：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
IE—Trident—360极速浏览器，百度浏览器
firefox—Gecko
safari—webkit
chrome/opera—Blink(Blink实际上是webkit的分支)
4.Doctype文档类型声明：告诉浏览器使用哪种HTML版本来显示网页；lang语言种类：用来定义当前文档显示的语言。（en–>英语，zh-CN–>中文）
5.图像标签：src必须属性 文件路径；alt替换文本 图像显示不出来时用文字替换；titie提示文本 鼠标放到图像上提示的文字
6. 相对路径:
(1)同级路径：<img src="baidu.gif" />
(2)下级路径：<img src="imgs/baidu.gif" />
(3)上级路径：<img src="../baidu.gif" />
绝对路径
①磁盘开始的路径：“D:\web\img\logo.gif”
②网络地址：“http://www.itcast.cn/logo.gif”
7.链接 target=“_self(默认窗口)”/“_blank(新窗口)”
锚点链接：快速定位页面的某个位置
eg:<a href="#two">第二集
8.label标签：<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
for和id的属性值须一样
9.**自增符号
∗
∗
p
.
d
e
m
o
** p.demo
∗∗p.demo*2=<p class=demo1></p>
<p class=demo2></p>
div{$}*2=<div>1</div>
<div>2</div>
10.选择器种类
①后代选择器 ul li{样式声明}
②子选择器 .nav>a{}–>最近一级子元素
③并集选择器 ul,div{}–>尽量竖着写
④伪类选择器 ：hover{}–>尽量按顺序（link,visited,hover,active）
:focus一般用于<input>表单元素 焦点即光标
二:CSS(Cascading Style Sheets )
1.font-weight400=normal,700=bold
2.复合属性：font-size font-family必须有
3.text-indent2em(相对单位)—>指当前元素2个文字大小的缩进距离
4.line-height=上间距+文本高度+下间距
5.三大特性：层叠性、继承性、优先级
6.优先级：！important>行内样式Style=“”>ID选择器（0，1，0，0）>类、伪类选择器（0，0，1，0）>元素选择器（0，0，0，1）---->权重虽然会叠加，但是永远不会有进位
8.定位：
相对定位 （占有位置）
绝对定位 （不占有位置）
固定定位 （不占有位置）
9.绝对定位的盒子居中算法
加了绝对定位的盒子不能通过 magin:0 auto 水平居中
(1).left:50% 让子盒子的左侧移动到父级元素的水平中心位置
(2).margin-left: ~px 让盒子向左移动自身宽度的一半
10.元素的显示与隐藏
- display隐藏元素后，不再占有原来的位置
（1）display:none;隐藏对象
（2）display:block;除了转换为块级元素之外，同时还有显示元素的意思 - visibility隐藏元素后，继续占有原有位置
（1）visibility:visible;元素可见
（2）visibility:hidden;元素隐藏 - overflow:visible/hidden/
scroll（溢出的部分显示滚动条，不溢出时也显示滚动条）/auto（溢出的部分显示滚动条，不溢出时不显示滚动条）
11.用户界面样式
1、取消表单蓝色边缘轮廓outline:none;
2、防止拖拽文本域resize:none;
3、vertical-align用于行内元素或行内块元素垂直对齐；可用于解决图片底部默认空白缝隙问题、
多用于让图片与文字垂直居中
vertical-align:middle;
4、可以通过以下设置方式修改placeholder里面的字体颜色
input::placeholder{color:pink;}
5、nth-child对父元素里面所有孩子排序（序号是固定的）先找到第n个孩子，然后再看是否与E相匹配。nth-of-type对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个孩子。
6.如果盒子模型我们设为了box-sizing:border-box那padding和border就不会撑大盒子了（前提是padding和border不会超过width的宽度）想要图片铺满整个屏幕就用cover,看全图片就用contain
7.过渡属性transition:变化的属性 花费时间 运动曲线 何时开始。如果想要多个属性都变化，属性写all就行了。谁做过渡给谁加（transition:width .5s ease 1s）
#PS
ctrl+R 标尺
ctrl+e 合并图层
ctrl+D取消选区
ctrl +/- 放大/缩小视图
空格+鼠标 抓取
8.边框图片切割原理：上右下左->四刀九格
border-image-source->用在边框的图片路径
border-image-slice->裁剪的尺寸，一定不加单位
border-image-width->边框宽度 需要加单位–>这个属性默认的是border的宽度，但是 有区别，这个是 边框图片的宽度 不会挤压文字
border-image-repeat->边框是否平铺(repeat)，铺满(round),拉伸(stretch)->默认
网站的制作
-
网站TDK三大标签SEO优化
（1）title网站标题：网站名-网站的介绍（最好不要超过30个汉字）
eg:小米商城-小米5s、小米笔记本官方网站
（2）description 网站说明
eg:<meta name="description" content="京东JD.COM-专业的综合网上购物商城。销售家电、数码通讯....">
(3)keywords关键字（一般限制为6-8词）
eg:<meta name="keywords" content="网上购物、网上商城、手机、笔记本">
12.2D转换–>translate的最大优点是不会影响其他元素的位置综合写法时需要把位移写到最前面
移动盒子的位置：①定位；②盒子的外边距；③2d转换移动(transform:translate(x,y))
（1）translate：里面的参数可以用%表示，而移动的距离是盒子自身宽度或者高度对比的对行内样式无效
让盒子实现水平和垂直居中
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
①：margin-top:-100px;margin-left:-100px;
②：transform:translate(-50%,-50%);–>盒子往上走自己高度的一半
（2）旋转：transform:rotate(xx deg)–>单位度(deg),角度为正则为顺时针
中心点：transform-origin:left bottom(左下角)
（3）缩放：transform:scale(x,y)–>里面写的数字不带单位，就是倍数的意思，2就是2倍
13.动画序列：可以做多种状态的变换 keyframe关键帧，里面的百分比就是总的时间的划分
（1）定义动画：@keyframe 名称{
0%或者from{}
25%…{
}
100%或者to{}
}
（2）调用动画：①动画名称：animation-name:名称
②动画持续时间：animation-duration:时间
（3）动画常用属性：animation:move 2s linear(匀速)–>默认ease(动画以低速开始，然后加快，在结束前变慢)–>steps(就是分几步来完成动画) 0s infinite alternate forwards;
动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的方向
14.3D转换
（1）移动：translateX或translateY可用%或px表示 translateZ(px)–>Z一般用px表示，正值向外移动
（2）transform:translate3d(x,y,z)–>x,y,z是不能省略的，如果没有就写0
（3）perspective(透视–>视距)–>透视写到被观察元素的父盒子上面–>近大远小,单位是px
（4）旋转：rotate
（5）呈现：transform-style:preserve-3d–>让子元素保持3d效果
#三、JS–>ECMA标准
1.prompt取过来的值是字符型
2.数据类型转换：任何数据类型和字符串类型相加都得是字符型
Ⅰ.转换为字符型：
（1）(+)加号拼接字符串(隐式转换) var num=1;alert(num+"我是字符串"）;
（2）toString() var num=1;alert(num.toString());
（3）String()强制转换 var num=1;alert(String(num))
Ⅱ.转换为数字型（重点）
（1）parseInt()得到的是取整的整数，当有单位时会自动去掉eg:120px–>120,rem120px–>NaN
（2）parseFloat()得到小数
（3）Number()强制转换
（4）(- * /)（隐式转换）consolo.log('12'-'10')-->2
Ⅲ.转换为布尔型
（1）代表空、否定的值会被转换为false,如""、0、NaN、null、undefined
（2）其余值都会转换为true
3.递增（++）和递减（–）必须和变量配合使用
（1）前置递增：先加1再加1
（2）后置递增：先计算再加1
前置和后置若单独使用效果相同eg:num++;++num;
eg:var e=10;var f=e++ + ++e;console.log(f);
①e++:e++=10,e=11
②++e:++e=12,e=12
③e++ + ++e=10+12=22
4.arugments(里面存储了所有传递过来的实参)
---->伪数组：并不是真正意义上的数组
（1）具有数组的length属性
（2）按照索引的方式进行存储
（3）它没有真正数组所具有的一些方法 pop() push()等
5.变量、属性、函数、方法的总结：
变量：单独声明赋值，单独存在
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征。
函数：单独存在，通过“函数名（）”的方式就可以调用
方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名（）”的方式就可以调用，方法用来描述该对象的行为和功能。
6.数据类型：
(1)简单数据类型：string\boolean\number\undefined\null–(object类型)–>如果有个变量我们以后打算存储为对象，但暂时还没想好放啥，这个时候就放null
存放在栈里面，里面直接开辟一个空间存放值
(2)复杂数据类型
通过new关键字创建的对象（系统对象、自定义对象），如object\Array\Date等
首先在栈里面存放地址，十六进制表示，然后这个地址指向堆里面的数据
7.传参
(1)简单类型传参：函数的形参可以看成一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何改变，都不会影响到外部变量。
eg:function fn(a){a++;console.log(a);} var x=10;fn(x);console.log(x);–>11,10
(2)复杂类型传参：当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是一个堆地址，所以操作的是同一个对象。
8.splice(从哪个位置开始删除，删除几个元素)
四.DOM(文档对象模型)–>增删改查、属性操作、事件操作（事件源.事件类型=事件处理程序）–>W3C标准
1.getElementsByTagName:
(1).返回的是获取过来元素对象的集合，以伪数组的形式存储
(2).如果页面只有一个元素，返回的还是伪数组的形式
(3).如果页面没有相应的元素，返回的则是一个空的伪数组
(4).document.getElementByTagName获取的是整个文档所包含的指定所有元素，element.getElementByTagName('标签名')获取的则是指定元素，父元素必须是指定的单个元素
2.事件：
(1)事件源：事件被触发的对象
(2)事件类型：如何触发
(3)事件处理程序：通过一个函数赋值的方式完成
3.修改样式
(1)element.style:element.style.color='pink'; 行内样式操作–>适合样式较少或者功能简单的情况下使用
(2)element.className:element.className='change-->定义在css中的类名';类名样式操作–>适合样式较多或者功能复杂的情况
className会直接覆盖掉原先的类名–>多类名选择器解决
4.H5自定义属性：data-表示（data-index=2），getAttribute获取（xx.getAttribute('data-index')）
目的是为了保存并使用数据，有些数据可以直接保存到页面中而不用保存到数据库里
5.节点操作
(1)parentNode–>得到的是离元素最近的父节点 若找不到父节点就返回Null
(2)childNodes–>所有的子节点包含元素节点、文本节点（换行）等
firstElementChild–>获取第一个元素节点，但有兼容性问题ie9以上才行
(3)nextSibling(previousSibling)–>下(上)一个兄弟节点 包含元素节点或者文本节点等 找不到则返回null
nextElementSibling–>下一个兄弟元素节点(兼容性问题) ie9以上支持
解决方法:封装一个兼容性函数
function getNextElementSibling(element){var el=element;while(el=el.nextSibling){if(el.nodeType===1){return rel;}}return null;}
实际开发常用：
children–>获取所有的子元素节点（常用）
xx.children[0]–>获取第一个子元素节点
xx.children[xx.children.length -1]–>获取最后一个子元素节点
(4)①创建节点:createElement-->创建元素节点
三种动态创建元素的区别
1.document.write()–>直接将内容写入内容流，但文档执行完毕后，会导致页面重绘
2.element.innerHTML–>创建多个元素效率更高（采取数组形式拼接），结构稍微复杂
3.createElement()–>创建多个元素时效率稍低，但结构更清晰
②添加节点:appendChild(child)–>后面添加元素,类似于数组中的push\ insertBeforeChild(child,指定元素)
③删除节点：node.removeChild(child)
④复制节点node.cloneNode()–>若括号内为空或者是false,则为浅拷贝即只复制标签不复制内容（true为深拷贝）
6.DOM事件流
(1)捕获阶段 addEventListener(事件，函数，True–>先document–>html–>body–?)从外向内
(2)当前目标阶段
(3)冒泡阶段(false或省略则xxx–>body–)–>从内往外
无冒泡事件的有：onblur\onfocus\onmouseenter\onmouseleave
7.事件对象
(1)e.target和this的区别：e.target点击了哪个元素，就返回那个元素；this 哪个元素绑定了这个点击事件，那么就返回谁
(2)阻止默认行为(事件):e.preventDefault()
(3)组织事件冒泡：e.stopPropagation()
–>兼容性问题解决：if(e&&e.stopPropagation){e.stopPropagation();}else{window.event.cancelBubble=true;}
(4)事件委托：不用给每个子节点单独设置事件监听器，而是把事件监听器设置在其父节点上，通过冒泡原理影响每个子节点。
(5)常用的键盘事件：执行顺序：keydown–>keypress–>keyup
onkeypress与另两个的区别是不识别功能键，如箭头、shift键等
(6)通过keyCode判断用户按下了哪个键，返回该键的ASCII值
–>onkeydown和onkeyup不区分大小写，onkeypress区分大小写（如A=65，a=97,1=49）
五.BOM(浏览器对象模型)–>与浏览器窗口进行交互的对象
(1)窗口加载事件：window.onload()–>window.addEventListener(‘load’,function(){})
(2)调整窗口大小变化：window.resize() innerWidth
(3)定时器：window.setTimeout('调用函数','延迟时间-->默认毫秒')–>window一般省略
setInterval('调用函数','延迟时间-->默认毫秒')
二者区别：setTimeout 延迟时间到了，就去调用函数，但只执行一次
setInterval 每隔这个延迟时间，就去回调这个函数，会重复调用很多次
停止定时器：clearTimeout(标识符)/clearInterVal()
(4)this指向问题：一般谁调用就指向谁
①全局作用域或者普通函数中this指向window 注意定时器里面的this指向window
②方法调用中，谁调用指向谁
③构造函数中this指向构造函数的实例
(5)JS执行机制：同步与异步（一般通过回调函数实现）
先执行同步任务再执行异步任务–>事件循环（event loop）
JS是单线程
(6)location对象：location.href获取或设置整个URL(统一资源定位符)，location.search返回参数，location.assign可以跳转页面，记录浏览历史，可以实现后退功能
(7)history对象：back()后退方法，forward()前进方法，go()前进后退功能，参数如果是1前进1个页面 如果是-1 后退一个页面
六.PC端网页特效
(1).offset系列属性：offsetTop/offsetLeft–>可以得到元素的偏移位置 返回的是不带单位的数值；它以带有定位的父亲为准 如果没有父亲或者父亲没有定位 则以body为准
offsetWidth/offsetHeight–>可以得到元素大小 宽度和高度 包含padding+border+width 不含margin
offsetParent/parentNode区别：前者返回带有定位的父亲 否则返回body;后者返回最近一级的父亲 不管有无定位
offset与style的区别
Ⅰ.offset可以得到任意样式表中的样式值，style只能得到行内样式表中的样式值
Ⅱ.style.width获得不包含padding和border的值
①获取元素大小位值，用offset更合适
②给元素更改值，用style更合适
(2)client系列属性：clientWidth 不包含边框
立即执行函数–>不需要调用，立马能够自己执行的函数 多个函数用;隔开
①(function(){})(2,3) -->第二个小括号可以看作是调用函数
②(function(){}(2,3))
–>最大的作用就是 独立创建了一个作用域 里面所有的变量都是局部变量 不会产生命名冲突
(3)scroll系列属性：scrollTop是卷动的部分
三大系列总结
offsetWidth:包含边框 padding+border+content -->用于获取元素位置
clientWidth:不含边框 padding+content -->用于获取元素大小
scrollWidth:自身实际宽度 -->获取滚动距离
–注意:页面的滚动距离通过window.pageXoffset获得
mouseenter与mouseover的区别
mouseover鼠标经过自身盒子会触发 经过子盒子时还会触发，mouseover只会经过自身盒子触发
–>mouseenter不会冒泡
???# 七移动端网页特效
(1)touch事件：触摸事件–>touchstart 移动事件–>touchmove 离开事件–>touchend
①–>touches 正在触摸屏幕的所有手指的列表 targetTouches 正在触摸当前DOM元素的手指列表 changedTouches 手指状态发生了改变的列表 从无到有或者从有到无
因为我们一般都是触摸元素，所以最经常使用的是targetTouches
八.jQuery
1.jQuery对象只能使用jQuery方法，DOM对象则使用原生的javascript属性和方法
myDiv.hide()–>jQuery对象才能使用；myDiv.style.display='none'–>DOM对象才能使用
2.DOM对象转换为jQuery对象：
(
′
D
O
M
对
象
′
)
；
j
Q
u
e
r
y
对象转换为
D
O
M
对象：
('DOM对象')；jQuery对象转换为DOM对象：
(′DOM对象′)；jQuery对象转换为DOM对象：(‘DOM对象’)[索引号]或者$(‘DOM对象’).get[索引号]
3.隐式迭代：给匹配到的所有元素进行循环遍历，执行相应的方法，从而不用再进行循环
4.jQuery筛选方法：parent()选择亲爸爸；children()选择亲儿子；find()选择儿子和孙子；siblings()选择除自己外的所以亲兄弟；eq()自由选择第几个元素
5.属性操作：prop()–>获取固有属性值；attr()–>设置或获得元素的自定义属性；数据缓存data()–>将数据存放到元素的内存里面
6.获取元素内容:html(),获取元素文本内容:text(),获取表单值val()
parents(“xxx”)方法,返回指定祖先元素,toFixed()保留几位小数方法
7.遍历元素:each(function(index,domEle){})->自动遍历索引号
.
e
a
c
h
(
)
方法遍历元素主要用于遍历数据
,
处理数据
i
n
d
e
x
−
>
索引号
,
可以自己定义索引号名称
d
o
m
E
l
e
−
−
>
它是一个
D
O
M
元素
,
需转换为
J
q
u
e
r
y
对象才能调用相应方法
8.
创建元素
:
.each()方法遍历元素 主要用于遍历数据,处理数据 index->索引号,可以自己定义索引号名称 domEle-->它是一个DOM元素,需转换为Jquery对象才能调用相应方法 8.创建元素:
.each()方法遍历元素主要用于遍历数据,处理数据index−>索引号,可以自己定义索引号名称domEle−−>它是一个DOM元素,需转换为Jquery对象才能调用相应方法8.创建元素:(“
- xxx
- ”)
9.添加元素:①内部添加:最前面prepend(),最后面append();②外部添加:before()\after()
10.删除元素:remove()–>删除匹配元素 empty()/html() 删除匹配元素里的子节点 孩子
11.尺寸操作:width/height()只算本身盒子大小;innerWidth()包含边框;outerWidth()包含width+padding+border;outerWidth(true)包含width+padding+border+margin–>参数可以不用带单位
12.位置操作:offSet()–>获取设置距离 文档的距离(left/top);position()–>获取距离带有 定位父级的偏移,若无则还以文档为准;该方法不能设置偏移;scrollTop/scrollLeft()被卷去的头部和左侧
13.事件处理（绑定）on:①可绑定多个事件:$("div").on({"click:function(){},mouseLeave:function(){}"})或者触发事件效果相同时on("mouseEnter mouseLeave",function(){})②实现事件委托:$("ul").on("click","li",function(){})–>click是绑定在ul身上的,但是触发的对象是ul里面的小li③给未来动态创建的元素绑定事件
（解绑）off:$("p").off()解除所有事件处理程序，off("click")解除单独事件,$("ul").off("click","li")解除事件委托
14.自动触发事件：trigger()会触发事件的默认行为，triggerHandler()不会触发事件的默认行为
15.自动拷贝$.extend():浅拷贝（默认）–>把原来对象的数据地址进行拷贝，若进行修改，则都会发生相应改变；深拷贝：将数据进行完全复制，属性不冲突时会进行合并，并会开辟一块新的地址，修改时则不会影响原来对象
16.多库共存：①如果$符号冲突，我们就使用jQuery ②使用.noConflict()方法，让自己定义
17.jQuery插件：①引入相关文件（jQuery文件和插件文件）②复制相关html,css,js(调用插件)
–>图片懒加载：图片使用延迟加载既可提高网页下载速度，又帮助减轻了服务器负载（即当我们页面滑动到可视区域，再显示图片）九.移动端布局
1.meta视口标签：
<meta name="viewport" content="width=device-width, user-scalable=no/0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2.background-size:
①只写一个参数，肯定是宽度 高度省略了 会等比例缩放；
②里面的单位可以跟% 相对于父盒子而比；
③cover 会完全覆盖div盒子 可能有部分背景图片显示不全；
④contain 宽度和高度等比例拉伸 当宽度 或者高度 铺满div盒子就不再进行拉伸了 可能会有空白区域
3.特殊样式：
①css3盒子模型：box-sizing:border-box;
②清除高亮背景：-webkit-tap-highlight-color:none;
③自定义按钮样式属性：-webkit-appearance:none;
④禁用长按页面时的弹出菜单：-webkit-touch-callout:none;
4.移动端常用布局：
①流式布局（百分比布局）：通过设置宽度百分比再根据屏幕大小进行伸缩，需设置max-width和min-width
②flex布局：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
父级常见属性：flex-direction设置主轴的方向: row–>默认主轴从左到右 column–>默认侧轴从上到下
justify-content水平对齐:flex-start默认从左到右/center居中对齐/space-around平均剩余空间/space-between–>两边对齐，再分配剩余空间
flex-wrap换行:默认不换行，如果装不开 会缩小子元素的宽度，放到父元素里面
align-items（单行）垂直对齐<–>align-content（多行，使用时需要换行）
flex-flow复合属性–>设置主轴方向和是否换行
子级常见属性:flex:表示在剩余空间里占用多少份；align-self:单独排列自己的顺序；order:排列顺序，默认是0，数值越小越在前面
③rem布局:(1)less嵌套 子元素的样式直接写到父元素里面；(2)如果有伪类、交集选择器、伪元素选择器 我们内层选择器的前面需要加&
④响应式布局：(1)原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
超小屏幕（手机）：<768px–>100%–>col-xs-属于class
小屏（平板）：768~992px–>750px–>col-sm-
中屏：992-1200px–>970px–>col-md-
大屏：>1200px–>1170px–>col-lg-
Bootstrap框架
(1)使用四部曲：①创建文件夹结构 ②创建html骨架结构 ③引入相关样式文件 4.书写内容
(2)栅格系统：通过创建行和列的组合来布局，一般把container自动分为12列
①实现列的平均划分需要给列添加类前缀
②每一列默认有左右15像素的padding
③列嵌套：最好加个行row（盒子带类） 这样可以取消父元素的padding值而且高度可以自动和父级一样高
④列偏移：col-md-offset-
⑤列排序：col-md-push-\col-md-pull-
⑥隐藏\显示：hidden-md\visible-md
⑦如果孩子的份数相加等于12 则孩子的宽度占满container；若小于12 则占不满 且留出空白；若大于12 则多余的那一列则会另起一行显示
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
