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. Quartz2D介绍

    一.什么是Quartz2D Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图 ...

  2. 000-C#基础

    C#中数据类型的继承关系如下 System.Object |-------------System.ValueType | |-------System.Boolean | |-------Syste ...

  3. QJson 的使用

    下载 源码解压 https://github.com/flavio/qjson 复制 src 目录下所有 .h .cpp .hh 文件到项目目录 qjson,pro 文件添加 INCLUDEPATH ...

  4. QT-利用C++仿制windown自带的记事本程序V1.0

    下班无事, 发现QT还是很好用的, 就仿制windows的记事本做了一个,未彻底DEBUG, 先拿来分享下. windows记事本大概是这样的: 大概分为以下几步: 1. 界面用QT代码写,即可, Q ...

  5. Dubbo使用详解及环境搭建

    一:Dubbo简介 Dubbo是阿里巴巴提供的开源的SOA(面向服务的体系结构)服务化治理的技术框架,据说只是一部分开源的,但一些基本的需求已经可以满足的,而且可扩展性.是一种能取代PHRPC的服务调 ...

  6. Linux内核目录解析~

    以前进过一些公司看到一些服务器,把环境搭建都搭建在etc里面,而且都乱套了.在找PHP配置文件和apache的conf文件都难找到, 我们应该大致的了解下linux的文件分布 /etc : 放置系统重 ...

  7. Leetcode 226 Invert Binary Tree python

    题目: Invert a binary tree. 翻转二叉树. 递归,每次对节点的左右节点调用invertTree函数,直到叶节点. python中也没有swap函数,当然你可以写一个,不过pyth ...

  8. std::map的insert和下标[]访问

    在map中插入元素 改变map中的条目非常简单,因为map类已经对[]操作符进行了重载 enumMap[1] = "One";enumMap[2] = "Two" ...

  9. USB HID复合设备实例—键盘+鼠标

    实现这种USB HID复合设备有两种方法,在<USB HID协议入门>一节已经讲到其中一种方法,说一个USB HID设备可以包含多种功能的报告描述符合集,这样可以实现复合设备,如带鼠标功能 ...

  10. 实用的PHP正则表达式

    正则表达式是程序开发中一个重要的元素,它提供用来描述或匹配文本的字符串,如特定的字符.词或算式等.但在某些情况下,用正则表达式去验证一个字符串比较复杂和费时.本文为你介绍10种常见的实用PHP正则表达 ...