我知道的前端开发

FE俗称前端,是区别服务端开发的一个新的开发类职位,但目前随着FE自身能力的一些完善,以及Node.js的流行,现在一些服务端的一些需求也放在前端来开发,对应的语言可能是PHP,Node.js,Python,Ruby等,这就是所谓的大前端,与之相对应的后端开发跟倾向于对性能要求比较高的C,C++的开发。拿百度地图的业务架构来说,诸如检索,定位等一些基础服务是作为后端来开发的,而具体到各个产品线是上面提到的一些后端语言再与前端语言(CSS,JS)进行配合,对应测产品线诸如百度地图PC版,Webapp(手机浏览器打开百度地图)以及百度地图客户端一些更新比较频繁的一些页面。

FE需要做的东西很多,不仅仅说吧UE给的UE图切出来就OK了,当然这也是前端很重要的一部分,因为你不仅需要实现UE图效果,还要兼容各种浏览器,不仅需要功能完整,还要兼顾性能,任何一方面都不能却是。具体来说,前端需要掌握的知识有:
1)HTML
熟悉html各种标签及属性的含义,并能够合理使用html标签(html语义化);熟悉常见的几种DocType,并能够理解这些差异给页面布局所带来的变化;html5有哪些新的标签,又是怎么运用的。
2)CSS
相较于html来说,CSS更像一门语言,特别是Sass和Less等对CSS拓展之后,或者可以说是设计师的一中布局语言。作为一门语言,需要掌握的知识点要比html多出很多。面试中常常问到工作中也常常用到的一点就是盒子模型,盒子模型的分类,盒子模型的一些细节性的知识,比如标准流下两个定宽且在一行的div,当左边的div有一个左margin,右边div有一个右margin,两个div外边框之间的距离是多少,当量div是上下相邻是有怎样,如果对两元素加了float又如何;如果学习的比较深入的话要搞清楚clientHeigh和scrollHeight的区别,offsetTop和clientHeight的关系又如何;网页的一些常见布局也需要熟悉,比如要做一个左边定宽右边自适应你会运用哪种技术选型,是用float,绝对定位还是其他,各种技术选型之间有什么优势和劣势;再一个就是CSS所代表的含义,不是说说出Cascading
Style
Sheets就算完事了,它的Cascading体现在什么方面,它的继承又指什么,html的哪些属性是可以继承的;CSS选择器的权重又是如何划分的,!importent又处在一个什么样的位置;CSS引入到页面中的方式有哪几种,3种方式又有怎样的不同;position,absolute等常用的一些属性有哪些,他们常见的属性值都有什么,各属性值都代表什么含义;还有一块非常重要的内容就是页面的兼容,你需要深刻认识各属性的涵义,熟悉一些常见的hack;最后还有很多常见的技巧性东西,比如reset.css包含哪些内容,clearfix又代表什么意思,css的一些属性的简写规则是怎样的,一个元素挂两个class他们的覆盖关系是怎样的等等等等

鉴于时间关系,先介绍到这里,明天会梳理一下Javascript的脉络及常见知识点并给大家介绍下JS中非常重要的一块内容Javascript作用域链。。。。

水平有限 疏漏之处还请指教

我知道的前端开发,布布扣,bubuko.com

时间: 2024-11-08 08:33:09

我知道的前端开发的相关文章

7招提升你的前端开发效率

7招提升你的前端开发效率 前言 前端工程师其实是一个工作很杂的职位,除了要负责切图.写html/css/js外,还要解决一系列的浏览器兼容性.网页性能优化等问题,所以提高前端工程师的开发效率是势在必行的,也是前端工程化的体现. 对于开发效率,我个人理解是 开发效率 = 新增代码的效率 + 修改代码的效率 + 维护代码的效率 那么如何提高前端开发效率便可以按照前端工程化的理念来进行划分.下面我就介绍下7个提高前端开发效率的方法. 前端工程化 方法 1.切图 切图是一个前端最基础的技能,一般我们使用

前端开发笔记(2)css基础(上)

CSS介绍 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力. <style type="text/css"> span{ color:red;

Web 前端开发学习之路(入门篇)

字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.== 以下引用知乎 @李路 的话. 以我的经验,大部分技术,熟读下列四类书籍即可. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive Guide/Programming xx系列实践,结合

互联网前端开发技术栈

互联网前端开发技术栈 前言 互联网建立60多年了,网站开发技术日新月异,但web前端始终离不开浏览器,最终还是HTML+JavaScript+CSS这3个核心,围绕这3个核心而开发出来大量技术框架/解决方案. 我从2000年初开始做网站开发,使用的技术不断迭代,一些消失了,更多的出现了. 最近写过  .NET技术大系概览 (迄今为止最全的.NET技术栈) ,相信很多网友感叹掌握的.NET技术远没有这个技术栈里面所描述的多. 问题 大家是否想过: Web前端开发究竟包含哪些技术呢? 我所掌握的技术

《开源分享1》:前端开发必备《Html-CSS中文手册》

一直想做一些优秀的资源分享内容,今天尝试整理了一下,以后会每天抽点时间发一些自认为不错的资料出来.帮助大家提高学习效率. 今天分享的内容:前端开发:<Html-CSS中文手册>! 本手册针对的是已有一定网页设计制作经验的读者.其目的是提供完整清晰的样式表内容的快速索引及进阶帮助.所以对于网页制作和样式表的基础知识,仅简单介绍,恕不赘述. 手册提供了完整的 CSS2.0 的属性(Properties).规则(At-Rules).伪类(Pseudo-Classes).伪元素(Pseudo-Elem

购物车前端开发

作为一名不在软件公司工作的软件工程师,不仅要会写后台代码(PHP/JAVA/SQL...),还是兼顾前端工程师的工作(html/javascript/css...).下面就来分享一个在实际工作项目中使用到的购物车的前端开发. 这里分享的仅仅是针对购物车的操作(产品数量的增加减少,删除购物车中产品项),假设购物车中已经放有若干产品.闲话少说,先上两张效果图. HTML代码如下:这里使用到了JQuery1.11和bootstrap3 . <!DOCTYPE html> <html> &

腾讯web前端开发工程师笔试题及答案

1. 如何实现事件委托? 首先要知道什么是事件委托. 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少遇到这么多li的情况),为每个li添加事件侦听就会对页面性能产生很大的影响. 就像下面这段代码: <!DOCTYPE HTML><html><head><meta charset="utf-8" /><ti

前端开发神器WebStorm--Grunt 搭建环境(03)

通过上一篇前端开发神器WebStorm--自动化工作流(前言),相信大家都Grunt自动化工具有了初步了解. 接下来我就以WROC3000 web为原型,演示一下如何使用Grunt工具提高工作效率,最大程度压缩代码. 1.首先安装node环境 进入官网 下载安装.(记住安装目录) 检测安装成功方法:打开CMD窗口,输入 node --version 会打印出安装的版本号,说明已经安装成功. 2.安装 Grunt 客户端 在CMD 窗口中,切换到node安装盘符,会自动切换到nodejs安装目录.

掌握这两个技术点,你可以玩转AppCan前端开发

"AppCan的前端开发其实非常简单,只要掌握两方面的技术即可.一方面是会使用栅格布局完成UI的界面排版,另外一方面就是使用AppCan MVVM模型来完成整个页面构造和用户操作逻辑." 在2016AppCan移动开发者大会的技术脱口秀环节, AppCan技术副总监陈雪分享了自己从事AppCan技术开发的经验,帮助开发者深入了解AppCan技术思路. 以下为完整精彩内容: 栅格布局 AppCan采用弹性盒子模型作为标准化的的栅格布局参考方案,帮助开发者更快速的完成界面的排版工作.为什么

web前端开发规范

本文原创,这里首先声明,转载注明本文出处,翻版必究! web前端开发规范的现实意义 1.提高团队的协作能力 2.提高代码的重复利用率 3.可以写出质量更高,效率更好的代码 4.为后期维护提供更好的支持 5.可读性高 一.命名规则 1.html命名规则: a.文件名称命名规则:统一使用小写英文字母.数字.下划线的组合,不得包含汉字空格和特殊字符 2.命名原则:方便理解.方便查找 b.索引文件命名原则:index.html.index.htm.index.asp.index.aspx.index.j