您现在的位置是:网站首页> 编程资料编程资料
5个酷炫、实用的HTML标签和属性介绍HTML的a标签href属性指定相对路径与绝对路径的用法讲解HTML5 Video标签的属性、方法和事件汇总介绍常用HTML meta 标签属性(网站兼容与优化需要)设置contenteditable属性可编辑HTML标签的内容(可代替textarea)HTML embed标签使用方法和属性详解HTMLimg标签的alt属性和title属性使用介绍html a 链接标签title属性换行鼠标悬停提示内容的换行效果HTML中相似的标签和属性的区别详解
2021-08-30
1246人已围观
简介 这篇文章主要介绍了5个酷炫、实用的HTML标签和属性介绍,所有标签的效果请点击运行代码查看,需要的朋友可以参考下
其实这也是标题党了,也不能说是“炫”,只是由于我孤陋寡闻没见过这些标签。这些功能在通常的网站上也不是很常见,所以我感觉很新鲜。那么就出一个系列吧,把我遇到的很好的HTML标签都记录下来(可能是HTML5的标签,不保证所有浏览器都能兼容)。
1. contenteditable
这是HTML5新增的标签,可以使一个区域的内容可以试试编辑,比如下面的表格:(在IE中的table似乎不支持这个属性,但是div和body好像是支持的。如果你使用IE,那么请尝试点击$100和$50的部分进行编辑,我在这两个格子中加了contenteditable的标签。如果你不是IE,那所有的内容应该都可以编辑)
提示:您可以先修改部分代码再运行
注意这个表格是直接可以编辑的,我们不需要增加任何文本框就可以直接改文字,而且子标签如果没有指定这个属性的话默认是继承的,所以非常方便。(当然如果在body中增加这个属性那么所有的东西都可以编辑,真可怕……)
2. fieldset标签
这个东西就相当于.NET里面的GroupBox,只是我原来不知道而已,它的作用是可将表单内的相关元素分组,:
提示:您可以先修改部分代码再运行
legend标签指定这个BOX的标题。
3. area标签
图片上的特定区域可以直接放一个超级链接!配合map标签和img的usemap属性即可(注意点了图片后跳转到其他页面记得退回来 ^_^):
提示:您可以先修改部分代码再运行
4. output标签
这个标签能够直接显示脚本的运算结果(注意:目前IE的任何版本都不支持),以下脚本似乎不工作,可能是因为WP的原因所致:
提示:您可以先修改部分代码再运行
5. mark标签
直接能够高亮一段文字,不需要把文字拆开即可实现:
提示:您可以先修改部分代码再运行
今天先到这吧,以后看到好的HTML标签和特效再贴上来。
相关内容
- HTML元素设置焦点的方法纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- 详解a href=#与 a href=javascript:void(0) 的区别纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- html用style添加属性示例纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- 拿什么来拯救你,我的table(海玉博客)纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- 超链接的宽度和高度直接设置不起作用的解决方法纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- 插入表单form上下都会空出一行的解决方法纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- 如何使用图片按钮作为重置(reset)表单按钮纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- 使用overflow: hidden来禁用页面滚动条前端页面弹框遮罩禁止页面滚动CSS设计之页面滚动条出现时防止页面跳动的方法纯css 实现footer 一直在页面底部,不随页面滚动HTML页面滚动时部分内容位置固定不滚动的实现
- base target=""控制链接的目标打开框架纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- a标签的target链接指向iframe的方法举例讲解HTML中iframe和frame的区别深入剖析HTML5 内联框架iFrameHTML中iFrame标签的两个用法介绍利用iframe在网页中显示天气附效果截图用jquery进行修复在iframe下的页面锚点失效问题iframe框架在IE浏览器下将白色背景设为透明色iframe截取网站部分内容实现思路及代码浅谈Iframe网页内部的导航窗口
