面试宝典（一）

第1阶段WEB前端A：HTML&CSS基础

1. 前端页面有哪三层构成，分别是什么？作用是什么?

1. 结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面”内容是什么”的问题。
2. 表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。
3. 行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。

1. 请简述盒模型

1. IE6盒子模型与W3C盒子模型
2. 文档中的每个元素被描绘为矩形盒子。盒子有四个边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content
3. CSS3中有个box-sizing属性可以控制盒子的计算方式
4. content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。（W3C盒子模型）
5. border-box：padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值。（IE6盒子模型）

1. <img>标签上title属性与alt属性的区别是什么？

  a. alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短, 这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等
  b. title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息

1. 简述一下src与href的区别
   1.  src用于替换当前元素
   2. href用于在当前文档和引用资源之间确立联系
   3. src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
   4. href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接  
2. 请阐述table的缺点

a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量
  b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
  c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
  d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱
  e. 不够语义

1. iframe的优缺点

优点：
     a. 解决加载缓慢的第三方内容如图标和广告等的加载问题
     b.  iframe无刷新文件上传
     c. iframe跨域通信
缺点：
d. iframe会阻塞主页面的Onload事件
     e. 无法被一些搜索引擎索引到
     f. 页面会增加服务器的http请求
     g. 会产生很多页面，不容易管理

1. html5有哪些新特性、移除了那些元素？（扩展）

新特性：
     a. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加
     b. 拖拽释放(Drag and drop) API
     c. 语义化更好的内容标签（header,nav,footer,aside,article,section）
     d. 音频、视频API(audio,video)
     e. 画布(Canvas) API
     f. 地理(Geolocation) API
     g. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
     h. sessionStorage 的数据在页面会话结束时会被清除
     i. 表单控件，calendar、date、time、email、url、search
     j. 新的技术webworker, websocket等
移除的元素：
k. 纯表现的元素：basefont，big，center, s，strike，tt，u
     l. 对可用性产生负面影响的元素：frame，frameset，noframes

1. 谈谈你对CSS布局的理解

a. 固定布局
  b. 流式布局
  c. 弹性布局
  d. 浮动布局
  e. 定位布局
  f. margin和padding

1. 述CSS样式表继承

a. CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素，会被继承下去的属性：
      b.文本相关：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color
      c. 列表相关：list-style-image，list-style-position，list-style-type， list-style

1. 请简述CSS的选择器

a. 元素选择器：* 、E、 E#id、 E.class
  b. 关系选择器：E、F、E>F、E+F、E~F
  c. 属性选择器：E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"]
   d. 伪类选择器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等
   e. 伪对象选择器：E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection

1. CSS中 link 和@import 的区别是什么？

a. link属于HTML标签，而@import是CSS提供的，且只能加载 CSS
   b. 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
   c.  import只在IE5以上才能识别，而link是HTML标签，无兼容问题
   d. link方式的样式的权重 高于@import的权重
   e. 当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制
   f. 合理的标签使用

1. line-height三种赋值方式有何区别？（带单位、纯数字、百分比）

a.带单位：px不用计算，em则会使元素以其父元素font-size值为参考来计算自己的行高  

b. 纯数字：把比例传递给后代，例如父级行高为1.5，子元素字体为18px，则子元素行高为1.5*18=27px
    c. 百分比：将计算后的值传递给后代
    d. 付费给搜索引擎
    e. 链接交换和链接广泛度（Link Popularity）
    f. 合理的标签使用

1. 有哪几项方式可以对一个DOM设置它的CSS样式？

a. 外部样式表：通过<link>标签引入一个外部css文件
      b. 内部样式表：将css代码放在<style>标签内部
      c. 内联样式：将css样式直接定义在 HTML 元素内部

1. 请列举几种可以清除浮动的方法（至少两种）

注解：浮动会漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是这种特性，导致框内部由于不存在其他普通流元素了，表现出高度为0（高度塌陷）

a. 添加额外标签，例如<div style="clear:both"></div>
      b. 使用br标签和其自身的html属性，例如<br clear="all" />
      c. 父元素设置 overflow：hidden；在IE6中还需要触发hasLayout，例如zoom：1
      d. 父元素设置 overflow：auto 属性；同样IE6需要触发hasLayout
      e. 父元素也设置浮动
      f. 父元素设置display:table
g. 使用:after 伪元素；由于IE6-7不支持:after，使用 zoom:1触发 hasLayout

1. 请列举几种隐藏元素的方法

a. visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在
      b.  opacity: 0；一个CSS3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果。与visibility相比，它可以被transition和animate
      c. position: absolute；使元素脱离文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外
      d. display: none；元素会变得不可见，并且不会再占用文档的空间
      e. transform: scale(0)；将一个元素设置为无限小，这个元素将不可见。这个元素原来所在的位置将被保留            sigeiyao
      f. HTML5 hidden attribute；hidden属性的效果和display:none;相同，这个属性用于记录一个元素的状态
      g. height: 0; overflow: hidden；将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框，该技术就可以正常工作
      h. filter: blur(0)；将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

1. 解释下 CSS sprites原理，优缺点

原理：
   a. CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
优点：
   b. 减少网页的http请求
   c. 减少图片的字节
   d. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名
   e. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变
缺点：
   f. 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂
g. CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置
   h. 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片

1. HTML与XHTML——二者有什么区别？

a. XHTML 元素必须被正确地嵌套

b. XHTML 元素必须被关闭

c. 标签名必须用小写字母

d. XHTML 文档必须拥有根元素

1. 你知道多少种Doctype文档类型？

a. 标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档

b. HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset

c. XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset

d. Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页

e. Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页

1. Doctype作用? 严格模式与混杂模式如何区分？它们有何意义? 以及如何触发这2种模式?

a. 声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档

b. 严格模式的排版和 JS 运作模式是，以该浏览器支持的最高标准运行

c. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作

d. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

e. 触发严格模式是在Html前申明正确的DTD

f. 触发混杂模式是在Html文档开始不声明DTD，或者在DOCTYPE前加入XML声明

1. 请说说你对标签语义化的理解？

   a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重

c. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页

d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化

1. 谈谈以前端角度出发做好SEO（搜索引擎优化）需要考虑什么？

a. 了解搜索引擎如何抓取网页和如何索引网页

b. meta标签优化

c. 关键词分析

d. 付费给搜索引擎

e. 链接交换和链接广泛度（Link Popularity）

f. 合理的标签使用

1.  谈谈你对前端性能优化的理解

a. 请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域

b. 请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体

c. 缓存利用：使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存

d. 页面结构：将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出

e. 代码校验：避免CSS表达式，避免重定向

1. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验[性能优化]

a. 图片懒加载，滚动到相应位置才加载图片

b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载

c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话

d. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验

1.  讲讲输入完网址按下回车，到看到网页这个过程中发生了什么？

a. 域名解析

b. 发起TCP的3次握手

c. 建立TCP连接后发起http请求

d. 服务器端响应http请求，浏览器得到html代码

e. 浏览器解析html代码，并请求html代码中的资源

f. 浏览器对页面进行渲染呈现给用户

1.  http常见状态码有哪些?

1. 2开头状态码；2xx (成功)表示成功处理了请求的状态代码；如：200 (成功) 服务器已成功处理了请求。
2. 3开头状态码；3xx (重定向) 表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。如：304 (未修改) 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容
3. 4开头状态码；4xx(请求错误) 这些状态代码表示请求可能出错，妨碍了服务器的处理；如：400 (错误请求) 服务器不理解请求的语法；403 (禁止) 服务器拒绝请求。404 (未找到) 服务器找不到请求的网页。
4. 5开头状态码；5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错；如：500 (服务器内部错误) 服务器遇到错误，无法完成请求

1. 列举IE与其他浏览器不一样的特性?

a. IE的排版引擎是Trident （又称为MSHTML）

b. Trident内核曾经几乎与W3C标准脱节（2005年）

c. Trident内核的大量 Bug等安全性问题没有得到及时解决

d. JS方面，有很多独立的方法，例如绑定事件的attachEvent、创建事件的createEventObject等

e. CSS方面，也有自己独有的处理方式，例如设置透明，低版本IE中使用滤镜的方式

1. 浏览器的内核分别是什么?

a. Mozilla的Gecko

b. Chrome的Blink（WebKit的分支）

c. Opera内核原为Presto，现为Blink

d. IE浏览器的内核Trident