你的位置:首页 > 软件开发 > 网页设计 > 前端知识梳理1

前端知识梳理1

发布时间:2015-03-13 16:00:32
前段时间专心整理一下关于前端的面试问题。感谢耐心尽责的楷豪和闻东师兄最近给我们的指导和建议。大家可以通过这些问题,大家可以顺便看以下自己的水平。https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree ...

前段时间专心整理一下关于前端的面试问题。感谢耐心尽责的楷豪和闻东师兄最近给我们的指导和建议。大家可以通过这些问题,大家可以顺便看以下自己的水平。

https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese

 

我也利用课余时间(三天没安排课程的下午晚上)尝试写下自己的答案,水平有限,望体谅。

暂时只提供上半部分,下半部关于js和jQuery的还有部分答案未完全确认,稍后再发布。

 

  • 你在昨天/本周学到了什么?

   这段事件一直在整理有关前端的面试题目,整理这也题目,不只是为了能够学习应付即将到来的面试,更是为了补补基础知识。日常项目开发进度太快了,很多属性或者方法用了就忘,这样会造成另外一个隐患,因为基本知识不够扎实,常用的方法用得不够熟练,就很难高效率地开发项目。

  有了扎实的基础知识,才能其期盼自己走得更远。

  1)知道W3C的标准,于是在编写html时候会规避“标签不闭合,乱嵌套,大小写混杂”可能造成不同浏览器展示不一致的隐患。

  2)知道了CSS的“层叠”规则,整理并且对比了清楚浮动和实现居中的方法,还发现了一些不常用属性。于是,有利于日后高效地编写样式表。

  等等,等等

 

  • 编写代码的哪些方面能够使你兴奋或感兴趣?

  编写代码最让我兴奋的是学习新的技术,尝试新的视觉效果的过程。

  例如topview招新网站上,考虑到日后页面上由于丰富的交互和功能,脚本文件较大。虽然一般浏览器对文件有异步加载功能,但是这些文件指的是图片视频样式表等,不包含脚本,也就是说当加载脚本的时候会造成堵塞,脚本的加载会堵塞页面上的图片加载,也就是说因为脚本文件过大,用户可能需要等待较长的事件。当页面内部的脚本等基本元素没加载完毕,当时样式和结构已经加载完后,css3动画出现,四个小球流畅地旋转滚动直到脚本完全加载完毕。

  前端本身就是一个美好有趣的领域。对于众多的网站或者系统来说,后台提供的功能才是核心模块,但是关乎网站或者系统是否能够持续地吸引用户的眼球,能否在同样类型的产品中脱颖而出,也许前端的交互是否人性化和性能是否稳定高效占了绝大多数因素。良好的用户体验,给他们积极高效的用户体验,甚至改变大众的生活方式,这正是我当初学习编程的初衷。

(面试官也许会问得:是怎么实现这个效果的或者关于用户体验方面你还做过哪些努力,没关系,我认真做了准备。甚至要对比一下css3过渡和动画的区别,鉴于篇幅有限,关于css3的具体使用就不在这里列举,用户体验方面的答案,下面会做回答。)

前端知识梳理1
//用git 把Git 项目仓库克隆到本地,以便日后随时更新:$ git clone git://git.kernel.org/pub/scm/git/git.git//git add 命令告诉Git 开始对这些文件进行跟踪,然后提交:$ git add filenme.html//每次准备提交前,先用git status 看下,是不是都已暂存起来了,然后再运行提交命令$ git commit -m 'initial project version'// 把本地仓库提交到远程仓库的master分支中$ git push origin master 
前端知识梳理1

 

 

前端知识梳理1  8)推广宣传 。不断宣传,提高网站的访问率和知名度。推广的方法有很多,例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。
  9)维护更新 。网站要注意经常维护更新内容,保持内容的新鲜,不要一做好就放在那儿不变了,只有不断地给它补充新的内容,才能够吸引住浏览者 
  (具体还需要集合我的实际经验:http://www.cnblogs.com/0603ljx/p/4284521.html)解决方法:使用LINK标签将样式表放在文档HEAD中更多

 

  • 请尽可能完整得描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程

  1)用户输入网址

  2)浏览器通过DNS获取网站的IP地址

  3)浏览器尝试与服务器建立连接

  4)服务器发送永久重定向

  5)浏览器跟踪从定向地址

  7)服务器处理请求

  8)服务器发送HTML响应

  9)浏览器开始显示HTML

  10)浏览器发送获取嵌套在html中的元素

    关于页面渲染过程:

    1)解析HTML代码,生成一棵DOM树

    2)解析CSS文件

    3)生成渲染树(受样式影响,包含不可见元素)

    4)渲染树中的节点

 HTML相关问题:

  • doctype(文档类型)的作用是什么?

    位于html标签最前面,告诉浏览器以那种html和xhtml规范。分为标准模式和怪异模式、基于框架的HTML模式。假如浏览器不以doctype标准模式编写DTD,页面除了无法通过代码检验之外,还无法在浏览器中正确显示。

  a.如果需要干净的标记,免于表现层的混乱,用XHTML Strict DTD类型。

  b.Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果用户使用了不支持层叠样式表(CSS)的浏览器以至于你不得不使用 HTML 的呈现特性时,用Transitional DTD 类型。

  c.Frameset DTD 被用于带有框架的文档。除 frameset 元素取代了 body 元素之外,Frameset DTD 等同于 Transitional DTD

  • 浏览器标准模式和怪异模式之间的区别是什么?

    当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一目的,他们创建了两种呈现模式,标准和混杂模式。在标准模式中,浏览器会根据规范呈现页面;在混杂模式中。页面会以一种相对宽松的向后兼容方式显示。混杂模式常用于模拟老式浏览器的行为,以防止老站点无法工作。

    他们最大的不同是对盒模型的解析。

  如:在strict mode中 :width是内容宽度 ,也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +  margin-right;

    在quirks mode中 :width则是元素的实际宽度 ,内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width +  border-right-width)

    使用 document.compatMode来判断浏览器的解析方式。

 

  • 使用 XHTML 的局限有哪些?
xhtml要求严格:放弃了一些语义不好的标签,必须有head、body,每个dom必须要闭合。一些老的浏览器并不兼容。
  • 如果页面使用 'application/xhtml+

      为contentType属性值,IE不支持application/xhtml+

  • 如果网页内容需要支持多语言,你会怎么做?

    使用统一的UTF-8编码

  • 在设计和开发多语言网站时,有哪些问题你必须要考虑?

     1)制图时,应该讲图形的图像层与文本层分离,这样在重新绘制改图形时只需对文本进行翻译。

     2)设置控件属性应考虑到各种语言版本的文本显示,尽可能为翻译预留足够的空间。同时也应该保持不同语言界面的统一性,避免过多的差异。

     3)编码注意代码复用,将多个模块的共用信息存放在共通的文件中便于全局管理。

 

  • data-属性的作用是什么?

    data-是HTML5为前端开发者提供自定义的属性,这些属性集可以通过对象的dataset属性获取,不支持该属性的浏览器可以通过 getAttribute方法获取。

  • 如果把 HTML5 看作做一个开放平台,那它的构建模块有哪些?
    1)Web Storage API  2)cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
Web Storage带来的好处:浏览器本地存储与服务器端存储之间的区别其实数据既可以在浏览器本地存储,也可以在服务器端存储。
  • 请描述一下 GET 和 POST 的区别?

     

  get是从服务器上获取数据,post是向服务器传送数据。

  get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程

  get形式的url对搜索引擎更加友好,可以提高搜索引擎排名。Post使用的url有时候会阻止爬虫和搜索引擎的访问。其他网站和用户可以链接到get形式的url,无论用户的访问,还是搜索引擎的收录而相应提高了页面排名,能够直接或间接提高网站浏览。同时,get形式的url这种表示法是可以缓存的,显著提升了客户端和服务端的性能

  而不安全操作,如确定订购、下订单、达成协议和删除页面等,应该通过post执行,避免没有显式用户请求和同一的情况下发生意外的操作。例如搜索引擎删除整个页面,只因为抓取了一个链接。很多不希望用户浏览器遵循页面链接的各种完整,这些情况下,应该要求用户登录并且足够的权限才能执行某些危险操作。

  若符合下列任一情况,则用POST方法:

    * 请求的结果有持续性的副作用,例如,数据库内添加新的数据行。

    * 若使用GET方法,则表单上收集的数据可能让URL过长。

    * 要传送的数据不是采用7位的ASCII编码。

  若符合下列任一情况,则用GET方法:

    * 请求是为了查找资源,HTML表单数据仅用来帮助搜索。

    * 请求结果无持续性的副作用。

    * 收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。

    (目测还会问到“同步和异步的区别?”

      同步:脚本会停留并等待服务器发送回复然后再继续提交请求->等待服务器处理->处理完毕返回,这个期间客户端浏览器不能干任何事

      异步:脚本允许页面继续其进程并处理可能的回复请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕

        若要在使用ajax请求后处理发送请求返回的结果,最好使用同步请求。

 

CSS 相关问题:

  • CSS 中类(classes)和 ID 的区别。  
   在样式表定义一个样式的时候,可以定义id也可以定义class。    1、在CSS文件里书写时,ID加前缀"#";CLASS用"."    2、id一个页面只可以使用一次;class可以多次引用。    3、ID是一个标签,用于区分不同的结构和内容,就象名字,如果一个屋子有2个人同名,就会出现混淆;class是一个样式,可以套在任何结构和内容上,就象一件衣服;    4、从概念上说就是不一样的:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。

    目前的浏览器还都允许用多个相同ID,一般情况下也能正常显示,不过当你需要用JavaScript通过id来控制div时就会出现错误。

h2 {   background:url(hello_world.gif) no-repeat;   width: 150px;   height: 35px; } span {  display: none; } 
前端知识梳理1

代码非常明白:先将图片应用在 H2 的背景中,然后将 SPAN 的标签隐藏。但是这种方式有个问题,就是当图片无法显示时,将导致这个区域没有任何内容。同时,使用 display:none 的方式隐藏的内容,将被许多主流屏幕阅读器忽略,从而造成可用性问题,因此,应该尽量避免使用。

Phark 的方法

 <h2> Hello World </h2>
 h2 {  text-indent: -5000px;  background:url(hello_world.gif) no-repeat;  width: 150px;height:35px; } 
 h2 {  width: 150px;height: 35px;  position: relative; } h2 span {  background: url(hello_world.gif) no-repeat;   position: absolute;   width: 100%;   height: 100%; }
前端知识梳理1

首先,将 H2 的 position 设为 relative ,这样将使 H2 里面的元素定位以 H2 为参照,然后将 SPAN 元素绝对定位,撑满整个 H2 区域,同时将背景图应用在 SPAN 标签里面;这种方法的原理是将 SPAN 标签覆盖在文字内容上面,一旦 SPAN 里面的背景图无法显示,将显示下层的文字内容,不影响正常使用。但是,此方法也有一个缺陷,就是背景图不能透明,否则将透出下面的文字。

  • 讨论CSS hacks,条件引用或者其他。

   hacks  

  _width针对于ie6。*width,+width针对于ie6,7。

  color: red\9;/*IE8以及以下版本浏览器*/(但是测试可以兼容到ie10。

  *+html与*html是IE特有的标签, firefox暂不支持.而*+html又为IE7特有标签(但是测试*html兼容ie6-10。*+兼容ie7-10)。

  !important 在IE中会被忽视,ie6,7,8不识别,ie9+(包括ie9)是识别的。

  条件引用

前端知识梳理1
var myLinks = document.getElementsByTagName('a');for(var i = 0; i < myLinks.length; i++){  myLinks[i].addEventListener(’touchstart’, function()  {

    先把所有 class 中有 lol233 的元素拿出来组成一个集合,然后上一层,对每一个集合中的元素,如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上,从这个元素的父元素开始向上找,没有找到一个 tagName 为 body 且 class 中有 ready 的元素,就把原来的元素从集合中删去。  至此这个选择器匹配结束,所有还在集合中的元素满足。  大体就是这样,不过浏览器还会有一些奇怪的优化。为什么从后往前匹配因为效率和文档流的解析方向。

    1)效率,找元素的父亲和之前的兄弟比遍历所有儿子快而且方便。

    2)关于文档流的解析方向,是因为现在的 CSS,一个元素只要确定了这个元素在文档流之前出现过的所有元素,就能确定他的匹配情况。应用在即使 html 没有载入完成,浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。  为什么是用集合主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运用,遍历每一条 CSS Rule 通过集合筛选,比遍历每一个元素再遍历每一条 Rule 匹配要快得多。

  • 解释一下你对盒模型的理解,以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。 

    网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模式都具备这些属性。   

    每个盒子都有:边界、边框、填充、内容四个属性;

    每个属性都包括四个部分:上、右、下、左;这四部分可同时设置,也可分别设置;

  • 请解释一下 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处?    

    说到 IE 的 bug,在 IE6以前的版本中,IE对盒模型的解析出现一些问题,跟其它浏览器不同,将 border 与 padding 都包含在 width 之内。而另外一些浏览器则与它相反,是不包括border和padding的。对于IE浏览器,当我们设置 box-sizing: content-box; 时,浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准,当它定义width和height时,它的宽度不包括border和padding;对于非IE浏览器,当我们设置box-sizing: border-box; 时,浏览器对盒模型的解释与 IE6之前的版本相同,当它定义width和height时,border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负,必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。

  使用 * { box-sizing: border-box; }能够统一IE和非IE浏览器之间的差异。

  • 请罗列出你所知道的 display 属性的全部值

   display 属性规定元素应该生成的框的类型。

  前端知识梳理1

  • 请解释一下 inline 和 inline-block,block 的区别?

   都是display 属性规定元素应该生成的框的类型。但是block代表块级元素,元素前后都有换行符;inline是默认的样式,表示该元素被显示为内联元素,元素前后没有换行符号。也就是说,block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。而inline-block代表行内块元素(css2.0新增)。

display:block

  1)block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。

  2)block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

  3)block元素可以设置margin和padding属性。

display:inline

  1)inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

  2)inline元素设置width,height属性无效。

  3)inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

  简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

  •  请解释一下 relative、fixed、absolute 和 static 元素的区别

   

在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果。今天研究了一下,总算有所了解。在此总结一下:

先看下各个属性值的定义:

1、static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

2、relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。

3、absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

static与fixed的定位方式较好理解,在此不做分析。下面对应用的较多的relative和absolute进行分析:

1、relative。定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在。

黄色背景的层定位为relative,红色边框区域为其在正常流中的位置。在通过top、left对其定位后,从灰色背景层的位置可以看出其正常位置依然存在。

2、absolute。定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在。在将黄色背景层定位为absolute后,灰色背景层自动补上。

3、relative与absolute的主要区别:

首先,是上面已经提到过的在正常流中的位置存在与否。

其次,relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式。红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute。红色背景层依然定义top:20px;left:20px;但其相对 的元素变为定位方式为absolute或relative的黄色背景层。因此,对于absolute定位的层总是相对于其最近的定义为absolute或 relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位。

除top、left、right、bottom定位外,margin属性值的定义也符合上述规则。

 

static与定位用的比较少,也比较简单,在此不做分析。

原标题:前端知识梳理1

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。