目录
- 1 HTML5
- 1.1 语义化标签
- 1.2 画布canvas
- 1.3 新增API
- 1.3.1 拖拽
- 1.3.2 地理定位
- 1.4 音视频Audio/Video
- 1.5 Web存储
- 1.6 WebWorker
- 1.7 WebSocket
- 1.8 新增表单控件
- 2 CSS3
- 2.1 新增属性
- 2.2 @font-face
- 2.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 type="text/javascript">function allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData("Text",ev.target.id);}function drop(ev){ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}
</script>
</head>
<body><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)"/>
</body>
</html>
1.3.2 地理定位
navigator.geolocation.getCurrentPosition(showPosition)
showPosition中定义获取定位信息的函数:
获取经纬度:position.coords.latitude
、position.coords.longitude
1.4 音视频Audio/Video
<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">您的浏览器不支持 audio 元素。
</audio>
<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">您的浏览器不支持Video标签。
</video>
1.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、url
- input新属性: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 用户界面属性
resize:none | both | horizontal | vertical | inherit 元素是否由用户调整大小
box-sizing: content-box | border-box | inherit 盒模型的类型
outline:outline-color outline-style outline-width outine-offset 轮廓的偏移