整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
我全面介绍这些新的输入类型：
color
date
datetime
datetime-local
month
number
range
search
tel
time
url
week
注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。
Input 类型: color
color 类型用在input字段主要用于选取颜色，如下所示：
实例
从拾色器中选择一个颜色:
选择你喜欢的颜色: <input type="color" name="favcolor">
Input 类型: date
date 类型允许你从一个日期选择器选择一个日期。
实例
定义一个时间控制器:
生日: <input type="date" name="bday">
Input 类型: datetime
datetime 类型允许你选择一个日期（UTC 时间）。
实例
定义一个日期和时间控制器（本地时间）:
生日 (日期和时间): <input type="datetime" name="bdaytime">
Input 类型: datetime-local
datetime-local 类型允许你选择一个日期和时间 (无时区).
实例
定义一个日期和时间 (无时区):
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
Input 类型: email
email 类型用于应该包含 e-mail 地址的输入域。
实例
在提交表单时，会自动验证 email 域的值是否合法有效:
E-mail: <input type="email" name="email">
提示: iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。
Input 类型: month
month 类型允许你选择一个月份。
实例
定义月与年 (无时区):
生日 (月和年): <input type="month" name="bdaymonth">
Input 类型: number
number 类型用于应该包含数值的输入域。
您还能够设定对所接受的数字的限定：
实例
定义一个数值输入域(限定):
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
使用下面的属性来规定对数字类型的限定：
| 属性 | 描述 |
|---|---|
| disabled | 规定输入字段是禁用的 |
| max | 规定允许的最大值 |
| maxlength | 规定输入字段的最大字符长度 |
| min | 规定允许的最小值 |
| pattern | 规定用于验证输入字段的模式 |
| readonly | 规定输入字段的值无法修改 |
| required | 规定输入字段的值是必需的 |
| size | 规定输入字段中的可见字符数 |
| step | 规定输入字的的合法数字间隔 |
| value | 规定输入字段的默认值 |
尝试一下带有所有限定属性的例子 尝试一下
Input 类型: range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
实例
定义一个不需要非常精确的数值（类似于滑块控制）:
<input type="range" name="points" min="1" max="10">
请使用下面的属性来规定对数字类型的限定：
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值
Input 类型: search
search 类型用于搜索域，比如站点搜索或 Google 搜索。
实例
定义一个搜索字段 (类似站点搜索或者Google搜索):
Search Google: <input type="search" name="googlesearch">
Input 类型: tel
实例
定义输入电话号码字段:
电话号码: <input type="tel" name="usrtel">
Input 类型: time
time 类型允许你选择一个时间。
实例
定义可输入时间控制器（无时区）：
选择时间: <input type="time" name="usr_time">
Input 类型: url
url 类型用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值。
实例
定义输入URL字段:
添加您的主页: <input type="url" name="homepage">
提示: iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。
Input 类型: week
week 类型允许你选择周和年。
实例
定义周和年 (无时区):
选择周: <input type="week" name="week_year">
HTML5 <input> 标签
| 标签 | 描述 |
|---|---|
| <input> | 描述input输入器 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群{{308855039，我们一起飞！
录：
HTML5新结构标签
HTML5新其他标签
HTML5新input类型
HTML5新属性
HTML5高级应用
html4和html5对比：
Html4代表示例：
<div id=“header”></div>
<div id=“nav”></div>
<div class=“section”>
<div class=“article”></div>
</div>
<div id=“sideBar”></div>
<div id=“footer”></div>
Html5代码示例：
<header></header>
<nav></nav>
<section>
<article></article>
</section>
<aside></aside>
<footer></footer>
HTML5新结构标签：
<header></header>页头
<footer></footer>页脚
<nav></nav>导航
<section></section>内容区块
<article></article>文章区块
<aside></aside>article之外的信息
<hgroup></hgroup>标题组
<figure></figure>数据组
<figcaption></figcaption>数据组标题
<header></header>用法
<header>
<h1>网页标题</h1>
</header>
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章正文内容</p>
</article>
<footer></footer>用法
<article>
文章主体
<footer>
文章脚注
</footer>
</article>
<footer>
<ul>
<li>站内链接</li><li>站内链接</li><li>站内链接</li>
</ul>
</footer>
<nav></nav>用法
<nav>
<ul>
<li><a href=“#”>链接内容</a></li>
<li><a href=“#”>链接内容</a></li>
<li><a href=“#”>链接内容</a></li>
</ul>
</nav>
<section></section>用法
<section>
<h1>标题</h1>
<p>内容</p>
</section>
<article></article>用法
<article>
<header>
<h1></h1>
</header>
<footer>
<ul><li></li></ul>
</footer>
</article>
<aside></aside>用法
<article>
<h1>文章标题</h1>
<p>内容</p>
<aside>相关内容</aside>
</article>
<hgroup></hgroup>用法
<article>
<header>
<hgroup>
<h1>主标题</h1>
<h2>子标题</h2>
</hgroup>
</header>
<p>正文</p>
</article>
<figure></figure>用法
<figure>
<figcaption>标题</figcaption>
<img src=“a.jpg”>
<img src=“b.jpg”>
<img src=“c.jpg”>
</figure>
新元素标签追加样式：
说明：因为很多浏览器还未支持html5新元素，须对新元素追加如下说明
//追加block说明
article,aside,dialog,figure,footer,header,legend,nav,section{display:block}
另：ie8前的浏览器不支持css方法追加，须用如下方法：
<script>
document.createElement(“header”);
document.createElement(“nav”);
document.createElement(“article”);
document.createElement(“footer”);
</script>
HTML5新其他标签：
<video></video>视频
<audio></audio>音频
<embed></embed>多媒体
<mark></mark>标记
<time></time>时间
<wbr></wbr>软换行
<canvas></canvas>绘图
<video></video>用法
<video src=“test.ogg" controls="controls"></video>
<audio></audio>用法
<audio src=“test.wav"></audio>
<embed></embed>用法
<embed src=“test.swf"></embed>
<mark></mark>用法
<p>谢谢您光临本站 <mark>段先生</mark>。</p>
<time></time>用法
<p>早上 <time>9:00</time> 上班。</p>
<p>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</p>
<wbr></wbr>用法
<p>学好网页设计必须要学会的软件有：
<wbr />photoshop<wbr />dreamweaver<wbr />flash。
</p>
<canvas></canvas>用法
语法：
<canvas></canvas>
注：canvas标签只是图形容器，您必须使用脚本来绘制图形。
使用范例：
<canvas id="myCanvas"></canvas>
<script>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
HTML5新input类型：
<input type=“email” />e-mail地址文本框
<input type=“url” />url地址文本框
<input type=“number” />数值文本框
<input type=“range” />数值范围文本框
日期相关类型：
<input type=“date” />
<input type=“month” />
<input type=“week” />
<input type=“time” />
<input type=“datetime” />
<input type=“datetime-local” />
HTML5新属性：
表单相关属性
链接相关属性
其他属性
全局属性
表单相关属性
autocomplete属性
autofocus属性 自动获得焦点属性
placeholder属性 提示信息属性
form属性 表单声明属性
required属性 内容检验属性
链接相关属性
<a><area>新加media属性
<area>新加hreflang属性
<link>新加sizes属性
<base>新加target属性
其他属性
<ol>新加reversed属性
<meta>新加charset属性
<menu>新加type和label属性
<style>新加scoped属性
<script>新加async属性
<iframe>新加sandbox,seamless,srcdoc
全局属性
可编辑内容属性contentEditable
页面可编辑属性designMode
隐藏元素属性hidden
拼写检查属性spellcheck
焦点获取属性tabindex
HTML5高级应用
绘图应用canvas
多媒体控制
表单验证
绘图应用canvas
用canvas绘制图形
用canvas绘制渐变色
用canvas绘制变形图形
绘制图像
动画效果
用canvas绘制图形——绘制矩形
获取canvas元素
获取2d图形（获取上下文）
设定绘图样式fillStyle,strokeStyle
设定线宽lineWidth
用canvas绘制图形——绘制路径
获取canvas元素
获取2d图形（获取上下文）
创建路径beginPath()
创建圆形路径arc(x,y,radius,startAngle,endAngle,anticlockwise)
关闭路径closePath()
用canvas绘制图形——绘制圆形
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.arc(150,100,100,0,(Math.PI/180)*360,true);
ctx.fillStyle="rgba(255,0,0,0.4)";
ctx.fill();
用canvas绘制图形——绘制三角
方法moveTo（x,y）,lineTo（x,y）：
var obj = document.getElementById("mycanvas");
var context = obj.getContext("2d");
context.strokeStyle="red";
context.moveTo(0,0);
context.lineTo(10,100);
context.lineTo(130,100);
context.lineTo(0,0);
context.stroke();
用canvas绘制图形——绘制弧线
方法bezierCurveTo（cp1x,cp1y,cp2x,cp2y,x,y)）
var obj = document.getElementById("mycanvas");
var context = obj.getContext("2d");
context.strokeStyle="red";
context.moveTo(0,0);
context.bezierCurveTo(10,0,100,0,100,100);
context.stroke();
用canvas绘制渐变色——绘制线性渐变
方法createLinearGradient(xStart,yStart,xEnd,yEnd);
方法addColorStop(offset,color);
var obj = document.getElementById("mycanvas");
var context = obj.getContext("2d");
var objLg = context.createLinearGradient(0,100,500,100);
objLg.addColorStop(0,"red");
objLg.addColorStop(0.5,"green");
objLg.addColorStop(1,"blue");
context.fillStyle=objLg;
context.fillRect(0,0,500,300);
用canvas绘制渐变色——绘制放射渐变
方法createRadialGradient(x0,y0,r0,x1,y1,r1);
方法addColorStop(offset,color);
var obj = document.getElementById("mycanvas");
var context = obj.getContext("2d");
var rg = context.createRadialGradient(50,50,0,50,50,50);
context.createR
rg.addColorStop(0,"red");
rg.addColorStop(1,"green");
context.fillStyle=rg;
context.fillRect(0,0,150,150);
用canvas绘制变形图形——平移
方法：translate(x,y);
var obj = document.getElementById("mycanvas");
var context = obj.getContext("2d");
context.translate(100,150);
context.fillStyle="red";
context.fillRect(0,0,200,200);
用canvas绘制变形图形——缩放
方法：scale(x,y);
var obj = document.getElementById("mycanvas");
var context = obj.getContext("2d");
context.scale(2,2);
context.fillStyle="red";
context.fillRect(0,0,10,10);
用canvas绘制变形图形——旋转
方法：rotate (angle);
var obj = document.getElementById("mycanvas");
var context = obj.getContext("2d");
context.rotate(Math.PI/180*5);
context.fillStyle="red";
context.fillRect(0,0,100,100);
绘制图像
方法：drawImage(image,x,y,w,h)
var obj = document.getElementById("mycanvas");
var context = obj.getContext("2d");
var image = new Image();
image.src="img.jpg";
context.drawImage(image,0,0,500,300);
图像平铺
方法：createPattern(image,type)
var obj = document.getElementById("mycanvas");
var context = obj.getContext("2d");
var img = new Image();
img.src="img.jpg";
var ptrn = context.createPattern(img,"repeat");
context.fillStyle=ptrn;
context.fillRect(0,0,2000,2000);
请私信我回复“666”，为严哥打Call~，还有更多惊喜哦~
....................................................................
我的微信公众号：UI严选 —越努力，越幸运
HTML5简介:
定义：HTML5号称下一代HTML，html的最新版本，定义了新的标签、css、JavaScript，html5新标签IE9以上版本浏览器才兼容，因此在实际开发中要问老板是否兼容低版本浏览器。
扩展内容：语义化标签、本地储存、兼容特性、2D 3D、动画 过渡、CSS3新特性、性能与集成
HTML5常用新标签：
HTML5标签多为语义化标签，主要是针对浏览器搜索引擎，IE9浏览器中主要将所有语义化标签都转化为块级元素，语义化标签在移动端支持比较好，后面会有更多语义化标签学习。
HTML5常用新标签：
datalist选项输入框:
此标签和input标签搭配可以实现input输入提示，注意：input标签中必须要有list属性，其值绑定的是datalist的id值，option标签中的value值不能为空，否则此功能失效。
<body>
<input type="text" value="输入科目" list="lis" >
<datalist id='lis'>
<option value="科目1"></option>
<option value="科目2"></option>
<option value="科目3"></option>
<option value="科目4"></option>
</datalist>
</body>fieldset表单元素分组:
此标签和legend标签搭配可以将表单内相关元素分组（外部用一个矩形的方框包裹）
<body>
<fieldset>
<legend>用户信息</legend> <!-- 矩形框边插入的文本信息,去掉此标签则为 封闭的矩形 -->
<input type="text" value="user"><br>
<input type="password" value="password">
</fieldset>
</body>html5中input标签的type属性新增属性值：
input中新增属性：
提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海123
其它问题可通过以下方式联系本人咨询：
QQ：810665436
微信：ConstancyMan
*请认真填写需求信息，我们会在24小时内与您取得联系。
