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 ...
随机推荐
- find命令学习
find命令与locate命令的区别: locate: 非实时查找: 依赖于索引,而索引构建非常占用资源,索引的创建是在系统空闲时系统自动进行,可以用updatedb命令更新索引: 查找速度快: 非精 ...
- [原创]cocos2d-x研习录-第二阶 概念类之布场层类(CCLayer)
上面说场景CCScene相当于一个大容器,那么布景层类CCLayer就是大容器里的若干个小容器.每个游戏场景CCScene会有很多层CCLayer,每一层CCLayer负责各自的任务.看一下CCLay ...
- pclint vc6/linux 工程，测试正常
下载:http://www.gimpel.compojie版搜索一下很好找 里面有vc6 和linux工程的lnt文件,实际使用可能要修改. http://files.cnblogs.com/file ...
- HTML5播放器
seweise palyer http://www.whatled.com/m/?post=1626 https://github.com/sewise/sewise-player2 七牛云音视频支持 ...
- 如何设置UNIX/Linux中新创建目录或文件的默认权限
在unix或者linux中,每创建一个文件或者目录时,这个文件或者目录都具有一个默认的权限,比如目录755,文件644,那么这些默认权限是怎么控制的呢? 答案是"umask"权限掩 ...
- mac android studio 编译时报Class JavaLaunchHelper is implemented in both
Class JavaLaunchHelper is implemented in both /Library/Java/JavaVirtualMachines/jdk1.8.0_25.jdk/Cont ...
- .NET异常问题总结
输入字符串的格式不正确. 有格式化字符替换符号{0}等,“{”和“}”作为特殊符号出现,如果有多余的“{”和“}”就会出错 GZIP压缩出现FF-F0-F1…是无效的输入流 要解压的字节流无效,可能是 ...
- SpringMVC学习系列（7） 之 格式化显示
在系列(6)中我们介绍了如何验证提交的数据的正确性,当数据验证通过后就会被我们保存起来.保存的数据会用于以后的展示,这才是保存的价值.那么在展示的时候如何按照要求显示?(比如:小数保留一定的位数,日期 ...
- sql server 相似度对比
转自:http://www.dotblogs.com.tw/rachen/archive/2008/10/07/5611.aspx 函數一.產生 Like 比對用字串 ) ) ) as begin / ...
- C++模板元编程 - 挖新坑的时候探索到了模板元编程的新玩法
C++真是一门自由的语言,虽然糖没有C#那么多,但是你想要怎么写,想要实现什么,想要用某种编程范式或者语言特性,它都会提供. 开大数运算类的新坑的时候(又是坑),无意中需要解决一个需求:大数类需要分别 ...