HTML5近三年开发总结.docx

HTML5开发及常见问题目录一、HTML5简介21)HTML5标准22)HTML5未来2二、HTML5新特性21） HTML5语义特性22） HTML5本地存储23） HTML5调用硬件24） HTML5连接特性35） HTML5网页多媒体特性36） 三维、图形及特效特性37） 性能与集成特性38） CSS3新特性39） CSS3响应式3三、开发经验分享41） CSS pix和Device pix42） Viewport解决分辨率/DPI适配问题43） 响应式64） CSS3 -webkits65） App icon 制作66） Retian屏幕适配（高密度的手机，甚至PC显示屏）77） Float属性替换78） 横竖屏79） Fastclick810） 如何解决盒子边框溢出811） 自动大写与自动修正812） 横板与竖版8一、HTML5简介1) HTML5标准在移动领域，大家争论不休的一个问题就是开发Web应用还是原生应用?而随着HTML 5标准的发展，两者之间的差异已经逐渐变得模糊。就在近几周，万维网联盟（W3C）在2014年10月29日，经过9年的艰辛努力，HTML5标准规范最终制定完成，并已公开发布，取代1999年制定的HTML4.01、XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝连接的丰富内容。2) HTML5未来接下来，W3C将致力于开发用于实时通信、电子支付、应用开发等方面的标准规范，还会创建一系列的隐私、安全防护措施W3C还在2014年透露、计划在2016年发布HTML5.1,二、HTML5新特性1） HTML5语义特性作为HTML5的前端和中心，语义学能够赋予框架结构以意义。更详尽的标签组合以及资源描述框架，微型数据和微型格式将为你和你的用户打造一套数据驱动的网络。(article、 aside、 audio、 canvas、 datalist、 details、 footer、 header、 keygen)2） HTML5本地存储基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一) 和API说明文档。 HTML5storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上，网站在页面加载完毕后可以通过Javascript来获取这些数据。 localStorage、 sessionStorage、本地数据库3） HTML5调用硬件从Geolocation 功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones（麦克风）及摄像头相联，语音输入、重力感应API包括：Media CaptureAPI 、System Information API 、DeviceOrientationEvent 、 System Information API 、Sensor API、Speech InputAPI 、Device API、Device Characteristics4） HTML5连接特性更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据推送到客户端的功能。 5） HTML5网页多媒体特性支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰6） 三维、图形及特效特性基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果7） 性能与集成特性没有用户会永远等待你的LoadingHTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作 8） CSS3新特性在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性（font-face） 圆角、投影、倒影、渐变、内发光、外发光，结合CSS伪类before、after,可以打造出和PS等UI设计工具效果一样的按钮和图形； 开放多种滤镜、实现可以和photoshop相媲美的效果，以前只能通过图片实现效果、现在只用通过简单CSS3来实现； CSS遮罩：我们知道用flash可以图片遮罩，HTML5也可以做到，而且比flash简单;9） CSS3响应式网上的教程都很复杂，简单的说就是针对不同的屏幕分辨率及DPI应用不同的CSS样式。比如在电脑、pad设备上，屏幕比较宽，就可以一行放两个DIV，到了手机上面或者pad竖着拿的时候，一行就只放一个DIV。 关键点：1.如何在不修改Dom结构的前提下调整布局 2.如何判断屏幕分辨率并应用对应的CSS以上两点都应该不依赖JSmedia only screen and (min-width:320px) and (max-width:480px)有些屏幕DPI特别高，像小小的NOTE3比现在很多电脑分辨率还要高。要判断一下设备的像素密度device-pixel-ratiomedia only screen and(-webkit-min-device-pixel-ratio:2)三、开发经验分享1） CSS pix和Device pix这个问题对于第一次做移动端（现在PC也出现了视网膜屏，也会面临此问题）web开发者都会面临的问题，写的大小跟表现出来的大小不一致。css里面的像素单位在移动设备上表示会和你想表现的不一样，例如在宽为720像素的手机上面，你放一个720宽的图片，这时图片会被放大。实际显示出来的尺寸不止720像素解决方法：1.在CSS中把所有像素单位缩小一倍，可以解决表现不一样的问题； 弊端：一像素的问题难以解决 2.强制target-densitydpi =device-dpi2） Viewport解决分辨率/DPI适配问题Viewport ：字面意思为视图窗口，在移动web开发中使用。表示将设备浏览器宽度虚拟成一个特定的值（或计算得出），这样利于移动web站点跨设备显示效果基本一致。基本写法： 1、在 iphone上是读取device-width的值，并自动计算出target-densitydpi去适配，在iphone4上读取的值为320 。最终的计算公式为： 当 initial-scale=1时：ViewportWidth=width ；当 initial-scale !=1时：ViewportWidth=width 720 / initial-scale ? Width : 720 / initial-scale ; ViewportWidth 不超过1280，大于取1280 。2、在 android上，读取的是target-densitydpi 。在不设置的情况下，默认选择的是medium-dpi(160) 。以下讨论均在中屏幕大小的手机上范围内：Dpi 的分级与其对应的代表分辨率：Low-dpi:240*720 （基本淘汰，暂不讨论）Medium-dpi:720*480 High-dpi:480*800 Super high-dpi:640*960 其对应的dpi为120、160、240、320 。当设备为 high-dpi设备时，设置为中分辨率的viewportwidth为（2/3）*device-width；设置为low-dpi时，为（1/2）*device-width。这个比例和其dpi的比例是一致的，2/3=160/240和1/2=120/240；推测 dpi的值与viewportwidth存在一元关系。假设我要做一个 android high-dpi设备应用，虚拟的viewportwidth定死为720px。设 device-width=x，（2/3）*x为该设备设为medium-dpi时viewportwidth的值，x/240表示一个dpi值代表多少个px。Target-densitydpi=160 - （2/3）*x-720/(x/240);简化一下： Target-densitydpi=720*240/x；实验三：在 540手机上设置Target-densitydpi=142，其viewport为720 。根据以上公式可以计算出 Target-densitydpi=142.222222，与上面测试数据一致。假设我要做一个 android super-high-dpi设备应用，虚拟的viewportwidth定死为720px。Target-densitydpi=720*320/x ； 假设我要做一个 android medium-dpi设备应用，虚拟的viewportwidth定死为720px。Target-densitydpi=160 - x-720/(x/160); Target-densitydpi=720*160/x 假设我要做一个 android low-dpi设备应用，虚拟的viewportwidth定死为720px。Target-densitydpi=160 - （4/3）x-720/(x/120);Target-densitydpi=720*120/x 通过以上分析，在缩放为1的情况下，展示效果按照固定设计图720像素宽来设计开发width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,可以得出大致公式densitydpi = desginwidth*(device_dpi)/densitydpiWidth;device_dpi为设备的DPI densitydpiWidth为设备展示的像素宽，JS获取方法为window.screen.widthdesginwidth为设计稿的宽（目前5英寸的手机是主流，包括iphone6，手机设计稿按720像素宽设计，在视觉上肯定满足要求，小于720的，比如宽只有320或者480的，按720设计，利用此方法，也是可以完全适配的）以上公式在各种手机和平板上面经过测试有效。使用此方法宽一定要用百分比来写，而且设计稿的宽度在此方法下要一致。注意：此方法在DPI和分辨率跨度大的情况下，虽然表现上是正常比例，但是还是会出现一些问题，比如某些手机/平板上会出现锯齿。用这种缩放放到尺寸太大的平板上，会模糊，因为你的设计稿是根据手机来设计的，要解决此问题，就要用到响应式布局，这种方法只针对多分辨率，多尺寸的市面常见手机。3） 响应式media only screen and (min-width:320px) and (max-width:480px)media only screen and(-webkit-min-device-pixel-ratio:2)缺点：开发工作量会大大增加，在保证多平台正常流畅使用情况下，设计图也要多套优点：对于实现效果要求非常精准的网页和APP中，此方法最合适，可以实现和设计图一样的细腻，比传统的nativeApp展现效果更佳。4） CSS3 -webkits问题描述：移动端表单类有圆角、阴影，点击链接时，有灰色底高亮等1) 消除被点击元素的外观变化，所谓的点击后高亮： -webkit-tap-highlight-color: rgba(255, 255, 255, 0);2) 阻止旋转屏幕时自动调整字体大小：-webkit-text-size-adjust:none;3) 解决字体在移动端比例缩小后出现锯齿的问题：-webkit-font-smoothing: antialiased;4) 盒子阴影：-webkit-box-shadow: none;5) 圆角：-webkit-border-radius: 0;6) appearance 属性使元素看上去像标准的用户界面元素， 也可以取消默认的样式：-webkit-appearance: none;7) 鼠标可以悬停在内容上（指向该内容）而不激活它（单击它）：-webkit-touch-action: manipulation; 5） App icon 制作说明：所谓单机模式，其实就是通过把网站添加到主屏，由主屏进入并访问网站的一种方式。通常，app icon是自动截取网站的一部分截图。这样并不是很美观，但也可以通过代码来解决这个问题。尺寸：在iPhone上的默认大小是57px，在iPad上是72px。icon原始图片建议尺寸为128px或者256，并且不建议自行添加光影效果，因为OS自带了。 / 若想去掉系统自带的反光效果，可以增加“-precompsed”属性。 6） Retian屏幕适配（高密度的手机，甚至PC显示屏）有很多设备的“devicePixelRatio”都大于1.5或者等于2（window.devicePixelRatio = 物理像素/dips）。 移动端（某些PC端）web app上CSS要为Retian屏幕准备另外的图片及代码：方法一： script type=text/javascript src=/retina.js/使用方法.logo background-image: url(/images/my_image.png); /通用屏幕media all and (-webkit-min-device-pixel-ratio: 1.5) /当使用Retina屏幕时，读取此段样式 .logo background-image: url(/images/my_image2x.png); background-size: 200px 100px; /限定大图片的大小 方法二： /通用屏幕img src=/images/my_image.png data-at2x=/image2x.png / /retina屏幕7） Float属性替换使用display：inline-block