灰色阴影

有很多细心的小伙伴应该能注意到，在开发的过程中超链接，按钮在按下的时候，在元素身上会出现灰色的阴影，闪烁一下。然而这样会给用户体验带来不好的影响，对于这个问题到底应该怎么解决？

解决方法：

a,input,button{

-webkit-tap-highlight-color: transparent;

-webkit-touch-callout: none;

-webkit-user-select: none;

}

2

按钮 IOS 下默认样式

在开发的过程中按照设计图给 button 编写好 css 样式，在 PC 端进行测试的时候没有任何异常，但是通过真机测试的时候就会发现自己写的 css 样式，被 IOS 的默认样式给干掉了，和自己想的完全不一样。

解决方法：

input[type="button"],

input[type="submit"],

input[type="reset"]{

appearance: none;

-webkit-appearance: none;

}

textarea{

appearance: none;

-webkit-appearance: none;

}

主轴（X轴）富余空间管理

给父级级div添加css样式

• -wekit-box-pack:start;

  在主轴开始位置，富余空间在主轴的结束位置

• -wekit-box-pack:end;

  元素在主轴结束位置，富余空间在主轴的开始位置

• -wekit-box-pack:center;

  富余空间平均分配，放在元素两侧位置

• -wekit-box-pack:justify;

  富余空间平均分配在每两个元素之间

3. 侧轴（Y轴）富余空间管理

给父级级div添加css样式

• -webkit-box-align:star;

  元素在侧轴开始位置，富余空间在侧轴的结束位置

• -webkit-box-align:end;

  元素在侧轴结束位置，富余空间在侧轴的开始位置

• -wbekit-box-align:center;

  富余空间平均分配，放在元素两侧位置

这里需要注意喽，以上所有属性都是要加给父级的哦，给子元素会没有任何效果的。

4. 元素弹性空间

给子元素添加css样式

-webkit-boxt-flex:number;

更改css属性

*{

margin:0px;

padding:0px;

}

#box {

height:400px;

display:-webkit-box;

background:green;

}

#box div {

width:50px;

height:50px;

background:red;

margin:5px;

}

#box div:nth-child(1){

-webkit-box-flex:1;

}

#box div:nth-child(2){

-webkit-box-flex:2;

}

#box div:nth-child(3){

-webkit-box-flex:3;

}

#box div:nth-child(4){

-webkit-box-flex:4;

}

#box div:nth-child(5){

-webkit-box-flex:5;

}

5.HTML5 相应式虽然很强大，但仍然是比较新兴的技术，PC 端对与相应式的处理兼容并不是特别的好，IE8 以上的版本才会兼容响应式的处理与兼容。那么IE8 以下版本应该如何做到兼容呢？

引入远程兼容 javascript 文件，也可以把 javascript 文件下载到本地进行响应式的兼容

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

6.

移动设备像素比

说到像素比，那么到底什么是像素比呢？像素比是浏览器厂商出产时候对移动设备的设置，把一个像素放大至 N 个像素去显示，这里的 N = 像素比。我们对像素比的属性只能获取，不能对其进行设置。

举个栗子 ：

现在有个 div，设置 CSS 属性，假设当前设备获取到的像素比为：2

<div id="box"></div>

<style type="text/css">

#box{

width:100px;

height:100px;

background:red;

}

</style>

于HTML5这个新兴行业，很多人都想进行系统的学习，但是又有些犹豫，HTML5到底有没有说的那么神奇，HTML5培训专家来为大家介绍一下。

1、截止到2016年，近八成以上的APP即将全部基于HTML5，这就说明了HTML5的人才缺口很大，需要大量的HTML5工程师。

2、我们用1000个H5作品进行测试，其中15%是社交互动游戏，5%是大型的品牌宣传，这些都可以作为公司的广告，所以H5在应用方面还是大有可为的，所以相应的缺口也很大。

3、谷歌浏览器从2016年9月1号开始不再自动播放flash，亚马逊旗下的网络的所有广告都已告别flash时代，所以在未来，flash广告讲会被HTML5广告所替代，市场大有可为。

渥瑞达凭借自身研发优势率先引领业内培训热潮，有专业的HTML5术，在学习过程中有知名项目解析、作品点评、授课指导、职业规划等一系列环节，都会在课程中为学员详细讲解，帮助学员理解掌握HTML5技术。入学即签订双保就业协议，保障学员高薪就业，北京渥瑞达HTML5培训机构欢迎你的到来。

今，移动互联网发展呈现倍速增长态势，Web前端开发的热门领域当属HTML5，行业的发展更是催生了HTML5的人才需求，不断有人想要学习HTML5技术，选择参加专业的课程培训成为了短时间掌握专业技能的一种不错的选择，那么HTML5培训究竟是学的什么呢?

随着HTML5人才缺口的不断增大，随即而来市场上的HTML5培训机构也是层出不群，拿优就业的HTML5课程来说，主要包括HTML5+CSS3、JS交互设计和前端框架三部分，下面一起来看看具体都包括些什么吧。

一、HTML5+CSS3

这个阶段主要是学习一些页面样式布局的内容，分为PC端网页布局和WebAPP网页布局两个方向，其中包括常见块级标签及特点、常见内联块及特点、表格常用属性、表单域常用属性、表单元素常用属性、CSS基础语法、选择器、文字样式、盒模型、CSS背景技巧、浏览器兼容、CSS hack、CSS高级技巧、BFC规范、网页开发规划及流程、CSS3编码规划、2D与3D变换、animation 动画、预处理器Less、Flex布局等内容。

二、JS交互设计

掌握了HTML5+CSS3技术之后，可以编写一个静态的页面，那么想要实现动态效果的话就要用到JavaScript技术，JavaScript可以为网页添加各式各样的动态功能,为用户带来更流畅美观的浏览效果。

这部分主要学习JavaScript核心语法、用户与界面交互、函数表达式、原生函数封装、JavaScript内置对象、数组与排序算法、Math与随机算法、DOM树、JavaScript特效、浏览器兼容处理、Cookie原理解析及应用、正则表达式及表单验证、构造函数、Ajax原理分析及实现、同步异步区别及实现、Ajax前后台数据交互、jQuery简介、jQuery选择器、jQuery CSS操作、jQuery html文档处理、jQuery事件、jQuery动画、jQuery插件操作、jQuery扩展、递归算法、Jquery Ajax等。

三、前端框架

开发大型项目必定离不开框架的使用，熟练的运用框架可以大幅度提升开发效率，提升稳定性，这部分主要是学习数据可视化、Vue、React、Angular相关框架内容，包括D3.js 进行大数据可视化交互开发、使用 Vue 技术栈进行项目开发、使用 React技术栈进行项目开发、前后端分离开发模式、Webpack项目构建配置流程Web项目的部署与发布模式、常见网站业务模块开发Angular常用指令等。

以上就是介绍的HTML5培训究竟是学什么的相关内容，如果如果对于HTML5学习还有疑问或者需要相关学习资料的可以私聊小U~最后，预祝周末愉快，小U决定宅在家充电学习~