超级炫的HTML标签和属性收藏(1)

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

1. contenteditable

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

Monthly savings
Month Savings
January
$100
February
$50

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

2. fieldset标签

这个东西就相当于.NET里面的GroupBox,只是我原来不知道而已:
Index:

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

3. area标签

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

Planets

Sun Mercury Venus

4. output标签

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

 

0
100
+
=Note: The output tag is not supported in Internet Explorer.

代码如下:

<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><strong>Note:</strong> The output tag is not supported in Internet Explorer.</p>
</form>

5. mark标签

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

Do not forget to buy milk today.

 

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

注:范例的代码都摘自http://www.w3schools.com

超级炫的HTML标签和属性收藏(1)”的一个响应

    1. 哇咔咔,发现MVA,我的已经提醒
      您已经使用不同的语言注册了此课程。 您可以使用其他语言再次培训此课程,但是学分只能记录在第一次注册的课程上。 使用多种语言培训同一个课程不会获得额外的学分。
      可惜都就饭吃了,忘得一干二净。

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google+ photo

You are commenting using your Google+ account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s