第一，写博客
第二，做网站
第三，学技术
侧面菜单不随滚动条滑动而滑动设置position:fixed；
left:-200px;
动态样式用行内样式比较好？
jquery方法mouseenter鼠标悬停动作
对象.animate( {对象的一些属性}，时间)
stop()方法可以停止当前动画
$(‘#left-menu’).mouseenter(function(){
$(this.stop();
$(this).animate({left:0},2000)
)})
鼠标移出也是一样的
http通信原理：当用户请求静态资源（html css 图片 视频），服务器直接返回数据，当请求动态资源时（asp php java .net python）,服务器会先在服务端执行这些程序，然后把执行结果返回
发送的属性对象等在request对象 返回在response对象
url 全球统一资源（图片啊视频啊等等）定义符
本地打开叫做局域网url
IP——Internet Protocol 保证机器间互相通信哦，网络互连协议
IP4和ip6代表了四位地址和六位地址的IP地址
127.0.0.1 与localhost的区别。
计算机的端口：0~65535 设置不同服务器应当设定不同的端口
上面是第二课的内容
html5开发工程师
h5比较适合做移动端，因为它不太适合ie8
h5一般做移动端
做混合app-- hybrid app是什么样的一个职业？
html5和html4本身就是包含关系
h5特色就是语义化标签，h4本身也有挺多语义化标签的
html页面结构 css 页面的样式 javascript 页面的功能
新增了一些标签和废弃了一些标签，新增了很多css样式（css3正是对应html5的版本）新增了很多js的API
有时候在sublime（sublime是关于）上打font没有语法提示，font是h4的标签，在h5中不管用，sublime是基于h5的编辑器？
json是什么格式
一层：大括号，属性与值除数字外要用双引号引起来
二层：大括号，”属性”：{‘属性’:”值”}，
周六日做一下自己的网站
xml语法非常严谨
xhtml 标签必须正确闭合，必须是小写字母，必须有一个根元素（这里就是为什么很多小版块都需要一个根元素的原因），xtml的特点呢
h5的框架<frame><frame>不被鼓励，想让你用ajax来代替？
新增的h5:
header section article footer nav
div套div套div....会造成div嵌套过多的问题，老师说是div中毒
h5新增语义化标签解决这一现象，h4本身也有一些语义化标签。
更能表达标签代表的意义，更适合做seo，这个可能需要学一下 搜索引擎优化
百度竞价排名操作seo：莆田系医院恶果
标签是独立语义化的的标签，减低了搜索难度
article文章区常用 section区块的分类常用（独立区域）
aside 非主要内容 hgroup组合hX标签用
header头部 footer 底部
nav 导航
光用语义化标签是不行的，还要配合选择器css来设置他们的样式
语义化标签不能滥用，配合div使用。
header里的nav标签如何设置让其居中？
设置width和height，让其margin：px auto;
固定宽度的div里的div居中是很简单的。
给一个最小高度min-height:500px 当内容足够时将其撑开可以超过500，当内容不足撑起500时为500px
margin可以让一个div距离另一个div有一定距离。
ie8不支持h5属性，所以跑不起来，但是有一个兼容的方法，这个方法就是添加插件，本质是把h5属性替换成div，只是结构的识别，并不能识别h5的专有属性。（这里是自己的理解，可能有偏差）
如header{
} 与.header{}是不一样的。
插件：html5shiv.min.js 还有 respond.min.js 把h5元素转化为div
判断ie9以下，引入插件（js）文件在h5有专门的写法
<!--[if lt IE 9]>
代码，这里是h5的条件判断语句
<![end if]-->
<!--[]><![]>这就是他们的形式。
新增的h5表单元素啊，input的类型啥的，现在我要跳过看视频和音频。
iframe标签，设在网页任何一个区域嵌套一个网页，哪里有引用的网页？
<iframe name=’content’ src=’tiyu.html’width=’100%’ height=’200’ frameborder=’none’ scrolling=’auto’/>还可以设置滚动条呢
该戒了，不能熬夜不能吃不健康的食品
h4时代播放视频：
浏览器本身没有播放功能，必须安装额外插件，浏览器自动检测下载安装。
adobe player 暴风影音等插件
h5，不借助任何插件，直接浏览器播放，缺点是兼容性，播放的格式有点少
兼容的话，判断支不支持h5播放，支持就用h5不支持就用flash播放
embed播放标签视频和音乐啊，火狐和谷歌可以直接播放，有一个界面，ie8需要借助插件
embed src=”XXX.mp4” width还有height都可以设置
object播放？老东西h4的,embed也是h4的
h5拿video标签播视频
audio播放音频 -ogg(谷歌独家格式) -mp3 - wav 默认是不显示面板的，有属性设置
controls直接写audio标签里显示进度调整栏 loop也是直接写，可以循环播放
preload预加载。
<audio src=’xxx.mp3’ controls loop ></audio>
谷歌好强啊，安卓啥的都是它的
老师自动弹出的我怎么没有，视频播放的兼容性 一式多份，哪个好用播放那个，顺次检测，随便看看就行
<video src=’xxx.mp4’ controls width=’500’ autoplay >
</video>
图片播放的时候面板默认显示的是第一帧，可以改变的。是video的poster属性，poster要指向一个图片。
<video src=” sasda.mp4”poster=’images/img.jpg’>
h5添加了很多的js，控制视频播放的控件的自定义
磨叽
自己设按钮点击播放。
<input type=’button’ value=’播放’ id=’plybtn’ onclick=’play()’/>
你不用给video标签加上controls属性了
video.play() video是获取的视频video标签对象
.pause()
如果是暂停状态if(video1.paused) {
video1.play()
plybtn.vlaue=”暂停”}
else{
video1.pause();
plybtn.value=”播放”}
可以获取到视频播放到哪里了，返回的应该是一个时间值。然后可以设置快进，快退
是一个属性吧video1.currentTime
然后给当前的值加或减就可以实现快进退的效果嘛
播放的速度，调速，直接控制video1.playbackRate=i,因为不只要2倍4倍0.5倍，不必每个倍都设置一个方法。当以后遇到方法相同参数不同可以设参数
静音就是一个属性，muted
video1.muted=’true’ 表示静音了
音量默认值是0到1.0，他的属性是什么呢
video1.volume +=i;
video标签常用的事件回调函数
0级事件和2级事件（addEventListener）又忘了
媒体文件正在加载也是一个事件么？
addEventListener(‘progress’,function(){
console.log(‘加载中...’); })是二级事件的程序
加载完毕可以播放，此时可以获得媒体长度
video1.onloadedmetadata =function(){
console.log(‘0级事件程序，加载完成’);
}
上面的两个代码是加载事件，一个是加载中，一个是加载完成
video1.onplay=function(){}
video.onpause=function(){}
这里呢，不止暂停会触发事件，而且播放到后面不动了也同样会触发事件。
但是播放完毕本身就可以出发一个事件，叫做onended=function(){} 0级事件
addEventListener是那个叫做2级事件的把。
开始写一个实例：点击列表播放相应视频，模仿两个视频
写点jquery的代码吧
自定义属性要求前缀是data-
poster属性可以让视频没播放时显示这个图片
播放哪个视频不是取决于src是哪个的嘛
$(‘ul li a’).on(‘click’,function(e){
var url=$(this).attr(‘data-video’) //这里把属性暂存在一个自定义属性里
$(‘#video1’).attr(‘src’,url);
$(‘#video1’).get(0).play(); //jquery对象不能直接使用js方法，要转换为js对象
})；
点击哪一个，相对应的视频就会播放，如何找到对应关系是个突入点
自己的思路就是给每一个点击都附上相对应的方法，修改video标签的src属性
这样就要写很多个function
借鉴的思路就是把不同视频的src属性附在不同的点击上，获取自己的属性，再把它赋值到video上就很ok，是一种思想。
图形图像
base64是一种编解码模式，是一种算法，目前可以把二进制数据转换为图片常用来对图片编码，只适合小图片，兼容到ie7。
算法是什么鬼？
java写算法。
java新建动态web项目？dymatic web project
str是一个字符串,code是转好的码
下面是java的转码：
Base64.getEncoder().encodeToString(str.getBytes(‘utf-8’));
String code=Base64.getEncoder().encodeToString(str.getBytes(‘utf-8’));
把一幅图片转换成base64编码，是什么哦，以后有java要求再学吧
base64图片在html里怎么用？
<img src=”data:image/jpeg;base64;sadhawdskajfksadajda....”>可以在浏览器观察到图片，
优点是比较方便存储，只需要请求一次？
h5的画布概念canvas和svg？
都可以在浏览器中创建图形图像，但是根本上不同。根本？
分别是位图/点阵图（整个图片是一个画布）和矢量图（每个元素独立dom节点？）
位图是由像素组成的，放大会失真 矢量图是由点和线组成的，每一个元素都是一个dom节点，放大不会失真
画布的大小一定要用html属性设置，不能用css设置哦，识别问题。
在canvas标签中加一条提示文字，当浏览器支持与不支持展示情况是不同的。
你想画一条线 先找到一点 在找到结束点 然后画一条线
判断是否支持画布，获得对象的getContext方法，看它存不存在
if(canvas1.getContext){}//为真就是存在了。你把canvas标签里的内容怎么看呢
context表示当前运行环境？
var context=canvas1.getContext(‘2d’);
context.beginPath();沾上墨水了，开始绘制路径。
context.moveTo(0,140); 移动到起点
context.lineTo(140,140); 移动到终点
context.strokeStyle=”#ff0”
context.stroke();
画一个矩形
strokeRect(起点坐标还有宽高)
填充context.fillStyle=’#ff0000’要在画之前，这里可以体会到canvas是基于状态的绘画
往canvas里添加图片？
DHTML有不同的api dom的话只有getAttribute和setAttribute
创建图片对象？
var img = new Image();
img.src=’images/4.jpg’ 内存里用到图片就要加载
加载图片完成是一个事件，在图片加载完后绘制图片
img.onload=function(){
context.drawImage(图片对象，图片坐标，图片宽高);
//context.drawImage(img,50,50,img.width,img.height);不常用吧，没什么经历
}
用canvas经常是用别人弄好的插件
canvas可以作动画游戏。
今天是4.29号，发现了一个有趣的实例，文字环绕图片。
让图片右对齐，align=”right”，在一个p标签里设置一个img标签。然后设置图片与文字的距离就可以实现文字环绕图片的样式。在p标签里图片和文字是一样的，相当于行内元素。
用float也是一样的，当在一个div中的一个div用了浮动，其后的行内元素会自动排列在他的后面。
图片是行内样式，p标签会自动环绕
数字和字母不能自动环绕，它们会识别为一个元素。鸡儿梆硬
一阶段：html+css+ps切图+ftp网站上传+html5标签+css3动画+手机端开发+swiper.js+iscroll.js
二阶段：js+jq+ajax+正则表达式+面向对象+js插件+github+sea.js+require.js+gulp
三阶段：2D+3D应用+touth+canvas+svg+本地储存+h5拖拽+highcharts+boorstrap
四阶段：node.js+vue.js+react.js
svg图片应该不能表达太复杂的图片，因为很多复杂的图片如人物肖像都是用像素表示的。做点和线组成的图片
svg是基于xml的，直接用标签绘画，怎么画?有不同图形对应不同画法。
svg同样可以设置大小，边框，颜色，在标签里面的属性设置
绘制一个方形，记住是标签作画
<rect x='10' y='10' width='60' height='30' stroke='#f00' stroke-width='3' fill='transparent' />
起点横纵坐标 宽高 线条的颜色 线条的宽度 填充的颜色。
同样的，确定一个正方形，起点和宽高
确定圆，原点和半径。svg是先确定了图形再填充的。
<circle cx=’23’cy=’12’ r=’10’fill=’#0cc’></circle>
svg图片下载，后缀名居然是.svg，下它之后怎么用？大多数使用别人做好的怎么插入svg图片？居然是用img直接插入，还可以设置宽高。
使用小图标就多了一个选择：svg 雪碧图 等等
回顾：点击某个播放某一对应视频
自己的理解：
拖动效果，就是处理好距离的关系，引入function(e)对象，然后获取鼠标位置，获取鼠标距离拖动元素块边缘的距离，然后再设置拖动元素块的top和left。
如果html,body不设高度100%，是不能表示整个视口的。
鼠标移上事件加上 鼠标按下事件（可以给一个flag来表示鼠标已经按下），同时进行才可以。
先点击然后移动
获得鼠标距离视口左边和右边距离的正是e.clientX和e.clientY
忘了忘了需要回顾。在测试文件夹里。自己居然写不出来。其实自己的想法也没有错，不过忽略了鼠标点击获得的坐标值是一个定值了。
借鉴：
e=e?e:window.event是一个兼容的事件对象方案
设定一个flag表示鼠标是否按下，同时获取按下时相对视口的横纵坐标。
然后获取这个要被拖动的元素的top和left？
重要的是考虑鼠标的坐标是会变的。
前端技术不允许操作用户端的文件
用户可以控制是否可以操作
h5提供了很多文件操作的api
兴趣很重要啊，有的时候可以干自己喜欢的事情来忘记时间。
文件操作，判断是否浏览器支持文件操作
焦点图——大图集合带有特定展示目的
jquery.transform是jquery库的一个支持的插件，和css3的transform异曲同工，是因为他的兼容性比css3好。
上面表达的应该是jquery对象.transform方法，感觉和jquery对象.animate方法是一样的东西。
$(“#test1”).transform({rotate:”45deg”});不是xml格式呢
$(‘#test1’).animate({rotate:’60deg’},1000);
js的定时器就是setInterval（方法，间隔时间）和setTimeout（方法，延迟时间）
一个是间隔执行 另一个是隔多少时间只执行一次，使用变量代表定时器的，在清除定时器的时候会用到。
忘记时间就好了，有时候不做，做起来就会忘掉。
作用域和作用域链，什么时候生效什么时候不生效。
function a(){
var b=0;
function c()
{
var d=0; //d是在函数内定义的，在这个函数外面不管用，结果就是undefined会报错。
}
c();
alert(b);
alert(d);
}
a();
面试问你闭包是什么你懂么？
五子棋案例
canvas元素加上一个display属性当成块状元素来使用
划线应该封装在一个方法里吧。
循环是很方便的东西，当页面存在一样的东西就用循环考虑考虑吧
看看canvas基于状态的
在canvas里画图片果然是要新建一个图片对象啊，图像的资源要用src属性去引入，有个drawImage的api引入，画图片时有时候会遇到图片挡在最前面啊，还有图片需要加载产生的问题。
后面可以用onload事件解决。
括号里包含对象+包含了在哪里显示+图片应当显示的宽高 ，它们之间应该用逗号隔开的，一般属性都是这样隔开，api的参数好像都是这样引入的。
画canvas是后面画的挡住前面的，因为图片需要加载，有时候在前面画的图片也会挡住后面画的元素，这时候可以用封装来解决这个问题。