5 cool and practical HTML tags and attributes introduction

In fact, this is also a title party, and it cannot be said to be a show-off, but because I am ignorant and have never seen these labels. These features are not very common on the usual websites, so I feel very fresh. Then let’s make a series and record all the good HTML tags I encountered (maybe it is HTML5 tags, and it is not guaranteed that all browsers will be compatible).

This is a new tag added to HTML5. You can try editing the contents of a region, such as the following table: (The table in IE does not seem to support this property, but the div and body seem to be supported. If you are using IE, please try to click on the $100 and $50 sections to edit. I added the contenteditable tag to these two grids. If you are not IE, then all the contents should be editable)

<table contenteditable="true"><caption>Monthly savings</caption><tbody><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td><div contenteditable="true">$100</div></td><tr><td>February</td><td><div contenteditable="true">$50</div></td></tbody></table>

Note that this table can be edited directly. We do not need to add any text boxes to change the text directly. Moreover, if the sub-label is not specified, it is inherited by default, so it is very convenient. (Of course if you add this attribute to the body, everything can be edited, it's terrible...)

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

<fieldset><legend>Index:</legend><ul><li><a href="#">Index of all articles</a></li><li><a href="#">Things sheeple need to wake up for today</a></li><li><a href="#">Sheeple we have managed to wake</a></li></ul></fieldset>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0<input type="range" id="a" value="50">100+<input type="number" id="b" value="50">=<output name="x" for="ab"></output></form></p><p><p><strong>Note:</strong> The output tag is not supported in Internet Explorer.</p></form>

<p>Do not forget to buy <mark>milk</mark> today.</p>

Tip: You can modify some code first and then run it

Let’s go here today, and then post it when you see good HTML tags and special effects.