当今互联网时代的发展里，Web前端发展已经占据了很大面积，基于Web前端开发基础上，html5已经迅速崛起。近几年来，HTML5移动开发技术如此火爆，已是大势所趋，市场对于HTML5开发人才需求也在不断增加，学习HTML5开发技术的人员也是越来越多。那么我们在学习HTML5技术时，应该了解什么？学习武汉HTML5开发需要了解哪些知识？下面千锋武汉HTML5培训专家就来为大家指点迷津。

首先，明确HTML5是什么？

HTML5是HTML经过第五次重大修改，用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML标准版本。HTML5的具体定义为：“万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言的第五次重大修改。”

其次，明确HTML5技术特点

NO1.本地存储特性

基于HTML5开发的网页app拥有更短的启动时间，更快的联网速度，这些全得益于HTML5appCache，以及本地存储功能。

NO2.语义特性

HTML5赋予网页更好的意义和结构，更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

NO3.连接特性

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-SentEvent和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

NO4.设备兼容特性

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

NO5.三维、图形及特效特性

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

NO6.网页多媒体特性

支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。

NO7.CSS3特性

在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。

NO8.性能与集成特性

没有用户会永远等待你的Loading——HTML5会通过2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。

以上就是，入门HTML5必须要了解的一些知识。HTML5技术毋庸置疑未来将成为web前端的主流开发技术，所以我们一定要抓住时代发展的机遇，如果对这方面感兴趣赶紧学起来!!!

从HTML5霸气上线以来，便迅速占领了数百万开发者的使用高地，知名企业犹如Google、Facebook以及亚马逊等纷纷从 Adobe Flash 转移到了 HTML5。于是在移动时代来临之际，HTML5也顺势成为开发者们的重点迁徙对象，成功引领潮流。然而在开发的过程中，并不是每个开发者都能将细微之处做到极致，那如何才能让你的H5在汪洋大海中独树一帜呢？本文将分享几个妙招，让你的开发更完美。

单页内容控制

移动端H5活动页面经常需要分享到社交App（如微信、QQ等）中，而用移动设备查看页面时会发现，微信浏览器中有顶部导航栏，但QQ内置浏览器里不止有顶部导航，底部也有操作栏（safari浏览器也一样），这些都会占用设计稿显示区域。

为了避免打开的web与浏览器导航栏发生冲突，一般会使用多媒体自适应的形式，根据屏幕像素的不同，向上的间距也要相应进行变化，而我们设计常用尺寸是750 x 1334 / 640 x 1136，因此在设计环节就需要考虑单页内容，页面底部要预留一定的空白，这样在微信或QQ中才不会被遮住。

如下图（QQ内置浏览器）：页面设计尺寸为 750 x 1334，顶部占用 150px，底部占用 110px，共占用了 260px，因此设计稿内容应控制在 1334-260=1074px 的高度内。编写代码时，使用 Chrome 浏览器模拟设备大小，将该尺寸（750*1074）存下来，用于实时查看移动端页面效果。

H5页面窗口调整

根据HTML5 “一次开发，多处兼容”的特性，能够横跨多种平台和设备，而利用 meta 标签对页面进行缩放，使得我们可以直接根据设计稿来进行页面的编写，不用再进行单位的换算等等，在此注意调整页面窗口，禁止用户缩放就能省去很多不必要的麻烦。

识别错误源头并更改

在做移动端的web开发的时候； iOS 上的Safari总会把长串数字识别为电话号码，文字变成蓝色，点击还会弹出菜单提示用户是否拨打电话。别的地方倒也罢了，如果在用户名中出现数字（例如手机注册新浪微博的话用户名就是“手机用户xxxxxxxx”），这种版式会让你的app瞬间掉价，按照下列方式便可避免。

禁用后，如果想要页面识别电话功能，做法如下。

同理，Android平台中也会无故出现对邮箱地址的识别，将telephone 换成email就OK了。

圆图边框设置

在安卓的开发平台上，当圆形图片使用 border 时，边框就任性的变形了（如上图所示）

这时只需要给 img 外嵌套一个元素，为其使用圆角，问题就解决了。

实现打电话&发短信

1.打电话

2.发短信

测试二维码图片

有时候扫描二维码之后，会跳转至某个地址，不幸的话微信或者QQ会对这个地址进行温馨提醒，如下图所示：

这样会阻止部分用户继续访问，从而无法很好的将用户引导到活动想要推广的产品/品牌页面，如 App 的下载页面等。因此二维码的扫描测试不能少。

举个例子，如果二维码扫描结果是应用的下载地址的话，可以使用应用宝的微下载地址来生成二维码，这是不会被“温馨提醒”的。

微信二维码

一般会碰到下面两个问题

1）同一个页面里要是有两个二维码，长按扫描总是只能扫出 左侧/第一个 二维码。

解决：可视区域内只能出现一个二维码。

2）使用 meta 标签缩放页面后长按二维码图片无反应。

解决：使用了以下代码之后，就能长按识别二维码了~

Retina 显示屏

retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样物理尺寸的屏幕上，苹果设备的2倍retina显示屏中，像素点1个变为4个,在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍，在此给出的前端的应对方案是：

设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2

// 例如图片宽高为：200px*200px，那么写法如下

.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px.css{font-size:20px;}

禁止IOS和Android用户选中文字

禁止IOS和Android用户选中文字，只需按照下列方法即可。

改变placeholder颜色值

如何改变webkit表单输入框placeholder的颜色值呢？来试试下面的方法。

此外，HTML5开放的标准支持，还有助于为碎片化的移动设备、不同的屏幕尺寸、差异化的平台和操作系统开发应用。注意到了上面这些问题，应该能让你的水平提高一个level,但是，小编无法测试所有的手机型号，无法尽善尽美。

本文转载自宝原科技。

动互联网的火爆，而Html5具有跨平台、开发快的优势。赢得了更多企业和学习者的青睐，纷纷转战html5的学习行列，那么零基础学习的同学想要的就是适合html5零基础的教程方法，达到快速学习的目的。小编总结了一下几点，可以提供给大家参考学习。

一、学习途径

1、很多视频网站 比如千锋教育的官网，还有千锋腾讯课堂可以看免费的学习教程视频。

2、新手跟着视频教程学习，需要边学边练，多练习代码，不懂的一定要多看，基础要打牢。

二、开发工具

Html5是一个标记类的语言，虽然用文本编辑器也能编写的，但是用一些集成工具还是高效一些。

三、学习路径

1、Html基础

2、CSS基础

3、HTML5

4、JavaScript

5、CSS3

6、jQuery

然后项目实战，找个网页从静态页面写起，切图之类的。公司有相关的Html5项目，直接拿来学习更好。

四、相关书籍

可以找一些不错的html5相关书籍来学习，理论知识也需要掌握，而且书籍可以做一些笔记，重点难点可以标记，不懂和重点多看多记，这样能更好的掌握。

如果你是零基础开始的新手，那么就根据这个路线学习是可以掌握企业所需要的技术知识的，但是如果你自己学习没有足够的耐心和自制力，建议还是选择一家靠谱的培训机构来系统的学习比较好，千锋教育就是一个不错的选择。

千锋教育html5全栈课程培训，致力于培养覆盖前端+后台+全栈开发的综合性人才，专业性强、课程创新、师资雄厚。课程涵盖JavaScript、HTML5、CSS3、NodeJS全栈开发等内容，让学员全方位技能，一手掌控。课程学习门槛低，适合零基础的小白迅速成长，学习曲线先快后慢，也适合有一定基础的学员进阶学习，巩固知识的基础上，稳步进步突破职业瓶颈。既是从事IT工作的首选切入点，也能体验勇攀知识高峰，提高能力的职业成就感。

千锋教育为所有的同学提供了长达2周的课程试听，不满意不收费，让你先了解体验之后再开始学习，免除了你的后顾之忧，这样有实力的培训机构值得你选择考虑。