email: 提交表单时检测值是否是一个电子邮件格式
url: 提交表单时检测值是否是一个url格式
date: 年-月-日格式的控件
time: 时:分格式的控件
datetime: 年-月-日 时:分 格式的控件（UTC时间）
datetime-local: 年-月-日 时:分 格式的控件（本地时间）
month: 年-月格式的控件
week: 年-周数格式的控件
number: 数字输入框
<input type="number" name="" id="" value="60" max="100" min="0" />
range: 选择区域
<input type="range" name="" id="" value="60" max="100" min="0" />
tel: 电话输入框
search: 用于搜索
color: 调用系统选色器
新增控件属性：
placeholder: 占位符，输入框提示信息
<input type="text" autofocus placeholder=''/>
required: 该input为必填项
autofocus: 在页面加载时，域自动地获得焦点
autocomplete="off/on":可以记录输入信息
必须有name属性 必须提交过
off==>关闭 on==>打开
<input type="tel" name="user" id="" value="" autocomplete="on"/>
pattern: 正则验证
<input type="tel" pattern="[0-9]{7,12}"/>
min/max: input能输入的最小/最大字节的长度
step: 针对number和range类型，每次递增step的值
list: 指定一个datalist，作为下拉提示单
一、 HTML5新增的标签
（1）header nav main footer section article hgroup figure figcaption aside
video audio canvas
（2）如何让新标签兼容低版本浏览器： html5shiv.js
二、 HTML5新增的表单控件
一、表单控件的新属性
<input type="text" placeholder="" required autofocus pattern="abc" >
二、新增的表单控件
（1）<input type="email">
（2）<input type="url">
（3）数字控件： type="number"
(4) 滑动组件： type="range"
(5) 拾色器： type="color"
(6) 日期控件： type="date"
三、本地存储
1、 三种本地存储 ： cookie webStorage(localStorage sessionStorage)
2、localStorage的API
(1)写入： localStorage.setItem(键，值) //值只能是字符串
localStorage.user = "123" localStorage["user"] = "123"
（2）读取 var user = localStorage.getItem("user")
var user = localStorage.user
(3)删除： localStorage.removeItem("user") localStorage.clear()
（4）修改： localStorage.setItem("user","890")
3、sessionStorage的API
sessionStorage.setItem(键，值)
sessionStorage.getItem(键)
sessionStorage.removeItem(键)
sessionStorage.clear()
**********重点**********
4、cookie webStorage(localStorage sessionStorage)三者的区别
四、离线存储
（1） *.manifest (*.appcache)
index.html <html manifest="*.manifest">
(2) 理解离线存储的更新方式
五、移动端的布局思路：
1、设备像素比（倍率） 逻辑像素尺寸 （360px 320px 375px 414px）
window.devicePixelRatio
2、 <meta name="viewport" content="width=device-width,maximum-
scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no"">
3、使用rem单位
六、地理定位
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(success,error,{
timeout: 5000
})
function success(pos){
纬度: pos.coords.latitute
经度： pos.coords.longtitude
}
}
navigator.geolocation.watchPosition(success)
七、地理定位和百度地图API的结合
八、视频，音频 <video autoplay="autoplay" controls="controls" loop="loop" poster=""
preload="preload"> <audio>
九、移动端事件：
(1) ontouchstart ontouchmove ontouchend
(2) 如何判断是否为移动端： if ("ontouchstart" in document){}
(3) 移动端事件的事件对象及常用属性
e.touches[0].clientX e.touches[0].clientY e.touches[0].target
(4) 移动端常见问题及解决方案：
a、 click事件 300ms的延迟： <1>zepto的tap事件 （2） fastclick.js
b、 zepto的tap事件有点透问题 ： （1） fastclick.js
(5) zepto的touch模块： tap singleTap doubleTap longTap
swipeLeft swipeRight swipeUp swipeDown
十、swiper.js的使用 （参考官网）
十一、 canvas
(1) <canvas width="600" id="can"></canvas> 300*150
(2) var can = document.getElementById("can")
var cxt = can.getContext("2d")
cxt.beginPath()
cxt.moveTo(100,200)
cxt.lineTo(200,400)
cxt.strokeStyle = '#f00'
cxt.stroke()
cxt.clearRect(0,0,200,300)
context.globalCompositeOperation="destination-out" (了解)
1、form表单：网址与用户交互，把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
语法： <form method="传送方式" action="服务器文件">
<form>： 标签是成对出现的，以开始，以</form>结束。
action ： 浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
method ： 数据传送的方式（get/post）。
2、文本输入框、密码输入框
语法：
<form>
<input type="text/password" name="名称" value="文本" />
</form>
type：
当type=" text "时，输入框为 文本 输入框
当type=" password "时, 输入框为 密码输入框。
name： 为文本框命名，以备后台程序ASP 、PHP使用。
value： 为文本输入框设置默认值。(一般起到提示作用)
3、占位符placeholder,属性，有时候需要提示用户输入框需要输入框的内容
4、input标签中的数字框number类型
<input type="number"/> ：输入框中只能输入数字，输入其他字符无效，输入框右侧会有加减符号，可以调整输入数字的大小，浏览器不同表现不一致。
5、input标签中的网址框url类型
<input type="url"/>： 数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示
6、input标签中的邮箱框的email类型
<input type="email" />： 表示该输入框的类型为邮箱；数字框的值必须包含@；数字框的值@之后必须有内容,否则会报错误提示。
7、<textarea>标签创建文本域
语法： <textarea rows=" 行数" cols=" 列数" >文本</textarea>
8、label为input标签穿上衣服：如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）
语法：<label for="控件id名称">（标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。）
9、单选框、复选框
<input type="radio/checkbox" value="值"name="名称" checked="checked"/>
type: 当 type="radio" 时，控件为 单选框
当 type="checkbox" 时，控件为 复选框
value： 提交数据到服务器的值（后台程序PHP使用）
name： 为控件命名，以备后台程序 ASP、PHP 使用
checked： 当设置 checked="checked" 时，该选项被默认选中
注意： 同一组 的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
10、使用select option创建下拉菜单 （select标签里面只能放option标签，表示下拉列表的选项）
设置selected="selected"属性，则该选项就被默认选中。
11、提交/重置 按钮
语法：<input type="submit"value="提交">
<input type="reset" value="重置">
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）