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. LInux系统及其文件系统

    Linux系统:Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNIX工具软件.应用程序和网络协 ...

  2. CDZSC_2015寒假新人（1）——基础 d

    Description These days, I am thinking about a question, how can I get a problem as easy as A+B? It i ...

  3. MySQL 初学笔记 ② -- MySQL安装

    1. Ubuntu安装 sudo apt-get install mysql-server //安装mysql服务 sudo apt-get install mysql-client // sudo ...

  4. ado.net实现一个通知公告功能

    一.建立相应的数据库,此处就不多说了,相信大家都非常了解

  5. shopnc 发票项目

    ---恢复内容开始--- file_put_contents( 't.txt' , print_r($input_invoice_info ,true) ); 打印 $input_invoice_in ...

  6. 使用微软的(how-old.net)构建智能门店管理系统

    现在是大数据时代,每个企业都要对自己的客户有全面的认识,这样才能最准确的分析客户,做出相应的决策.在实体的门店中,对于客户的管理还是比较低级,很多客户对于企业来说是哑终端,即对于企业来说,完全不知道客 ...

  7. 水池（DFS）

    水池数目 点我 描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地图上仅标识了此处是否是水池,现在,你的任务来了,请用计算机算出该地图中 ...

  8. Thread 线程简单例子

    //这个方法是 静态的 public static void ThreadFunc() {//计数器 ; while(true) { //休眠1秒 Thread.Sleep(); //计数器递增 co ...

  9. php5.5以上的版本 开启curl

    对于php5.5以上的版本开启方法,需要libeay32.dll.ssleay32.dll.libssh2.dll三个文件拷备到C:\Windows目录下,php.ini中 扩展开启,重启apache ...

  10. AprioriTID algorithm

    What is AprioriTID? AprioriTID is an algorithm for discovering frequent itemsets (groups of items ap ...