HTML5基础总结
HTML5是HTML语言的第五次重大版本升级,新增了如下内容:
1.新增<video>、<audio>标签在页面上直接播放多媒体资源;
2.新增<input>标签的type属性的可选值，即新的表单控件,如日期标签,数字标签,邮箱地址标签等;
3.新增<input>标签的属性，支持自动获得焦点以及数据有效性检查;
4.对文件上传进行了增强，可以一次选中多个文件，可以指定上传文件的类型，可以在页面读取要上传的文件的内容;
5.新增元素的拖放效果;
6.新增画图功能;
7.新增本地存储功能：window.localStorage.
一.播放多媒体资源(音视频)
<video controls='controls' autoplay='autoplay' style='height:100%;width:100%;'>
<source src='01.mp4'/>
</video>
<audio controls='controls' autoplay='autoplay'>
<source src="02.mp3" type=""/>
</audio>
二.新的表单控件
<form>
date:<input type='date' name='date'/> <br/>
time:<input type='time' name='time'/> <br/>
number:<input type='number' name='number'/> <br/>
range:<input type='range' name='range' min='1' max='5'/> <br/>
search:<input type='search' name='search'/> <br/>
color:<input type='color' name='color'/> <br/> <!--以下标签浏览器可能不支持-->
email:<input type='email' name='email'/> <br/>
url:<input type='url' name='url'/> <br/>
datetime:<input type='datetime' name='datetime'/> <br/> <input type='submit' value='提交'/>
</form>
三.新的标签属性(placeholder,required,pattern,autofocus,form)
form id='form1'>
<!--提示，必填，正则格式-->
<input type='text' name='xx'
placeholder='请输入数字'
required='required'
pattern='[0-9]*'
autofocus='autofocus'
form='form1'
/>
<br/>
<input type="submit" name="sub" value='提交'>
</form>
四.文件上传功能增强(支持多个文件,本地读取文件)
<body>
<input type='file' name='fileList' id='fileList' multiple="multiple" accept="image/*"/>
<ul id='imgUl'></ul>
<div id='imgDiv'></div>
</body>
可进行文件信息的读取和文件的本地预览
script type='text/javascript'>
window.onload=function(){
document.getElementById("fileList").onchange=function(){
var fileList = this.files;
for(var i=0;i<fileList.length;i++){
var file = fileList.item(i); //显示文件信息（文件名，大小，文件类型）
/*
var ul=document.getElementById("imgUl");
var li=document.createElement("li");
li.innerHTML=file.name+" 大小：" + file.size + " 类型：" + file.type;
ul.appendChild(li);
*/ //客户端文件预览(如图片预览)
var fileReader=new FileReader();
fileReader.onload=function(){
var div=document.getElementById("imgDiv");
var img=document.createElement("img");
img.src=this.result; //result为读取到的base64编码数据
div.appendChild(img);
};
//fileReader.readAsText(file);
fileReader.readAsDataURL(file); //读取文件内容作为Base64数据
} };
}
</script>
五.元素拖放效果
<body>
<div id="div01" style="height:100px;width:100px;background-color:blue;" draggable=true >aaa</div>
<div id="div02" style="height:200px;width:200px;background-color:green;">bbb</div>
</body>
拖放元素处理过程:开始拖拽->退拽移动->放置
<script type="text/javascript">
window.onload=function(){
//开始拖拽元素
document.getElementById("div01").ondragstart=function(){
var id=this.getAttribute("id");
event.dataTransfer.setData("id",id); //传递数据
};
//取消默认事件，设置元素可放置
document.getElementById("div02").ondragover=function(){
return false;
};
//放置事件触发，代码处理放置过程
document.getElementById("div02").ondrop=function(){
var id=event.dataTransfer.getData("id"); //取数据
var dragElement=document.getElementById(id);
this.appendChild(dragElement);
};
}
</script>
六.绘图功能
Canvas绘图.
七.本地存储window.localStorage
<script type="text/javascript">
//存数据
window.localStorage.name="wumiao";
window.localStorage.age="18"; //取数据
alert(window.localStorage.name);
alert(window.localStorage.age);
</script>
HTML5基础总结的更多相关文章
- html5基础的常用的技巧
html5基础的常用的技巧 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PUBLIC &quo ...
- HTML5基础知识及相关笔记
HTML5基础 1.1HTML文件的基本结构和W3C标准 1.1.1HTML简介 HTML是一种描述网页的语言,一种超文本标记的语言! 1.1.2HTML文件的基本结构 头部(head) 头部是网页的 ...
- html5 基础入门
html5 基础入门 前言介绍 HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML工作团队. 如果从狭 ...
- HTML5 基础测试题
HTML5 基础测试题 1.HTML5 之前的 HTML 版本是什么?() A.HTML 4.01 B.HTML 4 C.HTML 4.1 D.HTML 4.9 2.HTML5 的正确 d ...
- HTML5基础——笔记
HTML5基础——笔记 近几年来,互联网+.大数据.云计算‘物联网‘虚拟现实‘人工智能.机器学习.移动互联网等IT相关新名词.新概念层出不穷,相关产业发展如火如荼.互联网+移动互联网已经深入到人民日常 ...
- html5基础知识点
1.WEB基础知识 1.WEB 与 Internet 1.Internet 互联网 若干台计算机 通过 网线 所连接而成的物理设备 主要服务: 1.Telnet 2.Email 3.WWW(Word ...
- html5基础知识
html5+css3 html5定义很多简便东西和宽松语法: 文档头: <!doctype html> 文档编码: <meta cha ...
- HTML5 基础
1.HTML5 简介 HTML5 是最新的 HTML 标准,他是万维网的核心语言.标准通用标记语言下的一个应用“超文本标记语言”. HTML 的上一个标准 HTML4.01 诞生于 1999年,他的第 ...
- HTML5基础学习
分享一下html5的一些基础,小白上路! 一.html5基本结构 <!DOCTYPE html> ↑声明文档类型为HTML5文件. 文档声明,在HTML文档必不可少.且必须放在文档第一行 ...
- HTML5基础-新增标签+新增属性+布局案例
html5中常用的结构标签 article 文章 header 头部 nav 导航 section 区域 aside 侧边栏 hgroup 区块的相关信息 figure 定义一组内容及标题 figca ...
随机推荐
- 浅谈new operator、operator new和placement new 分类： C/C++ 2015-05-05 00:19 41人阅读 评论(0) 收藏
浅谈new operator.operator new和placement new C++中使用new来产生一个存在于heap(堆)上对象时,实际上是调用了operator new函数和placeme ...
- 淘宝ip库接口调用
function ip($ip) { $url="http://ip.taobao.com/service/getIpInfo.php?ip=".$ip; $ipi ...
- Java入门教程总目录
Java入门教程总目录 持续更新中... 1.Java常识汇总 2.Java框架对比 3.Java技术路线 4.Java编码规范 5.Java环境变量配置 6.枚举 7.操作符 12.定时任务
- 转载部长一篇大作：常用排序算法之JavaScript实现
转载部长一篇大作:常用排序算法之JavaScript实现 注:本文是转载实验室同门王部长的大作,找实习找工作在即,本文颇有用处!原文出处:http://www.cnblogs.com/ywang172 ...
- INNO 补丁制作技术, 打开 INNO 补丁制作方法的第一页
INNO 补丁制作技术, 打开 INNO 补丁制作方法的第一页 作者:xin 日期:2005-09-23 字体大小: 小 中 大 VPatch 在 INNO 中的应用. VPatch 属于专为NS ...
- 给app增加itunes文件共享支持的功能
从网上查找的一些说法来看,是给app的plist配置文件中增加UIFileSharingEnabled,我后面查苹果官网的plist键值说明文档,也是这样说. 但实际上直接通过XCode打开plist ...
- 【uTenux实验】时间管理（系统时间/周期性处理/警报处理）
1.系统时间管理 系统时间管理函数用来对系统时间进行操作,是OS的一个基础性的东西.个人认为,设置系统时间和获取系统时间对OS来说基本是可有可无的. uTenux提供了三个系统时间相关API.分别用于 ...
- 不重启程序使用最新版package
相信很多使用python者都对reload方法比较熟悉了,通过不间断地reload可以实现某一module的热更新,主要就能在不重启应用的情况下实现部分模块的更新.但这种方法仅限于reload当前工作 ...
- python（24）urlencode和urldecode
当url地址含有中文,或者参数有中文的时候,这个算是很难正常了,但是把这样的url作为参数传递的时候(最常见的callback),需要把一些中文甚至‘/’做一下编码转换. 一.urlencode ur ...
- 【解决】SharePoint集成模式下Reporting Service—为用户授予的权限不足，无法执行此操作。 (rsAccessDenied)
环境:Windows Server 2008 R2 SP1,SharePoint 2010 企业版,SQL Server 2008 R2 Reporting Service(SharePoint集成模 ...