❶ web前端开发h5有没有好的书籍推荐在线等
HTML、CSS、HTML5、CSS3 ——> 《HTML5布局之路》
JS AJAX ——>Head Firt系列（入门比较好）
❷ 前端开发工程师必读书籍有哪些值得推荐
1、HTML/HTML5基础：
1.0、语义化H5标签
1.1、H5引进了一些新的标签，特别注意article、header、footer、aside、nav等，注意HTML的标题结构
1.2、理解浏览器解析HTML的过程，理解DOM的树形结构，及相应API
1.3、理解HTML标签在各个浏览器上的默认样式（代理样式），理解CSS中的重置样式表的概念
1.4、理解Canvas、SVG、video等功能性标签
1.5、理解form、iframe标签，理解文件提交过程
推荐书籍：
A、《HTML5秘籍》
2、高健壮性CSS
2.1、学习基础知识，包括大部分常用属性、选择器的用法，要对大多数标签有个基础概念,在日常使用的基础上，尝试学习浏览器兼容性问题，要知道兼容性的主要问题及解决方法
2.2、深入理解盒子模型，区分块级元素、行内元素，有几个比较重要的属性：display、float、position，一定要弄清楚区分盒子、行内盒子的概念另外可以考虑学一些预编译语言：sass、less，都很简单
2.3、学习常用框架，可以使用bootstrap构建项目
2.4、学习框架的代码组织方式包括：12格栅系统、组件化、组件的风格化等
2.5、学习CSS 3的新功能，特别是动画效果、选择器
2.6、认真学习一些CSS对象化思想，学习编写简洁性、高复用性、高健壮性的CSS
2.7、有空的话，可以看看所谓的扁平化设计，还有简洁性
2.8、理解CSSOM、render、reflow、CSS性能、CSS阻塞概念
学习方法：
1、多看别人的代码，一些设计的不错的网站就是很好的学习素材，比如拉勾网
2、一定要学会使用grunt、gulp压缩CSS
3、display + position + float 可以组合出很复杂的效果，多想想盒子模型
4、尝试在不用float，且position不为absolute的情况下实现等高、等宽等布局
推荐书籍：
1、《图灵程序设计丛书:HTML5与CSS3设计模式》
2、《Web开发技术丛书:深入理解Bootstrap》
3、《高流量网站CSS开发技术》
4、《CSS设计彻底研究》 这个一定要
5、《Web开发技术丛书:深入理解Bootstrap》
6、可以找一些专门讲SASS的书，但是我没找到
7、《CSS权威指南(第3版)》
3、深入学习JS
3.1、重新学习JS语法，注意：表达式（特别是函数访问表达式）、语句、类型（包括类型判断)注意，这个时候主要倾向于“原生”JS哦，不要使用框架
3.2、深入理解JS的“一级函数”、对象、类的概念,学会使用函数来构造类、闭包，学会用面向对象的方式组织代码
3.3、深入理解JS的作用域、作用域链、this对象（在各种调用形式中，this的指向）理解函数的各种调用方法（call、apply、bind等）
3.4、理解对象、数组的概念
理解对象的“[]”调用，理解对象是一种“特殊数组”
理解for语句的用法
深入理解JS中原始值、包装对象的概念（重要）
3.5、学习一些常用框架的使用方法，包括：JQUERY、underscore、EXTJS，加分点有：backbone、angularjs、ejs、jade
通过比较多个框架的使用方法，想清楚“JS语言极其灵活”这一事实
总结常见用法，提高学习速度
学习模块化开发（使用require.js、sea.js等）
3.6、适当看一些着名框架的源码，比如jQuery（不建议看angularjs，太复杂了）
重要的是学习框架中代码的组织形式，即设计模式
3.7、了解JS解释、运行过程，理解JS的单线程概念
深入理解JS事件、异步、阻塞概念
3.8、理解浏览器组成部件，理解V8的概念
学习V8的解释-运行过程
在V8基础上，学会如何提高JS性能
学会使用chrome的profile进行内存泄露分析
学习方法：
1、提高对自己的要求，要有代码洁癖
2、适当的时候看看优秀框架的源码，特别是框架的架构模式、设计模式
3、多学学设计模式
4、学习原生JS、DOM、BOM、Ajax
推荐书籍：
1、《O’Reilly精品图书系列:JavaScript权威指南(第6版)》 必看
2、《JavaScript设计模式》
3、《WebKit技术内幕》
4、《JavaScript框架高级编程:应用Prototype YUI Ext JS Dojo MooTools》
5、《用AngularJS开发下一代Web应用》
6、跨终端
6.1、理解混合APP的概念
6.2、理解网页在各类终端上的表现
6.3、理解网页与原生app的区同，重在约束
6.4、理解单页网站，特别要规避页面的内存泄露问题
6.5、入门nodejs，对其有个基础概念，知道它能做什么，缺点是什么
推荐书籍：
1、《单页Web应用:JavaScript从前端到后端 》
2、《Web 2.0界面设计模式》
3、《响应式Web设计:HTML5和CSS3实战》
5、工具
学会使用grunt进行JS、CSS、HTML 压缩，特别是模块化js开发时候的压缩
会用PS进行切图、保存icon
入手sublime、webstorm
学会使用chrome调试面板，特别是：console、network、profile、element
进阶：
4、性能
1.1、理解资源加载的过程
包括：TCP握手连接、HTTP请求报文、HTTP回复报文
1.2、理解资源加载的性能约束，包括：TCP连接限制、TCP慢启动
1.3、理解CSS文件、JS文件压缩，理解不同文件放在页面不同位置后对性能的影响
1.4、理解CDN加速
1.5、学会使用HTTP头控制资源缓存，理解cache-control、expire、max-age、ETag对缓存的影响
1.6、深入理解浏览器的render过程
推荐书籍：
1、《Web性能权威指南》
2、雅虎网站页面性能优化的34条黄金守则
5、HTTP及TCP协议族
2.1、学习http协议，理解http请求-响应模式
2.2、理解http是应用层协议，它是构建在TCP/IP协议上的
2.3、理解http报文（请求-响应报文）
2.4、理解http代理、缓存、网关等概念，指定如何控制缓存
2.5、理解http协议内容，包括：状态码、http头、长连接（http1.1）
2.6、学习http服务器的工作模型，对静态文件、CGI、DHTML的处理流程有个大致概念
推荐书籍：
1、《HTTP权威指南》
2、《TCP/IP详解》
3、《图解TCP/IP(第5版)》
更多前端书籍推荐：
《JavaScript半知半解》 《Web开发实战》
推销自己的前端技术书籍-博客-云栖社区-阿里云
今天主要自我推销两本前端技术书籍！
《JavaScript半知半解》
《Web开发实战》
一、《JavaScript半知半解》
为什么写这本书？
因为之前作者在博客上洋洋洒洒地将之前学习JavaScript的笔记整理了出来，一共17篇，感觉查找和翻阅还是不方便，所以产生了编辑成电子书的念头，一来方便作者个人查找，二来方便后续内容的补充，三来也方便喜欢JavaScript的伙伴们阅读。
书籍阅读地址：《JavaScript半知半解》
大纲
二、《Web开发实战》
书籍阅读地址：《Web开发实战》
为什么写这本书？
网上的插件虽多，但大多数并没有深究到原理，故而产生了写一本前端实例的书籍。主要是为了想深入学习的伙伴们，书上的内容也许不是最优秀的，但会一步步讲解，会告诉你每一步的原理，让你学习后也可以自己造轮子！
大纲
《Web开发实战》集合了大量的前端开发案例，目前主要选择日常开发中会用到的加入本书，分为四部分：CSS实战篇、JavaScript实战篇、Canvas实战篇和移动实战篇。
❸ 移动端H5页面的设计稿尺寸（上）
由于HTML5和微信内置浏览器的火爆，移动端H5网页越发流行。在设计制作移动端网页的时候，你是否疑惑，这种网站设计稿应该做成的多少屏宽，是否应该跟手机的分辨率一致，还是应该按照iPhone的分辨率来设计（注意H5网页区别于APP，APP的设计稿直接按照手机分辨率来设计）？那么对于现在2K屏幕的手机，应该如何制作设计稿和前端稿呢？
作为本次文章系列的“上”部，将解决一些基本概念：像素（pixel）、ppi、分辨率、物理像素（physical pixel）、CSS像素、设备独立像素（deviceindependent pixel）等等。
为图像显示的基本单位，表示“图像元素”之意。 每个这样的信息元素不是一个点或者一个方块，而是一个抽象的采样。 仔细处理的话，一幅图像中的像素可以在任何尺度上看起来都不像分离的点或者方块；但是在很多情况下，它们采用点或者方块显示。
这一段是出自维基网络的解释。其实很多会Photoshop的人都有一个误区： 认为像素是一个宽高相等的小方块，并且的像素都是“那么大”，但是不知道这个宽高的具体数字。
像素是一个抽象概念，它是一个相对单位。
像素描述的是图像在某一点的颜色值。一般来说，一个像素只能描述一种颜色值。
先可以跳过这个话题，介绍ppi概念，像素没有大小就好理解了。
PPI的复杂之处在于如果他所属的上下文环境不同，意义也会完全不一样。 当我们在谈论显示设备的PPI时，它代指的屏幕的像素密度；当我们在谈论和图片相关时，我们谈论的是打印时的分辨率或者打印机的打印精度。这里我们主要描述的前一种情况。
PPI全称为Pixel Per Inch，译为每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。
举例1：
中的七张图，假设图片尺寸都为1x1寸，那么 PPI 分别为 1、2、5、10、20、50、100 。 在同一物理尺寸内 ，随着像素数的增大，图像细节越多， PPI 增大，图像越清晰，像素所占空间相对越小。
因此，从讨论像素大小的角度来说，图①中各个方框像素的宽度（单位为英寸）分别为：1、1/2、1/5、1/10、1/20、1/50、1/100。像素在每个不同ppi下大小都不同，因此讨论像素的大小也就变得无意义了。像素是没有大小的。像素是一个抽象概念，它是一个相对单位。
像素描述的是图像在某一点的颜色值。一般来说，一个像素只能描述一种颜色值。
举例②：
在photoshop中分别建立两个文档：①800x600px，72ppi，②800x600px，300ppi。那么这两个文档在PS或者生成图片时，显示的视觉效果是完全一样的，因为宽高的像素点数是完全一样的，在设备上渲染出来的效果图是一致的。当你把文档②中的任意图层复制到文档①中，从视觉上发现图层不会变大或者缩小。只有把这两个文档作为图片1:1打印出来时，才会发现72ppi的图片要大于300ppi的图片（注意ppi的含义），前者宽（高）大约是后者的4.16（300/72）倍。
任何图片作为数据信息被保存在存储盘中时，只有宽高像素数是有意义的，ppi对于图片来说时没有任何意义的，也并不能描述这个图片有多少英寸的宽度或者高度，而只有在被打印出来后才有他的意义。
分辨率泛指显示系统对细节的分辨能力。能显示图像都能叫显示系统，比如显示器，投影仪，照片。
分辨率常用的单位有：dpi（点每英寸）、lpi（线每英寸）和ppi（像素每英寸）。从单位来看，分辨率是一个比值，与物理单位的比值。
日常所说的“这张图片的尺寸（或分辨率）是100x100像素”，一般都是在描述数字图片，这样的描述只是说明了图片文件包含多少个像素。比如图1中的七张图，我们习惯于说，第1张图的分辨率是1x1像素，第5张图的分辨率是20x20像素，其实只是说明了图片的像素数而已。
这是一种显示技术，可以将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度，这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。
最先使用retina屏幕是iphone 4，屏幕分辨率为960 * 640（326ppi）。
对比如下两幅图，可以清晰地看出是否 Retina 屏的显示差异：
图2 iPhone 3GS
图3 iPhone 4
两代iPhone 的物理尺寸（屏幕宽高有多少英寸）是一样的，从上图可以看出，iphone 4的显示效果要明显好于iphone 3GS，虽然 iPhone 4 分辨率提高了，但它不同于普通的电脑显示器那样为了显示更多的内容，而是提升显示相同内容时的画面精细程度。这种提升方式是靠提升单位面积屏幕的像素数量，即像素密度来提升分辨率，这样做的主要目的是为了提高屏幕显示画面的精细程度。以第三代 MacBook Pro with Retina Display为例， 工作时显卡渲染出的2880x1880个像素每四个一组，输出原来屏幕的一个像素显示的大小区域内的图像。这样一来，用户所看到的图标与文字的大小与原来的1440x900分辨率显示屏相同，但精细度是原来的4倍。
注意：在桌面显示器中，我们调整了显示分辨率，比如从 800 * 600 调整到 1024 * 768 时，屏幕的文字图标会变小，显示的内容更多了。但 Retina 显示方式不会产生这样的问题，或者说， Retina 显示技术解决的是显示画面精细程度的问题，而不是解决显示内容容量的问题。
为什么是“每四个一组”？而且要让这四个一组来显示“原来屏幕的一个像素”？这大概就是 Retina 显示技术的一种表现吧。而这“每四个一组”的“大像素”，可以被称作“设备独立像素”， device independent pixel ，或者 density-independentpixel ， 它可以是系统中的一个点，这个点代表一个可以由程序使用的虚拟像素，然后由相关系统转换为物理像素。
“设备独立像素”也有人称为“CSS像素”，一种形象的说法，更倾向于表明与 CSS 中尺寸的对应。
设备独立像素与物理像素的对应关系，可以这样看：
图4
类似的每四个一组的对应关系，也许正是 Retina 显示技术所做的。
作为Web开发者，我们接触的更多的是用于控制元素样式的样式单位像素。这里的像素我们称之为CSS像素。
CSS像素有什么特别的地方？我们可以借用quirksmode中的这个例子：
假设我们用PC浏览器打开一个页面，浏览器此时的宽度为800px，页面上同时有一个400px宽的块级元素容器。很明显此时块状容器应该占页面的一半。
但如果我们把页面放大（通过“Ctrl键”加上“+号键”），放大为200%，也就是原来的两倍。此时块状容器则横向占满了整个浏览器。
吊诡的是此时我们既没有调整浏览器窗口大小，也没有改变块状元素的css宽度，但是它看上去却变大了一倍——这是因为我们把CSS像素放大为了原来的两倍。
CSS像素与屏幕像素1：1同样大小时：
图5
CSS像素(黑色边框)开始被拉伸，此时1个CSS像素大于1个屏幕像素
图6
也就是说默认情况下一个CSS像素应该是等于一个物理像素的宽度的，但是浏览器的放大操作让一个CSS像素等于了两个设备像素宽度。在后面你会看到更复杂的情况，在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。
从上面的例子可以看出，CSS像素从来都只是一个相对值。
设备像素比=设备物理像素/设备独立像素
设备像素比在 js 中可以通过 devicePixelRatio 的参数取得（需要页面的 viewport 设置为 content=”width=device-width” 此处为前端布局知识，较为专业，笔者也只是意会，无法说清楚，请自行网络）
iPhone 4 的设备像素比为2，线长（横向、纵向、对角线）上的物理像素数与设备独立像素数的对应关系即为2。
根据这个对应关系，一般可以通过屏幕的物理分辨率和设备像素比确定设备独立像素数。
那么在我们做移动端网站时，将viewport设置了content=”width=device-width”，设备独立像素也就等于CSS像素。
经常在做移动端网站时，我们会听到一些人说原型稿屏宽做成320px，设计稿做2倍640px，网上也有很多文章说这样说，H5网页的设计稿做成2倍普通屏分辨率就行了。
这是一个历史遗留问题，这里提到的屏宽，更确切的说，是将viewport设置为width=device-width时的宽度，习惯称这个宽度为屏宽，也就是设备独立像素的宽度。笔者从其他文章中找到了一些答案。（原型图屏宽是320px是为了满足原型软件在1：1比例显示上适当，二是为了保证早期iphone320px屏宽的显示需求）
“其实这个属性值很有意思，字面意应该是 viewport 宽度等于设备宽度，但在实际中不同的浏览器都给出了个定值：320px；这个值还是源于 Apple ，因为早期 iPhone 的分辨率为 320px*480px ，大量为 iPhone 量身定制的网站都设置了 viewport:width=device-width ，并且按照宽度 320px 来设计制作，所以其他浏览器加入 viewport 支持时为了兼容性也将 device-width 定义为了 320px 。”
那么到了后来的iPhone4的屏幕是960x640px，几乎所有人都知道Retina显示屏，所有方向上的像素都成了原来的2倍。而设备独立像素的屏宽还是保持着320px。其它智能手机早期的分辨率基本上也使用了大致相同的屏幕尺寸与分辨率，因此才有了 320px 这个不约而同的约定。
当然，如果把 viewport 的 width 属性设置为一个定值，比如 320、 480、 700 等等，那 viewport 的宽度即为设定的宽度。此时，设备独立像素宽度，也即所设定的宽度，而物理像素与设备独立像素的比值，则不再是最初始的设备像素比值了（比如 iPhone 4 中的2）。
现在的智能手机屏幕尺吋多样，分辨率有很多种，相应地，设备像素比也不一致，有1、1.5、2、2.25、3等等，而在一般情况下（指 viewport 设置为 width=device-width 时）的设备独立像素宽度，也不再只是 320px 了，还有 360px 、 400px等等。 这是从 http://screensiz.es/phone 统计的大部分手机独立像素数据。
若设备像素比是N，就表示该手机屏幕上的N个物理像素来显示一个CSS像素。
本文对已移动端网站涉及到的一些概念进行了较为基础的解释，在下一篇中，会介绍H5网页在做设计稿以及前端布局时的最为省力的方法。
❹ web前端页面布局,一般情况用哪些标签最好,可以尽可能地达到各浏览器对标签元素的识别
用DIV写是最好的。浏览器无论是信息的爬虫和页面的重构都会很好。浏览器兼容的问题主要是你CSS写的严谨不严谨。你CSS写的不够全有的浏览器自然会有这些问题。而且有的属性可能不兼容每个浏览器。标签最好的就是DIV了。
❺ 微信小程序web-view ， 嵌入H5页面
需求：
1、将已开发好的H5页面，嵌入先有的小程序。
2、并且要实现H5支付功能
解决方式 ：web-view
1、 登陆 小程序管理后台
a . 如果是公众号 。则进行双向绑定
完成这一步 ，那么基本上就差不多成功了一大半
2、在小程序里面嵌入h5
web-view
文档里面有的东西，就不赘述le~
a.在小程序里面定义一个你想要的H5入口
b. 新建一个页面，用来放H5的链接
ok~现在已经完成h5的嵌入
3、h5实现支付功能 - 唤醒微信支付
目前只有这种实现方式。等待微信更新 支持小程序的web-view可以唤醒微信支付
总结：
个人见解： 微信内置浏览器， 打开微信公众号H5页面，也可以唤醒微信支付。微信小程序里面web-view相当于小程序的内置浏览器，暂时不支持唤醒微信支付。虽然小程序是在微信里面，但是web-view又和微信内置浏览器不同~ 感觉微信想把小程序独立出来~
❻ H5的web界面和普通界面之间，有什么设计上的区别
H5的页面属于是具有响应式的交互功能，（比如鼠标放在图片上会显示文字解释或者图片翻页。）普通界面是简单的图文页。
❼ web前端只要会H5和css,加上js就可以了吗
刚刚入门web前端的同学，大多对前端学习路线有误解，认为前端=HTML+CSS+Javacript。但实际情况要比这要复杂多，下面就来真正了解一下Web前端学些什么内容吧！
1.入门篇：html基础、css基础、js基础、纯js操作dom和jquery。
2中级篇：深入css3、深入js、掌握主流mvc框架、升级后台语言nodejs、总结做项目。
3.进阶篇：掌握面向对象编程、函数式编程、MVC / MVVM / MVC。还需要把握好安全性、平台兼容等等。
所以说，Web前端的学习路程是路漫漫其修远矣，大家要靠不停地学习来充实自己的知识技能，才能在前端方向成为技术大牛！
❽ h5和web前端的区别
一、指代不同
1、h5：是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。
2、web前端：是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
二、发展不同
1、h5：结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。
2、web前端：从网页制作演变而来，在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显着，功能更加强大。
三、技术构成不同
1、h5：由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。
2、web前端：掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。