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. NULL & nil & Nil & NSNULL的区别

    nil 是 OC 的,空对象,地址指向 空(0) 的对象 在 OC 中,可以给空对象发送任何消息,不会出现错误 NULL 是 C 的,空地址,地址的数值是 0,是一个长整数 表示地址是空 NSNull ...

  2. iOS数组、字典与json字符串的转换

    /*! * 将字典或者数组转化为JSON串 * * @param theData <#theData description#> * * @return <#return value ...

  3. CodeForces 501B - Misha and Changing Handles

    有N个改名的动作,输出改完名的最终结果. 拿map做映射 #include <iostream> #include <map> #include <string> ...

  4. queue 之团队队列（摘）

    有t个团队的人正在排一个长队.每次新来一个人时,如果他有队友在排队,那么这个新人会插队到最后一个队友的身后.如果没有任何一个队友排队,则他会排到长队的队尾. 输入每个团队中所有队员的编号,要求支持如下 ...

  5. opals 开发记录

    1:开发需要的文件 下载地址:http://www.geo.tuwien.ac.at/opals/html/index.html 注意只能在release下才能通过. 我自己整理好的(64位的),以备 ...

  6. Java代理模式——静态代理模式

    一:代理模式 代理模式的作用是:为其他对象提供一种代理以控制这个对象的访问.在某些情况下,一个客户不想或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 二:代理模式设计 ...

  7. outlook 2007 IMAP设置和配置

    以Outlook2007为例(Outlook2003操作基本类似).  1.依次点击“工具”>“帐户设置”. 2.在“帐户设置”页中点击“新建”> 不需要做任何选择,点击下一步. 3.填写 ...

  8. window.location.href("url") 无法在chrome和Firefoxz中使用

    今天在js代码中加了一句window.location.href(‘url’)希望实现页面的跳转,IE中可以正常使用,但是Firefox却提示window.location is not a func ...

  9. 复习：IPC机制

    一.为什么需要IPC机制 当我们开启多个进程的时候,我们有时需要和各个进程进行交互.但是进程间的交互就不能够共享对象(就是进程A中创建了一个对象,进程B中的类或者方法不能够直接使用,需要用到IPC机制 ...

  10. CKfinder中文乱码的解决.

    最近在写一个类似博客的系统,使用了ckeditor和ckfinder,但是发现ckfinder在上传中文文件名的文件过程中会出现中文乱码的情况. 于是百度google乎,发现大多数的解决办法都是将文件 ...