Web前端面试题总结（day5）

1. HTML5提供两种新对象，通过javascript API 来储存本地数据，这两种对象是：localStorage 和sessionStorage

2.    text-transform:capitalize是首字母大写

     text-transfrom:lowercase是全部字母为小写

     text-transfrom:uppercase是全部字母为大写

      font-weight: bold;字体为粗体

3. 元素分类

4. background-attachment  （有三个值）

        scroll是默认值，背景图像会随着页面其余部分的滚动而移动。  

        fixed当页面的其余部分滚动时，背景图像不会移动。  

        inherit规定应该从父元素继承 background-attachment 属性的设置。

      background-origin

       属性规定 background-position 属性相对于什么位置来定位。

       background-clip 

         属性规定背景的绘制区域。

5.CSS样式如下：

  语法：

   text-decoration : none || underline|| blink || overline|| line-through

     none :  无装饰

     blink :  闪烁

     underline :  下划线

     line-through :  贯穿线

      overline :  上划线

6.    font-style设置字体风格

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。（该字体有斜体样式时使用）
oblique	浏览器会显示一个倾斜的字体样式。（该字体无斜体样式时使用，使正常文字倾斜）
inherit	规定应该从父元素继承字体样式。

       font-weight设置字体粗细。

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

7. 浏览器 的内核引擎，基本上是四分天下：

   1）Trident: IE 以Trident 作为内核引擎；

   2)Gecko: Firefox 是基于 Gecko 开发；

   3）WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器；

   4）Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台--Opera mini

    注：2013年2月Opera宣布转向WebKit引擎

    注：2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎

8. input属于窗体元素，层级显示比flash、其他元素都高。这句话是错误的。

     在html中，帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。

     表单元素包括：文本输入框，密码输入框，单选框，复选框，文本输入域，列表框等等；

     非表单元素包括：连接（a），div,table,span等。

     所有的html元素又可以根据其显示分成两类：有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。

     有窗口元素包括：select元素，object元素，以及frames元素等等。

     无窗口元素：大部分html元素都是无窗口元素。

9. css样式，Block Element 此元素能够达到最大宽度，且前后各有一个换行

      块级元素block element 、行内元素 inline element、行内块元素 inline-block element

10. display属性

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

   display属性 :

   block :　CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行   可以定义高度和宽度

   none :　CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间

   inline :　CSS1 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行

   inline-block :　IE5.5 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行     内inherit: 看display默认是不具备继承性的，使用inherit可以让其继承父对象的display属性。

11.HTML5中常用的新特性：

    canvas元素：用于定义图形（图表等），只是图形容器，必须使用脚本来绘制图形。

    audio：用于音频播放。

    video：用于视频播放。

    article：规定独立的自包含内容。

    header：定义文档的页眉，介绍相关信息。

    section：定义文档中的节。

    footer：定义文档的页脚，通常有文档的作者、版权信息、联系方式等。

    nav：定义导航链接。

    表单控件：  calender     date     time     email     url

12. HTML5中，组合标题元素

         

13. 运行在后台的JavaScript程序，不会影响页面的性能。是Web Worker

     web Worker 本质是一个线程，在UI主线程之外并发执行的线程，主要解决耗时的JS任务。

     首先了解浏览器的线程模型是怎样的？

     程序：计算机可以执行的代码，存在磁盘中 --- 这是静止的（比如这是买的一块地皮）；

     进程：把 程序 调入到内存中，等待被CPU执行 --- 这是活动的（这是在地皮上建起来的几个工厂）；

     线程：是CPU执行 进程 代码的基本单位 --- 相当于生产任务(这是在工厂中进行生产的生产线)；

     而 进程 与 线程 的关系是：进程是操作系统分配内存的基本单位，线程处于进程内部，是CPU执行代码的基本单位，一个进       程中至少有一个线程，也可以有多个（就比如在一个工程内，可以有一条生产线，也可以有多条生产线），多个线程间并发         执行，从宏观上看是‘同时’执行，微观上看是‘轮流’执行。

     拿chrome中的线程模型举例

     1.chrome 中发起HTTP请求最多可以使用6个并发线程；

     2.而负责向页面中执行绘制任务(HTML/CSS/JS/事件处理代码)的只有1个线程 --- UI主线程，如果碰到耗时的代码就有问题           了，解决的办法：创建一个新的线程，去执行耗时的JS任务 -- 与UI主线程并发执行

     Worker 线程的缺点：浏览器禁止Worker线程操作任何BOM 和 DOM对象，不能使用Worder加载类似jQuery.js文件。

14. 列表嵌套

   <ul>               <ol>                   <dl>

    <li> </li>           <li></li>               <dt></dt>

   </ul>              </ol>                   <dd></dd> 

                                           </dl>

15.关于btn标签的说法

  .btn-group该class用于形成基本的按钮组；（可以嵌套使用）

  .btn-toolbar该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的     组件。

   btn-group-lg, .btn-group-sm, .btn-group-xs  这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调      整。

16.下列关于比较Ajax与Flash的优缺点，相关描述正确的是？（ABCD）

   A. Ajax的优势在意在于开放性，易用性及易于开发

   B. Flash的优势在于多媒体处理，可以更容易的调用浏览器以外的外部资源

   C. Ajax最主要的批评就是它可能破坏浏览器的后退功能

   D. flash文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间

    1.Ajax的优势：1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发。

     2.Flash的优势：1.多媒体处理 2.兼容性 3.矢量图形 4.客户端资源调度

     3.Ajax的劣势：1.它可能破坏浏览器的后退功能   2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中 ，不过       这些都有相关方法解决。

     4.Flash的劣势：1.二进制格式 2.格式私有 3.flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间  4.性能         问题

Ajax的优势

可搜索性 
普通的文本网页会更有利于SEO。文本内容是搜索引擎容易检索的，而繁琐的swf字节码却是搜索引擎不愿触及的。虽然Google等一些大型的搜索引擎可以检索SWF内部的内容，但是仍然有很多麻烦存在。

开放性 
Flash常年以来被Macromedia看的很死。包括Flex、FMS等辅佐技术一直都需要昂贵的安装、维护费用。而JS则没有这样的麻烦。没有人愿意承担法律和版权的风险。

费用 
Flash开发是很昂贵的，因为FlashIDE等环境都是要收费的．而Ajax则不同．虽然有一些便宜的生成swf的工具，但是他们的工能实在无法满足复杂需求。

易用性 
Ajax程序有更好的易用性。由于中间有一层Flashplayer代理层，因此许多辅助功能无法被Flash灵活利用。而且Flash在一些方面有着不好的口碑。比如弹出广告、比如恶意代码。
（awflasher.com个人认为这八成是乱上xx网站造成的）

易于开发 
人们开发复杂的Ajax和Flash应用程序时，都会借助一些高级的开发工具。普遍来说，Ajax的开发包比Flash简便、容易。

Flash的优势 
多媒体处理 
Flash在音频、视频等多媒体领域相比HTML有绝对的优势。现在几乎所有的网站都包含有Flash内容。

兼容性 
兼容性好：由于通过了唯一的FlashPlayer“代理”。人们不必像调试JS那样，在不同的浏览器中调试程序。

矢量图型 
这是Flash最大的优势，同样处在这一领域的SVG、Canvas element以及Direct完全不能与Flash相比。

客户端资源调度 
Flash能够更容易的调用浏览器以外的外部资源。比如摄像头、麦克风等。然而这是普通的HTML无法完成的。但是这也许是一个缺点

17.元素

1. 块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。   
2. 如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了 查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快 速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。   
3. 你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。.   
4. 内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。   
5. 块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属 性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。   
6. 可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。   
7. 关于inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。   
8. 块元素(block element)   
9. * address - 地址   
10. * blockquote - 块引用   
11. * center - 举中对齐块   
12. * dir - 目录列表   
13. * div - 常用块级容易，也是css layout的主要标签   
14. * dl - 定义列表   
15. * fieldset - form控制组   
16. * form - 交互表单   
17. * h1 - 大标题   
18. * h2 - 副标题   
19. * h3 - 3级标题   
20. * h4 - 4级标题   
21. * h5 - 5级标题   
22. * h6 - 6级标题   
23. * hr - 水平分隔线   
24. * isindex - input prompt   
25. * menu - 菜单列表   
26. * noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容   
27. * noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）   
28. * ol - 排序表单   
29. * p - 段落   
30. * pre - 格式化文本   
31. * table - 表格   
32. * ul - 非排序列表   
33. 内联元素(inline element)   
34. * a - 锚点   
35. * abbr - 缩写   
36. * acronym - 首字   
37. * b - 粗体(不推荐)   
38. * bdo - bidi override   
39. * big - 大字体   
40. * br - 换行   
41. * cite - 引用   
42. * code - 计算机代码(在引用源码的时候需要)   
43. * dfn - 定义字段   
44. * em - 强调   
45. * font - 字体设定(不推荐)   
46. * i - 斜体   
47. * img - 图片   
48. * input - 输入框   
49. * kbd - 定义键盘文本   
50. * label - 表格标签   
51. * q - 短引用   
52. * s - 中划线(不推荐)   
53. * samp - 定义范例计算机代码   
54. * select - 项目选择   
55. * small - 小字体文本   
56. * span - 常用内联容器，定义文本内区块   
57. * strike - 中划线   
58. * strong - 粗体强调   
59. * sub - 下标   
60. * sup - 上标   
61. * textarea - 多行文本输入框   
62. * tt - 电传文本   
63. * u - 下划线   
64. * var - 定义变量   

18.CSS中可以和不可以继承的属性

一、无继承性的属性

1、display：规定元素应该生成的框的类型

2、文本属性：

vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向

3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性：content、counter-reset、counter-increment

7、轮廓样式属性：outline-style、outline-width、outline-color、outline

8、页面样式属性：size、page-break-before、page-break-after

9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

 

二、有继承性的属性

1、字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

3、元素可见性：visibility

4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性：quotes

7、光标属性：cursor

8、页面样式属性：page、page-break-inside、windows、orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

 

三、所有元素可以继承的属性

1、元素可见性：visibility

2、光标属性：cursor

 

四、内联元素可以继承的属性

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

 

五、块级元素可以继承的属性

1、text-indent、text-align

 19.在bootstrap中为了在input两侧添加额外元素

     1.使用input-group来封装控件

     2.使用input-group-addon来添加前置元素

     3.必须为input添加form-control类

20. 关于web表单登录中用到的图形验证码的实现，以下做法不正确的有：（ABD）

   A.返回给浏览器的html代码中包含图形验证码和文本字符串，登录前客户端判断输入内容和页面中保存的内容是否一致

   B.服务器端在返回的图片和cookie中同时包含图形验证码，登录前客户端判断输入内容和cookie保存的内容是否一致

   C.服务器端生成验证码后一方面通过图片将验证码返回给客户端，同时在服务器端保存文本的验证码，由服务器端验证输入内      容是否正确

   D.浏览器通过识别图形验证码中的内容和用户输入的内容判断是否一致

 

   A B选项都把正确的验证码文本放在了客户端，这是违背了验证码的初衷的。爬虫或者是恶意程序依旧可以通过各种手段获取      你嵌入在html文本或者保存在cookie中的正确验证码文本，模拟表单提交来达到攻击的目的。

  D选项更是无稽之谈。

  C选项才是正确的实现方式，发送到客户端的只有图片形式的验证码，服务器端保存cookie对应的图形验证码的正确文本。客       户端表单提交时到服务器端验证。