HTML5新增的通用属性 - contentEditable属性

HTML5为大部分HTML元素增加了contentEditable属性，如果将该属性设置为true，则浏览器允许开发者直接编辑该HTML元素里的内容，并且支持“可继承“的特点，也就是如果一个HTML元素的父元素是可编辑的，那么它也是可编辑的。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>contentEditable属性</title>
	</head>
	<body>
		<!-- 直接指定contentEditable=“true”表明该元素是可编辑的 -->
		<div contenteditable="true" style="width: 500px; border:1px solid black">
			疯狂Java讲义
			<!-- 该元素的父元素有contentEditable=“true”，因此该表格也是可以编辑的 -->
			<table style="width: 420px; border-collapse: collapse;" border="1">
				<tr>
					<td>疯狂Java讲义</td>
					<td>疯狂Android讲义</td>
				</tr>
				<tr>
					<td>轻量级Java EE企业应用实战</td>
					<td>经典Java EE企业应用实战</td>
				</tr>
			</table>
		</div>
		<hr />
		<!-- 这个表格默认是不可编辑的，双击之后该表格变为 -->
		<table id="target" ondblclick="this.contentEditable=true" style="width: 420px; border-collapse: collapse;" border="1">
			<tr>
				<td>Java</td>
				<td>Ruby</td>
			</tr>
			<tr>
				<td>C/C++</td>
				<td>Python</td>
			</tr>
		</table>

	</body>
</html>

时间： 2024-10-05 23:17:49

HTML5新增的通用属性 - contentEditable属性的相关文章

疯狂html5讲义（二）：HTML5简的常用元素与属性（二）:html5新增的通用属性

1.contentEditable属性 true时可直接编辑html元素里面的内容,且具有"可继承"的特点. 编辑后不要刷新页面,否则编辑的内容会丢失,可以通过该元素的innerHtml属性来获取编辑后的内容. 2.designMode属性此属性相当于一个全局的contentEditable属性 3.hidden属性可以替代css中的display,hidden=true相当于display:none 4.spellcheck属性针对于input.textarea等元素,可以对用

HTML5新增的通用属性

1.contentEditable属性 html5为大部分html元素都增加了contentEditable属性,如果将该元素属性设为true,那么浏览器将会允许开发者直接编辑该元素里的内容.此处的HTML元素并不是指那些原本允许用户输入的表单元素,如文本框.文本域之类的,而是可以把<table.../>.<div.../>等元素变成可编辑状态. contentEditable属性具有“可继承性”的特点:如果一个HTML元素的父元素是“可编辑”的,那么它默认也是可编辑的

HTML5新增Canvas标签及对应属性、API详解（基础一）

知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签原型 <canvas width=”1000” height=”1000” id=”myCanvas”> 您的浏览器版本过低,不支持HTML5新增的canvas标签. </canvas> 使用js获取该画布,并指定对象 <script> Var canvasID = doc

html5新增表单元素和属性

从三方面来介绍html5表单的新特性表单结构更灵活要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址 <body><form action="upload.php" method="post" accept-charset="utf-8" id="form1"&g

疯狂的表单-html5新增表单元素和属性

疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性表单结构更灵活要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址 <body> <form action="upload.php" method="post" accept-charset="utf-8&

HTML5新增的视频功能——video属性

video在各浏览器中显示的差异 video支持的基本视频格式:mp4 / webm / ogv <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>video</title> </head> <body> <video src="data/imooc.mp4"

HTML5 新增通用属性

一:HTML5保留的常用元素 7. 表格相关元素.表格在html里还算重要的了. <table> :用于表格定义. cellpadding: 单元格内容和单元格边框距离 cellspacing: 单元格间距 width : 表格宽度 <caption>: 表格标题最多只额能包含一个. <thead> : 表格头,可以有多个. <tfoot> : 表格脚. <tbody> : 表格体.值能包含<

玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性

今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性. html5新增的input类型有:email,url,number,range,date pickers,datalist,telephone,search,color email:提交时会自动验证输入的内容是否满足格式邮箱 :<input type="email" name=&quo

HTML5 学习笔记（二）——HTML5新增属性与表单元素

目录一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeholder占位属性 1.7.required必填属性 1.8.pattern正则属性 1.9.autofocus自动聚焦属性 1.10.autocomplete自动完成属性 1.11.novalidate不验证属性 1.12.multiple多选属性二.HTML5表单新功能解析 2.1.表单结构更自由