5 cool and practical HTML tags and attributes introduction

In fact, this is also a clickbait title, and it cannot be said to be "showy". It's just that I am ignorant and have never seen these labels. These features are not very common on regular websites, so I feel they are quite fresh. Then I will make a series to record all the good HTML tags I encounter (they may be HTML5 tags, and there is no guarantee that all browsers are compatible).

1. contenteditable

This is a new tag added in HTML5, which can make the content of an area editable, such as the table below: (table in IE does not seem to support this attribute, but div and body seem to support it. If you use IE, please try to click on the $100 and $50 parts to edit them. I added the contenteditable tag in these two boxes. If you are not using IE, all the content should be editable)

Note that this table is directly editable. We can change the text directly without adding any text boxes. If the sub-tag does not specify this attribute, it is inherited by default, so it is very convenient. (Of course, if you add this property to the body, everything will be editable, which is terrible...)

2. Fieldset tag

This thing is equivalent to the GroupBox in .NET, but I didn't know it before. Its function is to group related elements in the form:

The legend tag specifies the title of this BOX.

3. Area tag

A hyperlink can be placed directly in a specific area on the picture! Use the map tag and the usemap attribute of img (note that after clicking on the image, remember to return to other pages ^_^):

4. Output tag

This tag can directly display the result of the script (note: currently not supported by any version of IE). The following script does not seem to work, probably because of WP:

5. Mark tag

You can directly highlight a piece of text without breaking it up:

That’s all for today. I’ll post more good HTML tags and special effects later.