×

web前端用什么语言 网页开发 前端

前端网页开发需要学习什么语言?hr如何面试web前端工程师,该问哪些技术问题

admin admin 发表于2022-05-25 08:58:14 浏览146 评论0

抢沙发发表评论

前端网页开发需要学习什么语言


目前的前端开发主要运用到的是三大基本语言,HTML,CSS及JavaScript,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。目前看来。论趋势如何发展,它们都是整个前端开发的三大基石。

1,HTML是网页的核心,是一种制作网页页面的标准语言,可以消除不同计算机之间信息交流的障碍。因此,它是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言,学好HTML是成为Web开发人员的基本条件。HTML是一种标记语言,能够实现Web页面并在浏览器中显示。

2,CSS是用来进行网页风格设计,页面制作完成当然需要美化,这时候就会用到CSS,它可以网页外观做得更加美观。

3,JavaScript主要目的是为了解决服务器端语言,为客户提供更流畅的浏览效果。加入JavaScript,是为了提供了数据验证的基本功能。

除了三大基本语言,还要运用到的有其他的框架如:Angular,React,Ajax,bootstrap,LESS等

前端的知识范围很广泛,学习起来也相对有更多困难。不过,你要相信你自己,只要努力学,就一定能做到。


hr如何面试web前端工程师,该问哪些技术问题


一、基本知识

  我们生活在互联网时代,你想知道的任何事情几乎都能在15分钟内找到相关信息。可是,能找到信息并不等于你会使用它。我认为所有前端工程师至少都应 该掌握某些基本的知识,才能有效地完成自己的工作。如果一遇到问题,就停下工作上网四处搜索解决方案,怎么可能保证按期完成工作呢?听听,还有谁在说“我 不知道,但我可以上网搜到。”请这些同学把手举起来,让大家认识一下(immediately raises a flag for me.)。下面我列出一些基本的知识点,这些都是我认为一名前端工程师(无论工作年头长短)在没有任何外来帮助的情况应该知道的。
  [list][*]
  DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
  [*]
  DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
  [*]
  事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
  [*]
  XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
  [*]
  严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。
  [*]
  盒模型——外边距、内边距和边框之间的关系,IE 8以下版本的浏览器中的盒模型有什么不同。
  [*]
  块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
  [*]
  浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
  [*]
  HTML与XHTML——二者有什么区别,你觉得应该使用哪一个并说出理由。
  [*]
  JSON——它是什么、为什么应该使用它、到底该怎么使用它,说出实现细节来。
  [/list]
  重申一下,上述这些知识点都应该是你应该“想都不用想”的东西。我一开始问的所有问题都是想摸清你对所有这些领域知识的掌握程度。虽然上面列出的这些知识点并没有面面俱到,但我觉得你至少应该掌握这些,才有可能跟我坐到一间办公室里来。

二、少量提问

  我非常赞同面试者问的问题越少越好。反复问应聘者各种问题既不公平,也很无聊。我在任何一次面试中,通常只问三个大问题,但每个问题又会涉及我所能想到的多个方面。回答每个大问题一般要经过几个步骤,这样我就可以在每个步骤中穿插着问一些小问题。比如说:

  现在有一个正显示着Yahoo!股票价格的页面。页面上有一个按钮,你可以单击它来刷新价格,但不会重新加载页面。请你描述一下实现这个功能的过程,假设服务器会负责准备好正确的股票价格数据。

  这个问题牵扯到一组我想要考察的基本知识点:DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你对换一种处理股票价格的方式,或者 让你在页面中显示其他信息,就可以把更多的知识点包括进来。对于经验比较丰富应聘者,我也可以自如地扩展要考察的知识范围,最简单像JOSN与XML的区 别、安全问题、容量问题,等等。
  我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的代码,你就当页面中没有包含任何库。你说你对哪个库了解多少多少,但我不能把 关于库的知识作为评判能力的因素,因为库是会随时间变化的。我需要的是真正理解库背后的机制,特别是能够徒手写出一个自己的库的人。

三、解决问题

  做为一名前端工程师,最值得高兴的事莫过于解决同一个问题会有很多种不同的方法,而你要做的就是找出最合适的方法来。我在提问的时候,经常会在应聘 者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说,假设你的这个方法由于种种原因被否决了,那么你还能不能给出另一种方法。这样做可以达到 两个目的。
  首先,可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认,某些人确实有过目不忘的天赋,听他们在那里滔滔不绝地讲,你会觉得他们什么都 明白。可是,只要一跟这些人谈到怎么查找方案无效的原因,以及能否拿出一个新方案来,他们往往就傻眼了。这时候,如果我听到“我不明白这个方案为什么不够 好”之类的反问,心里立刻就明白我的问题已经超出了他们的能力范围,而他们只是想拿自己死记硬背的结论来蒙混过关。
  其次,可以测试出他们已经掌握的(还是那句话,“想都不用想”)浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解,想出解决同一问题的不同方案根本没有那么难。
  对一名前端工程师来说,这绝对是最重要的能力。前端工程师在工作中遇到本该如此却并未如此的难题(说你啦,IE6),应该说是一件很平常的事。一个方案无效就无计可施的人,做不了前端工程师。
  考核应聘者解决问题能力的另一层原因,与我的个人喜好有关。在搞清楚应聘者知道什么不知道什么之后,我就会想着问一个他们知识领域之外的问题。这样 做的目的,就是想看看他们怎样运用已有的知识解决新问题。在解决问题的每一步,我也准备了一些提示,以防有人会卡壳打艮(在我面前15分钟一言不发,对我 评价这个人毫无帮助)。我真正感兴趣的,是他们能够从上一步前进到下一步。我希望看到一个人就在我眼前学到新知识。
  注意:所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题,就能够考出某人解决Web技术问题的能力。在我看来,这无异于让素描大师画肖像(或者让刘翔跟博尔特同场竞技),没有意义,也得不到任何有价值的信息。
  
-网页开发

如何利用weui作为前端来开发


先引用样式文件. 请在github上下载对应的文件.
下载地址为: 3次未审核, 搜索吧.

下载之后的目录结构为:
dist : 编译之后的目录, 里面的文件可以直接使用
src : 源码目录

可以打开dist下example目录, 这个是官方的例子文件. 里面比较全的基本使用方法.

打开example目录下的index.html 就可以看到官方的例子了.
这里需要说明一下, 这个官方使用的zepto.js框架. 这个框架更加适用移动端.

开始使用, 如果使用呢? 第一步先把css文件引用到页面中.
《link rel=“stylesheet“ type=“text/css“ href=“路径地址“ /》
然后, 就可以使用官方的样式了. 首先来说明一下button.
使用方法:class=“weui_btn weui_btn_primary“
其中属性有:
weui_btn weui_btn_primary
weui_btn weui_btn_warn
weui_btn weui_btn_default
三种, 如果你想扩展, 直接增加响应的样式就可以了.

Tab使用:
tab包含两种: navbar 和 tabbar
使用方法.
navbar :
《div class=“weui_tab“》
《div class=“weui_navbar“》
《div class=“weui_navbar_item weui_bar_item_on“》 选项一《/div》
《div class=“weui_navbar_item“》 选项二 《/div》
《div class=“weui_navbar_item“》选项三 《/div》
《/div》
《div class=“weui_tab_bd“》《/div》
《/div》
weui_bar_item_on 为选中项
tabbar:
《div class=“weui_tabbar“》
《a href=“javascript:;“ class=“weui_tabbar_item weui_bar_item_on“》
《div class=“weui_tabbar_icon“》
《img src=“./images/icon_nav_button.png“ alt=““》
《/div》
《p class=“weui_tabbar_label“》微信《/p》
《/a》
《a href=“javascript:;“ class=“weui_tabbar_item“》
《div class=“weui_tabbar_icon“》
《img src=“./images/icon_nav_msg.png“ alt=““》
《/div》
《p class=“weui_tabbar_label“》通讯录《/p》
《/a》
《a href=“javascript:;“ class=“weui_tabbar_item“》
《div class=“weui_tabbar_icon“》
《img src=“./images/icon_nav_article.png“ alt=““》
《/div》
《p class=“weui_tabbar_label“》发现《/p》
《/a》
《a href=“javascript:;“ class=“weui_tabbar_item“》
《div class=“weui_tabbar_icon“》
《img src=“./images/icon_nav_cell.png“ alt=““》
《/div》
《p class=“weui_tabbar_label“》我《/p》
《/a》
《/div》
图片来自官方例子中的素材.

Toast
弹出层: 一个是弹出提示数据.
《div id=“toast“》
《div class=“weui_mask_transparent“》《/div》
《div class=“weui_toast“》
《i class=“weui_icon_toast“》《/i》
《p class=“weui_toast_content“》已完成《/p》
《/div》
《/div》
使用$(’#toast’).show();进行显示数据.

searchBar搜索框
简单的搜索, 搜索世界的大不同, 不是所有的网站都可以

图标的使用.
《i class=“weui_icon_msg weui_icon_success“》《/i》
《i class=“weui_icon_msg weui_icon_info“》《/i》
《i class=“weui_icon_msg weui_icon_warn“》《/i》
《i class=“weui_icon_msg weui_icon_waiting“》《/i》
《i class=“weui_icon_safe weui_icon_safe_success“》《/i》
《i class=“weui_icon_safe weui_icon_safe_warn“》《/i》

Panel的使用
《div class=“weui_panel weui_panel_access“》
《div class=“weui_panel_hd“》图文组合列表《/div》
《div class=“weui_panel_bd“》
《a href=“javascript:void(0);“ class=“weui_media_box weui_media_appmsg“》
《div class=“weui_media_hd“》
《img class=“weui_media_appmsg_thumb“ src=““ alt=““》
《/div》
《div class=“weui_media_bd“》
《h4 class=“weui_media_title“》标题一《/h4》
《p class=“weui_media_desc“》由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。《/p》
《/div》
《/a》
《a href=“javascript:void(0);“ class=“weui_media_box weui_media_appmsg“》
《div class=“weui_media_hd“》
《img class=“weui_media_appmsg_thumb“ src=““ alt=““》
《/div》
《div class=“weui_media_bd“》
《h4 class=“weui_media_title“》标题二《/h4》
《p class=“weui_media_desc“》由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。《/p》
《/div》
《/a》
《/div》
《a class=“weui_panel_ft“ href=“javascript:void(0);“》查看更多《/a》
《/div》

图片里面没有填写地址, 请您自己填写信息.
-前端