html5의 새로운 기능은 무엇입니까? html5의 새로운 기능 요약

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에는 세 가지 용도가 있습니다.

1. svg를 웹 페이지에 그림으로 직접 배치합니다.

2. svg는 애니메이션을 구현합니다.

3. 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)