1.contenteditable 属性指定元素内容是否可编辑。

注意： 当元素中没有设置 contenteditable 属性时，元素将从父元素继承。

所有主流浏览器都支持 contenteditable 属性

语法

<element contenteditable="true|false">
<!DOCTYPE html>

<html>

<body>

<p contenteditable="true">这是一个段落。是可编辑的。尝试修改文本。</p>

</body>

</html>

　2.draggable 属性规定元素是否可拖动。

提示： 链接和图像默认是可拖动的。

提示： draggable 属性经常用于拖放操作。

语法

<element draggable="true|false|auto">
true 规定元素是可拖动的。
false 规定元素是不可拖动的。
auto 使用浏览器的默认特性。 
<!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>

　　

HTML5新属性的更多相关文章

  1. HTML5新属性在Google浏览器中不能显示的问题

    这两天在学习HTML5新属性时遇到了如下问题,很是不解: 例如在学习使用canvas时,需要绘制一个红色的原点,代码如下: <!DOCTYPE HTML> <html> < ...

  2. （二）给IE6-IE9中的input添加HTML5新属性-placeholder

    同样是最近遇到的一个小问题.因为IE9以下input是不支持placeholder属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在 ...

  3. 【HTML】html5新属性-datalist

    摘要: 为实现输入域自动填充的效果 方法一: jquery-ui的autocomplete方法, 不是jquery 自带的方法. 方法二: 采用html5新特性,datalist,例子如下:坏处很明显 ...

  4. HTML5新属性-----拖放

    最早引入JS拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.拖动图像时,把鼠标放在图像上,按住鼠标不放就可以拖动它.拖动文本时,需要选中文本,然后可以像拖动图像一样拖动被选中的文 ...

  5. HTML5 新属性的讲解

    1.选择器: 标签选择器: class选择器: id选择器: 后代选择器:div li div下所有li 子代选择器:div>li div的所有子一代 li 元素 交集选择器:div.class ...

  6. html5 新属性

    <p contenteditable="true">这是一段可编辑的段落.请试着编辑该文本.</p> <input id="email&qu ...

  7. html5新属性contenteditable 对于那些不可编辑的标签，现在都可以编辑了

    contenteditable = true 表示该html标签的内容可以编辑,对于那些不可编辑的标签,现在都可以编辑了.

  8. sad 关于一些html5新属性还需要用https才能支持

    像我昨天在搞一个录音的小东西 在本地正常录音正常播放 但是放到线上环境http环境上就出现了如上的错误 功能都不能正常使用 然后就改成https线上环境  然后就正常了 如上 大家有什么赐教的欢迎留言 ...

  9. HTML5新的标签和属性

    <article>标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本.亦或是来自其他外部源内容. HTML5:<arti ...

随机推荐

  1. ios 项目被拒绝各种理由

    . Terms and conditions(法律与条款) 1.1 As a developer of applications for the App Store you are bound by ...

  2. NSString 字符串操作

    //一.NSString /*----------------创建字符串的方法----------------*/ //1.创建常量字符串. NSString *astring = @"Th ...

  3. 【.NetRemoting-3】2015.09.18

    [Remoting程序的基本实现] [一]服务程序集 [1]服务对象必须要求继承[MBR,MarshalByRefObject] [二]服务端应用程序 [1]注册通道 [两种类型的通道] [A]发送请 ...

  4. LABJS源码浅析

    一.关于LABjs的简单介绍 作者:Kyle Simpson 作用:动态并行加载脚本文件 以及 管理加载脚本文件的执行顺序 官网:http://www.labjs.com/ 二.关于LABjs的使用 ...

  5. HTML5的结构学习(3) --- 综合运用

    前面学习了HTML5新增的主体结构元素和新增的非主体结构元素, 而这里我们来学习如何去综合的运用这些新增元素. 1.大纲 HMTL5元素的关键就是将显示内容和便签类型紧密相关,提高了代码的语义化和可读 ...

  6. Python成长之路第二篇（3）_字典的置函数用法

    字典的置函数用法(字典dict字典中的key不可以重复) class dict(object): """ dict() -> new empty dictionar ...

  7. Leetcode算法刷题：第100题 Same Tree

    Same Tree 题目 给予两棵二叉树,判断这两棵树是否相等(即各节点的值都一样) 解题思路 分别遍历两棵二叉树,并用列表分别存储这两棵树的节点的值,比较这两个列表就可以了 class Soluti ...

  8. tomcat------https单向认证和双向认证

     一.https分为单向认证和双向认证: 单向认证就是说,只有客户端使用ssl时对服务器端的证书进行认证,也就是说,客户端在请求建立之前,服务器端会向客户端发送一个证书,一般情况下,这种证书都是由自己 ...

  9. GO的GDB调试

    GoLang语言,学了很久,一直觉得它单步调试有较多问题,最近才知道自已对它了解得太少了.原来GO语言对GDB的版本是至少为gdb7以上,才能比较好的打印任意变量,如果低于这个版本,则才会出一些问题. ...

  10. rails跑通第一个demo

    rails -h 查看帮助 Usage: rails new APP_PATH [options] Options: -r, [--ruby=PATH] # Path to the Ruby bina ...