关于面试题的几点失误的总结

写作缘由
CSS中的颜色缩写
CSS颜色表示方法
Javascript中的字符串的处理
Javascript中的轮播图
- 轮播图
- 选项卡

写作缘由

今天做了一个前端的基础面试题，虽然简单，但是还是有好几个地方，虽然写出来感觉很low，但是总结才能进步！

CSS中的颜色缩写

这个考点是颜色值缩写，是最基础的知识，但是给了一个#393939的CSS Color HEX 颜色表示方式，问能不能缩写？可以缩写成什么样，可能平时疏忽了，犹豫了一会儿，选了一个#393。

反正感觉是错的，知识记得不牢固吧，回来试了一下，证实了我是异想天开。

16进制的颜色能缩写的并不多

只有形如#FFFFFF可以缩写成#FFF；
或者当设置颜色为16进制的色彩值（6位），若每两位的指相同，可以缩写一半,#FF0000可以缩写成#F00:

这个是搞清楚了，顺便补一下关于颜色的表示方法：

CSS颜色表示方法

颜色是通过对红、绿和蓝光的组合来显示的。

CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0（十六进制 00）。最高值是 255（十六进制 FF）。

可以用以下方法来规定 CSS 中的颜色： 1. 十六进制色 2. RGB 颜色 3. RGBA 颜色 4. HSL 颜色 5. HSLA 颜色 6. 预定义/跨浏览器颜色名

十六进制

所有浏览器都支持十六进制颜色值。十六进制值使用三个双位数来编写，并以 # 符号开头。
十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
比如：#0000ff 值显示为蓝色，这是因为蓝色成分被设置为最高值（ff），而其他成分被设置为 0。

RGB颜色

所有浏览器都支持 RGB 颜色值。
RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。
比如，rgb(0,0,255) 值显示为蓝色，这是因为 blue 参数被设置为最高值（255），而其他被设置为 0。
同样地，下面的值定义了相同的颜色：rgb(0,0,255) 和 rgb(0%,0%,100%)。

RGBA颜色

RGBA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
注意RGBA和opacity是有区别的

HSL 颜色

HSL 颜色值得到以下浏览器的支持：IE9+、Firefox、Chrome、Safari 以及 Opera 10+。
HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度） - 表示颜色柱面坐标表示法。
HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。
Hue 是色盘上的度数（从 0 到 360） - 0 (或 360) 是红色，120 是绿色，240 是蓝色。Saturation 是百分比值；0% 意味着灰色，而 100% 是全彩。Lightness 同样是百分比值；0% 是黑色，100% 是白色。

HSLA 颜色

HSLA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
HSLA 颜色值是 HSL 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
HSLA 颜色值是这样规定的：hsla(hue, saturation, lightness, alpha)，其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

关于预定义的这里不讨论。还有就是英文表示法也是接受的，但是只有147种，再说记忆是一个巨大的问题。

Javascript中的字符串的处理

这个题目是让截取字符串，简单的没话说，但是记错了，方法记混了。对于引用类型的数据的那些原生方法记得不牢固。

这里说一下截取字符串。

字符串截取在String类型中有这样几种原生的方法：在《Javascript高级程序设计》第五章引用数据章节的p123面，作者介绍了基于原字符串创建新字符串的三个方法： slice（），substr（），substring（），这三个方法都会返回被操作字符串的一个子字符串，它们都接受一个或者两个参数。第一个参数是创建新字符串的起始位置，slice（），substring（）的第二参数是结束位置，不填的话，默认是字符串的长度。 substr（）的第二个参数是要创建的字符串的长度，不填的话，是字符串剩下的长度。

并且它们对于源字符串是没有任何影响的。

至于传递的值要是负值的话，变化就很多了。有兴趣的可以试试。

举一个例子：截取段落里字符串的efg三个字母，并输出：

HTML代码：

<p id="text">abcdefg</p>

Javascript代码

window.onload =function () {
    var oP =document.getElementById('text') ;
    var str =oP.innerHTML ;
    alert(str.slice(4));
    alert(str.slice(4,7));//注意最后一个位置的字母是不会包含在新创建的字符串当中，Javascript大部分方法都是这样的
    alert(str.substring(4));
    alert(str.substring(4,7));
    alert(str.substr(4));
    alert(str.substr(4,3));//第二个参数是要创建的新字符串的长度
    var oSpan =document.createElement('span') ;
    oSpan.innerHTML="你截取的字符串是："+str.slice(4);
    document.documentElement.appendChild(oSpan);//将截取的字符串插入页面
}

当然还有一些高深的方法，比如match（）匹配，search（）搜索。更有字符串拆分配合indexof使用，转成数组输出。都可以做到。当然没必要，原生方法足够了。

在《Javascript高级程序设计》第五章引用数据章节中，作者花了大篇幅讲了Javascript的引用数据类型，里面列举了常用的原生方法。