HTML中令人惊喜的全局属性
2018-12-06 07:32:03来源：博客园 阅读 ()
1、accesskey 属性 ： 规定激活元素的快捷键。
浏览器支持：几乎所有浏览器均 accesskey 属性，除了 Opera。
定义和用法
accesskey 属性规定激活（使元素获得焦点）元素的快捷键。
提示和注释
注释：以下元素支持 accesskey 属性：<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。
语法：
<elementaccesskey="character">
eg:
<a href="https://www.google.com" accesskey="h">google</a><br />
<a href="https://www.baidu.com" accesskey="c">baiDu</a>
注释：请使用Alt + accessKey (或者 Shift + Alt + accessKey) 来访问带有指定快捷键的元素。
（用处：可以满足快捷键的一些需求）
2、HTML contenteditable 属性：规定元素内容是否可编辑。
浏览器支持：所有主流浏览器都支持 contenteditable 属性。
定义和用法
contenteditable 属性规定元素内容是否可编辑。
注释：如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。
语法
<element contenteditable="true|false">
eg:
<p contenteditable="true">这是一个可编辑的段落。</p>
（用处：可以做文本编辑器）
3、HTML contextmenu 属性：规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
浏览器支持：目前只有 Firefox 支持 contextmenu 属性。（但是我试了火狐也不行）
定义和用法
contextmenu 属性规定元素的上下文菜单。当用户右键点击元素时，会出现上下文菜单。
contextmenu 属性的值是要打开的 <menu> 元素的 id。
语法
<element contextmenu="menu_id">
eg:
在火狐上面实验 无效（知道原因的朋友可以告诉我）
4、HTML draggable 属性：规定元素是否可拖动。
浏览器支持：Internet Explorer 8 以及更早的版本，不支持 draggable 属性。
定义和用法
draggable 属性规定元素是否可拖动。
提示：链接和图像默认是可拖动的。
语法
<element draggable="true|false|auto">
eg:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>
</body>
</html>
目前觉得这四个给我带来的惊喜比较大，平时用的也比较少，以后会用到，
除了这几个，其余的属性比如class id lang 这些都很常用，
还有一些浏览器支持很差的属性这里就不说了
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：html常用标签
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
