DIV CSS 佈局教程網

其實這也是標題黨了，也不能說是“炫”，只是由於我孤陋寡聞沒見過這些標簽。這些功能在通常的網站上也不是很常見，所以我感覺很新鮮。那麼就出一個系列吧，把我遇到的很好的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>
提示：您可以先修改部分代碼再運行

注意這個表格是直接可以編輯的，我們不需要增加任何文本框就可以直接改文字，而且子標簽如果沒有指定這個屬性的話默認是繼承的，所以非常方便。（當然如果在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屬性即可（注意點了圖片後跳轉到其他頁面記得退回來 ^_^）：

<p><img alt="Planets" src="http://files.jb51.net/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>
提示：您可以先修改部分代碼再運行

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標簽和特效再貼上來。