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

Today, the editor will share with you the relevant knowledge points of practical HTML5 functions, which are detailed in content and clear in logic. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

1. Output label

The result of the operation represented by the label. Typically, this element defines an area that will be used to display some calculated text.

The code is as follows: * = small hint

Use tags if you want to perform any calculations in the client-side JavaScript and you want the results to be reflected on the page. You don't have to walk around to get the extra step getElementById () of the element.

two。 Details label

This tag provides on-demand details to the user. Use this tag if you need to display content to the user on demand. By default, widgets are turned off. When open, it expands and displays its contents.

This tag is used to specify a visible title for it.

The code is Click Here to get the user details # Name Location Job 1 Adam Huston UI/UX 3. Content editable

The contenteditable attribute is an attribute that can be set on an element to make the content editable. It can be used with elements such as DIV,P,UL. The method of use is as follows:

Note that if contenteditable is not set on an element, it inherits the attribute from its parent.

The code is as follows: Shoppping List (Content Editable) 1. Milk 2. Bread 3. Honey Tip

You can make span or div elements editable, and you can add any rich content to it using the css style. This would be better than using input fields to handle it. Just try it!

4. Map

This tag can help define the image mapping. An image map is any image in which there are one or more clickable regions. The map tag determines the clickable area together with the tag. Clickable areas can be any of a rectangular, circular or polygonal area. If no shape is specified, it considers the entire image.

The code is as follows:

A little hint

Image mapping has its own disadvantages, but you can use it for visual presentations. How to try and delve into personal photos with family photos (probably the old ones we've always had! ).

5. Tagged content

Use tags to highlight any text content.

The code is as follows:

Why am I so handsome? "this damn charm," isn't it?

A little hint

You can also use CSS to change the highlight color, and tagging does make a lot of interesting things!

Mark {background-color: green; color: # FFFFFF;} 6.data-* attribute

These data-* properties are used to store custom data specific to the page or application. You can use the stored data in your JavaScript code to create more user experiences.

The data- * attribute consists of two parts:

Attribute names must not contain any uppercase letters and must be at least one character long after the prefix "data-"

Property value can be any string

The code is as follows: are you ready? I have a secret! A little hint

There is nothing wrong with sliderHTML5

9. Measurement label

Use labels to measure data within a given range.

The code is as follows: / home/atapas2 out of 10

/ root60%

A little hint

Do not use tags as progress indicators to achieve the user experience. We have the HTML5 mark.

Downloading progress: 32% 10. Input (this is nothing new, make up the numbers!)

We know best about the use of this part, such as text, passwords and other input types. There are few special uses of input types

Required

Mark input fields as required

Autofocus

Automatically focus on the input element by placing the cursor over the input element.

Regular expression validation

You can use regular expressions to specify patterns to validate input.

Color selector

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.