Image for post
Image for post

HTML5 is the core language of the World Wide Web, the fifth major revision of Hypertext Markup Language (HTML) under the standard universal markup language. In order to adapt to the changes in the entire Internet era, people can build web pages in a better way. HTML5 came into being. HTML5 has added the following features for you:

1. Semantic features (Class: Semantic)

HTML5 gives web pages better meaning and structure. With the support of RDFa, microdata and microformats, richer tags will build a data-driven Web that is more valuable to programs and users.

The semantics of HTML structure has only been proposed in recent years. The previous HTML structure was a bunch of cold tags without semantics. The most widespread is div+css. The previous page is a bunch of div+css when opened. In order to change this situation, developers and officials put forward the concept of semantically making HTML structure, and w3c is also giving HTML5 Several new semantic tags have been introduced.

What effect will the document have after semantics? It is the HTML structure you write, which is represented and marked with corresponding English letters (tags) with certain semantics, because HTML itself is a markup language. Not only for myself, it is easy to read and write. It is easy for others to understand your code and structure, and it is easy to read even for people who are not doing web development. .

How do you know whether your page structure is semantically based? It depends on the HTML layout structure. After removing the CSS style sheet, whether the code structure of the content can still be presented well. In other words, after removing the CSS decoration, the structure of the entire HTML is still clearly read, and the overall architecture modules can be seen clearly. This is the effect we want HTML documents to achieve after semantics.

In fact, semantics is nothing more than choosing the right label in the right scene when you use the label. For example, the h1~h5 series of tags are used to define the title in HTML; and the p tag is used in most cases. For processing text paragraphs, table tables are suitable for information tables, etc.

We have the following benefits of semantically standardized operations on the entire HTML structure:

1. This is conducive to SEO Establishing good communication with search engines helps crawlers to capture more effective information: crawlers rely on tags to determine the context and the weight of each keyword;

2. It is convenient for other devices to parse (such as screen readers, blind readers, mobile devices) to render web pages in a meaningful way;

3. It is convenient for team development and maintenance, and semantics are more readable. Teams that follow W3C standards follow this standard, which can reduce differentiation.

The new semantic tags in HTML5 have further strengthened our operability for semantic follow-up of the entire HTML structure, making our web page layout more readable.

Common HTML5 semantic tags and their usage scenarios are as follows:

<article>

Define a separate content area of ​​the page.

<aside>

Define the sidebar content of the page.

<command>

Define command buttons, such as radio buttons, check boxes, or buttons

<details>

Used to describe the details of a document or a part of a document

<dialog>

Define dialog boxes, such as prompt boxes

<summary>

The label contains the title of the details element

<figure>

Specify independent streaming content (images, charts, photos, codes, etc.).

<figcaption>

Define the title of the <figure> element

<footer>

Define the footer of a section or document.

<header>

Defines the head area of ​​the document

<mark>

Define marked text.

<meter>

Define weights and measures. Only used for metrics with known maximum and minimum values.

<nav>

Define the part of the navigation link.

<progress>

Define the progress of any type of task.

<section>

Define the section (section, section) in the document.

<time>

Define the date or time.

Local storage features (Class: OFFLINE & STORAGE)

The web APP developed based on HTML5 has shorter startup time and faster internet speed, all of which benefit from HTML5 APP Cache and local storage function.

Earlier, local storage used cookies. However, web storage needs to be more secure and fast. These data will not be stored on the server, but these data are only used for user request website data. It can also store a large amount of data without affecting the performance of the website. Data exists as a key/value pair, and the data of a web page is only allowed to be accessed and used.

The two objects that the client stores data are:

localStorage-It is used to save the data of the entire website for a long time. The saved data has no expiration time until it is manually removed.

sessionStorage-Used to temporarily save the data of the same window (or tab), which will be deleted after closing the window or tab.

Regardless of whether it is localStorage or sessionStorage, the available APIs are the same. The following are commonly used (take localStorage as an example):

Save data: localStorage.setItem(key,value);

Read data: localStorage.getItem(key);

Delete a single data: localStorage.removeItem(key);

Delete all data: localStorage.clear();

Get the key of an index: localStorage.key(index);

Connection characteristics (Class: CONNECTIVITY)

More effective connection work efficiency enables real-time web-based chat, faster web game experience, and more optimized online communication. HTML5 has more effective server push technology. Server-Sent Event and WebSockets are two of these features. These two features can help us realize the function of the server to “push” data to the client.

WebSocket is a protocol that HTML5 began to provide for full-duplex communication on a single TCP connection.

WebSocket makes the data exchange between the client and the server easier, allowing the server to actively push data to the client. In the WebSocket API, the browser and the server only need to complete a handshake, and a persistent connection can be created directly between the two, and two-way data transmission can be carried out.

In the WebSocket API, the browser and the server only need to do a handshake action, and then a fast channel is formed between the browser and the server. Data can be transferred directly between the two.

Nowadays, in order to implement push technology, many websites use Ajax polling. Polling is at a specific time interval (such as every 1 second), the browser sends an HTTP request to the server, and then the server returns the latest data to the client’s browser. This traditional mode brings obvious disadvantages, that is, the browser needs to continuously send requests to the server, but the HTTP request may contain a long header, and the really valid data may be only a small part, which is obviously wasteful. A lot of bandwidth and other resources.

The WebSocket protocol defined by HTML5 can better save server resources and bandwidth, and can communicate in more real-time.

We use WebSocket and Ajax long polling to compare, so as to feel the advantages of WebSocket, the comparison chart is as follows:

Web multimedia features (Class: MULTIMEDIA)

It supports multimedia functions such as Audio and Video on the web side, and complements the APPS, camera, and audio-visual functions of the website.

The video element is specifically used in HTML5 to play videos or movies on the Internet.

The audio element is used exclusively in HTML5 to play audio on the Internet.

When using video and audio elements to play, there is no need to use other plug-ins, as long as our browser supports HTML5.

Browser support

Safari3 and above, Firefox4 and above, 0pera10 and above, chrome3.0 and above all support audio and video elements!

1. Basic usage

The audio element only needs to assign a src attribute to it:

<audio src=”MP3.mp3" controls=”controls”></audio>

For browsers that do not support, we can add prompt sentences between the pair of elements instead

<audio src=”MP3.mp3" controls=”controls”>Your browser does not support the Audio element</audio>

The length and width and src attributes of the video element should be set:

<video width=”750" height=”400" src=”time.mp4"></video>

Also for browsers that do not support video, you can add alternate text in the middle:

<video width=”750" height=”400" src=”time.mp4">Your browser does not support the video element</video>

The source element specifies multiple playback formats and encodings:

The source element can specify multiple playback formats and encoding methods for the same media data to ensure that the browser can select a playback format that it supports for playback. The selection order is from top to bottom until the supported format is selected.

Instructions:

<video>

<source src=”video.m4v” type=”video/mp4" />

<source src=”video.webm” type=”video/webm” />

<source src=”video.ogv” type=”video/ogg” />

<source src=”video.mp4" />

</video>

Support status of encoding format by various devices:

Video in webm(.webm) format Firefox 4.0+, chrome6.0+, opera10.6+

Video in mp4 (.m4v) format IE9.0+, Safari3.1+, iso5.0, Android4.0+

ogg(.ogv) format video Firefox 3.5+, chrome3.0+, opera10.5+

Video in mp4 (.mp4) format IE9.0+, Safari3.1+, iso3.0, Android2.3+

2. Common attributes of viedo and audio

Common attributes of audio and video elements

src attribute: Specify the URL address of the media data in this attribute.

The controls attribute: Specify whether to add the browser’s own playback control bar for video or audio data. The control bar has buttons such as play button and pause.

Width and height attributes (only for video): specify the width and height of the video.

autoplay attribute: This attribute specifies whether to start autoplay when our web page is loaded.

Preload attribute: This attribute specifies whether to preload the data. If so, the browser will buffer the video data or audio data, which can speed up the playback.

Three values ​​of the preload attribute:

none means no preloading.

metadata means that only the metadata of the media is preloaded.

auto (default value) means preload all video or audio.

Use the methods provided by Java to operate multimedia.

Java provides us with a wealth of methods to control multimedia files flexibly, so that we can define our own multimedia player according to actual project requirements.

After the controls attribute is set, a control bar that comes with the browser will be displayed in the interface. If there is no requirement for UI, its built-in controller can already meet most of the needs. Hide the control bar and simulate: The key to implementing a custom function player is that we don’t use the native controller. After hiding it, we use HTML and CSS to simulate the required style at the same position below, and pass js calls the interface functions and attributes exposed to us by the video tag, and detects the user’s operation behavior to synchronize the corresponding changes in the simulated UI and video playback data.

The usage of several core functions and attributes

myVid=document.getElementById(“video1”);//Control the video switch

myVid.play() // Trigger the playback of the media file

myVid.pause() //trigger the pause of the media file

myVid.currentTime=5; //Return or set the current video playback position

myVid.duration // Return the total length of the video

myVid.volume //Control the volume

myVid.muted //Control whether multimedia is muted

Three-dimensional, graphics and special effects characteristics (Class: 3D, Graphics & Effects)

Based on the 3D functions of SVG, Canvas, WebGL and CSS3, users will be amazed by the amazing visual effects presented in the browser.

<canvas> is an HTML element that can use scripts (usually Java) to draw graphics. For example, it can be used to draw charts, make picture compositions, or make simple (and not so simple) animations. The picture on the right shows Some implementation examples of <canvas>.

Using the <canvas> element is not very difficult but you need some basic HTML and Java knowledge. Some outdated browsers do not support the <canvas> element, but all new versions of mainstream browsers support it. The default size of Canvas is 300 pixels × 150 pixels (width × height, the unit of pixel is px). However, you can use the HTML height and width attributes to customize the size of the Canvas. In order to draw graphics on Canvas, we use a Java context object, which can dynamically create graphics (creates graphics on the fly)

With the development and application of big data and other fields, canvas drawing plays an important role in data visualization, allowing us to flexibly display data in various forms, improve data readability, and enhance product data capabilities.

The following figure shows the application effect of canvas in data visualization:

In summary, the emergence of new HTML5 functions has enabled the front-end to play a more powerful role in many new application fields, and has also allowed many existing projects to have better choices in the form of expression.

Written by

Digital Nomad

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store