知乎网站前端使用了什么技术和框架

2023-02-20 03:26:01html-css012

知乎网站前端使用了什么技术和框架,第1张

web前端分为网页设计师、网页美工、web前端开发工程师

首先网页设计师是对网页的架构、色彩以及网站的整体页面代码负责

网页美工只针对UI这块儿的东西，比如网站是否做的漂亮

web前端开发工程师是负责交互设计的，需要和程序猿进行交互设计的配合。

web前端需要掌握的有脚本技术javascript DIV+CSS现下最流行的页面搭建技术，ajax和jquery以及简单的后端程序等。后端的话可供开发的语言有 asp、php、jsp、.NET 这些后端开发语言的话搭建环境都不一样，具体如果你想学的话看是想从事前端部分还是后端程序部分。后端开发如果有一定的条件的话可以转为软件开发。不过要有一定的语言基础，类似java语言。C#等。关键是看你的兴趣爱好。

这个到后期不会区分这么细，做前端到后期也会懂一些后端的技术，反之，后端也是。

在我们实际的开发过程中，我们当前这样定位前端、后端开发人员。

1）前端开发人员：精通JS，能熟练应用JQuery，懂CSS，能熟练运用这些知识，进行交互效果的开发。

2）后端开发人员：会写Java代码，会写SQL语句，能做简单的数据库设计，会Spring和iBatis，懂一些设计模式等。

现在来看，我们对前后端的要求还是蛮低的，尤其是后端，新员工经过培训之后都是可以参与到后端开发的，没有太高的技术门槛，唯一需要做的就是先变成熟练工种，这个阶段没有涉及到设计模式、架构、效率等一些列问题。

Web前端: 顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

前端、后端的技术要求：

Web前端：

1）精通HTML，能够书写语义合理，结构清晰，易维护的HTML结构。

2）精通CSS，能够还原视觉设计，并兼容业界承认的主流浏览器。

3）熟悉JavaScript，了解ECMAScript基础内容，掌握1~2种js框架，如JQuery

4）对常见的浏览器兼容问题有清晰的理解，并有可靠的解决方案。

5）对性能有一定的要求，了解yahoo的性能优化建议，并可以在项目中有效实施。

6）......

Web后端：

1）精通jsp，servlet，java bean，JMS，EJB，Jdbc，Flex开发，或者对相关的工具、类库以及框架非常熟悉，如Velocity，Spring，Hibernate，iBatis，OSGI等，对Web开发的模式有较深的理解

2）练使用oracle、sqlserver、mysql等常用的数据库系统，对数据库有较强的设计能力

3）熟悉maven项目配置管理工具，熟悉tomcat、jboss等应用服务器，同时对在高并发处理情况下的负载调优有相关经验者优先考虑

4）精通面向对象分析和设计技术，包括设计模式、UML建模等

5）熟悉网络编程，具有设计和开发对外API接口经验和能力，同时具备跨平台的API规范设计以及API高效调用设计能力

6）......

在桌面建立一个index.htm的文件和main.css的文件，当然你也可以不用main.css的文件，但是为了方便操作，还是建一个吧。只要把记事本另存为就可以了。

做好这两个文件后我们把网页的基础代码写上去，并使index文件受到main.css的控制，我们右键选择用记事本打开index文件输入代码，并在head里写上<link href="main.css" type="text/css" rel="stylesheet">使它受到main.css控制

<html>

<head>

</head>

<body>

</body>

</html>

下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的，看上去温馨，我在main.css里写上*{background:#FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的，表示已经受到css样式表的控制了。

下面我们进行布局一般网页都是3层一级，所以我们需要div布局了在body里面写一般我会先分为3层

<html>

<head>

</head>

<body>

</div>

</body>

</html>

布局好后我们需要去定义属性了，这里我只是简单的定义了一下

*{background:#FF33FF}

#top{background:#FFFF99height:1000pxwidth:800pxmargin-left:automargin-right:auto}

#top1{background:#66FFFFheight:50pxwidth:800px}

#top2{background:#FF00CCheight:400pxwidth:800px}

#top3{background:#FF9933height:550pxwidth:800px}

定义好了我们打开预览一下看看，图片是不是居中和分成3块了。当然，颜色只是为了方便看清楚，可以不写。

其实做网页就是不断的画框，只要知道布局和定义属性就可以了，下面我们就整个做一下，因为我的有一些是一样的，可以用class调用，class=baidu这个只是随便写的，你爱等于什么就等于什么

<html>

<head>

</head>

<body>

<div id="top1">这里都是我截图的照片</div>

</div>

</div>

</body>

</html>

下面我们再去定义他的属性，当然我只是简单的定义一下

*{background:#FF33FF}

#top{background:#FFFF99height:1000pxwidth:800pxmargin-left:automargin-right:auto}

#top1{background:#66FFFFheight:50pxwidth:800pxtext-align:centerline-height:50pxfont-size:30px}

#top2{background:#FF00CCheight:400pxwidth:800px}

#top3{background:#FF9933height:550pxwidth:800px}

.baidu{background:#FF6666height:380pxwidth:380pxfloat:leftmargin:10px}

.baidujingyan{background:#FFCC00height:530pxwidth:380pxfloat:leftmargin:10px}

因为我这个是我截图相册的网页，下面我们就放照片吧，这里我偷个懒，把照片都放在桌面了，所以不用连接照片地址了。

<html>

<head>

</head>

<body>

<div id="top1">这里都是我老婆的照片</div>

</div>

</div>

</body>

</html>

如果图片不在同一层目录，就需要连接到图片地址

这样一个网页就做好了，如果需要制作精美的网页，就需要不断的进行div布局和css样式的规定了。

下面我来说说网页制作的定义，网页的制作只要会使用div不停的布局，不停的定义他的属性，基本静态的网页就是这样做出来的

都说前端入门低，想学好前端绝对不容易，可以说现在前端所需要掌握的技能超过后端和以往，新技术概念层出不穷，到底所谓的前端都应该干些什么都应该会写什么呢?

本人身边有太多的人会切几张图, 会用jQuery做个特效, 会从bootstrap里复制粘贴, 会用html游戏框架写个flappy bird, 会在Github里找各种模板自和库拼拼凑凑, 就口口声声大言不惭的称自己为前端工程师. 说什么前端好简单啊, 前端找工作好难啊, 没有出路啊, 想转行啊. 甚至有更多的人还不明白什么是HTML, 就到处问(知乎里尤其多)怎么开始学前端啊, 前端前景好不好啊. 依照本人的经验, 什么东西难不难, 什么东西好不好, 可不是这样问出来的. 我相信在这在这种网络信息资源及其丰富的年代, 花个半小时自行搜索一下你应该可以得到你想要的答案.

好了言归正传, 前端工程师真的是一个无关紧要的职位么? 我们先来看看前端工程师都要做些什么, 看看那些称自己是'所谓'的前端同学们都能走到哪一步.

这里直接跳过最基本的HTML+CSS+JS, 包括但不仅限于:

- HTML各种element怎么用什么时候用?

- Event? EventLitsener? HTML中触发event以及JS中处理event?

- DOM tree? 添加? 修改? 删除? 搜索? 遍历? 选择? children? parent? sibling?

- 什么是window? 什么是document?

- JS基本语法? function? loop&condition? scope&closure? array&object? this?

- CSS 什么是box modal? position? float? 各种选择器(*, >, ~, :nth-child)?

如果看到这里有任何一项完全没听说过没用过, 或者查各种文档后'大概'知道怎么用的同学们, 很遗憾, 你们现在算不上是一个合格的前端工程师. 如果不是, 请继续.

### 程序员的基本素质和知识

(有些人觉得前端不同于传统意义上的程序员, 这点我十分不赞同. 或许把前端工程师叫做JS程序员更加贴切, HTML和CSS就好比其他语言中的UI库)-

- 高数, 基本的概率统计 (连简单的微分方程都不会解的朋友们就不要称自己为前端人员了!)

- 基本数据结构能用JS写出linked list, stack, queue, (binary)tree, graph, hashtable么?

- 基本算法能用JS实现各种search(linear, binary..), 各种sort(bubble, insertion, merge, quick, selection), 以及树的搜索(Breadth First/Depth First)和遍历(3种顺序)么?

- 设计模式知道什么是singleton, factory, strategy, decrator么?

- Git 不要只是停留在把Github当做一个网络储存器的层面上, 知道branch, diff, merge么?

- 基本的英语能力(不要求听说, 只用来读/写文档资料)

- 基本的计算机知识知道位运算, 溢出, thread, lock, concurrency, parallelism么?

- 熟悉unix的基本命令么? 知道ssh public/private key都是干嘛的么?

- 知道正则么? 能够熟练的使用么?

- 能写出详细的注释/文档, 让阅读你代码的人知道你要干嘛么? 能短时间内快速地读懂来自你同事或者其他地方(github, blog)的代码, 知道什么东西应该写在什么地方, 以便迅速地参与其中么?

- 给你一个你从来没有接触过的库/语言, 能能够在较短的时间内在你的代码里正确使用么?

- 有一个得心应手用的熟练地编辑器/IDE么? 不要求大家都是vim/emacs大神, 但也不要做什么都是用鼠标来点.

- 基本的检索查询能力(google, stackoverflow, MDN)

- 单独思考解决问题的能力, 团队合作, 与人相处

如果以上的内容都有所了解(这里不会强调精通), 恭喜你, 你拥有了成为前端工程师的基础知识. 继续.

### 前端专业知识

- 知道什么是AMD, COMMONJS么? 知道call, apply, bind么? 知道JS中foreach, filter, some, every么? 知道怎么实现functional JS(curry等)么?

- 知道各种所谓的高级HTML的API(File, Web Audio, WebSocket)么?

- 知道各种CSS Preprocessors么? 能讲出他们各自的优点和缺点么? 熟悉并且会用其中的一种么?

- 知道各种CSS框架么? 能讲出他们各自的优点和缺点么? 熟悉并且会用其中的一种么?

- 知道canvas, SVG么?

- 知道怎么把你的东西做成responsive, cross-browser support么?

- 知道什么是SEO并且怎么优化么? 知道各种meta data的含义么?

- 知道什么是Ajax, restful, get, post么? 知道怎么和后台交互么?

- 知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能讲出他们各自的优点和缺点么? 熟悉并且会用其中的一种或多种么?

- 知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?

- 知道现在前端一般的工作流程(gulp, grunt, git, svn, npm)么?

- 知道怎么测试代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?

- 知道前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用么?

- 知道npm, V8, node, express, socket么? (这里补充一点, 现在越来越多的公司都采用: '前端网页 ->前端后台 ->后台'这种构架来搭建东西, 也就是说, 前端工程师不仅要做传统前端的网页, 还要写自己的后台, 来跟真正的后台进行交互, 至于前端的后台用什么语言来写, 一般是node/python/ruby, 不太会用到庞大的java, 所以这里我把node列为前端工程师必须要掌握的技能之一) 知道cache, authentication么?

- (如果要用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?

- 另外, 前端这个行业跟传统的c/c++/java程序员还是有一定的差别的. 由于是新兴产业, 所以各种行业标准, 框架, 库会随时随地的产生和更新 (作为一个c程序员, 十年前怎么写东西现在还是怎么写东西). 今天出了node和react, 明天又出了io和mean. 所以, 积极关注各种前端产品, 跟上变化的节奏, 也是身为一个前端程序员必备的技能之一. 知道ECMAScript 6里怎么写class么? 知道react, flux, reflux么? 知道polymer, dart么? 知道meteor么?

以上是摘自知乎某大牛的文章=====

感觉对新人挺打击的，不过理清从大体上重新认识前端对学习理解也有一定帮助，只要自己想好了就坚持下去，学前端的最重要的随时学习能力，应该前端领域知识面涵盖太广，很多技术也不成熟，正在发展中，只能不停学习各种新技术新知识。。能分辨哪些技术是必须掌握的，哪些是少数人创造用来提”升逼格“的概念，能把PS+HTML+CSS+js玩熟，会一两个框架，懂点设计。就可以了

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：如何使用电脑控制手机

# 下一篇：使用JavaScript，如何生成汉字验证码？