上传PDF到wordpress网站,商务网站建设推荐,人才网网站模板,关键词工具目录1 HTML51.1 语义化标签1.2 画布canvas1.3 新增API1.3.1 拖拽1.3.2 地理定位1.4 音视频Audio/Video1.5 Web存储1.6 WebWorker1.7 WebSocket1.8 新增表单控件2 CSS32.1 新增属性2.2 font-face2.3 2D/3D转换2.4 过渡2.5 动画2.6 媒体查询2.7 弹性布局2.8 用户界面属性1 HTML5 …
目录1 HTML51.1 语义化标签1.2 画布canvas1.3 新增API1.3.1 拖拽1.3.2 地理定位1.4 音视频Audio/Video1.5 Web存储1.6 WebWorker1.7 WebSocket1.8 新增表单控件2 CSS32.1 新增属性2.2 font-face2.3 2D/3D转换2.4 过渡2.5 动画2.6 媒体查询2.7 弹性布局2.8 用户界面属性1 HTML5
1.1 语义化标签
举例header、main、section、aside、footer、nav、dialog、detail、summary优点有利于开发人员和搜索引擎理解代码有利于代码的维护和搜索引擎优化
1.2 画布canvas
canvas标签作为图像容器通过JS绘制图像
1.3 新增API
1.3.1 拖拽
将元素的draggable属性设置为true在ondragstart绑定事件使用e.dataTransfer.setData(‘div1’, ev.target.id)保存触发拖拽的元素的id在ondrop绑定事件使用ev.dataTransfer.getData(“div1”)获取id将元素append到目标位置事件 拖拽元素绑定 dragstart拖动开始 dragend拖动完成 drag拖动时 释放区绑定 dragenter进入释放区 dragover在释放区移动 dragleave没有释放离开释放区 drop在释放区放下
!DOCTYPE HTML
html
head
script typetext/javascriptfunction allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData(Text,ev.target.id);}function drop(ev){ev.preventDefault();var dataev.dataTransfer.getData(Text);ev.target.appendChild(document.getElementById(data));}
/script
/head
bodydiv iddiv1 ondropdrop(event) ondragoverallowDrop(event)/divimg iddrag1 srcimg_logo.gif draggabletrue ondragstartdrag(event)/
/body
/html1.3.2 地理定位
navigator.geolocation.getCurrentPosition(showPosition) showPosition中定义获取定位信息的函数 获取经纬度position.coords.latitude、position.coords.longitude
1.4 音视频Audio/Video
audio controlssource srchorse.ogg typeaudio/oggsource srchorse.mp3 typeaudio/mpeg您的浏览器不支持 audio 元素。
/audio
video width320 height240 controlssource srcmovie.mp4 typevideo/mp4source srcmovie.ogg typevideo/ogg您的浏览器不支持Video标签。
/video1.5 Web存储
替代cookie的解决方案cookie容量小还会携带在http请求中增加请求的负载。
sessionStorage只能维持当前会话中关闭窗口数据就会删除localStorage可以持久存储直到被手动删除
1.6 WebWorker
web worker为单线程的JS提供了多线程的实现方式它是在后台运行的JS独立于其他脚本不影响页面的性能可以继续在页面做其他的事web worker在后台运行。
1.7 WebSocket
WebSocket中浏览器和服务器只需要做一个握手的动作就可以形成一条快速的通道二者之间可以互相传输数据。客户端通过send发送数据通过onmessage接收数据。
1.8 新增表单控件
input的类型coloer、date、datetime、email、search、tel、time、urlinput新属性autocomplete、autofocus、min、max、required
2 CSS3
2.1 新增属性
border-radius圆角边框border-shadow边框阴影、 text-shadow文字阴影liner-gradient线性渐变、radial-gradient径向渐变
等等…
2.2 font-face
自定义字体
2.3 2D/3D转换
transform: translate(x, y)移动scale(x,y)缩放 transform: translate3d(x, y, z)scale3d(x,y)缩放rotate3d(x,y,z,angle)旋转
2.4 过渡
transition
2.5 动画
keyframes animatoion1
{0%{background: red;}25%{background: yellow;}50%{background: blue;}100%{background: green;}
}
div
{animation-name: animatoion1;animation-duration:5s;animation-timing-function: linear;animation-delay:2s;animation-iteration-count: infinite;animation-direction: alternate;/*是否逆向播放*/animation-play-state: running;/*规定动画是否正在运行或暂停*//* Safari and Chrome: */-webkit-animation-name: animatoion1;-webkit-animation-duration:5s;-webkit-animation-timing-function: linear;-webkit-animation-delay:2s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-play-state: running;
}keyframes 定义动画名称
2.6 媒体查询
media 可以查询设备的物理像素然后进行自适应操作
2.7 弹性布局
display: flex
2.8 用户界面属性
resizenone | both | horizontal | vertical | inherit 元素是否由用户调整大小 box-sizing: content-box | border-box | inherit 盒模型的类型 outline:outline-color outline-style outline-width outine-offset 轮廓的偏移
