Heim  >  Artikel  >  Web-Frontend  >  Praktische Einführung in HTML-Tags und -Attribute

Praktische Einführung in HTML-Tags und -Attribute

高洛峰
高洛峰Original
2017-03-01 14:35:141412Durchsuche

这篇文章主要介绍了5个酷炫、实用的HTML标签和属性介绍,所有标签的效果请点击运行代码查看,需要的朋友可以参考下

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

1. contenteditable

这是HTML5新增的标签,可以使一个区域的内容可以试试编辑,比如下面的表格:(在IE中的table似乎不支持这个属性,但是p和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的原因所致:

<p><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标签和特效再贴上来。

更多实用的HTML标签和属性介绍相关文章请关注PHP中文网!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn