HTML5与CSS3项目测试
软件测试技巧
1、添加、修改功能
（1）是否支持tab键
（2）是否支持enter键
（3）不符合要求的地方是否有错误提示
（4）保存后，是否也插入到数据库中
（5）字段唯一的，是否可以重复添加
（6）对编辑页列表中的每个编辑项进行修改，点击保存，是否保存成功
（7）对于必填项，修改为空、空格或其他特殊符号，是否可以编辑成功
（8）在输入框中，直接回车
（9）是否能够连续添加
（10）在编辑的时候，要注意编辑项的长度限制，有时，添加时有长度限制，但编辑时却没有（添加和修改规则是否一致）
（11）添加时，字段是唯一的，不允许重复，但有时，编辑时，却可以修改为相同字段（相同字段包括是否区分大小写以及在输入内容的前后输入空格）
（12）添加含有特殊符号或空格的内容
（13）对于有图片上传功能的编辑框，对于没有上传的图片，查看编辑页面时，是否显示默认图片，如果上传了图片，是否显示为上传图片？
2、删除功能
（1）输入正确数据前加空格，看是否能正确删除？
（2）是否支持enter键
（3）是否能连续删除多个产品？当只有一条数据时，能否成功删除
（4）删除一条数据后，能否再添加相同的数据？
（5）当提供能一次删除多条信息的功能时，注意，删除的数据是否正确？
（6）不选择任何信息，直接点击删除按钮，看有什么错误提示？
（7）删除某条信息时，应该有错误提示信息
3、注册、登录模块
（1）注册成功，但登录失败：注册时，密码设置为一些特殊符号，但登录时，失败
（2）注册时，连续点击提交按钮
（3）注册成功后，页面应该以登录状态跳转到首页
（3）登录时，没区分大小写，注册时，是小写字母，但登录时，用大写字母也能登录进去
（4）登录时，当页面刷新或重新输入新数据时，验证码是否也随之更新
（5）对密码的修改，当把密码修改为很长，或含有特殊符号时，能够修改成功，但却不能成功登录。
4、上传图片测试
（1）文件类型正确，文件大小合适
（2）文件类型正确，文件大小不合适
（3）文件类型错误，文件大小合适
（4）文件类型和大小都合适，上传一个正在使用中的图片
（5）文件类型和大小合适，手动输入一个存在的图片地址来上传
（6）文件类型和大小合适，手动输入一个不存在的图片地址上传
（7）文件类型和大小都合适，手动输入图片名称来上传
5、返回键检查
（1）一条已经成功提交的记录，返回后再提交，看系统是否做了处理
（2）检查多次使用返回键的情况，在有返回键的地方，返回到原来页面重复多次，看是否会出错
6、回车键检查
在输入结束后，直接按回车键，看系统处理如何，是否会报错
7、刷新键检查
在web系统中，使用浏览器的刷新键，看系统处理如何，是否会报错
8、直接URL链接检查
在web系统中，直接输入各功能页面的URL地址，看系统如何处理
9、其他
（1）在测试时，有与网络有关的步骤必须考虑到断网的情况
（2）每个页面都有相应的页面title
（3）在测试的时候要尽量考虑在页面出现滚动条时（滚动条上下滚动下），页面显示是否正常
（4）URL不区分大小写
10、测试中，并发情况的考虑
总结了以下两种情况：
（1）某个字段是唯一的，当多个用户并发点击产生该字段时，检查系统是怎么处理的
（2）对于电子商务网站，当两个或多个用户并发购买量总和大于产品库存量时，能否购买成功
二、界面和易用性测试
1、界面测试，主要测试网站的界面是否和设计一致，是否有错别字，页面布局是否合理，格式是否正确，是否有相应的错误提示信息等。
2、易用性测试，主要是考察所开发出的功能是否人性化，是否易用，是否符合大多数用户的使用习惯等。
3、对Tab和Enter键的测试。
三、兼容性测试
兼容性测试不只是指界面在不同操作系统或浏览器下的兼容，有些功能方面的测试，也要考虑到兼容性，比如涉及到ajax、jquery、javascript等技术的，都要考虑到不同浏览器下的兼容性问题。
四、链接测试
主要是保证链接的可用性和正确性，它也是网站测试中比较重要的一个方面。
五、业务流程测试
业务流程，一般会涉及到多个模块的数据，所以在对业务流程测试时，首先要保证单个模块功能的正确性，其次就要对各个模块间传递的数据进行测试，这往往是容易出现问题的地方，测试时一定要设计不同的数据进行测试。
六、安全性测试
（1）SQL注入
（2）XSS跨网站脚本攻击：程序或数据库没有对一些特殊字符进行过滤或处理，导致用户
所输入的一些破坏性的脚本语句能够直接写进数据库中，浏览器会直接执行这些脚本语句，破坏网站的正常显示，或网站用户的信息被盗,构造脚本语句时，要保证脚本的完整性。
document.write("abc")
scriptalter("abc")/script
（3）URL地址后面随便输入一些符号
(4)验证码更新问题
1. 在购物网站中如果就剩一个商品了 然后多个人同时去点击购买的时候会怎么处理。
2.搜索功能
（1）比较长的名称是否能查到？
（2）空格 或空
（3）名称中含有特殊字符，如：' $% *以及空格等
（4）关键词前面或后面有空格
（5）如果支持模糊查询，搜索名称中任意一个字符是否能搜索到
（6）输入系统中不存在与之匹配的条件
（7）两个查询条件是否为2选1，来回选择是否出现页面错误
（8）输入脚本语言,如：scriptalter(“abc”)/script等
3.添加、修改功能
（1）是否支持tab键
4. 安全测试：
在输入框中输入 'scriptalert(“XSS”)/script后，竟然能执行，记录下来.......
查询输入
（1）分别对单条件进行精确查询
（2）输入长度的检验，输入允许的最长值进行查询，是否支持
（3）两个查询条件是否为2选1，来回选择是否出现页面错误
（5）输入特殊字符
（6）输入数字
（7）输入汉字
（8）输入关系表达式 与、或、异或、非、等于
（9）输入空格
（10）条件中含有空格
（11）输入超长字符
（12）输入全角字符
（13）输入单引号
（14）输入单引号引起来的数据
（15）输入双引号
（16）输入双引号引起来的数据
（17）如果支持模糊查询，输入部分查询条件
（18）输入系统中不存在与之匹配的条件
查询结果检查
（1）查询结果按什么顺利排序
（2）查询结果是否根据字段显示排序功能
（3）查询结果是否有分页，如果有，每页最多包含多少记录
（4）查询结果是否匹配
（5）查询结果是否与数据库一致
（6）查询结果是精确查询还是模糊查询
UI验证
（1）文字显示是否正确
（2）页面是否有错别字
（3）输入框大小、文字大小是否合适
（4）页面是否美观
（5）查询结果字段显示是否与需求一致
性能方面
（1）查询处理时间是否能接受
（2）数据库中存在大数据量数据时，查询时间是否能接受
（3）当多个用户同时查询时，输入相同或不同的查询条件系统响应是否及时
对于查询功能，同样可以从以下几个方面来进行用例的设计：
1、功能方面考虑：应用边界值和等价类划分法进行用例的设计
边界值：输入最大长度的文本，能否搜出来？输入空格或空，能否搜索出来？
等价类：要考虑到一些特殊符号的输入查询。
2、易用性方面
3、界面方面
4、安全角度：比如输入一些脚本语言，看是否执行，主要是防XSS攻击问题
5、性能角度：查询效率、并发、响应时间问题的考虑
网页安全缺陷
现在网站开发已经注意到：登陆网站进入其内部网页后，直接拷贝网址，然后粘贴到另一IE窗口输入，可以绕过登陆直接访问。也许商业网站很关注这个问题，但是很多行业软件却很容易忽略。
网页安全缺陷还可能存在于IE弹出的子窗口。有些设计不严格的软件，在主页面关闭的时候子页面还可以运行，这是一个明显的漏洞，而且还大大增加了错误发生的几率。
判断顺序/逻辑缺陷
对界面进行多个输入判断的时候，非常容易出现这种问题。例如判断年月顺序，判断长度，判断非空等。假如操作员仅仅满足单个条件，保存不能成功;而按界面从上之下顺序一一满足条件之后，保存是没有问题的。但是，改变一下输入的次序，校验失效。例如，一一满足条件之后，不保存，倒过来将上面的输入改成非法输入，然后保存，结果居然也能成功，这是因为原先的判断由于发生过，或者根据语句顺序只检查最后一个判断，所以没有报错。这种错误尤其在Java scrīpt脚本的页面中要注意。能够保存不能保证数据正确，有可能引起系统崩溃或者后续数据错误。所以，在测试的时候，不要按照正常的顺序输入，而是要打乱步骤，看看代码是否强健，是否在判断逻辑上没有错误。良好的代码应该经得起折腾，至少保存时会再此全部进行判断，而不只是简简单单走到判断的最后一行。
调试语句和冗余信息
维护项目和升级改造的推广系统最容易潜伏这类缺陷。典型表现在没有删除或者屏蔽调试语句。弹出一个界面不友好的提示信息，会使不明真相的用户产生误以为系统发生了严重故障，从而引起对软件的不信任感。页面中某个角落存在当前客户不需要的冗余按钮和功能也是一种缺陷。多余的功能会使用户以为是额外附加部分而去使用，其结果可想而知;而多余的按钮会误导好奇心强的用户操作，产生不必要的错误。
同样值得关注的还有参数设置，由于没有实际数据，开发人员在调试或者单元测试的时候，习惯性的进行自我设定而忘了删除，软件测试人员可能会忽略掉了这部分测试，也可能导致在客户现场发生错误而影响系统发布和验收。
不可重现的故障
新参加软件测试的人员或者新来的开发人员总是要问，不可重现的缺陷是否需要记录，有必要吗?回答是肯定的。测试必须如实的记录发生的问题，也许不能重现，或者使非软件系统本身问题，但是，可能这些偶然性背后是有规律的，不记录这些，就不可能发现这些规律。
多节点的逆向流转缺陷
当前软件不少喜欢使用工作流来驱动。工作流的问题，就是可能出现多个流向分支。测试容易忽略的部分，就是工作流多节点的逆向流转。例如，通过不通过涉及两个分支，但是流程逆转的时候，有可能不是回到上一节点而是平级的另一个节点去了。软件测试要格外注意这类用例的设计。另外，有些时候默认分支在向前的时候是有默认值的，例如默认通过，那么保存的时候要提示用户是否通过，否则可能由于操作疲劳而走错了节点，引起回退。
输入框缺陷
试过往输入框粘贴数据而不是直接输入吗?可能这里会出现问题。按Ctrl+V的时候，输入框会根据长度大小自动截断输入长度。但是用鼠标，截断可能会失效。有一次测试人员就是用这种方法把一篇Word文档输入进去了，保存的时候，数据库崩溃。有些网站登陆的口令****可以拷贝下来的，只要放在剪贴板里面马上明文显示。（在以后的测试中需要注意的）
html5 localstorage 怎么取存储条数
在HTML5本地存储出现以前，WEB数据存储的方法已经有很多，比如HTTP Cookie，IE userData，Flash Cookie，Google Gears。其实再说细点，浏览WEB的历史记录也算是本地存储的一种方式。到目前为止，HTML5本地存储方式已经获得了广泛的支持，其中支持的浏览器包括：IE 8+、FF 3.5+、Safari 4+、Chrome 4+、Opera 10.5+，手机平台包括iPhone 2+和Android 2+。最新的HTML5本地存储规范文档，可以在线查看
http://dev.w3.org/html5/webstorage/
HTML5本地存储的前身就是Cookie，通过使用localStorage对象将WEB数据持久留存在本地。相比较而言，HTML5本地存储中每个域的存储大小默认是5M，比起Cookie的4K要大的多。而且存储和读取数据的代码极为简练：
那么现在我们是否可以简单的认为，HTML5存储已经可以代替Cookie存储了呢？还有这种新的存储方式在实际应用中带来了哪些新的安全风险呢？带着这些疑问我们来进行下面的讨论。
（1） 是否可以代替Cookie
浏览器使用Cookie进行身份验证已经好多年，既然现在localStorage存储空间那么大，是否可以把身份验证的数据直接移植过来呢？目前来看，把身份验证数据使用localStorage进行存储还不太成熟。我们知道，通常可以使用XSS漏洞来获取到Cookie，然后用这个Cookie进行身份验证登录。后来为了防止通过XSS获取Cookie数据，浏览器支持了使用HTTPONLY来保护Cookie不被XSS攻击获取到。而目前localStorage存储没有对XSS攻击有任何抵御机制，一旦出现XSS漏洞，那么存储在localStorage里的数据就极易被获取到。
如果一个网站存在XSS漏洞，那么攻击者注入如下代码，就可以获取使用localStorage存储在本地的所有信息。
攻击者也可以简单的使用localStorage.removeItem(key)和localStorage.clear()对存储数据进行清空。
（2） 不要存储敏感信息
从（1）中知道，从远程攻击角度来看，localStorage存储的数据容易被XSS攻击获取，所以不宜把身份验证信息或敏感信息用localStorage存储。而从本地攻击角度来看， localStorage自身的存储方式和存储时效并不宜存储敏感信息。
五大浏览器现在都已经支持以localStorage方式进行存储，其中Chrome,Opera,Safari这三款浏览器中都有了查看本地存储的功能模块。但是不同浏览器对localStorage存储方式还是略有不同的。以下是五大浏览器localStorage存储方式：
通过上面的描述可以看出，除了Opera浏览器采用BASE64加密外（BASE64也是可以轻松解密的），其他浏览器均采用明文存储数据。
另一方面，在数据存储的时效上，localStorage并不会像Cookie那样可以设置数据存活的时限，只要用户不主动删除，localStorage存储的数据将会永久存在。
根据以上对存储方式和存储时效的分析，建议不要使用localStorage方式存储敏感信息，那怕这些信息进行过加密。
（3） 严格过滤输入输出
对于本地存储，为了方便加载数据，常常会把数据存储在本地，等再次加载时，直接从本地读取数据显示在网页上。在某些情况下，在localStorage存储中写入或读取数据的时候，如果数据没有经过输入输出严格过滤，那么这些数据极可能被作为HTML代码进行解析，从而产生XSS攻击。
Twitter就发生过localStorage XSS漏洞。此漏洞触发的条件是，在Twitter的个人主页上执行以下存储代码后，每次再打开个人主页时就会弹出/xss/框。
从这段代码可以看出，Twitter会使用localStorage方法把一些个人数据存储到本地，每次加载个人主页面的时候就会从本地存储获取数据，然后由于Twitter忽略了对去除数据的严格过滤，导致存储的代码会被当作HMTL编码执行，进而发生跨站攻击。
有关Twitter localStorage XSS 漏洞详的细信息可以查看：http://www.wooyun.org/bugs/ wooyun-2010-03075。虽然Twitter这个漏洞利用起来非常困难，但它再一次告诉我们：本着一切输入输出都是有害的原则，要对数据进行严格的输入输出过滤。
（4） 容易遭受跨目录攻击
localStroage存储方式不会像Cookie存储一样可以指定域中的路径，在localStroage存储方式中没有域路径的概念。也就是说，如果同一个域下的任意路径存在XSS漏洞，整个域下存储的数据在知道存储名称的情况下都可以被获取到。
假设下面两个链接是使用localStorage来存储数据：
用户xisigr和xhack各自的blog链接虽然属于同一个域，但却有不同的路径，一个路径为xisigr，另一个路径为xhack。假设xisigr用户发现自己的路径下存在存储型XSS漏洞，那么就可以在自己的blog中加入获取数据代码，其中核心代码为localStorage.getItem(“name”)。xhack用户并不需要登录blog,他只要访问http://h.example.com/xisigr，本地存储数据就会被获取到。
（5） 容易遭受DNS欺骗攻击
Google在没有使用HTML5本地存储前，是使用Google Gears方式来进行本地存储的。那时Google Gears就遭到过DNS欺骗攻击。Google Gears支持离线存储，可以把Gmail,WordPresss这样的网站数据以SQLite数据库的形式存储下来，以后用户就可以对存储的网站数据进行离线读取或删除操作。如果攻击者发动DNS欺骗攻击，那么就可以注入本地数据库，获取数据或者留下永久的后门，造成对用户持久的危害。Google Gears所遭受的DNS欺骗攻击方式在HTML5本地存储上也是同样有效的。
（6） 恶意代码栖息的温床
在第六点中给出“恶意代码栖息的温床”这个小标题有些夸大的效果。其实这里想说的是，HTML5本地存储在空间上和时间上都将成为今后存储的趋势，料想“恶意代码们”自然会大雁南飞转移栖息到这张温床上。
那么，何为HTML5本地存储的空间和时间呢？空间这里指的是存储空间，比起Cookie 4K空间的微小来说，HTML5的localStroage方法默认就可以使浏览器存储5M空间可以说是博大，而Safari浏览器可以支持到500M更加让HTML5存储霸气外露。时间上，随着HTML5技术日渐成熟，除了各大浏览器厂商争先在自己的产品中支持HTML5外，一些大应用软件厂商也对其信赖有加。比如2011年11月Adobe宣布放弃手机上的FLASH， 而由HTML5全面取而代之。随着时间的推移，HTML5大步流星的前行速度也会越来越快，也会使得用到HTML5本地存储的应用会越来越多。
上面从理论上分析了 “恶意代码栖息的温床”的可能性。而从实际技术上的可行性也非常简单。下面是在本地留后门的核心代码：
以上分析，均出自天融信TopLAB前沿安全实验室的研究，希望借此文让HTML5的本地存储安全问题得到大家的广泛重视。HTML5非常精彩，但也存在风险，我们要做的工作还很多。
学习html5需要会java或者是其他的计算机语言吗？
1、学习html5不需要会java，但是需要编程基础，比如各种JS/JQuery等。
2、学习html5最重要的不是已经会多少东西，而是你的不断学习的学习能力。要明白，技术是时刻在更新的。
学习HTML5可以参考下列进阶知识：
一、前段页面重构
1、PC端网站布局（HTML基础，CSS基础，CSS核心属性；CSS样式层叠，继承，盒模型；浏览器兼容性与宽高自适应；定位、锚点、图片整合；表格，CSS属性与滤镜。）
2、HTML5+CSS3基础（HTML5新增的元素与属性；CSS3选择器、媒体查询；CSS3位移与变形处理；CSS3 2D、3D转换与过度动画；响应式设计。）
3、WebApp页面布局（移动端页面设计规范；移动端切图；文字流式/控件弹性/图片等比例/特殊设计的100%布局；等比缩放布局；viewport/meta、rem/vw的使用；移动web特别样式处理）
二、JavaScript高级程序设计
1、原生JavaScript交互功能（基本语法、循环语句、函数与数组、String与Date、BOM与DOM、事件、拖拽效果、cookie存储、正则表达式、Ajax、面向对象基础、运动与游戏开发）
2、面向对象进阶与ES5/ES6应用（Promise/A+、设计模式（观察者模式等）、原型链、构造函数、执行上下文栈与执行上下文、变量对象与活动对象、作用域链、闭包、this、ES5、ES6）
3、JavaScript工具库（DOM库、事件库、AJAX库、原型和继承库、MVVM核心库、基于SPA的路由库）
三、PC端全栈项目
1、jQuery经典交互特效（时间轴特效、tab页面切换效果、网页定位导航特效、滑动门特效、焦点图轮播特效、导航条菜单效果、瀑布流特效、弹出层效果、倒计时效果、抽奖效果）
2、PHP+MySQL后端基础（PHP、MySQL、HTTP(s)协议详解、Ajax进阶、跨域与Defered、Apache与Nginx 环境搭建与配置、接口的定义、Mock数据、Restful、前后端联调、前端安全XSS,CSRF,JSON注入）
3、前端工程化与模块化应用（Gulp、Webpack、NPM、Git/SVN、CommonJS、AMD、CMD、ES6模块化）
四、移动端WebApp开发
1、应用Vue.js开发WebApp项目
2、应用React.js开发WebApp项目
3、应用Angular开发WebApp项目
五、混合(Hybrid,RN)开发
1、微信公众号开发
2、微信小程序开发
3、React Native
六、NodeJS基础、MongoDB、GraphGL、Express、Koa、socket 即时通信
……
当前页面action为s的form表单第1个input存在xss漏洞怎么修复
你好，建议使用UC浏览器，它是全球使用量最大的手机浏览器，由优视科技自主研发，全球领先智能手机浏览器，拥有独创的U3内核和云端架构，完美地支持HTML5应用，具有智能、极速、安全、易扩展、省电、省流量等特性，无论是阅资讯、读小说、看视频
现在前端一般用什么软件
1、Adobe Dreamweaver CS6
Dreamweaver CS6是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计软件。由于Dreamweaver支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员，你可以无需编写任何代码就能快速创建Web页面。其成熟的代码编辑工具更适用于Web开发高级人员的创作！
2、Adobe Edge
Adobe Edge是一个用HTML5、CSS、Java开发动态互动内容的设计工具。它的一个重要功能是web工具包界面，用于方便确保在不同浏览器中架构的一致性，此外，Adobe Edge还将整合TypeKit这样的字体服务。通过Edge设计的内容可以兼容iOS和Android设备，也可以运行在火狐、Chrome、Safari和IE9等主流浏览器上。
3、DevExtreme
DevExtreme Complete Subion是性能最优的HTML5,CSS和Java移动开发框架，可以直接在Visual Studio集成开发环境，构建iOS，Android，Tizen和Windows Phone 8应用程序。DevExtreme包含 PhoneJS 和 ChartJS 两个原生UI组件，并且提供源代码。目前，DevExtreme支持VS2010/2012/2013集成开发环境，兼容Android 4+、iOS5+、Windows 8、Window Phone 8、Tizen五大移动平台，是Visual Studio开发人员开发跨平台移动产品的首选工具。
4、JetBrains WebStorm
WebStorm 是jetbrains公司旗下一款JS开发工具。被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaS IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
5、Sencha Architect
在开发移动和桌面应用的工具中，Sencha的定位是HTML5可视化应用开发。开发团队可以在一个单一集成的环境中完成应用的设计、开发和部署。开发者还可以开发Sencha Touch2和Ext JS4 Java应用，并实时预览。
6、Initializr
Initializr 是制作 HTML5 网站最好的入门辅助开发工具，你可以使用提供的特色模板快速生成网站，也可以自定义，Initializr 会为你生成代码简洁的可定制的网页模板。
7、HTML5demos
想知道你的浏览器是否支持 HTML5 Canvas 吗？想知道 Safari 是否可以运行简单的 HTML5 聊天客户端吗？HTML5demos 会告诉你每一个HTML5特性在哪些浏览器中支持。
8、HTML5 Tracker
想了解 HTML5的最新动向吗? 使用 HTML5 Tracker 吧，它可以跟踪 HTML5 最新修订信息。
9、HTML5 visual cheat sheet
想要快速超找一个标签或者属性吗？看看这个非常酷的速查手册吧，每个Web开发人员的必备。
10、Switch To HTML5
Switch To HTML5 是一个基础而实用的模板生成工具。如果你开始一个新项目，可以到这里获取免费的 HTML5 网站模板。
11、HTML5 Test
你浏览器准备好迎接 HTML5 革命了吗？HTML5 Test 将告诉你。这个网站会为你当前使用的浏览器生成一份对video、audio、canvas等等特性的支持情况的完整报告。
12、Lime JS
LimeJS 是一个 HTML5 游戏开发框架，用于快速构建运行于触屏设备和桌面浏览器的游戏。非常棒的HTML5开发工具，一定要用用试试。
以上就是向大家推荐12款优秀的HTML5开发工具。希望能帮到大家。
web前端需要掌握的哪些知识
一个合格的web前端需要掌握哪些技术？
最基础的自然是JavaScript，HTML和css这三种语言。
首先了解下它们到底是什么。
HTML是用户看到的网页的骨架，比如你会发现当前页面分为左中右三个部分，其中还填充了不同的文字和图片；每个子部分还会继续细分，比如当前页面的中间部分下方有输入框等等。
CSS是网页展示的细节控制，比如你会发现有的文字是红底白色，有的子部分占了页面的二分之一宽，有的只占六分之一，有些部分需要用户进行某些操作（如点击，滑动）才会出现等等，这些就是有CSS来控制。
JavaScript是负责捕捉用户在浏览器上的操作，并与后端服务器进行数据交换的脚本语言。当用户在前端进行点击，输入等操作的时候，会触动绑定了该动作的JavaScript脚本，然后JavaScript收集数据，调用后端的api接口，再将后端返回的数据交给HTML和CSS渲染出来。
一个网页的HTML代码和CSS代码是可以直接在浏览器中查看的，你可以直接按F12，就能看到下图右侧的模块，左右侧红框就是代码与实际页面的对应关系。因此如果你看到某个网站的布局很不错，不妨点击F12，进行学习。
前端框架
然而，实际应用中，已经很少有正规的项目组直接用上述三种语言进行web 前端开发了，而是使用很多封装了这三种语言的框架，比如
Vue.js
，angular，react native等等。它们是来自谷歌和Facebook的大神项目组，基于自己的经验，封装了原生前端语言，实现了更多更复杂更酷炫的功能。因此，可以说，学会使用这些框架，能达到事半功倍的效果。
比如用了vue，它是自底向上增量开发的设计，其核心只关心图层，而且还可以与其他库或已存项目融合，学习门槛极其友好；另一方面，vue可以驱动单文件组件和vue生态系统支持的库开发的复杂单页应用。有了这个生态系统，可以说，vue是处在一个不断壮大，不断完善的欣欣向荣的状态。
网络通信协议
由于前后端分离的趋势，前端还需要了解很多网络通信协议的知识，这里不局限于http协议，因为据我的经验，有时候我们还会用到websocket等协议。因此，前端需要简单了解不同协议的特点以及使用方式，但是好消息是不用像学习计算机网络课程一样对每种协议的原理都了解的特别透彻，只要学会如何用前端语言发送这种协议的请求就够了。
html5 app开发用什么工具
1、Appcelerator
Appcelerator的Titanium开发平台使开发者可以通过HTML、PHP、JavaScript、Ruby、Python等Web编程语言开发手机、平板和桌面的原生App。其优势在于它可以让用户轻松地访问超过300个API以及定位信息。
此外，Appcelerator提供针对特定行为或事件定制的统计。App的数据既可储存在云端，也可储存在设备上。
2、APICloud
APICloud是一款“云端一体”的移动开发平台，信仰“云端一体”的理念，重新定义了移动应用开发。APICloud为开发者从“云”和“端”两个方向提供API，简化移动应用开发技术，让移动应用的开发周期从一个月缩短到7天。APICloud由“云API”和“端API”两部分组成，可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。
3、PhoneGap
PhoneGap是一个免费且开源的开发环境，使开发者可以开发出在Android、Palm、黑莓、iPhone、iTouch及iPad等设备上运行的App。其使用的是HTML和JavaScript等标准的Web开发语言。开发者使用PhoneGap进行开发，可调用加速计、GPS/定位、照相机、声音等功能。
PhoneGap还提供Adobe AIR App以及在线的培训课程，帮助开发者了解原生API并在他们自己的平台上开发移动App。
4、NativeScript
NativeScript是使用移动平台的 JavaScript 引擎来进行跨平台开发。逻辑部分自然无需多说，关键在于如何使用平台特性。NativeScript是通过反射得到所有平台 API，预编译它们，然后将这些 API 注入到 JavaScript 运行环境，接下来在 Javascript 调用后拦截这个调用，并运行 native 代码。NativeScript是使用大量 web 开发的技巧来进行 app 开发，因为工具链和语言都非常熟悉受到了很多前端开发者的欢迎。
5、Kinvey
Kinvey同样是一个为移动应用开发者提供后台创建服务的平台。Kinvey强调加速移动应用开发与销售的“即取即用”理念。Kinvey的中间层与数据层均托管在多个云服务提供商处，包括 Rackspace、Amazon与Microsoft。所有通过Kinvey存储的数据都会有四种方式备份：Amazon EC2、Windows Azure、Rackspace以及Kinvey自己的服务器，假如其中一两个出现了故障，用户的数据依然安然无恙。
HTML5培训：HTML5应用程序的安全风险是什么？
HTML5应用程序的安全风险是内部信息泄漏、针对用户的攻击、恶意跨域请求、第三方有可能被入侵、HTTP头可能被伪造。