⑴ 什么是前端
前端又称Web前端。前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。前端是网页给访问网站的人看的内容和页面。是为了网页或者网页应用,使用HTML,CSS以及JS代码,用户能够看到并且和这些页面进行交流。
前端官方的定义是前端就是网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。也就是前端是网页给访问网站的人看的内容和页面。那前端开发顾名思义就是这些内容和页面中代码的实现。
前端开发的工作职责:
1、使用Div+css并结合Javascript负责产品的前端开发和页面制作。
2、熟悉W3C标准和各主流浏览器在前端开发中的差异,能熟练运用DIV+CSS,提供针对不同浏览器的前端页面解决方案。移动HTML5的性能和其他优化,为用户呈现最好的界面交互体验和最好的性能。
3、负责相关产品的需求以及前端程序的实现,提供合理的前端架构。改进和优化开发工具、开发流程、和开发框架。
4、与产品、后台开发人员保持良好沟通,能快速理解、消化各方需求,并落实为具体的开发工作;能独立完成功能页面的设计与代码编写,配合产品团队完成功能页面的需求调研和分析。
5、了解服务器端的相关工作,在交互体验、产品设计等方面有自己的见解。
⑵ 前端页面是有哪三层构成,作用是
网页分成三个层次,即:结构层、样式层、行为层。
HTML:结构层 网页的结构或内容层是该页面的基础HTML代码。正如房屋的框架为房屋的其他部分构建了一个坚实 的基础,HTML的坚实基础创建了一个可以在其上创建网站的平台。 结构层用于存储客户想要阅读或查看的所有内容。HTML结构可以包含文本和图像,它包括访问者用 于浏览网站的超链接。这是在符合标准的HTML5中编码的,可以包括文本,图像和多媒体(视频,音频等)。 网站内容的每个方面都应该在结构层中表示。这允许关闭JavaScript的客户或无法查看整个网站的 CSS访问权限的客户(如果不是所有功能)。
CSS:样式层 该层指示结构化HTML文档如何看待网站的访问者,并由CSS(层叠样式表)定义。这些文件包含有 关如何在Web浏览器中显示文档的样式说明。样式层通常包括基于屏幕大小和设备更改站点显示的 媒体查询。 网站的所有视觉样式都应位于外部样式表中。您可以使用多个样式表,但请记住,每个CSS文件都需 要HTTP请求才能获取它,从而影响站点性能。
JavaScript:行为层 行为层使网站具有交互性,允许页面响应用户操作或基于一组条件进行更改。JavaScript是行为层最 常用的语言,但CGI和PHP也经常被使用。 当开发人员引用行为层时,大多数都是指在Web浏览器中直接激活的层。您可以使用此图层直接与 DOM(文档对象模型)进行交互。在内容层中编写有效的HTML对于行为层中的DOM交互非常重 要。在构建行为层时,应该像使用CSS一样使用外部脚本文件来优化速度和性能。
⑶ 前端如何提升用户体验
AJAX
看到这里肯定有人忍不住笑出声,的确这已经不算什么新技术,但要让我站在用户的角度来评价网站技术上的变化中给访问者带来最大友好性的一项,我肯定会选AJAX。
记得在我刚刚开始学会上网时候,不管是注册页面还是登录都是我最烦的,那时候网速又不快,打开一个注册页面就要几秒时间,然后从上往下有几十个选项要全部填满,比如其中有一项让我填写“密码保护问题”,这个设计简直让人想吃电脑,因为很多人一看这种问题应该都会和我一样随便写几个数字就提交,然后等几秒加载完网页提示“密码保护问题”不允许有数字,同时之前填写的十几项数据全部清空需要重新再来一遍,再花几分钟写完之后提交又提示不允许有字母,再来一遍,有时候还会提示字符太短太长有空格超时之类,总之如果你第一次注册这种页面,至少要花掉十几分钟,而且还是在重复做一件事。从网站运营者角度来看这也很烦,重复十几分钟填写表单很容易就失去很多潜在用户。
在AJAX的异步请求出现之后,这种情况明显的改善,给用户的体验感最明显。用户并不知道何时已经提交请求,就拿刚才表单的例子来说,如果每填写一项都会在当前表单的最后提示具体错误类型(在用户未点击时已经异步提交了请求并且用返回数据更新部分页面),这就给用户很直观的提示,这种即时的互动让访问者能够很直观的感受到这是一个友好的网站。(当然用javascript也能做到部分表单验证,这只是举一个例子)。在不重新加载整个页面,通过操作DOM来改写小部分数据这点上也能给访问者带来极大的交互感,现在流行的微博就是最好的例子,在发送微博/评论/转发之后用户会发现不用刷新等待整个页面加载,操作之后立刻会有小部分的页面发生变化,虽然看起来微不足道,但对一个访问者来说,这足以让他们欣喜。
网页字体
网站中所有的文字内容表达方式都是通过字体,合理的字体无疑会给用户更好的体验感。在业内来说豆瓣可能是对字体研究最多的一个网站,拿豆瓣读书都来他们用Helvetica和Arial这两种差别非常小的字体,这种非衬线字体很容易让人一目了然同时富有一些科技感,豆瓣本身就是以图片加上简短语句组成,让人能够从字体中快速找到重心是设计的目标所在。
有人担心非衬线用作正文对阅读体验有影响,实际上不难发现国外很多网站都用非衬线字体来处理正文,当然也不排除他们可能考虑的更多是英文。其实我还是非常喜欢非衬线体,它们看起来更富美感,而且如今大量的文字在互联网上比较少见,一些活泼具有现代感的非衬线字体也逐渐被更多的开发者认同而且使用。
除去这些,字体还可以在选择上再细分一些,记得曾经看过一篇统计,不同的字体会影响用户对站点权威性的信赖程度。比方说在一个公司网站上大量使用类似于幼圆、Cursive一类字体,很容易让访问者不信任网站,当然如果是以娱乐为主的网站也不能过于严肃和简朴,在使用时既要考虑到大众用户的接受程度,也要知道自己的网站是什么定位,当然技术性的问题也不能忽略,像是火狐比IE区分sans-serif要更模糊一些,有的字体“O”和“0”、“L”和“1”容易让人难以区分(代码较多的站点需要考虑)等等,这样综合对比选择得到的字体无疑能让网站更有魅力,从而留下更多的用户。顺便一提,在使用字体时注意版权。
加载速度
很多用户在还未见到你出色的设计和内容之前就已经离开了页面,这是因为网站加载时间实在是太长,已使访问者失去耐心。其实很多的访客不关心脚本和图片的加载顺序,他们只要看到网站的整体结构能够迅速的加载出来就可以开始浏览,即便是其他元素逐渐加载也可以接受,基于这点,我们可以使用很多延时加载的方法来使用户更快的见到页面。除此之外还有很多因素可能会对加载速度造成影响,也有逐一优化的办法,这里就不再细述。
结构设计
不知道大家发现没有,近来很多网站都喜欢把菜单fixed在顶部,只要这个菜单选择项不是太多,访客对这样的固定菜单接受程度还是很高的,这只是设计中的一个小例子,相类似的有很多,比如在表单中以深浅颜色区分每一行,以提高可阅读性;在激活窗口时为当前控件添加一个边框,使用户能够更建议的分辨自己在操作哪个窗口等等。很多的设计与排版方式都已经得到了大众认可,可以作为网站设计时的参考。
网站结构设计的好看不好看对访客来说虽然有影响,但也不至于立刻离开,而且即便是非常精致的页面却对用户不怎么友好,想必也不会有多少人愿意访问。
举个例子,以前我用好搜(360搜索)的时候总感觉怪怪的,没有google和网络顺手,研究了一段时间之后才发现好搜的的主页搜索框比网络和google要低一些,Google到顶部固定菜单的距离是286px,网络是192px(未登录238px),而好搜则是328px。相比之下,好搜的搜索框更趋向于屏幕中间,而网络与Google则是在屏幕中上方,对于已经常年习惯了网络和Google搜索的用户来说,想要改变这个习惯来适应好搜多少有些困难,除此之外搜索框还有结果页也有几个问题不一一细述,360这样做无外乎两点,一个是不在乎/不知道/不关心用户体验,一个就是故意有所不同,想要培养自己的用户习惯。(在我看来也不怎么成功)
细节决定成败
乔布斯的父亲是个木匠,曾经教给乔布斯一个理念,就是橱柜的背面里层也要细致处理甚至是打磨光滑,即便用户看不见。在理想主义的伟大试验品“麦金塔”出世之后,有人甚至感叹,就连电路板上的电路图都能当作艺术品,的确如此,乔布斯就曾经开除一个对电路图美学设计不满的员工。一个伟大产品的诞生并不是一蹴而就的,必然经过了长期的沉淀积累与琢磨,但仅此依旧不能称之为伟大,只能算成功。一个产品细节上的最后润色可能才是决定它价值的关键。对于WEB开发者来说,更是如此。
⑷ java后台转发jsp地址到到前端页面的时候,前端页面效果未加载是怎么回事
F12开启调试,检查样式和js是否被正常加载,有没有出现404或者其他问题
⑸ 前端页面有哪三层构成,分别是什么作用是什么
分成:结构层、表示层、行为层。
结构层(structural layer)
由 HTML 或 XHTML之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P标签表达了这样一种语义:“这是一个文本段。”
表示层(presentation layer)
由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。
行为层(behaviorlayer)
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。
⑹ web前端页面有哪三层构成,分别是什么作用是什么
最准确的网页设计思路是把网页分成三个层次,即:结构层、样式层、行为层。
HTML:结构层
网页的结构或内容层是该页面的基础HTML代码。
CSS:样式层
该层指示结构化HTML文档如何看待网站的访问者,并由CSS(层叠样式表)定义。
JavaScript:行为层
行为层使网站具有交互性,允许页面响应用户操作或基于一组条件进行更改
⑺ 前端页面由哪些页面构成,作用是什么
前端页面构成:
结构(HTML)、样式(CSS)、逻辑(JavaScript)
⑻ 前端和后端可不可以都是nginx
nginx只能做数据的转发与传送,一般不用于运行后端的脚本,所以后端一般需要其他的服务器如java用tomcat,然后做一层nginx代理网关
单靠nginx是无法运行java代码
⑼ 小程序前端数据发送到controller层,controller层是什么
controller就是一般MVC架构的控制器层,你可以理解为接口层,它负责处理请求,并发送相应的模型进行处理后以视图返回给前端,具体参照网页链接