5個酷炫、實用的HTML標籤與屬性介紹_HTML/Xhtml_網頁製作

其實這也是標題黨了，也不能說是“炫”，只是由於我孤陋寡聞沒見過這些標籤。這些功能在通常的網站上也不是很常見，所以我感覺很新鮮。那就出一個系列吧，把我遇到的很好的HTML標籤都記錄下來（可能是HTML5的標籤，不保證所有瀏覽器都能相容）。

1. contenteditable

這是HTML5新增的標籤，可以讓一個區域的內容可以試試編輯，例如下面的表格：（在IE中的table似乎不支援這個屬性，但是div和body好像是支援的。如果你使用IE，那麼請嘗試點擊$100和$50的部分進行編輯，我在這兩個格子中加了contenteditable的標籤。

Monthly savings

Month	Savings
January	$100
February	$50

提示：您可以先修改部分程式碼再執行

注意這個表格是直接可以編輯的，我們不需要增加任何文字方塊就可以直接改文字，而且子標籤如果沒有指定這個屬性的話預設是繼承的，所以非常方便。 （當然如果在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>

提示：您可以先修改部分程式碼再執行

legend標籤指定這個BOX的標題。

3. area標籤

圖片上的特定區域可以直接放一個超級連結！配合map標籤和img的usemap屬性即可（注意點了圖片後跳到其他頁面記得退回來 ^_^）：

提示：您可以先修改部分程式碼再執行

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>
提示：您可以先修改部分代码再运行

5. mark标签

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

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

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