5个酷炫、实用的HTML标签和属性介绍

其实这也是标题党了，也不能说是“炫”，只是由于我孤陋寡闻没见过这些标签。这些功能在通常的网站上也不是很常见，所以我感觉很新鲜。那么就出一个系列吧，把我遇到的很好的HTML标签都记录下来（可能是HTML5的标签，不保证所有浏览器都能兼容）。

1. contentedITable

这是HTML5新增的标签，可以使一个区域的内容可以试试编辑，比如下面的表格：（在IE中的table似乎不支持这个属性，但是div和body好像是支持的。如果你使用IE，那么请尝试点击$100和$50的部分进行编辑，我在这两个格子中加了contenteditable的标签。如果你不是IE，那所有的内容应该都可以编辑）

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>
ffcod = delpost.runcode9 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode9 .value = ffcod; 提示：您可以先修改部分代码再运行

注意这个表格是直接可以编辑的，我们不需要增加任何文本框就可以直接改文字，而且子标签如果没有指定这个属性的话默认是继承的，所以非常方便。（当然如果在body中增加这个属性那么所有的东西都可以编辑，真可怕……）

2. fieldset标签

这个东西就相当于.NET里面的GroupBox，只是我原来不知道而已,它的作用是可将表单内的相关元素分组,：

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>
ffcod = delpost.runcode10 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode10 .value = ffcod; 提示：您可以先修改部分代码再运行

legend标签指定这个BOX的标题。

3. area标签

图片上的特定区域可以直接放一个超级链接！配合map标签和img的uSEMap属性即可（注意点了图片后跳转到其他页面记得退回来 ^_^）：

p> img alt="Planets" src="//img.jbzj.COM/file_images/article/201407/201471695311430.gif?201461695323" usemap="#planetmap" width="145" height="126" pagesPEed_url_hash="4053416989"/> /p> map name="planetmap"> area alt="Sun" coords="0,0,82,126" Shape="rect" href="#sun.htm"/> area alt="Mercury" coords="90,58,3" shape="circle" href="#mercur.htm"/> area alt="Venus" coords="124,58,8" shape="circle" href="#venus.htm"/> /map>
ffcod = delpost.runcode11 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode11 .value = ffcod; 提示：您可以先修改部分代码再运行

4. output标签

这个标签能够直接显示脚本的运算结果（注意：目前IE的任何版本都不支持），以下脚本似乎不工作，可能是因为WP的原因所致：
form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0input 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>
ffcod = delpost.runcode12 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode12 .value = ffcod; 提示：您可以先修改部分代码再运行

5. mark标签

直接能够高亮一段文字，不需要把文字拆开即可实现：
p> Do not forget to buy mark> milk/mark> today./p>
ffcod = delpost.runcode13 .value; ffcod = ffcod.replace(/
/g,''); delpost.runcode13 .value = ffcod; 提示：您可以先修改部分代码再运行

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！