html5의 새로운 공통 기능은 무엇입니까?

html5의 일반적인 새로운 기능: 1. 캔버스 그리기, 3. 의미 태그, 5. 위치 정보, 6. WebWorker, 9. WebSocket 10. SVG 그리기. HTML5는 추가 플러그인 없이 풍부한 웹 콘텐츠를 전달하도록 특별히 설계된 최신 HTML 표준으로, 웹 애플리케이션 구성을 단순화하는 새로운 요소와 새로운 API를 제공합니다.

이 튜토리얼의 운영 체제: Windows 10 시스템, HTML5 버전, DELL G3 컴퓨터.

HTML5란 무엇입니까?

1. HTML5는 최신 HTML 표준입니다.

2. HTML5는 추가 플러그인 없이도 풍부한 웹 콘텐츠를 호스팅하도록 특별히 설계되었습니다.

3. HTML5에는 새로운 의미, 그래픽 및 멀티미디어 요소가 있습니다.

4. HTML5에서 제공하는 새로운 요소와 새로운 API는 웹 애플리케이션 구성을 단순화합니다.

5. HTML5는 크로스 플랫폼이며 다양한 유형의 하드웨어(PC, 태블릿, 휴대폰, TV 등)에서 실행되도록 설계되었습니다.

HTML5의 일반적인 새로운 기능:

1. 캔버스 요소

캔버스 요소는 웹 페이지에 그래픽을 그리는 데 사용됩니다. 경로, 직사각형, 원, 문자를 그리고 추가하는 방법이 있습니다. 이미지. Canvas는 js를 통해 2D 그래픽을 그려서 픽셀 단위로 렌더링합니다. 그림이 완성된 후 수정되면 전체 장면이 다시 그려집니다.

2. 양식 요소

(1) 새로운 양식 요소

: 사용자를 확인하는 신뢰할 수 있는 방법을 제공하며, 레이블은 다음 형식으로 사용할 키 쌍 생성 필드를 지정합니다. 계산 또는 스크립트 출력과 같은 출력.

(2) 새로운 양식 속성

placehoder 속성: 사용자가 값을 입력하기 전에 입력 필드에 짧은 프롬프트가 표시됩니다. 이는 기본 상자 프롬프트입니다.

필수 속성: 부울 속성입니다. 채워질 입력 필드 비어 있지 않음

pattern 속성: 요소의 값을 확인하는 데 사용되는 정규 표현식을 설명합니다.

max/min 속성: 최대값 및 최소값을 지정합니다. 입력 필드의 숫자 간격 ;

height/width 속성: 이미지 유형의 태그 너비에 사용됩니다.

autofocus 속성: 페이지가 자동으로 초점을 맞추는 부울 속성입니다.

multiple 속성: 요소에서 여러 값의 선택을 지정하는 부울 속성입니다.

3. 시맨틱 태그

시맨틱 태그는 태그에 고유한 의미를 부여할 뿐만 아니라 시맨틱 태그의 장점도 가지고 있습니다. (1) 인터페이스의 코드 구조를 명확하게 만들어 코드를 더 쉽게 읽을 수 있도록 합니다. (2) 다른 장치(예: 스크린 리더, 시각 장애인 리더, 모바일 장치)가 의미론적 방식으로 웹 페이지를 렌더링하는 데 편리합니다. (3) 검색 엔진 최적화(SEO)에 도움이 됩니다. .

4. 미디어 요소

오디오 파일 재생을 위한 요소<오디오>————<오디오 컨트롤>(1) 컨트롤 속성은 재생, 일시 중지 및 볼륨 컨트롤을 제공합니다. audio> 브라우저가 지원하지 않는

(4)은 mp3, wax, ogg의 세 가지 오디오 형식 파일을 지원합니다.

비디오 파일 재생을 위한 요소

(1) control 속성은 재생 일시 정지 및 볼륨 제어를 제공하며 dom 연산(play() 및 Pause())을 사용할 수도 있습니다.

(2) video 요소 너비와 높이를 제공하여 비디오 크기를 제어합니다. 설정하면 페이지가 로드될 때 유지됩니다. 설정하지 않으면 원본 동영상을 기준으로 페이지가 변경되지 않습니다.

5. Geolocation

HTML5는 getCurrentPosition() 메서드를 사용하여 사용자의 위치를 ​​얻고 이를 기반으로 위치 거리를 계산할 수 있습니다.

6. 드래그 앤 드롭 API

드래그 앤 드롭은 개체를 잡고 다른 위치로 드래그하는 일반적인 기능입니다. HTML5에서는 드래그 앤 드롭이 표준의 일부이며 모든 요소를 ​​드래그 앤 드롭할 수 있습니다. 드래그 앤 드롭 프로세스는 원본 개체와 대상 개체로 구분됩니다. 원본 개체는 드래그하려는 요소를 참조하고, 대상 개체는 드래그한 후 배치하려는 대상 위치를 참조합니다.

드래그 앤 드롭 소스 개체(이동 가능)에 의해 트리거될 수 있는 이벤트 - 3개 이벤트:

dragstart: 드래그 시작 드래그: 드래그 진행 중 dragend: 드래그 종료 전체 드래그 프로세스의 구성: dragstart * 1 + 드래그*n + 드래그엔드*1.

드래그 앤 드롭 대상 개체(이동하지 않음)에 의해 트리거될 수 있는 이벤트 - 4:

dragenter: 드래그로 드래그오버: 드래그 및 호버링 드래그리브: 드롭에서 멀리 드래그: 전체 드래그 해제

드래그 프로세스의 구성 1: dragenter*1 + dragover*n + dragleave*1

전체 드래그 프로세스의 구성 2: dragenter*1 + dragover*n + drop*1.

7. 웹 작업자

HTML 페이지에서 스크립트를 실행할 때 스크립트가 완료될 때까지 페이지 상태가 응답하지 않습니다. Web Worker는 다른 스크립트와 독립적으로 백그라운드에서 실행되며 페이지 성능에 영향을 주지 않는 JavaScript입니다. Web Worker가 백그라운드에서 실행되는 동안 클릭, 콘텐츠 선택 등 원하는 작업을 계속할 수 있습니다.

8. 웹 저장소

웹 저장소는 쿠키 저장소의 로컬 캐시 문제를 해결하는 데 도움을 주기 위해 H5에서 도입한 중요한 기능입니다. 이전에는 로컬 저장소에서 쿠키를 사용했습니다. 하지만 웹 스토리지는 더욱 안전하고 빨라야 하며, 웹 스토리지의 용량은 5M이고 쿠키는 4K에 불과합니다.

9. 웹 소켓

웹소켓 프로토콜은 웹 애플리케이션 클라이언트와 서버 간의 전이중 통신 메커니즘을 제공합니다. WebSocket API에서는 브라우저와 서버가 핸드셰이크 작업만 수행하면 브라우저와 서버 사이에 빠른 채널이 형성되어 둘 사이에 직접 데이터가 전송될 수 있습니다. 브라우저는 JavaScript를 통해 WebSocket 연결을 요청을 서버에 보냅니다. 연결이 설정된 후 클라이언트와 서버는 TCP 연결을 통해 직접 데이터를 교환할 수 있습니다. 웹 소켓 연결을 얻은 후 send() 메서드를 통해 서버에 데이터를 보내고, onmessage 이벤트를 통해 서버에서 반환된 데이터를 받을 수 있습니다.

10. SVG 드로잉

SVG는 확장 가능한 벡터 그래픽을 말하며, XML을 사용하여 2D 그래픽을 설명하는 언어입니다. SVG에서는 그려진 모든 모양이 객체로 처리됩니다. SVG 객체의 속성이 변경되면 브라우저는 자동으로 그래픽을 재현할 수 있습니다.

확장 읽기

일반적인 html5 이벤트는 무엇입니까?

일반적인 html5 이벤트는 다음과 같습니다. 1. 일반 이벤트 2. 페이지 관련 이벤트 4. 롤링 자막 이벤트 이벤트 6. 트리거된 이벤트 7. 외부 이벤트.

1. 일반 이벤트

onClick: 주로 개체의 제어 범위 내에서 마우스 클릭에 사용됩니다. onMouseDown: 마우스 버튼을 눌렀습니다. 버튼 누르기 마우스를 눌렀다가 놓을 때 트리거되는 이벤트 onMouseOver: 마우스가 객체 범위 위로 이동할 때 트리거되는 이벤트 onMouseOut: 마우스가 객체 범위를 벗어날 때 트리거되는 이벤트 onKeyPress: 키보드의 키를 눌렀다 놓을 때 트리거되는 이벤트 onKeyDown: 키보드의 키를 눌렀을 때 트리거되는 이벤트 onKeyUp: 키보드의 키를 눌렀다가 떼면 트리거되는 이벤트.

2. 페이지 관련 이벤트

onAbort: 다운로드 시 사용자에 의해 이미지가 중단됩니다. onBeforeUnload: 현재 페이지의 내용이 변경되려고 할 때 트리거되는 이벤트입니다. 스크립트 오류 및 외부 데이터 참조 오류와 같은 페이지 onLoad: 외부 파일 도입 완료를 포함하여 페이지가 비어 있고 브라우저로 전송될 때 트리거되는 이벤트. ; onResize: 브라우저의 창 크기가 변경되면 이벤트가 트리거됩니다. onScroll: 브라우저의 스크롤 막대 위치가 변경되면 이벤트가 트리거됩니다. onStop: 브라우저의 중지 버튼을 누르거나 다운로드 중인 파일이 Interrupted; onUnload: 변경 시 실행될 현재 페이지 이벤트입니다.

3. 양식 관련 이벤트

onBlur: 현재 요소가 포커스를 잃을 때 트리거되는 이벤트 [마우스와 키보드 모두에 의해 트리거될 수 있음] onChange: 현재 요소가 포커스를 잃을 때 트리거되는 이벤트 요소 변경 [마우스 및 키보드에 의해 트리거될 수 있음] onFocus: 요소가 포커스를 얻을 때 트리거되는 이벤트 onReset: 양식의 RESET 속성이 활성화될 때 트리거되는 이벤트; .

4. 롤링 자막 이벤트

onBounce: Marquee의 콘텐츠가 Marquee 표시 범위 밖으로 이동할 때 트리거되는 이벤트입니다. onFinish: 표시해야 하는 콘텐츠가 Marquee 요소에서 완료될 때 트리거됩니다. Marquee 요소는 표시해야 하는 콘텐츠를 완성합니다. 콘텐츠 표시가 시작될 때 이벤트가 트리거됩니다.

5. 이벤트 편집

onBeforeCopy HTML: 페이지에서 현재 선택한 콘텐츠가 뷰어의 클립보드에 복사되기 전에 트리거되는 이벤트입니다. onBeforeCut: 페이지의 콘텐츠 중 일부 또는 전체가 다른 곳으로 이동될 때. 현재 페이지 [클립] 항목이 뷰어의 시스템 클립보드로 이동될 때 트리거되는 이벤트입니다.

6. 트리거된 이벤트

onBeforeEditFocus: 현재 요소가 편집 상태로 들어가려고 합니다. onBeforePaste: 콘텐츠가 뷰어의 시스템 클립보드에서 페이지로 전송[붙여넣기]되려고 할 때 이벤트가 트리거됩니다. onBeforeUpdate: 뷰어가 붙여넣을 때 대상 개체에 알립니다. onContextMenu: 브라우저가 마우스 오른쪽 버튼을 눌러 메뉴를 표시하거나 키보드 키를 통해 페이지 메뉴를 트리거할 때 트리거되는 이벤트입니다. [페이지에 onContentMenu="return false"를 추가하여 사용을 비활성화해 보세요. 마우스 오른쪽 버튼]; onCopy: 페이지에서 현재 선택된 콘텐츠가 복사될 때 발생하는 이벤트 onCut: 페이지에서 현재 선택된 콘텐츠가 잘릴 때 발생하는 이벤트 onDrag: 개체를 드래그할 때 발생하는 이벤트; ]; onDragDrop : 마우스로 외부 객체를 현재 창이나 프레임으로 드래그합니다. onDragEnd HTML: 마우스 드래그가 끝날 때, 즉 마우스 버튼을 놓으면 트리거됩니다. onDragEnter: 마우스로 드래그한 객체가 들어갈 때 트리거됩니다. 컨테이너 이벤트의 범위; onDragLeave: 마우스로 드래그한 객체가 해당 컨테이너의 범위를 벗어날 때 트리거되는 이벤트; onDragOver: 드래그된 객체가 다른 객체의 컨테이너 범위 내로 드래그될 때 트리거되는 이벤트. : 객체를 드래그하려고 할 때 트리거되는 이벤트 onDrop: 드래그 프로세스 중에 마우스 버튼을 놓을 때 트리거되는 이벤트 onLoseCapture: 마우스 이동으로 인해 요소가 선택 포커스를 잃을 때 트리거되는 이벤트 콘텐츠를 붙여넣을 때 onSelect: 텍스트 콘텐츠가 선택될 때 이벤트가 트리거됩니다. onSelectStart HTML: 텍스트 콘텐츠 선택이 시작될 때 이벤트가 트리거됩니다.

7. 외부 이벤트

onAfterPrint: 문서가 인쇄될 때 트리거되는 이벤트 onFilterChange: 개체의 필터 효과가 변경될 때 트리거됩니다. : 뷰어가 F1을 누르거나 브라우저의 도움말을 선택하면 이벤트가 발생합니다. onPropertyChange: 객체의 속성 중 하나가 변경되면 이벤트가 발생합니다. onReadyStateChange: 객체의 초기화 속성 값이 변경되면 이벤트가 발생합니다.

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