Introduction to 5 cool and practical HTML tags and attributes_HTML/Xhtml_Webpage Production

Actually, this is also a headline, and it cannot be said to be "dazzling". It's just because I am ignorant and have never seen these labels. These features are not very common on normal websites, so it feels very fresh to me. Then I will create a series to record all the good HTML tags I have encountered (maybe HTML5 tags, there is no guarantee that all browsers will be compatible).

1. contenteditable

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

<table border="2" 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> <tr> <td>February</td> <td> <div contenteditable="true">$50</div> </td> </tr> </tbody> </table>

Tip: You can modify part of the code before running

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

2. fieldset tag

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

Index:

• Index of all articles
• Things sheeple need to wake up for today
• Sheeple we have managed to wake

Tip: You can modify part of the code before running

The

legend tag specifies the title of this BOX.

3. area tag

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

Tip: You can modify part of the code before running

4. output标签

这个标签能够直接显示脚本的运算结果（注意：目前IE的任何版本都不支持），以下脚本似乎不工作，可能是因为WP的原因所致：

<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="a b"></output> </form></p> <p><p><strong>Note:</strong> The output tag is not supported in Internet Explorer.</p> </form>
提示：您可以先修改部分代码再运行

5. mark标签

直接能够高亮一段文字，不需要把文字拆开即可实现：

<p>Do not forget to buy <mark>milk</mark> today.</p>
提示：您可以先修改部分代码再运行

今天先到这吧，以后看到好的HTML标签和特效再贴上来。