HTML5新特性

zZoOoOJaVa

2016-08-05

html5中新增加的新的特性<formaction="html5-1.html">

姓名：<inputtype="text"name="name"value=""required="required"/>

<inputtype="submit"name="submit"value="提交"/>

</form>//required申明为必填字段

pattern<input type="text" name="pattern" pattern="[a-z]{6}" /><!-- 申明 正则输入框正则表达式-->

<label for="txt_name">a</label>
<input id="txt_name" type="radio" name="for" value="1"/>
label 标签 for 和指定的input id 相对应 增加点击的范围，点击后 编译代码将变成 <bdi> 标签可以把文本独立出来做一些表示
<details><summary>ipone6s</summary><dl><dt>屏幕6.2</dt><dt>分辨率7.8</dt><dt>处理器</dt></dl></details>
details 当点击时候显示下面隐藏的内容。也可以默认打开加上open 属性<dialog  id="a" open="ture">this is new dialog</dialog> 回话款提示。 <mark>milk</mark>用于指定文本标记颜色改变<meter min="0" low="40" high="90" max="100" value="95"></meter> 用于图标显示范围 可以根据min low heih 等属性相互之间设置颜色，<nav> 连接导航栏一部分，省去了我们自己定义样式。<progress value="62" max="100">下载进度格</progress>div充当容器的角色，用来设置某一块的总体属性（一个div里面可能包含多个section）；
section用于强调某一个模块，强调模块本身是作为一个整体的；
article用于强调某一段独立的内容，强调内容的独立性。对于这里怎么布局已经文章 怎么用标签可以更加网站的优化，和搜索引擎来决定。<input list="company"  name="company"/>
					<datalist id="company">
						<option value="当乐网">当乐网</option>
						<option value="腾讯">腾讯</option>
						<option value="百度">百度</option>
						<option value="阿里巴巴">阿里巴巴</option>
					</datalist> 输入框提示，输入下面的内容。有点像下拉框，但可以自己填。<abbr title="世界卫生组织">WHO</abbr> 用于指定文字提示。 <keygen name="security" keytype="rsa"> 对输入内容加密 根据keytype 指定加密的算法。<div>
				<canvas id="myCannvas" width="200" height="100" style="border:1px solid pink;"></canvas>
				
			</div>var cannvas = $("#myCannvas").get(0);//jq 对象转换成js对象 。如何获取是集合需要指定其下标
		var cannvar = document.getElementById("myCannvas")
			var ctx =cannvas.getContext("2d");
			 ctx.fillStyle ="green";
		 	ctx.fillRect(50,10,20,180); 画板元素。 通过js 去画。
SVG 是一种使用 XML 描述 2D 图形的语言。
<math> 属性标签 用于 数学计算方面的显示。

HTML5 拖放（Drag 和 Drop）
function allowDrop (ev) {
			ev.preventDefault();//阻止时间默认
		}
		
		function drag(ev){
			
			//alert(ev.target.id);
			ev.dataTransfer.setData("Text",ev.target.id);//按照上面格式进行数据设置id 
		}
		
		function drop(ev){//当鼠标在移动一个对象放下的时候发生
			ev.preventDefault();
			var data = ev.dataTransfer.getData("Text");//获取拖拽时候的数据id
			ev.target.appendChild(document.getElementById(data));
		}
<input type="time" name="time" value="" /><!--时间-->
				<input type="datetime" name="datetime" value="" /><!--定义一个日期和时间控制器（本地时间）:-->
				<input type="datetime-local" name="bdaytime">
				<input type="email" name="email" value="" /><!--邮箱-->
				<input type="number" name="quantity" min="1" max="5"><!--输入数字限定 最大5最新为1-->
				<input type="range" name="points" min="1" max="5" />

input选框可以单独提交。
 <input> autocomplete 属性 在提交表单时候完成自动填充功能
 novalidate 属性， 可以屏蔽表单验证。
autofocus 属性规定在页面加载时，域自动地获得焦点。页面加载时候自动获取焦点。
input form属性，表单外的数据根据id做为表单内的数据提交。
input 属性根据内容不同，表单数据，提交的地址不一样。 formaction="demo-admin.php" 用的不多。formenctype 属性 表单提交数据进行编码。formmethod 属性指定提交方式。formnovalidate  属性表单不验证formtarget 指定连接打开方式
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> 图片提交按钮 设置宽和高。<input> min 和 max 属性 对输入最大和最小的约束 maxlength minLength 对输入长度最大和最小的约束。<input type="file" name="img" multiple>multiple 属性适用于以下类型的 <input> 标签：email 和 file。: email, and file. 适用于文件 和邮件上传。 placeholder="First name" 在输入框是上提示输入内容
required 必填属性。<input> step 属性 制定步数 输入数必须是输入的步数的倍数。
localStorage 和 sessionStorage  对象存储 sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
<html manifest="demo_html.appcache">

html5