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 ...
随机推荐
- Sublime Text 2 配置
设置Python的Tab缩进为四个空格,打开一个Py文件 # Preferences---->Settings-More---->Syntax Specific-User # 贴入如下代码 ...
- UVa 156 （映射 map）
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- 【转载】开发备必：WEB前端开发规范文档
规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者 ...
- 【C】 03 - 数据类型
程序说到底就是对数据的处理,所以首先要弄清楚需要处理哪些数据,计算机如何存储这些数据.C语言根据需要,抽象出了一些基本数据类型和衍生数据类型.这些可以满足大部分需求,更复杂的抽象数据类型亦可通过它们来 ...
- 5分钟实现VS2010整合NUnit进行单元测试
本文转载自:http://www.cnblogs.com/jeffwongishandsome/archive/2012/03/18/2404845.html 1.下载安装NUnit(最新win版本为 ...
- State Machine.（状态机）
What is a State Machine? Any device that changes its state from one to another due to some actions a ...
- NeHe OpenGL教程 第四十五课：顶点缓存
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- [家里蹲大学数学杂志]第013期2010年西安偏微分方程暑期班试题---NSE,非线性椭圆,平均曲率流,非线性守恒律,拟微分算子
Navier-Stokes equations 1 Let $\omega$ be a domain in $\bbR^3$, complement of a compact set $\mathca ...
- Redis 新特性---pipeline（管道）
转载自http://weipengfei.blog.51cto.com/1511707/1215042 Redis本身是一个cs模式的tcp server, client可以通过一个socket连续发 ...
- 使用php添加定时任务
1. php执行外部命令的函数: system(),exec(),passthru() 注意点: 1.调用的路径,相对路径有时候不是很靠谱. sys ...