Fassen Sie die neuen Funktionen von HTML5 zusammen (wichtig für Interviews).-H5-Tutorial-php.cn

Jeder muss mit HTML5 vertraut sein, da zu viele Medien über diese Technologie diskutieren. Wenn wir also ein Vorstellungsgespräch für die Front-End-Arbeit führen, ist es nicht verwunderlich, dass wir auf HTML5-bezogene Fragen stoßen. Möchten Sie das Front-End-Interview reibungslos bestehen? Im folgenden Artikel erhalten Sie relevante Informationen zu den neuen HTML5-Funktionen, die für Front-End-Interviews unerlässlich sind. Freunde in Not können sich darauf beziehen.

Vorwort

Was ist HTML5: HTML5 ist die nächste Generation von HTML und wird zum neuen Standard für HTML, XHTML und HTML DOM. Lassen Sie uns heute über eine Frage sprechen, die fast jedes Mal in einem Front-End-Interview gestellt wird, nämlich die neuen Funktionen von HTML5. Dies ist das Grundwissen, das beherrscht werden muss, um das Front-End zu erlernen.

Neue Elemente

HTML5 hat einige neue Tag-Elemente mit besserer Semantik hinzugefügt.

Strukturelement

Artikelelement, das einen unabhängigen Inhalt auf der Seite darstellt, mit dem nichts in Zusammenhang steht der Kontext, z. B. ein Blog oder ein Artikel in .
aside-Element stellt neben dem Artikelinhalt auch andere Inhalte und Zusatzinformationen dar. Das
header-Element stellt einen Inhaltsblock auf der Seite oder den Header der gesamten Seite dar.
hgroup-Element wird verwendet, um den Titel eines Blocks oder der gesamten Seite auf der Seite zu gruppieren. Das
footer-Element stellt die Fußzeile eines Inhaltsblocks auf der Seite oder der gesamten Seite dar.
Figurenelement, das die Gruppierung von Medieninhalten und deren Titel darstellt.
Abschnittselement stellt einen Inhaltsblock auf der Seite dar, beispielsweise ein Kapitel.
Das Navigationselement stellt den Navigationslink auf der Seite dar.

Andere Elemente

Videoelement, das zum Definieren von Videos verwendet wird.
Audioelement, das zum Definieren von Audio verwendet wird.
canvas-Element wird zum Anzeigen von Grafiken verwendet. Das Element selbst hat kein Verhalten und stellt nur eine Leinwand bereit.
Einbettungselement wird zum Einfügen verschiedener Multimedia-Inhalte verwendet. Das Format kann Midi, Wav, AIFF, AU, MP3 usw. sein.
Markierungselement, das zur Anzeige von hervorgehobenem Text verwendet wird.
Fortschrittselement, das zur Anzeige des Fortschritts jeder Art von Aufgabe verwendet wird.
Messelement, das Gewichte und Maße darstellt und eine Messung innerhalb eines vordefinierten Bereichs definiert.
Zeitelement, das zur Anzeige von Datum oder Uhrzeit verwendet wird.
Befehlselement, das eine Befehlsschaltfläche darstellt. Das Detailelement
details wird verwendet, um detaillierte Informationen anzuzeigen, die Benutzer benötigen und erhalten können.
Zusammenfassungselement, das zum Definieren des sichtbaren Titels für das Detailelement verwendet wird. Das Element
datalist wird verwendet, um eine optionale Datenliste anzuzeigen. In Verbindung mit dem Eingabeelement kann eine Dropdown-Liste mit Eingabewerten erstellt werden. Das
Datagrid-Element wird auch verwendet, um optionale Datenlisten in Form einer Baumliste anzuzeigen.
keygen-Element stellt die Generierung eines Schlüssels dar.
Ausgabeelement, das verschiedene Arten der Ausgabe darstellt.
Quellenelement definiert Medienressourcen für Medienelemente.
Menüelement, das eine Menüliste darstellt. Das
Ruby-Element repräsentiert Ruby-Kommentare und das RT-Element repräsentiert die Interpretation oder Aussprache von Zeichen. Das rp-Element wird in Ruby-Kommentaren verwendet, um zu definieren, was von Browsern angezeigt wird, die Ruby-Elemente nicht unterstützen.
wbr-Element, das einen weichen Zeilenumbruch darstellt. Der Unterschied zum br-Element besteht darin, dass das br-Element bedeutet, dass hier ein Zeilenumbruch vorgenommen werden muss, während das wbr-Element bedeutet, dass die Breite des Browserfensters bzw. des übergeordneten Elements breit genug ist. Es wird kein Zeilenumbruch durchgeführt. Wenn die Breite nicht ausreicht, wird hier automatisch ein Zeilenumbruch durchgeführt.
bdi-Element, definiert die Textrichtung des Textes und macht ihn unabhängig von der Richtungseinstellung des umgebenden Textes.
Dialogelement, das ein Dialogfeld oder Fenster darstellt.

Veraltete Elemente

Einige rein ausdrucksstarke Elemente sind in HTML5 veraltet und werden dort nur von einigen Browsern unterstützt sind auch Elemente, die sich negativ auf die Benutzerfreundlichkeit auswirken können.

Reine Performance-Elemente

Reine Performance-Elemente sind jene Elemente, die durch CSS ersetzt werden können. Die Funktionen von Elementen wie „basefont“, „big“, „center“, „font“, „s“, „strike“, „tt“ und „u“ dienen ausschließlich der Seitenanzeige. HTML5 befürwortet die Platzierung von Seitenanzeigefunktionen im CSS-Stylesheet für eine einheitliche Verarbeitung, sodass diese Elemente deaktiviert und durch ersetzt werden CSS-Stil.

Elemente, die sich negativ auf die Benutzerfreundlichkeit auswirken

Bei Frameset-Elementen, Frame-Elementen und Noframes-Elementen haben Frame-Frames einen negativen Einfluss auf das Web Benutzerfreundlichkeit der Seite, Frame Frame wird in HTML5 nicht mehr unterstützt, nur Iframe Frame wird unterstützt. In HTML5 werden die drei Elemente Frameset, Frame und Noframes gleichzeitig abgeschafft.

Elemente werden nur von einigen Browsern unterstützt

Elemente wie Applet, BGSound, Blink und Marquee werden nur von einigen Browsern unterstützt, insbesondere das BGSound-Element und das Marquee-Element, die nur vom IE unterstützt werden und daher in HTML5 abgeschafft werden. Das Applet-Element kann durch ein Embed-Element oder ein Object-Element ersetzt werden, das BGSound-Element kann durch ein Audio-Element ersetzt werden und das Marquee kann durch JavaScript-Programmierung ersetzt werden.

Neue API

Canvas-API

Über dem Canvas-Element Die genannten Elemente können eine Leinwand für die Seite zum Anzeigen von Grafiken bereitstellen. In Kombination mit der Canvas API können verschiedene Grafiken, Diagramme, Bilder und Animationen dynamisch generiert und auf diesem Canvas angezeigt werden. Canvas ist im Wesentlichen eine Bitmap-Leinwand und kann nicht skaliert werden. Die gezeichneten Objekte gehören weder zur DOM-Struktur der Seite noch zu einem Namensraum. Es ist nicht erforderlich, jedes Grundelement als Objekt zu speichern, und die Ausführungsleistung ist sehr gut.

Um die Canvas-API zum Zeichnen zu verwenden, müssen Sie zunächst den Kontext des Canvas-Elements abrufen und dann die verschiedenen im Kontext gekapselten Zeichenfunktionen zum Zeichnen verwenden.

<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>

Nach dem Login kopieren

SVG

SVG ist eine Standard-Vektorgrafik Format mit eigener API. HTML5 führt Inline-SVG ein, sodass SVG-Elemente direkt im HTML-Markup angezeigt werden können.

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

Nach dem Login kopieren

Audio und Video

Das Aufkommen von Audio- und Videoelementen hat der HTML5-Medienanwendung und -Entwicklung neue Möglichkeiten eröffnet Für die Audio- und Videowiedergabe müssen keine Plug-Ins verwendet werden. Für diese beiden Elemente stellt die HTML5-Spezifikation eine gemeinsame, vollständige, skriptfähige Steuerungs-API bereit.
Vor der Veröffentlichung der HTML5-Spezifikation bestand die typische Methode zum Abspielen von Videos auf einer Seite darin, Flash-, QuickTime- oder Windows Media-Plug-Ins zu verwenden, um Audio und Video in HTML einzubetten. Im Vergleich zu dieser Methode gibt es bei der Verwendung von HTML5-Medien-Tags zwei Möglichkeiten große Vorteile.

Da es sich um eine vom Browser nativ unterstützte Funktion handelt, müssen die neuen Audio- und Videoelemente nicht installiert werden.
Medienelemente bieten eine gemeinsame, integrierte und skriptfähige Steuerungs-API für Webseiten.

<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>

Nach dem Login kopieren

Browser-Unterstützungserkennung

Browser-Erkennung, ob Audioelemente oder Videos unterstützt werden Am einfachsten Die Möglichkeit, ein Element zu verwenden, besteht darin, es dynamisch mit einem Skript zu erstellen und dann zu erkennen, ob eine bestimmte Funktion vorhanden ist.

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

Nach dem Login kopieren

Geolocation API

HTML5 Geolocation API (Geolocation API), Sie können Benutzer anfordern Teilen Sie ihren Standort mit. Die Verwendung ist sehr einfach, und wenn der Benutzer zustimmt, gibt der Browser Standortinformationen zurück, die dem Browser über das zugrunde liegende Gerät (z. B. einen Laptop oder ein Mobiltelefon) bereitgestellt werden, das HTML5-Geolokalisierungsfunktionen unterstützt. Standortinformationen bestehen aus Breiten- und Längengradkoordinaten und einigen anderen Metadaten.

Woher die Standortinformationen stammen

Die Geolocation-API gibt nicht an, welche zugrunde liegende Technologie das Gerät verwendet, um den Benutzer der Anwendung zu lokalisieren. Stattdessen handelt es sich lediglich um eine API zum Abrufen von Standortinformationen. Die über diese API abgerufenen Daten weisen nur einen gewissen Grad an Genauigkeit auf und es gibt keine Garantie dafür, dass der vom Gerät zurückgegebene Standort korrekt ist. Geräte können die folgenden Datenquellen verwenden:

IP-Adresse
Dreidimensionale Koordinaten
GPS
MAC-Adresse von RFID, WLAN und Bluetooth zu WLAN
ID des GSM- oder CDMA-Telefons
Benutzerdefinierte Daten

So verwenden Sie

// 一次更新
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);

Nach dem Login kopieren

Kommunikations-API

Dokumentenübergreifende Nachrichtenübermittlung

Aus Sicherheitsgründen wurde die Kommunikation zwischen Frames, Tabs und Fenstern, die im selben Browser ausgeführt werden, immer streng kontrolliert. Es gibt jedoch einige berechtigte Anforderungen an die Interaktion von Inhalten verschiedener Websites im Browser. Wenn in diesem Fall ein direkter Kommunikationsmechanismus innerhalb des Browsers bereitgestellt werden kann, können diese Anwendungen besser organisiert werden.

HTML5 führt eine neue Funktion ein, die dokumentübergreifende Nachrichtenkommunikation, die eine sichere quellenübergreifende Kommunikation zwischen Iframes, Registerkarten und Fenstern gewährleisten kann. Die postMessage-API ist eine Standardmethode zum Senden von Nachrichten. Das Senden einer Nachricht ist sehr einfach:

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

Nach dem Login kopieren

Beim Empfang einer Nachricht müssen Sie nur einen Ereignishandler hinzufügen die Seite. Wenn eine Nachricht eintrifft, wird die Quelle der Nachricht überprüft, um festzustellen, ob die Nachricht verarbeitet werden soll.

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

Nach dem Login kopieren

Das Nachrichtenereignis ist ein DOM-Ereignis mit Daten- und Ursprungsattributen. Das Datenattribut ist die tatsächliche vom Absender übermittelte Nachricht und das Ursprungsattribut ist die sendende Quelle.

XMLHttpRequest Level2

Als verbesserte Version von XMLHttpRequest hat XMLHttpRequest Level2 seine Funktionalität erheblich verbessert . Hauptsächlich zwei Aspekte:

Cross-origin XMLHttpRequest
Fortschrittsereignis

Cross SourceXMLHttpRequest

过去，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">

Nach dem Login kopieren

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">

Nach dem Login kopieren

min和max

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

step

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

required

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

拖放API

draggable属性

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

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

Nach dem Login kopieren

拖放事件

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

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

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

Nach dem Login kopieren

dataTransfer对象

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

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

Nach dem Login kopieren

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为例）：

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

Das obige ist der detaillierte Inhalt vonFassen Sie die neuen Funktionen von HTML5 zusammen (wichtig für Interviews).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!