【HTML/CSS】HTML5和CSS3的新特性

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 用户界面属性