html5控件,html5组件

HTML5重点内容总结

一、 HTML5新增的标签

彰武ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

（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的延迟： 1zepto的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"; (了解)

在移动端怎么将HTML5中的video标签的控件去掉或者隐藏

两种方法如下：

1、用css隐藏video视频播放控件：

style type="text/css"

video::-webkit-media-controls{

display:none !important;

}

/style

css隐藏原生html5 video controls，这么设置后即使没有设置controls为false，native controls也不会再出现。其他的按钮，包括播放按钮、播放进度条、静音按钮、音量条等，都可以像全屏按钮一样自定义样式。不止是隐藏。

2、用js隐藏video视频播放控件：

script type="text/javascript"

var video=document.getElementById("video");

video.controls=false;

/script

HTML5的video虽然可用controls来展示控件，并进行控制播放暂停等，但是不同的浏览器显示的效果可能不一样，所以很多时候需要使用Dom来进行自定义的一些操作和控制。

扩展资料：

HTML5 video标签中的新属性：

1、autoplay：如果出现该属性，则视频在就绪后马上播放。

2、controls：如果出现该属性，则向用户显示控件，比如播放按钮。

3、height：设置视频播放器的高度。

4、loop：如果出现该属性，则当媒介文件完成播放后再次开始播放。

5、muted：规定视频的音频输出应该被静音。

6、poster：规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。

7、preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。

8、src：要播放的视频的 URL。

9、width：设置视频播放器的宽度。

参考资料来源：百度百科-html5 video

求一个HTML5日期时间控件。

input type="date"这就会自带日期控件了。。。

HTML5 拥有多个供选择日期和时间的新的输入类型：

date - 选择日、月、年

month - 选择月、年

week - 选择周、年

time - 选择时间（时、分）

datetime - 选择时间、日期、月、年（UTC 时间）

datetime-local - 选择时间、日期、月、年（本地时间）

你可以试试不同类型出来的效果，，

如果想要更好看的，那只能去搞个jquery的日期控件来用了，毕竟做得比较成熟，，

但是个人还是很喜欢html5这个新属性，，一句短短的就搞定了，，

不过有一个不好处就是，不同的浏览器渲染出来的效果有些差别。。。。

html5 select控件选值问题

次次都create相同ID/名称的，就会报错了。

要么换名称、要么删除上一次创建的

html5 input datetime为什么调不出来日历控件

调不出来是因为有些浏览器不支持datetime这种日历控件，比如chrome。

Datetime 对象是 HTML5 中的新对象。

Datetime 对象表示 HTML input type="datetime" 元素。

注释：Internet Explorer、Firefox 或者 Chrome 不支持 input type="datetime" 元素，Safari 中部分支持。Opera 12 以及更早的版本中完全支持。

在html5中如何使一个控件无论在什么样的窗体都居中显示

用CSS可以吗?

style

.style{

margin:0 auto;

}