简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  html5의 기능은 무엇입니까

html5의 기능은 무엇입니까

青灯夜游
青灯夜游원래의
2021-12-01 14:03:509737검색

html5 기능은 다음과 같습니다: 1. 향상된 양식 입력 유형, 3. 비디오 및 오디오 재생 지원, 5. SVG 그리기, 7. 웹 작업자 9. 웹 저장소 10. 웹소켓.

html5의 기능은 무엇입니까

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

HTML5의 10가지 새로운 기능

오늘날의 인터넷 애플리케이션을 더 잘 처리하기 위해 HTML5에는 그래픽 그리기, 멀티미디어 콘텐츠, 더 나은 페이지 구조, 더 나은 형식 처리 및 여러 API와 같은 많은 새로운 요소와 기능이 추가되었습니다. 웹 응용 프로그램 캐싱, 저장소, 네트워크 작업자 등을 포함한 요소 끌어서 놓기용

(1) 의미 태그

의미 태그는 페이지의 콘텐츠를 구조화하고 표시하도록 만듭니다.

태그 설명
23bfccf8e44978cba95106989e8290e9ab946e7546ab66a280dd9c9f9310ecd5 문서의 헤더 영역을 정의합니다.
c37f8231a37e88427e62669260f0074d84122da5b51c58ef54d7045814144010 문서를 정의합니다. 꼬리 영역
c787b9a589a3ece771e842a6176cf8e944f9630a3d507ae7532760da37622b0f 는 문서의 탐색을 정의합니다.
2f8332c8dcfd5c7dec030a070bf652c34d7ab0de9a42de71c682b0860bad1410 은 문서의 섹션(섹션, 섹션)을 정의합니다.
a0e5b3772dc9b24c1f74b777e89d71ab 페이지의 독립 콘텐츠 영역 정의
15221ee8cba27fc1d7a26c47a001eb9bb68cffaf0006380b7e39ea0c3d532826 페이지의 사이드바 콘텐츠 정의
beb511a96a5aab3e931614dde36c9a04e5181117cf8c574f9ddcdf9809809783 문서의 세부정보 또는 문서의 섹션을 설명하는 데 사용됩니다
631fb227578dfffda61e1fa4d04b7d25039f3e95db2a684c7b74365531eb6044 태그에는 세부정보 요소의 제목이 포함됩니다
a38fd2622755924ad24c0fc5f0b4d412 e949bf554aab987df819ed6441bc3609 프롬프트 상자와 같은 대화 상자 정의

(2) 향상된 양식 입력 유형

　HTML5에는 여러 가지 새로운 양식 입력 입력 유형이 있습니다. 이러한 새로운 기능은 더 나은 입력 제어 및 검증을 제공합니다.

DateTime-Local 이메일 입력 month월 선택number숫자 값 입력 필드range특정 범위 내의 숫자 값 입력 필드 검색 검색용 도메인 tel 입력 전화번호 필드 정의 time시간 선택 url URL 주소 입력 필드 week 주 및 연도 선택

입력 유형

 Description

color

 주로 색상을 선택하는데 사용됩니다

date

 날짜 선택에서 날짜를 선택하세요 어

datetime

날짜(UTC 시간) 선택

날짜 및 시간(시간) 선택

이메일 주소가 포함된 도메인

HTML5에는 다음 양식 요소도 추가됩니다Descriptionfc86e7b705049fc9d4fccc89a2e80ee3목록 속성을 사용(<) ;input> 요소는 fc86e7b705049fc9d4fccc89a2e80ee3 요소의 ID에 바인딩됩니다. aa983b9eb8086376f1f6481364a02e5a태그는 다음에 사용되는 키 쌍을 지정합니다. 양식 생성기 필드. be6d67dae90cc1ad6469079e163d0939
Form element

신뢰할 수 있는 사용자 인증 방법을 제공합니다.

은 계산 또는 스크립트 출력

과 같은 다양한 유형의 출력 🎜🎜에 사용됩니다.

　HTML5의 새로운 양식 속성인

    • placehoder 속성은 사용자가 값을 입력하기 전에 입력 필드에 짧은 프롬프트가 표시됩니다. 즉, 입력 상자의 일반적인 기본 프롬프트는 사용자가 입력한 후에 사라집니다.
    • 필수 속성은 부울 속성입니다. 채워야 하는 입력 필드는 비워둘 수 없습니다. 패턴 속성은 d5fd7aea971a85678ba271703566ebfd 요소의 값을 확인하는 데 사용되는 정규식을 설명합니다.
    • min 및 max 속성은 요소의 최소값과 최대값을 설정합니다.
    • step 속성은 입력 필드의 유효한 숫자 간격을 지정합니다.
    • 높이 및 너비 속성은 이미지 유형의 d5fd7aea971a85678ba271703566ebfd 태그의 이미지 높이 및 너비에 사용됩니다.
    • autofocus 속성은 부울 속성입니다. 페이지가 로드될 때 필드에 자동으로 초점이 맞춰지도록 지정합니다.
    • 다중 속성은 부울 속성입니다. d5fd7aea971a85678ba271703566ebfd 요소 내에서 여러 값을 선택할 수 있도록 지정합니다. ​​
(3) 비디오 및 오디오

    HTML5는 오디오 파일 재생을 위한 표준을 제공합니다. 즉, b97864c2e0ef2353a16c4d64c7734e92 요소의 제어 속성을 사용하여 재생, 일시 정지 및 볼륨 제어를 추가합니다. .

  • 　b97864c2e0ef2353a16c4d64c7734e92와 81d2bc32cafa2076a27f10cdd878d0ab 사이에는 브라우저가 지원하지 않는 b97864c2e0ef2353a16c4d64c7734e92 요소의 프롬프트 텍스트를 삽입해야 합니다.

    • 　b97864c2e0ef2353a16c4d64c7734e92 요소는 여러 개의 e02da388656c3265154666b7c71a8ddc 요소를 사용할 수 있으며, 브라우저는 지원되는 첫 번째 오디오 파일을 사용합니다. 요소는 MP3, Wav 및 Ogg의 세 가지 오디오 형식 파일을 지원합니다.

HTML5는 비디오 요소를 통해 비디오를 포함하는 표준 방법을 지정합니다. 

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

control은 비디오를 제어하기 위한 재생, 일시 정지 및 볼륨 제어 기능을 제공합니다. DOM 작업을 사용하여 play() 및 Pause() 메서드와 같은 비디오의 재생 및 일시 중지를 제어할 수도 있습니다.

    동시에 비디오 요소는 비디오 크기를 제어하기 위한 너비 및 높이 속성도 제공합니다. 높이와 너비가 설정되면 페이지가 로드될 때 필요한 비디오 공간이 예약됩니다. 이러한 속성이 설정되지 않고 브라우저가 비디오의 크기를 알지 못하는 경우 브라우저는 로드 시 특정 공간을 예약할 수 없으며 페이지는 원본 비디오의 크기에 따라 변경됩니다.

  • 과 태그 사이에 삽입된 콘텐츠는 video 요소를 지원하지 않는 브라우저에서 표시되도록 제공됩니다.

    • 비디오 요소는 여러 소스 요소를 지원하며 다양한 비디오 파일을 연결할 수 있습니다. 브라우저는 첫 번째 인식 형식(MP4, WebM 및 Ogg)을 사용합니다.

(4) 캔버스 그리기

레이블은 그래픽 컨테이너일 뿐이며 그래픽을 그리려면 스크립트를 사용해야 합니다.

캔버스 - 그래픽

1. 캔버스를 만듭니다. 캔버스는 5ba626b379994d53f7acf72a64f9b697 요소를 통해 그려진 웹 페이지의 직사각형 상자입니다. 기본적으로 요소에는 테두리나 내용이 없습니다. 

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

　 태그는 일반적으로 id 속성(종종 스크립트에서 참조됨), 너비 및 높이 속성을 지정하여 캔버스 크기를 정의하고 스타일 속성을 사용하여 테두리를 추가해야 합니다. HTML 페이지에서 여러 5ba626b379994d53f7acf72a64f9b697 요소를 사용할 수 있습니다

2. Javascript를 사용하여 이미지를 그릴 수 있습니다. 캔버스 요소 자체에는 그리기 기능이 없습니다. 모든 그리기 작업은 JavaScript 내에서 수행되어야 합니다

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
　getContext("2d") 개체는 경로, 직사각형, 원, 문자 그리기 및 이미지 추가를 위한 여러 메서드가 포함된 내장 HTML5 개체입니다.

　 fillStyle 속성을 CSS 색상, 그라데이션 또는 패턴으로 설정하세요. 기본 fillStyle 설정은 #000000(검은색)입니다. fillRect(x,y,width,height) 메서드는 직사각형의 현재 채우기 방법을 정의합니다. 의미: 왼쪽 위 모서리(0,0)부터 시작하여 캔버스에 150x75 직사각형을 그립니다.

Canvas - 경로

캔버스에 선을 그리려면 다음 두 가지 방법을 사용합니다.

moveTo(x,y) 선의 시작 좌표를 정의

lineTo(x, y) 선의 끝 정의 좌표를 사용하여 선을 그리려면

  • 스트로크()와 마찬가지로 "잉크" 메서드를 사용해야 합니다. 

    <script>
　　var c=document.getElementById("myCanvas");
　　var ctx=c.getContext("2d");
　　ctx.fillStyle="#FF0000";
　　ctx.fillRect(0,0,150,75);
</script>
    • 시작 좌표(0,0)와 끝 좌표(200,100)를 정의한 다음 스트로크() 메서드를 사용하여 선을 그립니다.

  • Canvas - Text

캔버스를 사용하여 텍스트를 그립니다. 방법은 다음과 같습니다:

font - 글꼴 정의

fillText(text,x,y) - 캔버스에 단색 텍스트 그리기

  • strokeText(text,x,y) - 빈 텍스트 그리기 canvas

  • fillText() 사용:

    <script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(200,100);
    ctx.stroke();
</script>
    • "Arial" 글꼴을 사용하여 캔버스에 30px 높이의 텍스트(단색)를 그립니다.

  • Canvas - Gradient

그라디언트는 직사각형, 원, 선, 텍스트, 등 다양한 모양을 다양한 색상으로 맞춤 설정할 수 있습니다.

캔버스 그라데이션을 설정하는 방법에는 두 가지가 있습니다.

createLinearGradient(x,y,x1,y1) - 선 그라데이션 만들기

createRadialGradient(x,y,r,x1,y1,r1) - 방사형/원형 그래디언트 만들기

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

　　创建了一个线性渐变，使用渐变填充矩形

Canvas - 图像

　　把一幅图像放置到画布上, 使用 drawImage(image,x,y) 方法

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

　　把一幅图像放置到了画布上

(5)SVG绘图

　　SVG是指可伸缩的矢量图形

SVG 与 Canvas两者间的区别

　　SVG 是一种使用 XML 描述 2D 图形的语言。

　　Canvas 通过 JavaScript 来绘制 2D 图形。

　　SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

　　在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

　　Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

(6)地理定位

　　HTML5 Geolocation（地理定位）用于定位用户的位置。

window.navigator.geolocation {
    getCurrentPosition:  fn  用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn  清除定位监视
}　

　　获取用户定位信息：

navigator.geolocation.getCurrentPosition(
    function(pos){
　　　　console.log(&#39;用户定位数据获取成功&#39;)
　　　　//console.log(arguments);
　　　　console.log(&#39;定位时间：&#39;,pos.timestamp)
　　　　console.log(&#39;经度：&#39;,pos.coords.longitude)
　　　　console.log(&#39;纬度：&#39;,pos.coords.latitude)
　　　　console.log(&#39;海拔：&#39;,pos.coords.altitude)
　　　　console.log(&#39;速度：&#39;,pos.coords.speed)

},    //定位成功的回调
function(err){ 
　　　　console.log(&#39;用户定位数据获取失败&#39;)
　　　　//console.log(arguments);

}        //定位失败的回调
)

(7)拖放API

　　拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

　　拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。

拖放的源对象(可能发生移动的)可以触发的事件——3个：

  • dragstart：拖动开始

  • drag：拖动中

  • dragend：拖动结束

整个拖动过程的组成： dragstart*1 + drag*n + dragend*1

拖放的目标对象(不会发生移动)可以触发的事件——4个：

  • dragenter：拖动着进入

  • dragover：拖动着悬停

  • dragleave：拖动着离开

  • drop：释放

整个拖动过程的组成1： dragenter*1 + dragover*n + dragleave*1

整个拖动过程的组成2： dragenter*1 + dragover*n + drop*1

  • dataTransfer：用于数据传递的“拖拉机”对象；

在拖动源对象事件中使用e.dataTransfer属性保存数据：

e.dataTransfer.setData( k,  v )

在拖动目标对象事件中使用e.dataTransfer属性读取数据：

var value = e.dataTransfer.getData( k )

(8)Web Worker

　　当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

　　web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

　　首先检测浏览器是否支持 Web Worker

 if(typeof(Worker)!=="undefined"){
   // 是的! Web worker 支持!
   // 一些代码.....
   }else{
   // //抱歉! Web Worker 不支持
   }

　　下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码

 if(typeof(w)=="undefined")
   {
   w=new Worker("demo_workers.js");
   }

　　然后我们就可以从 web worker 发送和接收消息了。向 web worker 添加一个 "onmessage" 事件监听器：

 w.onmessage=function(event){
 document.getElementById("result").innerHTML=event.data;
 };

　　当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，使用 terminate() 方法。

完整的 Web Worker 实例代码

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>var w;function startWorker()
{if(typeof(Worker)!=="undefined")
{  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}else{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}function stopWorker()
{ 
w.terminate();
}</script>

</body>
</html>

　　创建的计数脚本，该脚本存储于 "demo_workers.js" 文件中

var i=0;

 function timedCount()
 {
 i=i+1;
 postMessage(i);
 setTimeout("timedCount()",500);
 }

 timedCount();

(9)Web Storage

　　使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是cookies。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为：

  • localStorage - 没有时间限制的数据存储

  • sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。

　　在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage

if(typeof(Storage)!=="undefined")
   {
   // 是的! 支持 localStorage  sessionStorage 对象!
   // 一些代码.....
   }
 else
   {
   // 抱歉! 不支持 web 存储。
   }

　　不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

    • 保存数据：localStorage.setItem(key,value);
    • 读取数据：localStorage.getItem(key);
    • 删除单个数据：localStorage.removeItem(key);
    • 删除所有数据：localStorage.clear();
    • 得到某个索引的key：localStorage.key(index);

(10)WebSocket

　　WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>W3Cschool教程(w3cschool.cn)</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

推荐教程：《html视频教程》

위 내용은 html5의 기능은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript html5 css 正则表达式 html Boolean date Session mail xml Event JS number 对象 事件 dom 选择器 canvas input websocket
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：html5 앱 개발 도구란 무엇입니까?다음 기사：html5 앱 개발 도구란 무엇입니까?

관련 기사

더보기