【HTML/CSS】HTML5和CSS3的新特性-CSDN博客

本文链接：https://blog.csdn.net/xd963625627/article/details/114288482

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;
}