html5

画布
<canvas id="myCanvas" width="200" height="100" style="border:1px solid 		#000000;"> </canvas>
内联SVG
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
   <polygon points="100,10 40,180 190,60 10,60 160,180"
   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>
使用 MathML 元素
<math>...</math>
拖放（Drag 和 Drop）
<script>
function allowDrop(ev)
{
	ev.preventDefault();
}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
function drag(ev)
{
	ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
	ev.preventDefault();
	var data=ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(data));
}
</script>
<div	id="div1"	ondrop="drop(event)" 					 	ondragover="allowDrop(event)"></div> 
<br> 
draggable：是否可以拖放
<img id="drag1" src="/images/logo.png" draggable="true"    			 ondragstart="drag(event)" width="336" height="69">

<source>规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用

视频
<video >:定义一个视频
<video width="320" height="240" controls> <source src="movie.mp4" 		type="video/mp4"> <source src="movie.ogg" type="video/ogg"></video>

音频：
<audio >:定义了声音内容
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> </audio>

新的表单：
Input的属性：
<form Action=”提交的地址”  Method=”提交的方式 get/post” name=”表单的名称” id=”input的form属性”>
<input 
		type="类型" 
			  类型：	color			:选取颜色,跳出一个颜色选择器。
    					Date			:允许你从一个日期选择器选择一个日期
    					Datetime		:允许你选择一个日期（UTC 时间）	
   	 					datetime-local	:允许你选择一个日期和时间 (无时区)
    					Email			:自动验证email(邮箱)域的值是否合法有效
    					Month			;允许你选择一个月份
    					Search			:定义一个搜索字段 (类似站点搜索或者												 Google搜索)，搜索提示
   		 				Tel				：定义输入电话号码字段
    					Time			：定义可输入时间控制器（无时区）
    					Url				：包含 URL 地址的输入域
    					Week			：选择周和年

	Number			:用于应该包含数值的输入域。还能够设定对											所接受的数字的限定
    					Range			:定义一个不需要非常精确的数值，在一段数											 值中取值（类似于滑块控制）
						min="1" max="5"	
		
>
-------表单的元素----
datalist ：自动完成域中开始输入时，浏览器应该在该域中显示填写的选项，第二次搜索提示
<datalist>
  <option value="搜索提示">
</datalist>
keygen ：用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私		钥，一个公钥。
加密: <keygen>
output ：用于不同类型的输出，比如计算或脚本输出
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>

-----------------------------------------
<input type="email" name="email" autocomplete="off" autofocus ><br>
<input type="email" name="user_email"> <input type="submit">
<input type="submit" formaction="demo-admin.php" value="提交">

</form>
<input type="text" name="lname" form="input的form属性">

表单的属性
Autocomplete：属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中		是关闭的。"on"（开），“off”（关）。
注意: autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：			text, search, url, telephone, email, password, datepickers, range 			以及 color。
<form> novalidate ：	是一个 boolean(布尔) 属性.规定在提交表单时不应该验证 						form 或 input 域。就是提交表单时不用验证格式。


<input> autofocus：	是一个 boolean 属性.规定在页面加载时，域自动地获得焦						点（输入时的标签在那）。
<input> form：		规定输入域所属的一个或多个表单。
<input> formaction：	用于描述表单提交的URL地址.会覆盖<form> 元素中的						   	action属性.用于 type="submit" 和 type="image".
<input> formenctype：描述了表单提交到服务器的数据编码 (只对form表单中 						method="post" 表单)覆盖 form 元素的 enctype 属性。该						属性可以与 type="submit" 和 type="image" 配合	使用。
<input> formmethod：	定义了表单提交的方式。覆盖了 <form> 元素的 method 属						性。该属性可以与 type="submit" 和 type="image" 配合						使用。
<input> formnovalidate：在表单提交时无需被验证。会覆盖 <form> 元素的								novalidate属性.与type="submit一起使用
<input> formtarget：	指定一个名称或一个关键字来指明表单提交数据接收后的						展示
<input> height和width： 	height 和 width 属性规定用于 image 类型的 								<input>标签的图像高度和宽度
<input> list：		规定输入域的 datalist。datalist 是输入域的选项列表
<input> min和 max:  	用于为包含数字或日期的 input 类型规定限定（约束）
<input> multiple multiple：	属性是一个 boolean 属性.
multiple 属性规定<input> 元素中可选择多个值。
<input> pattern：			描述了一个正则表达式用于验证 <input> 元素的值
<input> placeholder：	提供一种提示（hint），描述输入域所期待的值
<input> required：	required 属性是一个 boolean 属性.required 属性规定						必须在提交之前填写输入域（不能为空）
<input> step ：		step 属性为输入域规定合法的数字间隔。
如果 step="3"，则合法的数是 -3,0,3,6 等
----------------------------------
语义元素
一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义 元素实例: <div> 和 <span> - 无需考虑内容.
语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

<section> 元素:
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页	脚或文档中的其他部分
<article> 元素:
<article> 标签定义独立的内容
<nav> 元素:
<nav> 标签定义导航链接的部分
<aside> 元素:
<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）
<header> 元素:
<header>元素描述了文档的头部区域
<header>元素主要用于定义内容的介绍展示区域.
<footer> 元素:
<footer> 元素描述了文档的底部区域.
<footer> 元素应该包含它的包含元素
<figure> 和 <figcaption> 元素:
<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流	产生影响。
<figcaption> 标签定义 <figure> 元素的标题.
<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素	的位置