Summarize the new features of html5 (essential for interviews)

HTML5 must be familiar to everyone, because too many media are discussing this technology. So when we are interviewing for front-end work, it is not surprising to encounter HTML5-related questions. Want to pass the front-end interview smoothly? The following article will share with you relevant information about the new HTML5 features that are essential for front-end interviews. Friends in need can refer to it.

Preface

What is HTML5: HTML5 is the next generation of HTML and will become the new standard for HTML, XHTML and HTML DOM. Today, let’s talk about a question that is asked almost every time in a front-end interview, and that is the new features of html5. This is the basic knowledge that must be mastered to learn the front-end.

New elements

html5 has added some new tag elements with better semantics.

Structural elements

1. article element represents a piece of independent content on the page that is not related to the context, such as a blog an article in .

2. aside element represents content other than the article content and auxiliary information.

3. The header element represents the header of a content block in the page or the entire page.

4. hgroup element is used to group the title of a block or the entire page in the page.

5. footer element represents the footer of a content block in the page or the entire page.

6. figure element represents the grouping of media content and their titles.

7. section element represents a content block in the page, such as a chapter.

8. nav element represents the navigation link in the page.

Other elements

1. The video element is used to define the video.

2. audio element, used to define audio.

3. The canvas element is used to display graphics. The element itself has no behavior and only provides a canvas.

4. embed element is used to insert various multimedia, the format can be Midi, Wav, AIFF, AU, MP3, etc.

5. mark element, used to display highlighted text.

6. progress element, used to display the progress of any type of task.

7. The meter element represents weights and measures and defines measurements within a predefined range.

8. time element, used to display date or time.

9. command element represents a command button.

10. details element is used to display detailed information that users require and can obtain.

11. summary element, used to define the visible title for the details element.

12. The datalist element is used to display an optional data list. Used in conjunction with the input element, a drop-down list of input values ​​can be created.

13. The datagrid element is also used to display an optional data list, displayed in the form of a tree list.

14. keygen element indicates generating a key.

15. output element represents different types of output.

16. source element defines media resources for media elements.

17. menu element represents the menu list.

18. ruby element represents ruby ​​comments, and rt element represents the interpretation or pronunciation of characters. The rp element is used in ruby ​​comments to define what is displayed by browsers that do not support ruby ​​elements.

19. wbr element, indicating soft line break. The difference from the br element is that the br element means that a line break must be made here, while the wbr element means that the width of the browser window or parent element is wide enough. No line wrapping is performed, and when the width is not enough, line wrapping is automatically performed here.

20. bdi element defines the text direction of the text, making it independent of the direction setting of the surrounding text.

21. dialog element, representing a dialog box or window.

Deprecated elements

Some purely performance elements have been abolished in html5, and only some elements are supported by some browsers. There are also elements that can negatively impact usability.

Purely expressive elements

Purely expressive elements are those elements that can be replaced by CSS. The functions of elements such as basefont, big, center, font, s, strike, tt, and u are purely for page display. HTML5 advocates placing page display functions in the CSS style sheet for unified processing, so these elements Disabled and replaced with css style.

Elements that have a negative impact on usability

For frameset elements, frame elements and noframes elements, the frame frame has a negative impact on web page usability , frame frame is no longer supported in HTML5, only iframe frame is supported. In HTML5, the three elements frameset, frame and noframes are abolished at the same time.

Elements supported by only some browsers

For elements such as applet, bgsound, blink, and marquee, they are only supported by some browsers, especially the bgsound element and marquee element, which are only supported by IE, so they are abolished in HTML5. The applet element can be replaced by an embed element or an object element, the bgsound element can be replaced by an audio element, and the marquee can be replaced by JavaScript programming.

New API

Canvas API

Above The canvas element mentioned can provide a canvas for the page to display graphics. Combined with the Canvas API, various graphics, charts, images and animations can be dynamically generated and displayed on this canvas. Canvas is essentially a bitmap canvas and cannot be scaled. The drawn objects do not belong to the page DOM structure or any namespace. There is no need to store each primitive as an object, and the execution performance is very good.

To use the Canvas API to draw, you must first obtain the context of the canvas element, and then use the various drawing functions encapsulated in the context to draw.

<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 is another graphics feature of html5. It is a standard vector graphic and a A file format with its own API. HTML5 introduces inline SVG, allowing SVG elements to appear directly in HTML markup.

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

Audio and video

The emergence of audio and video elements gives html5 media applications new options, and developers don’t have to Use plug-ins to play audio and video. For these two elements, the HTML5 specification provides a common, complete, scriptable control API.
Before the html5 specification came out, the typical way to play videos on a page was to use Flash, QuickTime or Windows Media plug-ins to embed audio and video into html. Compared with this method, using html5 media tags has two major benefits.

1. As a function natively supported by the browser, the new audio and video elements do not need to be installed.

2. Media elements provide a common, integrated, and scriptable control API for Web pages.

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

Browser support detection

The browser detects whether it supports audio elements or video elements. The simple way is to create it dynamically with a script and then check whether a specific function exists.

var hasVideo = !!(document.createElement('video').canPlayType);

Geolocation API

html5’s Geolocation API (Geolocation API) can request users to share their location. It's very simple to use, and if the user agrees, the browser returns location information, which is provided to the browser through the underlying device (such as a laptop or mobile phone) that supports HTML5 geolocation capabilities. Location information consists of latitude, longitude coordinates and some other metadata.

Where location information comes from

The Geolocation API does not specify which underlying technology the device uses to locate the user of the application. Instead, it is simply an API for retrieving location information, and the data retrieved through this API is only with a certain degree of accuracy and there is no guarantee that the location returned by the device is accurate. The device can use the following data sources:

1. IP Address
   Three-dimensional coordinates
   GPS
   MAC address from RFID, WiFi and Bluetooth to WiFi

2. ID of GSM or CDMA phone

3. User-defined data
   

Usage

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

Cross-document messaging

Due to security considerations, communication between frames, tabs, and windows running in the same browser has always been strictly restricted. . However, there are some legitimate needs for content from different sites to interact within the browser. In this case, if a direct communication mechanism can be provided within the browser, these applications can be better organized.

HTML5 introduces a new feature, cross-document message communication, which can ensure safe cross-source communication between iframes, tabs, and windows. The postMessage API is a standard way to send messages. Sending a message is very simple:

window.postMessage('Hello, world', 'http://www.example.com/');

When receiving a message, you only need to add an event handling function to the page. When a message arrives, the source of the message is checked to determine whether to process the message.

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

The message event is a DOM event with data (data) and origin (source) attributes. The data attribute is the actual message delivered by the sender, and the origin attribute is the sending source.

XMLHttpRequest Level2

XMLHttpRequest API makes Ajax technology possible. As an improved version of XMLHttpRequest, XMLHttpRequest Level2 has greatly improved its functionality. Improve. Mainly two aspects:

1. Cross-origin XMLHttpRequest

2. Progress event

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

新表单元素

1. tel元素，表示电话号码。

2. email元素，表示电子邮件地址文本框。

3. url元素，表示网页的url。

4. search元素，用于搜索引擎，比如在站点顶部显示的搜索框。

5. range元素，特定值范围内的数值选择器，典型的显示方式是滑动条。

6. number元素，只包含数值的字段。

未来的表单元素

1. color元素，颜色选择器，基于调色盘或者取色板进行选择。

2. datetime元素，显示完整的日期和时间，包括时区。

3. datetime-local，显示日期和时间。

4. time元素，不含时区的时间选择器和指示器。

5. date元素，日期选择器。

6. week元素，某年中的周选择器。

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

拖放事件

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

1. dragstart：网页元素开始拖动时触发。

2. drag：被拖动的元素在拖动过程中持续触发。

3. dragenter：被拖动的元素进入目标元素时触发，应在目标元素监听该事件。

4. dragleave：被拖动的元素离开目标元素时触发，应在目标元素监听该事件。

5. dragover：被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。

6. drap：被拖动元素或从文件系统选中的文件，拖放落下时触发。

7. dragend：网页元素拖动结束时触发。

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

dataTransfer对象

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

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

dataTransfer对象的属性有：

1. dropEffect：拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。

2. effectAllowed：指定所允许的操作，可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized（默认值，等同于all，即允许一切操作）。

3. files：包含一个FileList对象，表示拖放所涉及的文件，主要用于处理从文件系统拖入浏览器的文件。

4. types：储存在DataTransfer对象的数据的类型。

dataTransfer对象的方法有：

1. setData(format, data)：在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型，比如text、url、text/html等。

2. getData(format)：从dataTransfer对象取出数据。

3. clearData(format)：清除dataTransfer对象所储存的数据。如果指定了format参数，则只清除该格式的数据，否则清除所有数据。

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

1. 保存数据：localStorage.setItem(key,value);

2. 读取数据：localStorage.getItem(key);

3. 删除单个数据：localStorage.removeItem(key);

4. 删除所有数据：localStorage.clear();

5. 得到某个索引的key：localStorage.key(index);

The above is the detailed content of Summarize the new features of html5 (essential for interviews). For more information, please follow other related articles on the PHP Chinese website!