HTML5는 HTML의 다섯 번째 주요 수정 사항이라는 것을 모두 알고 있습니다. 따라서 주요 수정 사항이므로 분명히 새로운 기능이 있을 것입니다. 그러면 HTML5의 새로운 기능은 무엇입니까? 다음 글에서는 html5의 새로운 기능을 요약해보겠습니다.
먼저 html5가 무엇을 의미하는지 알아야 합니다. html5에 대해 잘 모른다면 다음 문서를 살펴보세요. html5가 무엇인가요? html5의 용도는 무엇입니까? 자, 이제 html5의 구체적인 정의를 알았으니 html5의 새로운 기능을 살펴보겠습니다.
html5의 새로운 기능은 무엇인가요?
1. HTML5의 새로운 기능: 페인팅을 위한 캔버스 요소
캔버스 요소는 웹 페이지에 그래픽을 그리는 데 사용되며 캔버스의 모든 픽셀을 제어할 수 있습니다. 캔버스에는 경로, 직사각형, 원, 문자를 그리고 이미지를 추가하는 다양한 방법이 있습니다.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas> 로그인 후 복사
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);
</script> 로그인 후 복사
svg에 대해 이야기해 보겠습니다. svg는 2차원 벡터 그래픽을 설명하는 데 사용되는 그래픽 형식입니다.
svg에는 세 가지 용도가 있습니다.
svg를 웹 페이지에 그림으로 직접 배치합니다.
svg는 애니메이션을 구현합니다.
svg 사진에 대한 상호 작용 및 필터 효과.
지침:
(1) Canvas는 JavaScript를 통해 2D 그래픽을 그립니다.
(2) 캔버스는 픽셀 단위로 렌더링됩니다.
(3) 캔버스에서는 그래픽이 그려지면 더 이상 브라우저의 관심을 받지 못합니다. 위치가 변경되면 그래픽으로 가려졌을 수 있는 개체를 포함하여 전체 장면을 다시 그려야 합니다.
(4) svg는 XML을 사용하여 2D 그래픽을 설명하는 언어입니다.
(5) svg는 XML을 기반으로 하며 이는 SVG DOM의 모든 요소를 사용할 수 있음을 의미합니다. JavaScript 이벤트 핸들러를 요소에 연결할 수 있습니다.
(6) svg에서는 그려진 각 그래픽이 개체로 간주됩니다. svg 객체의 속성이 변경되면 브라우저는 자동으로 그래픽을 재현할 수 있습니다.
캔버스 및 svg에 대한 자세한 내용은 다음을 참조하세요. HTML5 canvas 및 HTML5 인라인 SVG
2. html5의 새로운 기능: 더욱 풍부하고 강력한 양식
html5에는 여러 가지 새로운 양식이 있습니다. 입력 입력 유형. 이러한 새로운 기능은 더 나은 입력 제어 및 검증을 제공합니다.
html5는 또한 다음 양식 요소를 추가합니다.
: 요소는 .
: 사용자를 인증하는 신뢰할 수 있는 방법을 제공하며, 태그는 양식에 사용할 키 쌍 생성기 필드를 지정합니다.
: 계산이나 스크립트 출력과 같은 다양한 유형의 출력에 사용됩니다.
HTML5 새 양식 속성:
placehoder 속성: 사용자가 값을 입력하기 전에 입력 필드에 짧은 프롬프트가 표시됩니다. 즉, 입력 상자의 일반적인 기본 프롬프트는 사용자가 입력한 후에 사라집니다.
필수 속성: 부울 속성입니다. 채워야 하는 입력 필드는 비어 있을 수 없습니다
pattern 속성:
min 및 max 속성: 요소의 최소값과 최대값을 설정합니다.
step 속성: 입력 필드의 유효한 숫자 간격을 지정합니다.
height 및 width 속성: 유형 이미지의
autofocus 속성: 부울 속성입니다. 페이지가 로드될 때 필드에 자동으로 초점이 맞춰지도록 지정합니다.
다중 속성: 부울 속성입니다.
3. html5의 새로운 기능: 미디어용 비디오 및 오디오 요소
1. html5는 오디오 파일 재생을 위한 표준을 제공합니다. 즉, 요소를 사용합니다. 예: <source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio> 로그인 후 복사
지침:
(1) 컨트롤 속성은 재생, 일시 정지 및 볼륨 컨트롤을 추가하는 데 사용됩니다.
(2) 와 사이에 브라우저가 지원하지 않는 요소의 프롬프트 텍스트를 삽입해야 합니다.
(3)
요소를 사용하면 여러 개의 요소를 사용할 수 있으며 브라우저는 지원되는 첫 번째 오디오 파일을 사용합니다.
(4) 요소는 MP3, Wav 및 Ogg의 세 가지 오디오 형식 파일을 지원합니다.
2. HTML5는 비디오 요소를 통해 비디오를 포함하는 표준 방법을 제공합니다.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video> 로그인 후 복사
(1) 컨트롤은 비디오를 제어하기 위한 재생, 일시 정지 및 볼륨 컨트롤을 제공합니다. DOM 작업을 사용하여 play() 및 Pause() 메서드와 같은 비디오의 재생 및 일시 중지를 제어할 수도 있습니다.
（2）video元素提供了width和height属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
（3）标签之间插入的内容是提供给不支持video元素的浏览器显示的。
（4）video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式（ MP4, WebM, 和 Ogg）。
四、html5新特性之html5地理定位
HTML5 Geolocation（地理定位）用于定位用户的位置。
window.navigator.geolocation {
getCurrentPosition: fn 用于获取当前的位置数据
watchPosition: fn 监视用户位置的改变
clearWatch: fn 清除定位监视
} 로그인 후 복사
获取用户定位信息：
navigator.geolocation.getCurrentPosition(
function(pos){
console.log('用户定位数据获取成功')
//console.log(arguments);
console.log('定位时间：',pos.timestamp)
console.log('经度：',pos.coords.longitude)
console.log('纬度：',pos.coords.latitude)
console.log('海拔：',pos.coords.altitude)
console.log('速度：',pos.coords.speed)
}, //定位成功的回调
function(err){
console.log('用户定位数据获取失败')
//console.log(arguments);
} //定位失败的回调
) 로그인 후 복사
五、html5新特性之html5拖放
拖放（Drag 和 drop）是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放；拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。
想要了解更多拖放中的内容可以参考：HTML拖放
下面给出一个实例：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>
<p>请把图片拖放到矩形中：</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/xxx.gif" draggable="true" ondragstart="drag(event)" />
</body>
</html> 로그인 후 복사
六：html5新特性之html5 Web存储
在客户端存储数据：
html5 提供了两种在客户端存储数据的新方法：
（1）localStorage - 没有时间限制的数据存储：localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
（2）sessionStorage - 针对一个 session 的数据存储：sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
七、html5新特性之html5应用程序缓存
使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
什么是应用程序缓存（Application Cache）？
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
（1）离线浏览 - 用户可在应用离线时使用它们
（2）速度 - 已缓存资源加载得更快
（3）减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
八、html5新特性之html5 Web Workers
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
九、html5新特性之html5服务器发送事件
html5服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
Server-Sent 事件 - 单向消息传递
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
十、html5新特性之html5 WebSocket
WebSocket是HTML5开始提供的一种在单个
TCP 连接上进行全双工通讯的协议。在WebSocket
API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过
JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP
连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
关于后面这几个特性的更多内容大家可以去看一看：HTML5 完整版手册
以上就是给大家总结的十个html5的新特性，当然了，如果想更深入的学习html5，这里给大家推荐关于html5视频教程 。
相关推荐：
HTML5新特性dataset的使用方法
HTML5 中的一些有趣的新特性
위 내용은 html5의 새로운 기능은 무엇입니까? html5의 새로운 기능 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
