第一,写博客
第二,做网站
第三,学技术
侧面菜单不随滚动条滑动而滑动设置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’ οnclick=’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.οnplay=function(){}
video.οnpause=function(){}
这里呢,不止暂停会触发事件,而且播放到后面不动了也同样会触发事件。
但是播放完毕本身就可以出发一个事件,叫做οnended=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.οnlοad=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是后面画的挡住前面的,因为图片需要加载,有时候在前面画的图片也会挡住后面画的元素,这时候可以用封装来解决这个问题。