프론트 엔드 인터뷰에 필요한 HTML5의 새로운 기능

HTML5 : HTML5는 차세대 HTML이며 HTML, XHTML 및 HTML DOM의 새로운 표준이됩니다. 오늘, Front -End 인터뷰가있을 때마다 HTML5의 새로운 기능인 때마다 질문을받을 질문에 대해 이야기합시다. 이것은 학습의 프론트 엔드에서 마스터 해야하는 기본 지식입니다.

HTML5는 더 나은 의미 론적 레이블 요소를 추가합니다.

1. 기사 요소는 블로그의 기사와 같이 컨텍스트와 관련이없는 독립적 인 컨텐츠를 나타냅니다.
2. 따로 요소는 기사 내용, 지원 정보 이외의 내용을 나타냅니다.
3. 헤더 요소는 페이지의 전체 페이지의 컨텐츠 블록 또는 헤더를 나타냅니다.
4. HGROUP 요소는 페이지의 블록 또는 전체 페이지의 제목을 결합하는 데 사용됩니다.
5. 바닥 글 요소는 페이지의 컨텐츠 블록 또는 전체 페이지를 나타냅니다.
6. 그림 요소는 미디어 컨텐츠 그룹 및 제목을 나타냅니다.
7. 섹션 요소는 페이지의 컨텐츠 블록 (예 : 챕터)을 나타냅니다.
8. NAV 요소는 페이지의 탐색 링크를 나타냅니다.

1. 비디오 요소는 비디오를 정의하는 데 사용됩니다.
2. 오디오 요소는 오디오를 정의하는 데 사용됩니다.
3. 캔버스 요소는 그래픽을 표시하는 데 사용되며, 그 자체는 동작이없고 캔버스의 한 조각 만 있습니다.
4. 임베드 요소는 다양한 멀티미디어를 삽입하는 데 사용됩니다.
5. 마크 요소는 하이라이트를 표시하는 데 사용됩니다.
6. 진행 요소는 모든 유형의 작업의 진행 상황을 보여주는 데 사용됩니다.
7. 미터 요소는 측정을 나타내고 사전 정의 된 범위 내에서 측정을 정의합니다.
8. 시간 요소는 날짜 또는 시간을 표시하는 데 사용됩니다.
9. 명령 요소, 명령 버튼을 나타냅니다.
10. 세부 사항 요소는 사용자가 요구하고 얻을 수있는 세부 정보를 표시하는 데 사용됩니다.
11. 요약 요소는 세부 사항 요소에 대한 가시 제목을 정의하는 데 사용됩니다.
12. Datalist 요소는 옵션 데이터 목록을 표시하는 데 사용됩니다. 입력 요소와 함께 사용하여 입력 값의 드롭 다운 목록을 만들 수 있습니다.
13. DataGrid 요소는 또한 트리 목록 형식으로 표시되는 선택적 데이터 목록을 표시하는 데 사용됩니다.
14. keygen 요소는 생성 할 키를 나타냅니다.
15. 출력 요소는 다른 유형의 출력을 나타냅니다.
16. 소스 요소는 미디어 요소에 대한 미디어 리소스를 정의합니다.
17. 메뉴 요소는 메뉴 목록을 나타냅니다.
18. 루비 요소는 루비 댓글을 나타내고 RT 요소는 문자의 해석 또는 발음을 나타냅니다. RP 요소는 Ruby Notes에서 Ruby 요소를 지원하지 않는 브라우저에서 표시 한 컨텐츠를 정의하는 데 사용됩니다.
19. WBR 요소는 소프트 스위칭을 나타냅니다. BR 요소와의 차이점은 BR 요소가 WBR 요소가 브라우저 창의 너비 또는 상위 레벨 요소를 의미한다는 것을 의미합니다. 선을 바꾸지 말고 너비가 충분하지 않으면 은행을 변경하기 위해 주도권을 잡으십시오.
20. BDI 요소는 텍스트의 텍스트 방향을 정의하여 주변의 텍스트 방향에서 시작됩니다.
21. 대화 상자 요소는 대화 상자 또는 창을 나타냅니다.

일부 브라우저는 일부 브라우저 만 지원됩니다. 일부 브라우저는 요소를 지원합니다.

순수한 표현의 요소는 CSS로 대체 될 수있는 요소입니다. Basefont, Big, Center, Font, S, Strike, TT, U, 해당 기능은 Page Display를 CSS 스타일로 대체하고 대체합니다.

프레임 세트 요소, 프레임 요소 및 Noframes 요소의 경우 프레임 프레임 워크가 웹 가용성에 부정적인 영향을 미치기 때문에 프레임 프레임 워크는 더 이상 HTML5에서 지원되지 않으며 Iframe 프레임 워크 만 지원합니다.

애플릿, bgsound, blink, marquee 및 기타 요소의 경우, 일부 브라우저 만 지원되기 때문에 특히 BGSound 요소 및 마키 요소는 IE에 의해서만 지원되므로 HTML5에서 폐지됩니다. 애플릿 요소는 임베드 요소 또는 객체 요소로 대체 ​​될 수 있으며 BGSound 요소는 오디오 요소로 대체 ​​될 수 있으며 Marquee는 JavaScript 프로그래밍으로 대체 될 수 있습니다.

위에서 언급 한 캔버스 요소는 페이지가 그래픽을 표시 할 캔버스를 제공 할 수 있습니다. 캔버스 API와 결합 하여이 캔버스에서 다양한 그래픽, 차트, 이미지 및 애니메이션을 동적으로 생성하고 표시 할 수 있습니다. 캔버스는 본질적으로 gucted 객체가 페이지 구조 또는 이름 공간에 속할 수 없습니다. 각 차트를 객체 저장소로 사용할 필요가 없으며 성능 성능이 매우 좋습니다.

캔버스 API를 사용하여 먼저 캔버스 요소의 컨텍스트를 그린 다음 컨텍스트에 캡슐화 된 다양한 도면 함수를 사용하여 그리기를합니다.

 <Canvas> 대체 컨텐츠 < /canvas> var contected ( 'canvas'); / 실습은 기본 충전국이 검은 색임을 보여줍니다

SVG는 HTML5의 또 다른 그래픽 기능입니다. HTML5는 SVG 요소가 HTML 마크에 직접 나타날 수 있도록 내부 Union SVG를 도입합니다.

 <SVG 높이 = 100 너비 = 100> <Circle CX = 50 cy = 50 r = 50 /svg>

오디오 및 비디오 요소의 출현으로 인해 HTML5 미디어 응용 프로그램은 더 많은 새로운 선택을 만들었습니다. 이 두 요소의 경우 HTML5 사양은 일반, 완전 및 스크립트 제어 API를 제공합니다.

HTML5 사양이 나오기 전에 페이지에서 비디오를 재생하는 일반적인 방법은 HTML에 오디오 및 비디오를 포함하여 Flash, Quicktime 또는 Windows Media Plug -in을 사용하는 것입니다. 태그.

1. 브라우저의 기본 지원 기능으로서 새로운 오디오 및 비디오 요소를 설치할 필요가 없습니다.
2. 미디어 요소는 웹 페이지가 범용, 통합 및 스크립트 제어 인 API를 제공하기를 원합니다.

 <video src = video.webm controls> <객체 data = videoplayer.swf type = application /x-shockwave-flash> <param name = movie value = video.swf /> < /object> 브라우저는 HTML5 비디오를 지원하지 않습니다. </video>

브라우저 감지가 오디오 요소 또는 비디오 요소를 지원하는지 여부는 스크립트와 동적으로이를 생성하는 가장 간단한 방법이며 특정 기능이 존재하는지 여부를 감지합니다.

 var hasvideo = !!

HTML5 지리적 위치 API (지리적 위치 API)는 사용자에게 자신의 위치를 ​​공유하도록 요청할 수 있습니다. 사용 방법은 매우 간단합니다. 브라우저는 위치 정보를 반환합니다. . 위치 정보는 위도, 경도 좌표 및 기타 메타 데이터로 구성됩니다.

Geolocation API는 사용자를 사용하여 응용 프로그램의 응용 프로그램을 찾을 수있는 기본 기술을 지정하지 않습니다. 대신, 위치 정보의 API 만 검색하는 데만 사용되며 API를 통해 검색된 데이터는 어느 정도의 정확도 만 가지며 장치 반환의 위치가 정확하다는 것을 보장 할 수는 없습니다. 장치는 다음 데이터 소스를 사용할 수 있습니다.

1. IP 주소

   3 차원 좌표

   GPS

   Mac은 RFID, WiFi 및 Bluetooth에서 Wi -Fi까지 주소입니다

2. GSM 또는 CDMA 전화 ID
3. 사용자 사용자 정의 데이터

 // 업데이트 getCurrentPosition (updateLocation, handlelocationer); // 정확도 var timestamp = coords.timmers} // 오류 처리 함수 handlelocationer (....} navigator.geoloc a 위치 업데이트 navigator.geolocation.clearwatch (WatchId);

보안 고려 사항의 경우 동일한 브라우저의 프레임, 탭 및 Windows 간의 통신이 항상 엄격하게 제한되었습니다. 그러나 실제로는 다른 사이트의 내용이 브라우저에서 상호 작용 해야하는 합리적인 수요가 있습니다. 이 경우 브라우저가 직접 통신 메커니즘을 제공 할 수있는 경우 이러한 응용 프로그램을 더 잘 구성 할 수 있습니다.

새로운 기능은 HTML5, Cross -Document Message Communication에 소개되어 iframe, 탭 페이지 및 Windows가 안전하게 수행 될 수 있습니다. PostMessage API는 메시지를 보내는 표준 방법입니다.

 Window.postMessage ( 'Hello, World', 'http://www.example.com/');

메시지를받을 때는 페이지에 이벤트 처리 기능 만 추가하면됩니다. 메시지가 도착하면 메시지 소스는 메시지를 처리할지 여부를 결정하는 것으로 결정됩니다.

 Window.AddeventListener (MessageHandler, True) {switch (e.origin) {case friend.example.com : // break; t 인식 // 메시지가 무시됩니다}}

메시지 이벤트는 데이터 (데이터) 및 원점 속성이있는 DOM 이벤트입니다. 데이터 속성은 발신자가 전달하는 실제 메시지이며 원점 속성은 전송의 소스입니다.

XMLHTTPREQUEST API는 XMLHTTPREQUEST의 개선 된 버전으로 Ajax 기술을 가능하게합니다. 두 가지 주요 측면이 있습니다.

1. 크로스 소스 xmlhttprequest
2. 진전

과거에는 XMLHTTPREQUEST가 상 동성 커뮤니케이션으로 제한되었으며 XMLHTTPREQUEST LEVEL2는 CORS를 통한 초 국가적 XMLHTTPREQUEST를 실현했습니다. Cross -Source HTTP 요청에는 원산지 헤드가 포함되어있어 서버에 HTTP 요청의 소스 정보를 제공합니다.

Websockets는 HTML5에서 가장 강력한 통신 기능으로 웹의 소켓을 통해서만 통신 할 수 있습니다.

WebSockets 통신을 설정하기 위해 클라이언트와 서버는 손을 흔들 때 HTTP 프로토콜을 WebSocket 프로토콜로 업그레이드합니다. 연결이 성공적으로 설정되면 전체 듀얼 작업 모드에서 클라이언트와 서버간에 WebSocket 메시지를 전달할 수 있습니다.

WebSockets 프로토콜의 정의 외에도 사양은 JavaScript 응용 프로그램의 WebSocket 인터페이스를 정의합니다. Websockets 인터페이스의 사용은 매우 간단합니다. 원격 호스트를 연결하려면 연결하려는 한 쌍의 URL 쌍을 제공하기 위해 새 WebSocket 인스턴스 만 작성하면됩니다.

1. 전화 번호를 나타내는 전화 요소.
2. 이메일 요소는 이메일 주소 텍스트 상자를 나타냅니다.
3. URL 요소는 웹 페이지의 URL을 나타냅니다.
4. 검색 엔진의 검색 요소, 예 : 사이트 상단에 표시되는 검색 상자와 같은 검색 요소.
5. 범위 요소, 특정 범위의 숫자 선택기, 일반적인 디스플레이는 슬라이딩 바입니다.
6. 숫자 요소에는 값 필드 만 포함됩니다.

1. 색상 요소, 색상 선택기, 컬러 팔레트 또는 색상 선택 보드를 기반으로합니다.
2. DateTime 요소는 시간대를 포함한 전체 날짜와 시간을 보여줍니다.
3. DateTime-Local, 표시 날짜 및 시간.
4. 시간 요소, 시간 선택기 및 시간대 지표.
5. 날짜 요소, 날짜 선택기.
6. 주 요소, 특정 연도에 주간 선택자.
7. 월 요소, 특정 연도의 월별 선택기.

사용자가 입력 값이 없으면 입력 컨트롤은 자리 표시 자 기능을 통해 설명 설명 또는 사용자에게 프롬프트 정보를 표시 할 수 있습니다.

 <입력 이름 = 이름 자리 표시 자 = 첫 번째 및 성>

브라우저는 입력 값을 자동 완성을 통해 보존 해야하는지 알 수 있습니다.

자동 초점 특성을 통해 각 페이지에서 입력 초점을 맞추기 위해 테이블 ​​요소를 지정할 수 있습니다.

텍스트 내용 및 Textarea Spatial Control SpecialCheck 속성을 갖춘 입력 제어. 설정 후 철자 검사 결과에서 피드백을 제공 해야하는지 브라우저에 요청합니다. 맞춤법 검사 속성을 할당해야합니다.

목록 특성 및 데이터리스트 요소와 결합하여 개발자는 입력 유형 제어를위한 값 선택 목록을 구성 할 수 있습니다.

 <datalist id = contactlist> <옵션 [email protected]> </옵션> <옵션 [email protected]> </옵션> </datalist> <입력 유형 = 이메일 id = 연락처 = 연락처 목록>

최소 및 최대 기능을 설정하면 범위 입력 상자의 값 입력 범위가 최소값과 최고 값으로 제한 될 수 있습니다. 하나 또는 두 개만 설정하거나 설정할 수 없습니다.

입력 -타입 컨트롤의 경우, 단계 특성을 설정하면 입력 값이 증가하거나 감소하는 세분성을 지정할 수 있습니다.

입력 -타입 컨트롤에 필요한 기능이 설정되면이 항목을 채워야합니다. 그렇지 않으면 양식을 제출할 수 없습니다.

웹 요소의 드래그 가능한 요소가 참이면이 요소를 드래그 할 수 있습니다.

 <div draggable = true> draggable div </div>

드래그 프로세스는 주로 다음과 같은 많은 이벤트를 트리거합니다.

1. 드래그 스타트 : 드래그 할 때 웹 페이지 요소가 트리거됩니다.
2. 드래그 : 드래그 중에 드래그 된 요소가 계속 트리거됩니다.
3. DRAGENTER : 대상 요소에 들어갈 때 드래그 된 요소가 트리거되면 이벤트는 대상 요소를 듣습니다.
4. 드래그 리브 : 드래그 된 요소가 트리거되면 이벤트는 객체 요소를 듣습니다.
5. 드래그 오버 : 연속 트리거 드래그 요소가 대상 요소에 머무르면 이벤트가 대상 요소를 듣습니다.
6. 드랩 : 파일 시스템에서 선택한 요소 또는 파일을 드래그하고 떨어질 때 트리거합니다.
7. 드래그 : 웹 페이지 요소는 끝에 트리거됩니다.

 draggableElement.addeventListener ( 'dragstart', function (e) {console.log ( 'drag start!');});

드래그 동안 콜백 함수에 의해 허용되는 이벤트 매개 변수에는 Datatransfer 속성이 있으며 드래그와 관련된 다양한 정보를 포함하여 객체를 가리 킵니다.

 draggableElement.addeventListener ( 'dragstart', function (event) {event.datatransfer.setData ( 'text', 'Hello World!');});

1. DROPEFFECT : 드래그 앤 드롭 작동 유형 브라우저가 마우스 모양을 표시하는 방법을 결정합니다.
2. 효과적인 작업 : 허용 작업을 지정하면 가능한 값은 복사, 이동, 링크, CopyLink, CopyMove, LinkMove, All, None 및 Unitialized입니다 (기본값은 모든 것과 동일합니다. 즉, 모든 작업을 허용합니다).
3. 파일 : 파일 시스템에서 브라우저로 드래그 된 파일을 처리하는 데 주로 사용되는 드래그 앤 드롭과 관련된 파일을 나타내는 filelist 객체가 포함되어 있습니다.
4. 유형 : Datatransfer 객체에 저장된 데이터 유형.

1. setData (형식, 데이터) : Datatransfer 객체에 데이터를 저장합니다. 첫 번째 매개 변수 형식은 텍스트, URL, 텍스트/HTML 등과 같은 스토리지 데이터 유형을 지정하는 데 사용됩니다.
2. getData (형식) : Datatransfer 객체에서 데이터를 가져옵니다.
3. ClearData (형식) : Datatransfer 객체에서 저장된 데이터를 지우십시오. 형식 매개 변수가 지정되면 형식의 데이터 만 지우고 모든 데이터가 제거됩니다.
4. SetDragimage (Imaglement, X, Y) : 드래그 프로세스 중에 표시된 이미지를 지정하십시오. 기본적으로 많은 브라우저는 반대 방향 버전의 드래그 요소를 보여줍니다. 파라미터 Imgelement는 이미지의 경로가 아닌 이미지 요소 여야하며 매개 변수 x와 y는 마우스의 이미지 위치를 나타냅니다.

JavaScript는 단일 스레드입니다. 따라서 긴 지속 시간을 계산하고, UI 스레드를 차단하기 위해 다시 텍스트가 텍스트 상자의 텍스트를 채우고, 버튼을 클릭하는 등을 차단하고, 대부분의 브라우저에서 컨트롤이 반환되지 않는 한, 열 수 없습니다. 새 탭 페이지 이 문제의 해결책은 웹 작업자이며 웹 응용 프로그램이 백그라운드 처리 기능을 갖추게 할 수 있으며 멀티 스레드에 대한 지원이 매우 좋습니다.

그러나 웹 작업자에서 실행 된 스크립트는 페이지의 창 객체에 액세스 할 수 없습니다. 즉, 웹 작업자는 웹 페이지와 DOM API에 직접 액세스 할 수 없습니다. 웹 워커로 인해 브라우저 UI가 응답을 중단하지는 않지만 여전히 CPU 사이클을 소비하여 응답 속도가 느려집니다.

웹 스토리지는 HTML5에서 도입 한 매우 중요한 기능입니다.

SessionStorage는 세션에서 데이터를 저장하고 브라우저는 데이터를 종료하여 사라집니다.

LocalStorage는 수동으로 삭제되지 않는 한 항상 클라이언트에 대한 데이터를 저장했습니다.

SessionStorage이든 LocalStorage이든, 사용할 수있는 API는 동일합니다.

1. 데이터 저장 : localStorage.setItem (키, 값);
2. 데이터 읽기 : localStorage.getItem (키);
3. 단일 데이터 삭제 : localstorage.removeitem (key);
4. 모든 데이터 삭제 : localStorage.clear ();
5. 특정 색인을 얻는 키 : localStorage.key (인덱스);

위의 내용은이 기사의 내용이 모든 사람의 학습이나 작업에 도움이되기를 바랍니다.