HTML5新属性
1.contenteditable 属性指定元素内容是否可编辑。
注意: 当元素中没有设置 contenteditable 属性时,元素将从父元素继承。
所有主流浏览器都支持 contenteditable 属性
语法
<!DOCTYPE html>
<html>
<body> <p contenteditable="true">这是一个段落。是可编辑的。尝试修改文本。</p> </body>
</html>
2.draggable 属性规定元素是否可拖动。
提示: 链接和图像默认是可拖动的。
提示: draggable 属性经常用于拖放操作。
语法
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新属性的更多相关文章
- HTML5新属性在Google浏览器中不能显示的问题
这两天在学习HTML5新属性时遇到了如下问题,很是不解: 例如在学习使用canvas时,需要绘制一个红色的原点,代码如下: <!DOCTYPE HTML> <html> < ...
- (二)给IE6-IE9中的input添加HTML5新属性-placeholder
同样是最近遇到的一个小问题.因为IE9以下input是不支持placeholder属性的.在网上找到了解决方案,果断带走.正如鲁迅先生所说的‘拿来主义’:运用脑髓,放出眼光,自己来拿!感谢.借花献佛在 ...
- 【HTML】html5新属性-datalist
摘要: 为实现输入域自动填充的效果 方法一: jquery-ui的autocomplete方法, 不是jquery 自带的方法. 方法二: 采用html5新特性,datalist,例子如下:坏处很明显 ...
- HTML5新属性-----拖放
最早引入JS拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.拖动图像时,把鼠标放在图像上,按住鼠标不放就可以拖动它.拖动文本时,需要选中文本,然后可以像拖动图像一样拖动被选中的文 ...
- HTML5 新属性的讲解
1.选择器: 标签选择器: class选择器: id选择器: 后代选择器:div li div下所有li 子代选择器:div>li div的所有子一代 li 元素 交集选择器:div.class ...
- html5 新属性
<p contenteditable="true">这是一段可编辑的段落.请试着编辑该文本.</p> <input id="email&qu ...
- html5新属性contenteditable 对于那些不可编辑的标签,现在都可以编辑了
contenteditable = true 表示该html标签的内容可以编辑,对于那些不可编辑的标签,现在都可以编辑了.
- sad 关于一些html5新属性还需要用https才能支持
像我昨天在搞一个录音的小东西 在本地正常录音正常播放 但是放到线上环境http环境上就出现了如上的错误 功能都不能正常使用 然后就改成https线上环境 然后就正常了 如上 大家有什么赐教的欢迎留言 ...
- HTML5新的标签和属性
<article>标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本.亦或是来自其他外部源内容. HTML5:<arti ...
随机推荐
- 大数值基础、for与while循环的简单对比
- json 去空值与缩进
var jSetting = new Newtonsoft.Json.JsonSerializerSettings(); //忽略值为null的 jSetting.NullValueHandling ...
- C#同步数据库的数据到Neo4J
数据组件采用https://github.com/Readify/Neo4jClient 在nuget里面有 需要注意的是 以下是示例代码: using System;using System.Col ...
- php中的短标签 太坑人了
今天配置了一个php页面去修改svn密码问题,结果调了半天,最后在Windows和 Linux的运行现象是不一样,运行结果更不一样了,关键是完全一模一样的代码. 最后发现是短标签引起的,Windows ...
- HDU 1057 - A New Growth Industry
简单的模拟. 给定天数n,给定D[0]~D[15]给定一个20*20的矩阵.每个格子内有一个0~3的数字,表示细菌数.每天,每个格子将加上D[k],k表示这个格子以及上下左右相邻格子的细菌之和(矩阵外 ...
- Linux命令备忘录
1.tar命令 解压tar.gz格式压缩包:tar zxvf xxx.tar.gz 解压tar.bz2格式压缩包:tar jxvf xxx.tar.bz2 压缩为tar.gz格式压缩包:tar zcv ...
- Ubuntu第一次使用调教教程
Ubuntu第一次使用调教教程 Ubuntu不允许root用户登录,这让人很蛋疼.下面的方法就是让Ubuntu接受以root身份登录.此外,ubuntu默认没有安装ssh的,所以不能进行ssh远程登录 ...
- Hello又大了一岁
时间就这样子过了一年一年一年一年一年...一年一年一年......... 以往每年的生日,都习惯安静的猫在一个地方.时间流逝,更像是一种默默的悼念. 也许从28岁开始,我得习惯用逗比的心态欢迎.长大的 ...
- 前端-mate讲解
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. <meta> 标签位于文档的头部,不包含任何内容. & ...
- Ajax 用法, 实现方法,JS原生与JQ实现
AJAX 详解 ajax是实现页面异步加载. 常用于, 前后端数据交互, 实现前端页面无刷新更改操作. 是web前端和后端使用者开发的必备使用技能~~ Ajax操作~ : 俗话原理 : 用俗话来 ...