[关闭]
@gpzjyw 2016-11-16T11:47:27.000000Z 字数 13587 阅读 683

HTML and CSS Makeup

Interview Front-End

1. HTML

市面上主流浏览器的内核是什么

浏览器内核作用

主要分成两部分：渲染引擎（Layout Engine 或 Rendering Engine）和JavaScript引擎。

HTML head头标签的作用

DOCTYPE
告知浏览器文档使用哪种 HTML 或 XHTML 规范。（告诉浏览器按照何种规范解析页面）
<!DOCTYPE html>

charset
声明文档使用的字符编码
<meta charset="utf-8">

lang属性
性规定元素内容的语言
<html lang="en">

meta
提供有关页面的元信息（meta-information）
必需属性：content
可选属性：http-equiv，name，acheme

viewport
让布局在移动浏览器上显示的更好
<meta name="viewport" content="width=device-width, initial-scale=1.0">

favicon icon
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />

移动端的meta
参见此文

XML、XSLT、XHTML、HTML、HTML5 的关系和区别

XML：Extensible Markup Language，可扩展标记语言

XSLT：XSL(Extensible Stylesheet Language，扩展样式表语言)转换

XHTML：EXtensible HyperText Markup Language，可扩展超文本标签语言

HTML：Hyper Text Markup Language，超文本标记语言

HTML5：

描述一下渐进增强和优雅降级之间的不同

渐进增强 progressive enhancement
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

为什么利用多个域名来存储网站资源会更有效

谈一下你对网页标准和标准制定机构重要性的理解

网页标准是标准制定机构是为了能让web发展的更“健康”，降低开成难度和开发成本，开发者不必花许多精力在解决浏览器兼容性问题方面。

Web Storage是HTML5提供的本地存储技术，sessionStorage和localStorage是其的两个实例：

本地存储技术对比：

本地存储 区别与对比
cookie 大小受限；每次请求新页面时都会发送cookie（带宽）；需要指定作用域，不可跨域调用
Web Storage 更大的本地存储技术；以键值对的形式存储数据；不会自动在请求页面时发送
indexedDB 在本地存储结构化的数据，并在此基础上提供高性能的索引API
Flash Adobe Flash Player

session：会话控制
session实现：通过客户端的本地存储 session id，访问页面时发送 session id 实现

cookie隔离技术

使用非主要域名来请求css，js，图片等静态文件，只有在访问主要域名的时候才会带上cookie

域名收敛与域名发散

简述src与href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
<script src ="js.js"></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href ="common.css" rel ="stylesheet"/>
那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

网页制作中的常用图片格式有哪些

常规格式：png-8, png-24, jpeg, gif, svg。
WebP：谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积只有jpeg的2/3，能节省大量服务器带宽资源和数据空间。

在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理

dns缓存，cdn缓存，浏览器缓存，服务器缓存。

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

如何理解HTML结构的语义化

script标签中设置async和defer的作用

常规script标签：立即加载脚本并执行。同步进行，阻塞文档解析。

async：HTML5中属性，该属性规定一旦脚本可用，则异步执行。内联脚本无效。
异步加载脚本，加载完成后异步执行。完全不考虑脚本之间的依赖，多个脚本可能会乱序执行

defer：该属性规定是否对脚本执行进行延迟，
先异步加载，在文档元素解析完成之后执行。

HTML的模板语言有哪些

HTML检查工具

HTML Tidy。

canvas和svg的区别

Segmentfault参考资料

canvas：

svg：

区别：
使用canvas绘制图形是通过调用其API，而svg则是通过构建一棵XML元素树来实现的

canvas svg
依赖分辨率 不依赖分辨率
不支持事件处理器 支持事件处理器
弱的文本渲染能力 最适合带有大型渲染区域的应用程序（谷歌地图）
能够以.png或.jpg格式保存结果图像 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘 不适合游戏应用

HTML5离线储存的工作原理

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

工作原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

iframe的缺点

如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上问题。

如何实现浏览器内多个标签页之间的通信

调用localstorge、cookies等本地存储方式。

重排和重绘

DOM树：表示页面结构；
渲染树：表示DOM节点如何显示；
重排：重新构造渲染树；
重绘：完成重排后，浏览器重新绘制受影响的部分到屏幕。

重排何时发生

什么是freemarker

参考博客

语法参考

后端模块引擎，文件名一般为 XXXX.ftl。

后端负责解析 freemarker 文件，完成数据填充，渲染出html，发送至浏览器端。

语法为在html的基础上增加了可编程的部分。

可通过js直接访问的DOM

document对象：document

head标签：document.head

body标签：document.body

表单集合：document.forms

表单字段集合：document.forms[0].elements

iframe标签：document.iframe

2. CSS

盒模型

W3C盒模型（标准）：width = 内容宽度，高度同理。

IE盒模型：width = 内容宽度 + border宽度 + padding宽度，高度同理。

CSS3属性box-sizing允许选择何种盒模型：content-box（W3C）和border-box（IE）
通过设置DOCTYPE，使IE以遵循标准兼容模式运行。

font和background简写中各个属性的顺序

font : font-style font-variant font-weight font-size/line-height font-family
background : background-color background-position background-size background-repeat background-origin background-clip background-attachment background-image

z-index是如何实现层叠上下文的

W3C规范

同一stacking context内的定位元素通过比较z-index大小确定层叠关系；

z-index不为0或auto的时候，会创建一个新的stacking context；

只适用于定位元素（设置position属性为非static值）。

CSS文件精灵（CSS sprites）

将一些小型图片结合一张图片，以设置元素background属性将图片插入到元素中。

CSS3动画原理

动画使元素从一种样式逐渐变化为另一种样式的效果。

相关的CSS3属性：

标准模式(strict mode)和怪异模式(quirks mode)

这是浏览器解析CSS的两种模式。

标准模式：浏览器按W3C标准解析执行代码

怪异模式：是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称为怪异模式。

通过设定DTD(文档类型定义，Document Type Definition)来规定以何种模式解析执行代码。即HTML中的DOCTYPE

CSS中的100%如何判断

CSS中属性值100%为相对单位。以width:100%为例：

CSS中隐藏元素的方法有几种

display:none：
元素在页面上彻底消失，元素本来占有的空间会被其他元素占用，将导致浏览器的重排和重绘。

visibility:hidden：
元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。

opacity:0：
透明度设置为0。

设置height，width等盒模型属性为0：

{
    margin:0;
    border:0;
    padding:0;
    height:0;
    width:0;
    overflow:hidden;
}

rgba()和opacity的透明效果有什么不同

opacity作用于元素，以及元素内的所有内容的透明度。

rgba()只作用于元素的颜色或其背景色，设置rgba透明的元素的子元素不会继承透明效果。

CSS的可继承样式和不可继承样式

可继承样式：font-size font-family color, UL LI DL DD DT；

不可继承样式：border padding margin width height；

CSS选择器有哪些？以及它们的使用场景

基本选择器：

扩展选择器：

什么是CSS Hack

针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

IE6的Hack方式：_property: value；
IE6、7的Hack方式：*property: value；

描述一下浮动的原理和工作方式

浮动元素脱离普通流（normal flow），不占据空间。浮动元素碰到包含框或者其它浮动元素的边框停留。

浮动会产生什么影响？要怎么处理？

浮动元素脱离正常文档流。会造成包含框高度塌陷问题。

如何防止高度塌陷

清除浮动（闭合浮动）：

.clear:after {
    content:"·";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

使父容器形成BFC/hasLayout：

BFC(Block formatting contexts)，块级格式化上下文。IE6/7不支持。以下情况创建新的BFC：

hasLayout，hasLayout=true效果和BFC效果类似，以下情况会令hasLayout=true：

天生的inline-block元素有哪些

<input>、<img> 、<button> 、<texterea> 、<label>。

关于letter-spacing的妙用有哪些

Sass、Less是什么

他们是CSS预处理器，是CSS上的一种抽象层。

例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算，函数。LESS既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

什么是CSS预处理器？

CSS预处理器定义了一种新的语言将Css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容，变量，结构体等功能，代码更加简洁易于维护。

为什么要使用它们？

div+css的布局较table布局有什么优点？

栅格系统是什么

栅格系统（grid systems），以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。维基百科。

CSS框架是什么？有哪些

CSS框架是一系列CSS文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块，用于简化web前端开发的工作，提高工作效率。维基百科

常用CSS框架：Bootstrap，YUI Grids CSS，NEC。

CSS框架开发顺序：

CSS3的新增特性

纯CSS创建一个三角形

把上、左、右三条边隐藏掉（颜色设为transparent）

#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

包含块

参考文献

每个元素的定位都受到包含块的影响。

3. 整体布局

在布局中，以下三种技术被经常使用：

这是实现布局的三个最基本的原子技术，只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。

你了解哪些布局

经典三列布局

又叫作圣杯布局（Holy Grail of Layouts），是Kevin Cornell 在2006年提出的一个布局模型概念，它的布局要求有以下几点：

圣杯布局主要依靠浮动元素实现，通过设置左右边栏的外边距为负数，实现了定位。HTML和CSS代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>圣杯布局</title>
  6.     <style type="text/css">
  7.         body {
  8.             min-width: 550px;       /* 2x left width + right width */
  9.         }
  10.         /*** 中间三列的CSS属性 ***/
  11.         #container {
  12.             padding-left: 200px;    /* left width */
  13.             padding-right: 150px;   /* right width */
  14.         }
  15.         #container .column {
  16.             position: relative;
  17.             float: left;
  18.         }
  19.         #center {
  20.             width: 100%;
  21.         }
  22.         #left {
  23.             width: 200px;           /* left width */
  24.             right: 200px;           /* left width */
  25.             margin-left: -100%;
  26.         }
  27.         #right {
  28.             width: 150px;           /* right width */
  29.             margin-right: -150px;   /* right width */
  30.         }
  31.         /*** 清除浮动 ***/
  32.         #footer {
  33.             clear: both;
  34.         }
  35.         /*** IE6 Fix ***/
  36.         * html #left {
  37.             left: 150px;            /* right width */
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div id="header">This is header! </div>
  44.     <!-- container内，center在前，left、right在后，保证中间栏优先渲染 -->
  45.     <div id="container">
  46.         <div id="center" class="column">This is center! </div>
  47.         <div id="left" class="column">This is left! </div>
  48.         <div id="right" class="column">This is right! </div>
  49.     </div>
  51.     <div id="footer">This is footer! </div>
  52. </body>
  53. </html>

改进版本：

双飞翼布局

在圣杯布局的基础上，改良的布局方式。如果把三栏布局比作一只大鸟，可以把center看成是鸟的身体，left和right则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。

center中内容部分嵌套了单独的div元素，html结构如下所示：

  1. <div id="container">
  2.     <div id="center" class="column">
  3.         <div id="center-content">This is center! </div>
  4.     </div>
  5.     <div id="left" class="column">This is left! </div>
  6.     <div id="right" class="column">This is right! </div>
  7. </div>

通过修改CSS代码，可以灵活实现各种布局方式，一程度上实现了HTML结构和CSS布局的解耦。如这套栅格化布局系统。

瀑布流

4. 解决方案

网页如何适配Retina屏幕

  1. #logo {
  2.   background: url(pic.png) 0 0 no-repeat;
  3.   background-image: -webkit-image-set(url(pic.png) 1x, url(pic@2x.png) 2x);
  4.   background-image: -moz-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x);
  5.   background-image: -ms-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x);
  6.   background-image: -o-image-set(url(url(pic.png) 1x,url(images/pic@2x.png) 2x);
  7. }
  1. @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  2. only screen and(min--moz-device-pixel-ratio: 1.5), /* 注意这里的写法比较特殊 */
  3. only screen and (-o-min-device-pixel-ratio: 3/2),
  4. only screen and (min-device-pixel-ratio: 1.5) {
  5.   #logo {
  6.     background-image: url(pic@2x.png);
  7.     background-size: 100px auto;
  8.   }
  9. }

IE6/7下的一些CSS兼容问题及解决方案

参考自NEC。

IE6绝对定位位置错误

在IE6中，绝对定位元素的参照物没有触发haslayout，则绝对定位元素的left和bottom就会有问题；
解决方案：在参照物中设置zoom:1来触发IE的haslayout；

IE6/7定位元素溢出不动

普通容器中的相对定位元素溢出，拖动容器的垂直和水平滚动条时，该相对定位元素不会移动；
解决方案：设置容器的CSS属性为positon:relative

IE6绝对定位1像素偏差

参照物的宽高为奇数时，绝对定位元素设置了位置为0或100%时，仍会有1px空隙；
解决方案：设为偶数；

IE6定位元素消失

绝对定位元素在浮动元素标签的前后消失。
解决方案：

IE6浮动双边距

元素设置了float属性，同时又设置了margin-left或margin-right，margin值会加倍；
解决方案：在float的元素中加入_display:inline；

IE6浮动3像素空隙

浮动元素与其他元素之间存在3px的空隙；
解决方案：设置浮动元素_margin-right:-3px或_margin-left:-3px；

IE6/7表单元素偏离

某些表单元素在父元素上触发haslayout之后，表单元素会以祖先元素上的margin-left值偏离；
解决方案：在父元素内外在嵌套一个触发haslayout的元素；

IE6/7图片链接无效

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注