1:语义标签footer,header
2:
(1)表单:input 的type
email,url,color,date
number:min,max,step(步长)
(2)表单元素:
datalist,
<div>
<datalist id="list1">
<option value="">jack</option>
<option value="">jerry</option>
<option value="">tom</option>
</datalist>
<input type="text" name="mylist" list="list1"/>
</div>
progress(进度条),
meter,
<meter id="me" max="10000" low="500" high="9000" optimum="9999"
value="10"></meter>
output
(3)表单新增属性:placehoder(占位符),autofocus(自动获焦),mutiple(允许输入多个值),form(表单元素可以在空间外).required(必填),maxlength,minlength,max,min,
3:音频视频
浏览器解析视频必须安装相应视频格式的解码器,一般浏览器都有mp4的解码器,如果没有,则可以将视频在格式工厂里转换为各种格式,如avi,flv,webm,等。如:
<video id = "v" controls muted>
<source src = "X.avi "></source>
<source src = "X.mp4 "></source>
<source src = "X.webm "></source>
</video>
controls:视频下方的播放控件。 muted:静音。autoplay:自动播放。loop:循环。poster视频播放前的广告图片。
var v = document.getElementById("v1")
v.volume=0.5//调节播放时的声音。
v.playbackRate=3//播放时的速率倍数。
paused:true表示暂停。
play():播放视频
pause():暂停
onplay():
onpause():
音频:
4:网页绘图(Canvas),做特效,小游戏。
svg:2D矢量图;canvas:2D位图;webGI:3D位图。
图形:
画布的宽和高不能在css里设置,会出现错误。
<canvas id = "c1" width = "500px" height="400px"></canvas>
<script>
//获得画布
var c1 = document.getElementById("c1")
//获得画笔
var ctx = c1.getContext("2d")
//设置实心矩形样式(填充颜色):
ctx.fillStyle="red"
//绘制实心矩形
ctx.fillRect(0,0,100,80)
//设置空心矩形样式(描边颜色)
ctx.strokeStyle = "green"
//设置描边宽度
ctx.lineWidth=3
//绘制空心矩形
ctx.strokeRect(100,100,100,80)
//清除范围内元素
ctx.clearRect(0,0,180,400)
</script>
文字:
<script>
//获得画布
var c1 = document.getElementById("c1")
//获得画笔
var ctx = c1.getContext("2d")
ctx.font = "30px Microsoft雅黑"//设置字体
ctx.textBaseline="top"//设置为基线对齐
var str = "abcdegjaeger加到"
ctx.fillText(str,10,20)//填充实心文字
var str1 = "kongxing的文字"
ctx.strokeText(str1,260,350)//填充空心文字
var obj = ctx.measureText(str)//获得文本对象
var w = obj.width//获得文本长度。
</script>
线条:
var c1 = document.getElementById("c1")
var ctx = c1.getContext("2d")
ctx.beginPath()
ctx.arc(200,200,50,0,180*Math.PI/180)
ctx.stroke()
ctx.beginPath()//开始画
//画弧线。圆心,半径,起始角度,结束角度。
ctx.arc(300,300,60,270*Math.PI/180,90*Math.PI/180)
//描边,因为默认画出来的路径无颜色。
ctx.stroke()
//将画笔移至..
ctx.moveTo(300,300)
//画直线
ctx.lineTo(200,200)
ctx.lineTo(300,305)
//描边
ctx.stroke()
ctx.beginPath()
ctx.arc(296,160,6,0,360*Math.PI/180)
//设置填充颜色
ctx.fillStyle="white"
//为空心线条填充颜色。
ctx.fill()
画图:
图片随鼠标移动
var c1 = document.getElementById("c1")
var ctx = c1.getContext("2d")
//创建图片画布
var img2 = new Image()
//要下载的图片路径
img2.src = 'img/t2.png'
var w = img2.width
var h = img2.height
//加载图片后触发的事件
img2.onload=function () {
var x = 0
var y = 0
c1.onmousemove=function (e) {
x = e.offsetX
y = e.offsetY
//将图片画在画布上
ctx.clearRect(0,0,600,400)
ctx.drawImage(img2,x-w/2,y-h/2)
}
}
直方图:
/*result:[{"name":"健胃消食片","s":109150},
{"name":"六味地黄丸","s":211800}]*/
var c1 = document.getElementById("c1")
var ctx = c1.getContext("2d")
for(var i = 0;i<result.length;i++){
var w = 50
var h = result[i].s/1000
var x = i*100+w
var y = 400-h
ctx.fillRect(x,y,w,h)
}
5:svg
6:地理定位
智能手机通过芯片定位,准。打开GPS即可。
老年手机通过基站定位。
电脑通过IP地址定位。
直接去百度地图开发平台,注册获得秘钥。
然后调用api即可。
7:web Work
8:web storage
客户端存储数据的方式:
(1):cookie,不超过4k,操作复杂。
(2):flash:
(3):web Storage,不能超过8M,简单
会话:session,浏览器打开某个网站的第一个页面,会话开始,关闭浏览器,会话结束。
sessionstorage存储:(会话存储)关闭浏览器,数据会被清除。
var a = sessionStorage.setItem("name","jack")
var b = sessionStorage.setItem("age",23)
获取:
var a = sessionStorage.getItem("name")
var b = sessionStorage.getItem("age")
console.log(a)
console.log(b)
localStorage(跨会话存储),关闭浏览器,数据不会被清除。数据实际存储在C盘下某个位置。
(4):indexDB,存储量大。
9:拖放API
10:web socket协议:http协议:发送一次请求,响应一次。websocket请求一次后不再断开连接。