1、DOCTYPE声明
<!DOCTYPE html>
2、指定字符编码
<meta charset="utf-8">
或者
<html lang="cn">
3、新增的全局属性
contentEditable 允许编辑
isContentEditable 判断是否可编辑
designMode 用来指定整个页面是否可编辑(contentEditable 均为true) 该属性只可通过JS来控制 如下示例：document.designMode="on"
hidden true或者false
spellckeck 拼写和语法检查，结合正则表达式使用更好
tabindex -1(可以通过编程的方式让元素获得焦点，tab键不获得焦点)
4、新增的主体结构元素
article 独立性
section 强调分段和分块，含标题
nav 传统导航条 、侧边栏导航、页内导航、翻页操作
aside 附属信息
5、微格式
time pubdate
6、新增的非主体结构元素
header hgroup footer address
7、表单的新增元素与属性
autofocus placeholder(对用户输入进行提示)
从属属性 (示例)
<form id="textForm">
<input type="text">
</form>
<textarea form="textForm"></textarea>
formaction formmethod
8、list属性
该属性的值为某个datalist元素的ID
示例如下：
text:<input type="text" name="greeting" list="greetings"/>
<datalist id="greetings" style="display:none">
<option>1111</option>
<option>2222</option>
<option>3333</option>
</datalist>
目前只支持 opera 10
9、新增表单元素
<form name="form1">
<label for=username>姓名</label>
<input name=username id=username type=text required/><br/><br/>
<label for=age>年龄</label>
<input name=age id=age type=number min=0 max=100/><br/><br/>
<label for=birthday>生日</label>
<input name=birthday id=birthday type=date /><br/><br/>
<label for=email>邮件</label>
<input name=email id=email type=email required/><br/><br/>
<label for=url>个人主页</label>
<input name=url id=url type=url/><br/><br/>
<label for=memo>个人简介</label>
<textarea name=memo id=memo required></textarea><br/><br/>
<input type=submit />
</form>
10、output元素的追加
<form id=textform>
<input name=range1 type=range min=0 max=100 step=5 />
<output onFormInput="value=range1.value">50</output>
</form>
目前仅支持opera 10
11、新增meter元素
<meter value="10" max="100"></meter>（显示效果类似进度条）
12、Blob对象
二进制原始数据，有两个属性：size 和 type
示例：
<input type="file" id="file" accept="image/*"/> 打开文件窗口时，默认只显示图片
file=document.getElementById("file").files[0];
file.size file.type
13、FileReader接口（把文件读入内存，并且读取文件中的数据）
方法：readAsBinaryString 将文件读取为二进制码
readAsText 将文件读取为文本
readAsDataURL 读取图像及html格式的文件
事件：onabort 数据读取中断时触发
error 数据读取出错时触发
onloadstart 数据读取开始时触发
onprogress 数据读取中 (结合html5中新增的progress元素来显示大文件的读取完成百分比)
onload 数据读取成功完成时触发
onloadend 数据读取完成时触发，无论成功或失败
14、拖放API
在html5之前实现拖放操作是通过 mousedown mousemove mouseup来实现（仅支持浏览器内的拖放）
（1）想要拖放的元素 draggable设置为true
ps:img 和 a 元素默认可以拖动，但是要指定href
（2）拖放相关的事件
dragstart 开始拖放操作
drag 拖放过程中
dragenter 被拖放的元素开始进入本元素的范围
dragover 被拖放的元素正在本元素的范围内移动
dragleave 被拖放的元素离开本元素的范围
drop 有其他元素被拖放到本元素中
dragend 拖放操作结束
<script type="text/javascript">
function init(){
var source = document.getElementById("dragme");
var dest = document.getElementById("text");
var dragIcon = document.createElement('img');
dragIcon.src = 'image/approve.png';
source.addEventListener("dragstart",function(ev){
var dt = ev.dataTransfer;
dt.effectAllowed = "copy" ;
dt.setDragImage(dragIcon,-10,-10);
dt.setData("text/plain","你好");
},false);
dest.addEventListener("dragover",function(ev){
var dt = ev.dataTransfer;
dt.dropEffect = "copy" ;
ev.preventDefault();
},false);
dest.addEventListener("dragend",function(ev){
ev.preventDefault();
},false);
dest.addEventListener("drop",function(ev){
var dt = ev.dataTransfer;
var text = dt.getData("text/plain");
dest.textContent += text;
ev.preventDefault();
ev.stopPropagation();
},false);
}
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
