Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use semantic tags in HTML5". Friends who are interested might as well take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use semantic tags in HTML5.

HTML5 is a new iterative language of the previous generation of HTML. The main purpose of HTML5 is to support multimedia on mobile devices, such as video tags, audio and canvas tags.

Semantic tags in HTML5

A lot of semantic tags have been added to HTML5, such as

For example, in the past, we used to layout in the following ways

Can now be replaced with

HTML5 allows many more semantic structured code tags to replace a large number of meaningless div tags.

1. This semantic feature improves the quality and semantics of web pages.

two。 Reduced the class and id properties previously used for CSS calls

And friendly to search engines, the new structural tags bring about changes in the layout of web pages and enhance friendliness to search engines.

Title header {background-color: red; height: 400px; width: 100%;}

Solution:

Title header {background-color: red; height: 400px; width: 100%; display: block;} document.createElement ("header")

Using the method of 1 means that you have to create an element for each semantic tag, which is rather troublesome. A better way is to use the plug-in and introduce the html5shiv.js file. The essence of the plug-in is to create the semantic element.

Title header {background-color: red; height: 400px; width: 100%;}

The above method still needs to be improved, such as full support for HTML5 in Google browser, which means that there is no need to download html5shiv.js files when rendering HTML pages, but the above method will be downloaded in any browser, so improve it again as follows

The above code can only be recognized by IE browsers, which means that if the IE browser version is IE8 or below, the js file will be downloaded. In other browsers, comments will be automatically ignored.

Video and audio

Inserting video and audio files in browsers used to be done using flash, but it is slow to use flash on mobile. HTML5 gives two new tags to insert video and audio files. The use of the two is similar. Now take video as an example to introduce the attributes of the tag.

| | attribute | function |-- |-| src | value is the path of the video file | | controls | display console | | autoplay | Auto playback | | loop | Loop playback | |. |... |... | |

There are some attributes not introduced, the above are more commonly used, the rest please refer to the website HTML5 video. An example is given here.

Another thing to note is that only three video formats are currently supported.

Ogg

MPEG 4 (mp4)

WebM

And different browsers support different degrees, you can refer to the link above for details. So what do we do at this time? We can't write that.

Although our intention is: if .mp4 is supported, then .mp4 is used, otherwise if .ogg is supported, .ogg is used, and so on. But the above effect is that there are three video instead of one. The solution at this time is to use the source tag, as follows

The effect achieved at this time is what we want.

Form

HTML5 also makes a lot of improvements to the form, such as adding properties for form validation (we used to use JavaScript to validate regular expressions), as well as new tags and methods.

Intelligent form control

Emial

Url

Number

Range

Color

Date

Month

Week

Time

The first usage is as follows

Email:

Url:

Number:

Range:

Color:

Date:

Week:

Time:

Submit

When type is set to emial, if the input is not an email address, the submission will not succeed when the submit button is clicked, and a prompt message will be given.

When type is set to url, if the url address is not entered, the submission will not succeed when the submit button is clicked, and a prompt message will be given.

The correct url address should start with http or https, such as http://www.baidu.com.

When type is set to number, you can only enter numbers in the control. There is no reaction when you press other keys. You can experiment to see the effect.

When type is set to color, click on the color after color, the color picker will appear, you can choose the color, as follows

When setting type to date, week, time, it shows the time of various formats, which can be understood without more explanation here.

Form Properties form form Properties

Autocomplete

Literal translation means automatic completion. When we submit the form, the form will record what we have submitted, and when we fill it out again, it will give us a hint of what we have submitted. Sometimes this situation may lead to information leakage, which is not safe. We can set autocomplete to off so that the above situation will not occur. Autocomplete is on by default

......

Novadilate

As we mentioned above, when we use smart form controls, if we can not meet the format requirements, such as email, then the submission will not be successful. When the novadilate attribute is added to the form, then even if the format does not meet the requirements, the submission can be successful.

Properties of... input

Autofocus

Automatically get focus. Let's take a look at a case of Taobao.

When we enter Taobao, the search box will automatically get the focus, the user can enter directly, do not need to click the search box with the mouse to get the focus before entering. Input can have this effect by adding the attribute of autofocus.

Form

Let's first take a look at such a structure.

Submit

We can know that when submitting a form form, only the form inside the form field will be submitted, and the form outside the form field will not be submitted, so when we submit the form, only the one data will be submitted.

But if you want two data to be submitted when it is submitted (not surprisingly, there is a real need for this), you need to use the form attribute at this time.

Submit

The value of the form property is the id of the form form. Submit again at this time

At this time, the two data has also been submitted.

List

The list attribute should be used with the newly added form tag of HTML5, as follows

The value of the list attribute is the id value of the datalist tag. When we type in text, there will be a prompt for the option value in datalist

Multiple

Multiple can achieve the effect of multiple selection, such as selecting multiple files, assuming the following input tag

Only one file can be selected at this time. To select multiple files, we add the multiple attribute to the input tag.

At this point, you can select multiple files.

Placeholder

Use placeholder as a prompt, assuming the following label

When we type the text, the prompt message disappears, and when we disappear the text, the text reappears.

Required

When input uses this property, it means that the input control is required, otherwise it cannot be submitted. You can try it yourself, but I won't demonstrate it here.

HTML5 API gets the DOM element

Suppose you have the following html structure

Span1 span2

If we want to change the style of span (through JS), we usually add an id attribute or a class attribute to the span tag in order to get the corresponding DOM element. HTML5 has added two new methods.

QuerySelector (): only one element can be selected

QuerySelectorAll (): you can select all elements that meet the criteria

You can pass in a selector (any selector supported by CSS) to select DOM elements, such as

/ / use the descendant selector to select the span element document.querySelector ("li > span"). Style.color = "red"; class name operation

Sometimes we need to add or remove class styles for a tag, and HTML5 provides us with an API interface

ClassList.add (): adds the specified class style to the DOM element

ClassList.remove (): removes the specified class style for the DOM element

ClassList.toggle (): switch, meaning that if the DOM element has this class style, remove the class style, and if there is no such class style, add the class style

ClassList.contains (): determines whether the DOM element contains this class style. If it does, it returns true, otherwise it returns false.

Title .active {width: 100%; height: 100px; background-color: darkred;} add the class name to remove the class name toggle whether the class name contains the class name document.querySelector (".add"). Onclick = function () {document.querySelector ("div"). ClassList.add ("active") } document.querySelector (".remove") .onclick = function () {document.querySelector ("div") .classList.remove ("active");} document.querySelector (".toggle") .onclick = function () {document.querySelector ("div") .classList.toggle ("active") } document.querySelector (".custom") .onclick = function () {console.log (document.querySelector ("div") .classList.contains ("active"));} Custom attributes

HTML5 specifies that custom properties should start with data-, as shown in

A custom attribute called test is defined above. We can access or modify the value of the custom attribute through the dataset of the DOM element. There are two ways.

Dataset. Attribute name

Dataset ["attribute name"]

Console.log (document.querySelector ("div") .dataset.test); document.querySelector ("div") .dataset ["test"] = "two"

If you use a-connection between property names, as follows

Then use hump nomenclature when accessing or modifying using dataset, as follows

Console.log (document.querySelector ("div") .dataset.testName); document.querySelector ("div"). Dataset ["testName"] = "two"; file read

FileReader is used to read uploaded files. It has three reading methods.

ReadAsText (): reads a text file and returns a text string (utf-8)

ReadAsBinaryString (): read any file and return the binary file

ReadAsDataURL (): read any file to get a string containing a data:URL format (base64 encoding) to represent the contents of the read file

The contents read by the above three methods are placed in the result property of the FileReader object.

Now demonstrate a case, select the uploaded image, and want to have a preview effect after uploading.

Title

/ / get the input DOM element let input = document.querySelector ("input"); / / get the img DOM element let image = document.querySelector ("img"); / / trigger the event input.onchange = function () {/ / get the uploaded file object let file = input.files [0] when the file is uploaded when the input changes. / / get the FileReader object let reader = new FileReader (); / / read the picture using FileReader to get an encoded reader.readAsDataURL (file) in base64 format / / the event reader.onload = function () {/ / the read URL in base64 encoding format is assigned to the src attribute image.src = reader.result;} of the img tag after reading

In the above code, we use the onload event of the FileReader object, which lists the events provided by FileReader

Onabort: triggered when interrupted

Onerror: triggered when an error occurs

Onload: triggered when the file read completes successfully

Onloadend: read completion trigger, regardless of success or failure

Onloadstart: triggered at the beginning of reading

Onprogress: continuously triggered during reading

Get network status

HTML5 provides API about the status of the network. Using window.navigator.onLine, you can get the current status of the network and return a Boolean value. In addition, two network events are provided.

Ononline (): triggered when connected to the network

Onoffline (): triggered when the network is disconnected

_ window.ononline = function () {console.log ("online");} _ window.onoffline = function () {console.log ("offline");} local storage

With the rapid development of the Internet, web-based applications are becoming more and more common, and at the same time, they become more and more complex. In order to meet a variety of needs, we often store a large amount of data locally. Traditionally, we use [xss_clean] to store, but because its storage size is only about 4k, and the parsing is also quite complex, it brings a lot of inconvenience to the development. HTML5 specification puts forward a solution. Use sessionStorage and localStorage to store data.

The size of sessionStorage is about 5m, and its life cycle is the current page, that is, when the current page is closed, the data stored locally will be erased. And the sessionStorage between different pages is independent and cannot visit each other. The methods of sessionStorage are

SetItem (key, value): stores key-value pairs

GetItem (key): get the corresponding value according to key

RemoveItem (key): deletes the key-value pair corresponding to key

Clear (): clear the sessionStorage local cache

The size of localStorage is about 20m and its life cycle is the current browser. Closing the browser does not erase the data, which is stored on the hard disk and can only be cleared manually. The method of localStorage is the same as sessionStorage.

Header

Footer

Nav

Article

Aside

Section

......

But now there is a problem. Because these semantic tags are added by HTML5, it means that they are not supported in IE browsers of IE8 and below. For example, the following styles cannot be displayed properly in IE8, create semantic tags header in script, and set the display of header to block.

At this point, I believe you have a deeper understanding of "how to use semantic tags in HTML5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.