html5의 새로운 기능 요약(인터뷰에 필수)-H5 튜토리얼-php.cn

HTML5는 모든 사람에게 친숙할 것입니다. 너무 많은 미디어에서 이 기술을 논의하고 있기 때문입니다. 따라서 프론트엔드 작업을 위해 인터뷰를 할 때 HTML5 관련 문제가 발생하는 것은 놀라운 일이 아닙니다. 프론트엔드 인터뷰를 원활하게 통과하고 싶으십니까? 다음 기사에서는 프론트 엔드 인터뷰에 필수적인 HTML5의 새로운 기능에 대한 관련 정보를 공유할 것입니다.

머리말

HTML5란 무엇입니까? HTML5는 차세대 HTML이며 HTML, XHTML 및 HTML DOM의 새로운 표준이 될 것입니다. 오늘은 프론트엔드 인터뷰에서 거의 매번 물어보는 질문, 바로 html5의 새로운 기능에 대해 이야기해보겠습니다. 프론트엔드를 배우기 위해 반드시 마스터해야 하는 기본 지식입니다.

새 요소

html5에는 더 나은 의미를 지닌 새로운 태그 요소가 추가되었습니다.

구조적 요소

article 요소는 블로그의 기사와 같이 맥락과 관련이 없는 페이지의 독립적인 콘텐츠를 나타냅니다.
aside 요소는 기사 내용과 보조 정보 이외의 내용을 나타냅니다.
header 요소는 페이지 또는 전체 페이지의 콘텐츠 블록 헤더를 나타냅니다.
hgroup 요소는 페이지의 블록 제목이나 전체 페이지를 그룹화하는 데 사용됩니다.
footer 요소는 페이지 또는 전체 페이지에서 콘텐츠 블록의 바닥글을 나타냅니다.
미디어 콘텐츠와 제목의 그룹화를 나타내는 그림 요소입니다.
section 요소는 장과 같은 페이지의 콘텐츠 블록을 나타냅니다.
nav 요소는 페이지의 탐색 링크를 나타냅니다.

Other elements

video 요소, 비디오를 정의하는 데 사용됩니다.
audio 요소는 오디오를 정의하는 데 사용됩니다.
canvas 요소는 그래픽을 표시하는 데 사용됩니다. 요소 자체에는 동작이 없으며 캔버스만 제공합니다.
embed 요소는 다양한 멀티미디어를 삽입하는 데 사용되며 형식은 Midi, Wav, AIFF, AU, MP3 등이 될 수 있습니다.
mark 요소는 강조 표시된 텍스트를 표시하는 데 사용됩니다.
progress 요소는 모든 유형의 작업 진행 상황을 표시하는 데 사용됩니다.
meter 요소는 무게와 측정값을 나타내며 미리 정의된 범위 내에서 측정값을 정의합니다.
시간 요소, 날짜나 시간을 표시하는 데 사용됩니다.
명령 버튼을 나타내는 명령 요소입니다.
details 요소는 사용자가 필요로 하고 얻을 수 있는 자세한 정보를 표시하는 데 사용됩니다.
summary 요소는 세부정보 요소에 대한 표시 제목을 정의하는 데 사용됩니다.
datalist 요소는 선택적 데이터 목록을 표시하는 데 사용됩니다. 입력 요소와 함께 사용하면 입력 값의 드롭다운 목록을 만들 수 있습니다.
datagrid 요소는 선택적 데이터 목록을 트리 목록 형식으로 표시하는 데에도 사용됩니다.
keygen 요소, 이는 키 생성을 의미합니다.
output 요소, 다양한 유형의 출력을 나타냅니다.
source 요소는 미디어 요소에 대한 미디어 리소스를 정의합니다.
menu 요소, 메뉴 목록을 나타냅니다.
ruby 요소는 루비 주석을 나타내고, rt 요소는 문자의 해석이나 발음을 나타냅니다. rp 요소는 루비 요소를 지원하지 않는 브라우저에 표시되는 내용을 정의하기 위해 루비 주석에 사용됩니다.
wbr 요소, 부드러운 줄 바꿈을 나타냅니다. br 요소와의 차이점은 br 요소는 여기서 줄 바꿈을 해야 함을 의미하고, wbr 요소는 브라우저 창 또는 상위 요소의 너비가 충분히 넓다는 것을 의미합니다. 줄 바꿈은 수행되지 않지만 너비가 충분하지 않은 경우 여기에서 자동으로 줄 바꿈이 수행됩니다.
bdi 요소는 텍스트의 텍스트 방향을 정의하여 주변 텍스트의 방향 설정과 독립적으로 만듭니다.
dialog 요소, 대화 상자 또는 창을 나타냅니다.

사용되지 않는 요소

순수 성능 요소 중 일부는 HTML5에서 폐지되었으며, 일부 브라우저에서만 지원되는 요소, 사용성에 부정적인 영향을 미치는 일부 요소가 있습니다.

순수 성능 요소

순수 성능 요소는 CSS로 대체할 수 있는 요소입니다. basefont, big, center,font, s, Strike, tt 및 u와 같은 요소의 기능은 순전히 페이지 표시를 위한 것입니다. HTML5는 통합 처리를 위해 CSS 스타일 시트에 페이지 표시 기능을 배치하는 것을 옹호하므로 이러한 요소는 비활성화되고 다음으로 대체됩니다. CSS 스타일.

사용성에 부정적인 영향을 미치는 요소

프레임셋 요소, 프레임 요소 및 noframes 요소의 경우 프레임 프레임이 웹 페이지 유용성에 부정적인 영향을 미치기 때문에 프레임 프레임은 html5에서 더 이상 지원되지 않고 iframe만 지원됩니다. 프레임이 지원됩니다. html5 동시에 세 가지 요소인 프레임셋, 프레임 및 noframes가 폐지됩니다.

요소는 일부 브라우저에서만 지원됩니다

애플릿, bgsound, 깜박임, marquee 등의 요소는 일부 브라우저에서만 지원되며, 특히 bgsound 요소와 marquee 요소는 IE에서만 지원되므로 HTML5에서는 폐지됩니다. applet 요소는 embed 요소나 object 요소로 대체될 수 있고, bgsound 요소는 audio 요소로 대체될 수 있으며, marquee는 JavaScript 프로그래밍으로 대체될 수 있습니다.

새 API

Canvas API

위에서 언급한 캔버스 요소는 페이지에 그래픽을 표시하는 캔버스를 제공할 수 있습니다. Canvas API와 결합하면 다양한 그래픽, 차트, 이미지, 애니메이션을 동적으로 생성하여 이 캔버스에 표시할 수 있습니다. 캔버스는 기본적으로 비트맵 캔버스이며 크기를 조정할 수 없습니다. 그려진 개체는 페이지 DOM 구조나 네임스페이스에 속하지 않습니다. 각각의 프리미티브를 객체로 저장할 필요가 없고, 실행 성능도 매우 좋습니다.

캔버스 API를 사용하여 그리려면 먼저 캔버스 요소의 컨텍스트를 얻은 다음 컨텍스트에 캡슐화된 다양한 그리기 기능을 사용하여 그려야 합니다.

<canvas id="canvas">替代内容</canvas>
<script>
    var canvas = document.getElementById(&#39;canvas&#39;);
    var context =canvas.getContext("2d"); // 获取上下文
    //设置纯色
    context.fillStyle = "red";
    context.strokeStyle = "blue";
    // 实践表明在不设置fillStyle下的默认fillStyle为black
    context.fillRect(0, 0, 100, 100);
    // 实践表明在不设置strokeStyle下的默认strokeStyle为black
    context.strokeRect(120, 0, 100, 100);
</script>

로그인 후 복사

SVG

SVG는 html5의 또 다른 그래픽 기능으로, 표준 벡터 그래픽이며 파일 형식이며 자체 API를 가지고 있습니다. HTML5에는 인라인 SVG가 도입되어 SVG 요소가 HTML 마크업에 직접 나타날 수 있습니다.

<svg height=100 width=100><circle cx=50 cy=50 r=50 /></svg>

로그인 후 복사

오디오 및 비디오

오디오 및 비디오 요소의 출현으로 HTML5 미디어 애플리케이션에 새로운 옵션이 제공되었으며 개발자는 플러그인을 사용하지 않고도 오디오 및 비디오를 재생할 수 있습니다. 이 두 요소에 대해 HTML5 사양은 공통적이고 완전한 스크립트 가능한 제어 API를 제공합니다.
HTML5 사양이 나오기 전에는 페이지에서 비디오를 재생하는 일반적인 방법은 Flash, QuickTime 또는 Windows Media 플러그인을 사용하여 오디오 및 비디오를 HTML에 포함하는 것이었습니다. 이 방법과 비교할 때 HTML5 미디어 태그를 사용하면 두 가지 주요 이점이 있습니다. .

브라우저에서 기본적으로 지원하는 기능으로 새로운 오디오 및 비디오 요소는 설치가 필요하지 않습니다.
미디어 요소는 웹 페이지에 공통적이고 통합되었으며 스크립트 가능한 제어 API를 제공합니다.

<video src="video.webm" controls>
    <object data="videoplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="video.swf" />
    </object>
    Your browser does not support HTML5 video.
</video>

로그인 후 복사

브라우저 지원 감지

브라우저가 오디오 요소 또는 비디오 요소를 지원하는지 감지하는 가장 쉬운 방법은 스크립트를 사용하여 동적으로 생성한 다음 특정 기능이 존재하는지 감지하는 것입니다.

var hasVideo = !!(document.createElement(&#39;video&#39;).canPlayType);

로그인 후 복사

Geolocation API

html5의 Geolocation API(Geolocation API)는 사용자에게 위치 공유를 요청할 수 있습니다. 사용이 매우 간단하며 사용자가 동의하면 브라우저는 HTML5 위치 정보 기능을 지원하는 기본 장치(예: 노트북 또는 휴대폰)를 통해 브라우저에 제공되는 위치 정보를 반환합니다. 위치 정보는 위도, 경도 좌표 및 기타 메타데이터로 구성됩니다.

위치 정보의 출처

Geolocation API는 기기가 애플리케이션 사용자를 찾기 위해 사용하는 기본 기술을 지정하지 않습니다. 대신 단순히 위치 정보를 검색하기 위한 API일 뿐이며, 이 API를 통해 검색된 데이터는 어느 정도의 정확성만 있을 뿐, 기기에서 반환한 위치가 정확하다는 보장은 없습니다. 장치는 다음 데이터 소스를 사용할 수 있습니다:

IP 주소
3차원 좌표
GPS
RFID, WiFi 및 Bluetooth에서 WiFi MAC 주소
GSM 또는 CDMA 전화 ID
사용자 맞춤 데이터

사용 방법

// 一次更新
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationEror);
function updateLocation(position) {
    var latitude = position.coords.latitude;     // 纬度
    var longitude = position.coords.longitude;   // 经度
    var accuracy = position.coords.accuracy;     // 准确度
    var timestamp = position.coords.timestamp;   // 时间戳
}
// 错误处理函数
function handleLocationEror(error) {
    ....
}
// 重复更新
navigator.geolocation.watchPosition(updateLocation, handleLocationEror);
// 不再接受位置更新
navigator.geolocation.clearWatch(watchId);

로그인 후 복사

Communication API

문서 간 메시징

보안상의 이유로 동일한 브라우저에서 실행되는 프레임, 탭 및 창 간의 통신은 항상 엄격하게 제한되었습니다. 그러나 다른 사이트의 콘텐츠가 브라우저 내에서 상호 작용하려면 몇 가지 합법적인 요구 사항이 있습니다. 이 경우 브라우저 내에서 직접 통신 메커니즘을 제공할 수 있다면 이러한 애플리케이션을 더 잘 구성할 수 있습니다.

HTML5에는 iframe, 탭 및 창 간의 안전한 소스 간 통신을 보장할 수 있는 문서 간 메시지 통신이라는 새로운 기능이 도입되었습니다. postMessage API는 메시지를 보내는 표준 방법입니다.

window.postMessage(&#39;Hello, world&#39;, &#39;http://www.example.com/&#39;);

로그인 후 복사

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

window.addEventListener("message", messageHandler, true);
function messageHandler(e) {
    switch(e.origin) {
        case "friend.example.com":
        // 处理消息
        processMessage(e.data);
        break;
    default: 
        // 消息来源无法识别
        // 消息被忽略
    }
}

로그인 후 복사

메시지 이벤트는 데이터 및 원본 속성이 있는 DOM 이벤트입니다. data 속성은 발신자가 전달한 실제 메시지이고, Origin 속성은 전송 소스입니다.

XMLHttpRequest Level2

XMLHttpRequest API는 Ajax 기술을 가능하게 합니다. XMLHttpRequest의 향상된 버전인 XMLHttpRequest Level2는 기능이 크게 향상되었습니다. 주로 두 가지 측면:

Cross-origin XMLHttpRequest
Progress events

Cross-origin XMLHttpRequest

过去，XMLHttpRequest仅限于同源通信，XMLHttpRequest Level2通过CORS实现了跨源XMLHttpRequest。跨源HTTP请求包含一个Origin头部，它为服务器提供HTTP请求的源信息。

WebSockets API

WebSockets是html5中最强大的通信功能，它定义了一个全双工通信信道，仅通过Web上的一个Socket即可进行通信。

WebSockets握手

为了建立WebSockets通信，客户端和服务器在初始握手时，将HTTP协议升级到WebSocket协议。一旦连接建立成功，就可以在全双工模式下在客户端和服务器之间来回传递WebSocket消息。

WebSockets接口

除了对WebSockets协议定义外，该规范还同时定义了用于JavaScript应用程序的WebSocket接口。WebSockets接口的使用很简单。要连接远程主机，只需要新建一个WebSocket实例，提供希望连接的对端URL。

Forms API

新表单元素

tel元素，表示电话号码。
email元素，表示电子邮件地址文本框。
url元素，表示网页的url。
search元素，用于搜索引擎，比如在站点顶部显示的搜索框。
range元素，特定值范围内的数值选择器，典型的显示方式是滑动条。
number元素，只包含数值的字段。

未来的表单元素

color元素，颜色选择器，基于调色盘或者取色板进行选择。
datetime元素，显示完整的日期和时间，包括时区。
datetime-local，显示日期和时间。
time元素，不含时区的时间选择器和指示器。
date元素，日期选择器。
week元素，某年中的周选择器。
month元素，某年中的月选择器。

新的表单特性和函数

placeholder

当用户还没输入值的时候，输入型控件可以通过placeholder特性向用户显示描述性说明或者提示信息。

<input name="name" placeholder="First and last name">

로그인 후 복사

autocomplete

浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用。

autofocus

通过autofocus特性可以指定某个表单元素获得输入焦点，每个页面上只允许出现一个autofocus特性，如果设置了多个，则相当于未指定此行为。

spellcheck

可对带有文本内容的输入控件和textarea空间控制spellcheck属性。设置完后，会询问浏览器是否应该给出拼写检查结果反馈。spellcheck属性需要赋值。

list特性和datalist元素

通过组合使用list特性和datalist元素，开发人员能够为某个输入型控件构造一张选值列表。

<datalist id="contactList">
    <option value="a@qq.com"></option>
    <option value="b@qq.com"></option>
</datalist>
<input type="email" id="contatcs" list="contactList">

로그인 후 복사

min和max

通过设置min和max特性，可以将range输入框的数值输入范围限定在最低值和最高值之间。可以只设置一个，也可以两个都设置，也可以都不设置。

step

对于输入型控件，设置其step特性能够指定输入值递增或者递减的粒度。

required

一旦为某输入型控件设置了required特性，那么此项必填，否则无法提交表单。

拖放API

draggable属性

如果网页元素的draggable元素为true，这个元素就是可以拖动的。

<p draggable="true">Draggable p</p>

로그인 후 복사

拖放事件

拖动过程会触发很多事件，主要有下面这些：

dragstart：网页元素开始拖动时触发。
drag：被拖动的元素在拖动过程中持续触发。
dragenter：被拖动的元素进入目标元素时触发，应在目标元素监听该事件。
dragleave：被拖动的元素离开目标元素时触发，应在目标元素监听该事件。
dragover：被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。
drap：被拖动元素或从文件系统选中的文件，拖放落下时触发。
dragend：网页元素拖动结束时触发。

draggableElement.addEventListener(&#39;dragstart&#39;, function(e) {
    console.log(&#39;拖动开始！&#39;);
});

로그인 후 복사

dataTransfer对象

拖动过程中，回调函数接受的事件参数，有一个dataTransfer属性，指向一个对象，包含与拖动相关的各种信息。

draggableElement.addEventListener(&#39;dragstart&#39;, function(event) {
    event.dataTransfer.setData(&#39;text&#39;, &#39;Hello World!&#39;);
});

로그인 후 복사

dataTransfer对象的属性有：

dropEffect：拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。
effectAllowed：指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。
files：包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。
types：储存在DataTransfer对象的数据的类型。

dataTransfer对象的方法有：

setData(format, data)：在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。
getData(format)：从dataTransfer对象取出数据。
clearData(format)：清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。
setDragImage(imgElement, x, y)：指定拖动过程中显示的图像。默认情况下，许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素，而不是指向图像的路径，参数x和y表示图像相对于鼠标的位置。

Web Workers API

Javascript是单线程的。因此，持续时间较长的计算，回阻塞UI线程，进而导致无法在文本框中填入文本，单击按钮等，并且在大多数浏览器中，除非控制权返回，否则无法打开新的标签页。该问题的解决方案是Web Workers，可以让Web应用程序具备后台处理能力，对多线程的支持性非常好。

但是在Web Workers中执行的脚本不能访问该页面的window对象，也就是Web Workers不能直接访问Web页面和DOM API。虽然Web Workers不会导致浏览器UI停止响应，但是仍然会消耗CPU周期，导致系统反应速度变慢。

Web Storage API

Web Storage是html5引入的一个非常重要的功能，可以在客户端本地存储数据，类似html4的cookie，但可实现功能要比cookie强大的多。

sessionStorage

sessionStorage将数据保存在session中，浏览器关闭数据就消失。

localStorage

localStorage则一直将数据保存在客户端本地，除非手动删除，否则一直保存。

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