• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > 5个酷炫、实用的HTML标签和属性介绍

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含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>
提示:您可以先修改部分代码再运行


注意这个表格是直接可以编辑的,我们不需要增加任何文本框就可以直接改文字,而且子标签如果没有指定这个属性的话默认是继承的,所以非常方便。(当然如果在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标签和特效再贴上来。

您可能想查找下面的文章:

相关文章

  • 2017-08-05各种MOUSE鼠标形状的表示方法
  • 2017-08-05如何点击a标签实现弹出input file上传文件对话框
  • 2017-08-05Button的四种Click响应方法汇总
  • 2017-08-05网页中flash wmode属性你会用吗?
  • 2017-08-05dns-prefetch是什么 前端优化:DNS预解析提升页面速度
  • 2017-08-05HTML中绝对路径和相对路径的区别分析
  • 2017-08-05HTML网页列表标记学习教程
  • 2017-08-05input file自定义按钮美化(演示)
  • 2017-08-05disabled与readonly的作用及区别介绍
  • 2017-08-05浅谈HTML空链接的作用

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 使一个input文本框随其中内容而变化长度的方法
    • html body标签详解与html常用的控制标记
    • ie 滤镜大全整理
    • 超链接图标规范:提升文章的可阅读性
    • 定义span的最小高度没有效果的解决方法
    • 加粗<b>与<strong>的区别分析
    • html无序列表标签和有序列表标签使用示例
    • select的最佳预设打造全兼容各浏览器select
    • html在消息按钮上增加数量角标的实现代码
    • 正确使用HTML title属性的一些建议

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有