JavaScript包裝對象之字符串

裝對象

我們知道，基本類型值不是對象，因而從邏輯上講它們不應該有方法。但是為了便于操作基本類型值，JavaScript提供了3個特殊的引用類型：Boolean、Number和String。說其特殊，是因為每當讀取一個基本類型值的時候，后臺就會創建一個對應的包裝對象，從而讓我們能夠調用一些方法來操作這些數據。

例子：

console.log("love".slice(1));
//輸出：ove

對象與包裝對象的主要區別就是生存期。后臺自動創建的包裝對象，只存在于一行代碼的執行瞬間，然后立即被銷毀。因此我們不能為包裝對象添加屬性和方法。

例子：

var str="love";
str.name="me";
console.log(str.name);
//輸出：undefined

*我們也可以顯式地調用 String 構造函數來創建字符串對象（Boolean 和Number 也可以），但基本用不到。

例子：

var str=new String("love");
console.log(str);
//輸出：love

字符串的屬性

length 屬性

字符串的每個實例都有一個length屬性，表示字符串中包含多少個字符。

例子：

console.log("love".length); //輸出：4
console.log("媽媽".length); //輸出：2
console.log("m e".length); //輸出：3

字符串的方法

訪問單個字符的方法

charAt()和charCodeAt() 方法

charAt()方法接受一個參數，即基于0的字符位置，返回給定位置的那個字符。charCodeAt() 方法返回字符編碼。

例子：

console.log("love".charAt(1));
//輸出：o

訪問個別字符更為常用的是使用方括號加數字索引的方式。

例子：

console.log("love" [1]);
//輸出：o

取得字符位置的方法

indexOf()和lastIndexOf() 方法

這兩個方法都是從一個字符串中搜索給定的子字符串，然后返回子字符串的位置（如果沒有找到該子字符串，則返回-1）。這兩個方法的區別在于：indexOf()方法從字符串的開頭向后搜索子字符串，而lastInddexOf()方法是從字符串的末尾向前搜索子字符串。這兩個方法都可以接收可選的第二個參數，表示從字符串中的哪個位置開始搜索。

例子：

console.log("love".indexOf("o")); //輸出：1
console.log("love".indexOf("a")); //輸出：-1
console.log("love".indexOf("o", 2)); //輸出：-1

includes() 方法

這個方法接受兩個參數，第一個參數指定要搜索的文本；第二個參數指定開始搜索的位置的索引值。如果在字符串中檢測到指定的文本則返回true。

例子：

console.log("love me".includes("me")); //輸出：true
console.log("love me".includes(" ")); //輸出：true
console.log("love me".includes("o", 2)); //輸出：false

startsWith()和 endsWith() 方法

這兩個方法都接受兩個參數，一個參數指定要搜索的文本；第二個參數指定開始搜索的位置的索引值。其中，startsWith() 方法會從字符串起始位置開始匹配，如果檢測到指定文本則返回true。endsWith() 方法從字符串末尾位置開始匹配，如果檢測到指定文本則返回true。如果指定了第二個參數，則startsWith() 方法會從這個索引值的位置開始匹配。endsWith() 方法從字符串長度減去這個索引值的位置開始匹配。

例子：

console.log("love me!".startsWith("love")); //輸出：true
console.log("love me!".endsWith("!")); //輸出：true
console.log("love me!".startsWith("o", 2)); //輸出：false
console.log("love me!".endsWith("o", 2)); //輸出：true

復制子字符并創建新字符串的方法

concat() 方法

concat() 方法用于將一個或多個字符串拼接起來，返回拼接得到的新字符串。

例子：

console.log("love ".concat("me", "!"));
//輸出：love me!

拼接字符串使用更多的是加號操作符（+）。

例子：

console.log("love " + "me" + "!");
//輸出：love me!

substring() 方法

這個方法會返回被操作字符串的一個子字符串，接受的兩個參數分別指定子字符串的開始位置和結束位置（不包括結束位置的字符）。如果沒有傳遞第二個參數，則將字符串的長度作為結束位置。當傳入的參數是負值時，substring()方法會把所有負值參數都轉換為0。

例子：

console.log("love me".substring(0)); //輸出：love me
console.log("love me".substring(0, 4)); //輸出：love
console.log("love me".substring(-1)); //輸出：love me

substr() 方法

這個方法會返回被操作字符串的一個子字符串，接受的兩個參數分別指定子字符串的開始位置和返回的字符個數。如果沒有傳遞第二個參數，則將字符串的長度作為結束位置。當傳入的參數是負值時，substr()方法將負的第一個參數加上字符串的長度，而將負的第二個參數轉換為0。

例子：

console.log("love me".substr(0)); //輸出：love me
console.log("love me".substr(0, 1)); //輸出：l
console.log("love me".substr(-1)); //輸出：e

slice() 方法

這個方法會返回被操作字符串的一個子字符串，接受的兩個參數分別指定子字符串的開始位置和結束位置（不包括結束位置的字符）。如果沒有傳遞第二個參數，則將字符串的長度作為結束位置。當傳入的參數是負值時，slice()方法會將傳入的負值與字符串的長度相加。

例子：

console.log("love me".slice(0)); //輸出：love me
console.log("love me".slice(0, 4)); //輸出：love
console.log("love me".slice(-2)); //輸出：me

repeat() 方法

這個方法接受一個number類型的參數，表示該字符串的重復次數，返回當前字符串重復一定次數后的新字符串。

例子：

console.log("0".repeat(2).concat("7"));
//輸出：007

操作字符串前后內容的方法

trim()方法

這個方法刪除字符串前后的所有空格，返回沒有前后空格的新字符串。

例子：

console.log(" love ".trim());
//輸出：love

padStart()和padEnd() 方法

這兩個方法用于字符串的補全功能，一共接受兩個參數，第一個參數是字符串補全生效的最大長度，第二個參數是用來補全的字符串。如果省略第二個參數，默認使用空格補全長度。其中，padStart()用于頭部補全，padEnd()用于尾部補全。返回補全之后的新字符串。

例子：

console.log("7".padStart(3, "0")); //輸出：007
console.log("7".padEnd(3, "0")); //輸出：700

字符串大小寫轉換方法

toLowerCase()和toUpperCase() 方法

例子：

console.log("LOVE".toLowerCase()); //輸出:love
console.log("love".toUpperCase()); //輸出:LOVE

字符串轉為數組的方法

split() 方法

這個方法用于把一個字符串分割成數組并返回該數組，接受兩個參數，第一個參數可以是字符串或正則表達式，表示從該參數指定的地方分割；第二個參數用于指定數組的最大長度。

例子：

console.log("love".split()); //輸出:["love"]
console.log("love".split("")); //輸出:["l", "o", "v", "e"]
console.log("lo,ve".split(",")); //輸出:["lo", "ve"]
console.log("l,o,v,e".split(",", 2)); //輸出:["l", "o"]

字符串用于正則匹配的方法

match() 方法

這個方法只接受一個正則表達式作為參數，可在字符串內檢索匹配的文本并返回一個數組。這個方法的行為在很大程度上依賴于正則表達式是否具有標志 g。如果正則表達式沒有標志 g，那么 match() 方法就只會在字符串中執行一次匹配。

例子：

var str="A;B;C;"
var m=str.match(/.;/g);
console.log(m);
//輸出:["A;", "B;", "C;"]

replace() 方法

這個方法用于在字符串中用一些字符替換另一些字符。接受兩個參數：第一個參數可以是一個正則表達式或者一個字符串，表示檢索文本，第二個參數可以是一個字符串或者一個函數，表示替換文本。如果第一個參數是字符串，那么只會替換第一個子字符串。要想替換所有子字符串，唯一的辦法就是提供一個正則表達式，而且要指定全局（g）。該方法返回替換后新創建的字符串。

例子：

var str="a_1;a_1;a_1";
var new_str_1=str.replace(1, 2);
var new_str_2=str.replace(/1/g, 2);
console.log(new_str_1); //輸出：a_2;a_1;a_1
console.log(new_str_2); //輸出：a_2;a_2;a_2

ES6的模板字符串

模板字符串是增強版的字符串，用反引號（`）標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

基本用法

1、用反引號替換單、雙引號。

例子：

let str=`love`;
console.log(str);
//輸出：love

在模板字符串中不需要轉義單、雙引號。但如果想在字符串中使用反引號，則要用反斜杠（\）進行轉義。

例子：

let str1=`I am a "fool"`;
let str2=`I am a \`fool\``;
console.log(str1); //輸出：I am a "fool"
console.log(str2); //輸出：I am a `fool`

2、ES6之前，創建多行字符串我們通常會在字符串中手動加入換行符（\n）：

例子：

var str=["A", "B", "C"].join("\n");
console.log(str);
//輸出：A B C (多行顯示)

但在ES6的模板字符串中，如果需要在字符串中添加新的一行，只需在代碼中直接換行：

例子：

let str=`A
B
C`;
console.log(str);
//輸出： A B C (多行顯示)

*在反引號中的所有空白符都屬于字符串的一部分，所以要小心縮進。

3、在模板字符串中，可以把任何合法的JavaScript 表達式嵌入到 ${} 占位符之中。

例子：

變量和表達式

let n1=1,
 n2=2;
let str=`${n1}+${n2}=${n1+n2}`;
console.log(str);
//輸出：1+2=3

函數

let fn=()=> "love";
let str=`${fn()} me`;
console.log(str);
//輸出：love me

模板字符串本身也是JavaScript 表達式，因此也可以在模板字符串里面嵌入另一個。

例子：

let name="Tom";
let str=`hello,${`my name is ${name}.`}`;
console.log(str);
//輸出：hello,my name is Tom.

Boolean、Number

包裝對象的兩外兩個：Boolean和 Number ，由于實際應用比較少，所以在此不再敘述

https://zhuanlan.zhihu.com/p/53949660

作者：為愛心太軟

來源：慕課網

.行內元素和塊級元素?img算什么?行內元素怎么轉化為塊級元素?

行內元素：和有他元素都在一行上，高度、行高及外邊距和內邊距都不可改變，文字圖片的寬度不可改變，只能容納文本或者其他行內元素；其中img是行元素
塊級元素：總是在新行上開始，高度、行高及外邊距和內邊距都可控制，可以容納內斂元素和其他元素；
行元素轉換為塊級元素方式：display：block；

2.將多個元素設置為同一行?清除浮動有幾種方式?

將多個元素設置為同一行：float，inline-block
清除浮動的方式：方法一：添加新的元素、應用 clear：both；
方法二：父級div定義 overflow: hidden；
方法三：利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

3.怪異盒模型box-sizing？彈性盒模型|盒布局?

在標準模式下的盒模型：盒子總寬度/高度=width/height+padding+border+margin
在怪異模式下的盒模型下，盒子的總寬度和高度是包含內邊距padding和邊框border寬度在內的，盒子總寬度/高度=width/height + margin=內容區寬度/高度 + padding + border + margin;
box-sizing有兩個值一個是content-box，另一個是border-box。
當設置為box-sizing:content-box時，將采用標準模式解析計算；
當設置為box-sizing:border-box時，將采用怪異模式解析計算。

4.簡述幾個css hack?

(1) 圖片間隙
在div中插入圖片，圖片會將div下方撐大3px。hack1：將<div>與<img>寫在同一行。hack2：給<img>添加display：block；
dt li 中的圖片間隙。hack：給<img>添加display：block；
(2) 默認高度，IE6以下版本中，部分塊元素，擁有默認高度（低于18px）
hack1：給元素添加：font-size：0；
hack2：聲明：overflow：hidden；
表單行高不一致
hack1：給表單添加聲明：float：left；height：；border： 0；
鼠標指針
hack：若統一某一元素鼠標指針為手型：cursor：pointer；
當li內的a轉化塊元素時，給a設置float，IE里面會出現階梯狀
hack1：給a加display：inline-block；
hack2：給li加float：left；

5.href和src區別? title和alt

href (Hypertext Reference)指定網絡資源的位置（超文本引用），從而在當前元素或者當前文檔和由當前屬性定義的需要的錨點或資源之間定義一個鏈接或者關系，在 link和a 等元素上使用。
src (Source)屬性僅僅嵌入當前資源到當前文檔元素定義的位置，是頁面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用。
title：既是html標簽，又是html屬性，title作為屬性時，用來為元素提供額外說明信息.
alt：alt是html標簽的屬性，alt屬性則是用來指定替換文字，只能用在img、area和input元素中（包括applet元素），用于網頁中圖片無法正常顯示時給用戶提供文字說明使其了解圖像信息.

6.transform？animation？區別?animation-duration

Transform:它和width、left一樣，定義了元素很多靜態樣式實現變形、旋轉、縮放、移位及透視等功能，通過一系列功能的組合我們可以實現很炫酷的靜態效果（非動畫)。
Animation:作用于元素本身而不是樣式屬性,屬于關鍵幀動畫的范疇，它本身被用來替代一些純粹表現的javascript代碼而實現動畫,可以通過keyframe顯式控制當前幀的屬性值.
animation-duration：規定完成動畫所花費的時間，以秒或毫秒計。

7.nth-of-type | nth-child?

舉例說明：
<ul> <p>111</p> <span>222</span> <li>1</li> <li>2</li> <li>3</li> </ul>
li:nth-of-type(2):表示ul下的第二個li元素
li:nth-child(2)：表示既是li元素又是在ul下的第二個元素（找不到）。
建議一般使用nth-of-type，不容易出問題。

8. :before 和 ::before 區別?

單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。對于CSS2之前已有的偽元素，比如:before，單冒號和雙冒號的寫法::before作用是一樣的。

9.如何讓一個div 上下左右居中?

答：有三種方法。

方法1： .div1{ width:400px;  height:400px;  border:#CCC 1px solid;   background:#99f;  position:absolute;  left:50%;   top:50%;   transform: translate(-50%,-50%); }   <div class="div1"></div> 
方法2： .div2{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#99f;  position: absolute;  left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto; }  <div class="div2"></div> 
方法3： .div3{ width:400px;  height:400px;  border:#CCC 1px solid;  background:#9f9;  position: absolute;  left: 50%;  top:50%;  margin-left:-200px;  margin-top: -200px;  }   <div class="div3"></div>

10.css2.0 和css3.0

答：css3加強了css2的功能，增加了新的屬性和新的標簽，并且刪除了一些冗余的標簽，在布局方面減少了代碼量。以前比較復雜的布局現在一個屬性就搞定了（columns之類的屬性）。在效果方面加入了更多的效果(圓角，動畫之類的)，還有在盒子模型和列表模塊都進行了改進。不過CSS3兼容性不好，只有一些高級版本的瀏覽器支持。

11.彈性盒子模型?flex|box區別?

(1) 引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的條目進行排列、對齊和分配空白空間。
即便容器中條目的尺寸未知或是動態變化的，彈性盒布局模型也能正常的工作。在該布局模型中，容器會根據布局的需要，調整其中包含的條目的尺寸和順序來最好地填充所有可用的空間。
當容器的尺寸由于屏幕大小或窗口尺寸發生變化時，其中包含的條目也會被動態地調整。比如當容器尺寸變大時，其中包含的條目會被拉伸以占滿多余的空白空間；當容器尺寸變小時，條目會被縮小以防止超出容器的范圍。彈性盒布局是與方向無關的。
在傳統的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；
而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內在的方向限制，可以由開發人員自由操作。
(2) flex和box的區別: display：box 是老規范，要兼顧古董機子就加上它；父級元素有display:box;屬性之后。他的子元素里面加上box-flex屬性。可以讓子元素按照父元素的寬度進行一定比例的分占空間。 flex是最新的，董機老機子不支持的；
父元素設置display:flex后，子元素寬度會隨父元素寬度的改變而改變，而display:box不會。 Android UC瀏覽器只支持display: box語法；而iOS UC瀏覽器則支持兩種方式。

12.viewport 所有屬性？

(1)width :設置layout viewport的寬度，為一個正整數，或字符串'device-width';
(2)initial-scale:設置頁面的初始縮放值，為一個數字，可以帶小數。
(3)minimum-scale:允許用戶的最小縮放值，為一個數字，可以帶小數。
(4)maximum-scale:允許用戶的最大縮放值，為一個數字，可以帶小數。
(5)height:設置layout viewport的高度，這個屬性對我們并不重要，很少使用
(6)user-scalable:是否允許用戶進行縮放，值為‘no’或者‘yes’。
安卓中還支持：target-densitydpi，表示目標設備的密度等級，作用是決定css中的1px 代表多少物理像素
(7)target-densitydpi:值可以為一個數值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字符串中的一個

13.如何理解HTML結構的語義化？

所謂標簽語義化，就是指標簽的含義。語義化的主要目的就是讓大家直觀的認識標簽(markup)和屬性(attribute)的用途和作用，對搜索引擎友好，有了良好的結構和語義我們的網頁內容便自然容易被搜索引擎抓取，這種符合搜索引擎收索規則的做法，網站的推廣便可以省下不少的功夫，而且可維護性更高，因為結構清晰,十分易于閱讀。這也是搜索引擎優化SEO重要的一步。

14.偽類選擇器和偽元素？c3中引入的偽類選擇器有？c3中偽元素有?

偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。
偽類選擇器：
由于狀態是動態變化的，所以一個元素達到一個特定狀態時，它可能得到一個偽類的樣式；當狀態改變時，它又會失去這個樣式。
偽元素選擇器：
并不是針對真正的元素使用的選擇器，而是針對CSS中已經定義好的偽元素使用的選擇器；
c3中引入的偽類選擇器：
:root()選擇器，根選擇器，匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。:root選擇器等同于<html>元素。
:not()選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。
:empty()選擇器表示的就是空。用來選擇沒有任何內容的元素，這里沒有內容指的是一點內容都沒有，哪怕是一個空格。
:target()選擇器來對頁面某個target元素(該元素的id被當做頁面中的超鏈接來使用)指定樣式，該樣式只在用戶點擊了頁面中的超鏈接，并且跳轉到target元素后起作用。
:first-child()選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是后代元素。
:nth-child()選擇某個元素的一個或多個特定的子元素。
:nth-last-child()從某父元素的最后一個子元素開始計算，來選擇特定的元素
:nth-of-type(n)選擇器和:nth-child(n)選擇器非常類似，不同的是它只計算父元素中指定的某種類型的子元素。
:only-child表示的是一個元素是它的父元素的唯一一個子元素。
:first-line為某個元素的第一行文字使用樣式。
:first-letter 為某個元素中的文字的首字母或第一個字使用樣式。
:before 在某個元素之前插入一些內容。
:after 在某個元素之后插入一些內容。
c3中偽元素：
::first-line選擇元素的第一行，比如說改變每個段落的第一行文本的樣式
::before和::after這兩個主要用來給元素的前面或后面插入內容，這兩個常用"content"配合使用，見過最多的就是清除浮動
::selection用來改變瀏覽網頁選中文的默認效果

15.html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

* HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。
* 拖拽釋放(Drag and drop) API 語義化更好的內容標簽(header,nav,footer,aside,article,section) 音頻、視頻API(audio,video) 畫布(Canvas) API 地理(Geolocation) API 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；
sessionStorage 的數據在瀏覽器關閉后自動刪除表單控件，calendar、date、time、email、url、search 新的技術webworker, websocket, Geolocation
* 移除的元素純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
支持HTML5新標簽：
* IE8/IE7/IE6支持通過document.createElement方法產生的標簽，可以利用這一特性讓這些瀏覽器支持HTML5新標簽，瀏覽器支持新標簽后，還需要添加標簽默認的樣式：
* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 
* 如何區分： DOCTYPE聲明\新增的結構元素\功能元素

16.placeholder?如何在ie8上兼容placeholder這個效果

方法一：
首先判斷瀏覽器是否支持placeholder屬性，如果不支持的話，就遍歷所有input輸入框，獲取placeholder屬性的值填充進輸入框作為提示信息，同時字體設置成灰色。
當輸入框獲得焦點( focus )同時輸入框內文字等于設置的提示信息時，就把輸入框內清空；
當輸入框失去焦點( blur )同時輸入框內文字為空時，再把獲取的placeholder屬性的值填充
進輸入框作為提示信息，同時字體設置成灰色；
當輸入框內有輸入( keydown )時，此時輸入框內的提示信息已經由focus事件清除，此時只需要把字體再恢復成黑色即可
此方法的缺點是，不適用于加載完DOM時即獲得焦點的輸入框，因為在用戶的角度，加載完頁面時看到的獲得焦點的那個輸入框，它的提示文字是看不到的。

HTML：
<input type="text" id="uname" name="uname" placeholder="請輸入用戶名"/>

CSS：
.phcolor{ color:#999;}

JS
$(function(){  
  //判斷瀏覽器是否支持placeholder屬性
  supportPlaceholder='placeholder'in document.createElement('input'),
  placeholder=function(input){
    var text=input.attr('placeholder'),
    defaultValue=input.defaultValue;
    if(!defaultValue){
      input.val(text).addClass("phcolor");
    }
    input.focus(function(){
      if(input.val()==text){
        $(this).val("");
      }
    });
    input.blur(function(){
      if(input.val()==""){
        $(this).val(text).addClass("phcolor");
      }
    });
    //輸入的字符不為灰色
    input.keydown(function(){
      $(this).removeClass("phcolor");
    });
  };
  //當瀏覽器不支持placeholder屬性時，調用placeholder函數
  if(!supportPlaceholder){
    $('input').each(function(){
      text=$(this).attr("placeholder");
      if($(this).attr("type")=="text"){
        placeholder($(this));
      }
    });
  }
});

方法二：
此方法的思路是做一張含有提示文字的圖片作為input輸入框的背景圖，初始時獲得焦點同時加載背景圖；
當輸入框不為空時，去掉背景圖；
當輸入框為空時，加載背景圖；
當用戶鍵盤按鍵且輸入框不為空( 輸入字符 )時，去掉背景圖；
當用戶鍵盤按鍵且輸入框為空( 刪除字符 )時，加載背景圖。
此方法的缺點是：需要為每一個提示文字不同的input制作背景圖片，并且設置input的樣式。

CSS：
.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}

JS
$(function(){  
   //判斷瀏覽器是否支持placeholder屬性
   supportPlaceholder='placeholder' in document.createElement('input');
   if(!supportPlaceholder){
     //初始狀態添加背景圖片
     $("#uname").attr("class","phbg");
     //初始狀態獲得焦點
     $("#uname").focus;
     function destyle(){
      if($("#uname").val() !=""){
        $("#uname").removeClass("phbg");
      }else{
        $("#uname").attr("class","phbg");
       }
     }
     //當輸入框為空時，添加背景圖片；有值時去掉背景圖片
     destyle();
     $("#uname").keyup(function(){
      //當輸入框有按鍵輸入同時輸入框不為空時，去掉背景圖片；有按鍵輸入同時為空時（刪除字符），添加背景圖片
      destyle();
     });
     $("#uname").keydown(function(){
      //keydown事件可以在按鍵按下的第一時間去掉背景圖片
      $("#uname").removeClass("phbg");
     });
   }
});

方法三：
使用插件：Placeholders.js

17.常見兼容性問題？

* png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.也可以引用一段腳本處理。
* 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
* IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。
* 浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。） #box{ float:left; width:10px; margin:0 0 0 100px;} 這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)
* 漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“”這一標記，將IE游覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
css// .bb{ background-color:#f1ee18; .background-color:#00deff; +background-color:#a200ff; _background-color:#1e0bd1; }
* IE下,可以使用獲取常規屬性的方法來獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統一通過getAttribute()獲取自定義屬性。
* IE下,event對象有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性. * 解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
* Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
* 超鏈接訪問過后hover樣式就不出現了被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
* 怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD聲明的好習慣。現在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`
* 上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。
解決方法，養成良好的代碼編寫習慣，同時采用margin-top或者同時采用margin-bottom。
* ie6對png圖片格式支持不好(引用一段腳本處理)

18.簡述前端優化的方式舊的雅虎34條|h5新添加的方式

1、盡量減少HTTP請求次數
2、減少DNS查找次數
3、避免跳轉
4、可緩存的AJAX
5、推遲加載內容
6、預加載
7、減少DOM元素數量
8、根據域名劃分頁面內容
9、使iframe的數量最小
10、不要出現404錯誤
11、使用內容分發網絡
12、為文件頭指定Expires或Cache-Control 13、Gzip壓縮文件內容
14、配置ETag
15、盡早刷新輸出緩沖
16、使用GET來完成AJAX請求
17、把樣式表置于頂部
18、避免使用CSS表達式（Expression）
19、使用外部JavaScript和CSS
20、削減JavaScript和CSS
21、用<link>代替@import
22、避免使用濾鏡
23、把腳本置于頁面底部
24、剔除重復腳本

19.jquery版本?1.11兼容?

Query 2.x系列和 jQuery 1.x擁有同樣的API，但是不再支持IE6、7、8。
推薦使用 1.x version，除非你確定IE6、7、8用戶不再訪問網站。
jquery1.11屬于1.x 版本，其兼容IE6、7、8，所以也支持IE9.

20.塊級？行內？空元素?

行內元素：和有他元素都在一行上，高度、行高及外邊距和內邊距都不可改變，文字圖片的寬度不可改變，只能容納文本或者其他行內元素
塊級元素：總是在新行上開始，高度、行高及外邊距和內邊距都可控制，可以容納內斂元素和其他元素；
空元素：在HTML元素中，沒有內容的 HTML 元素被稱為空元素。空元素是在開始標簽中關閉的。<br> 就是沒有關閉標簽的空元素。

21.media屬性？screen？All？max-width?min-width?

media 屬性規定被鏈接文檔將顯示在什么設備上。media 屬性用于為不同的媒介類型規定不同的樣式。Screen計算機默認屏幕，all適用于所有設備，max-width超過最大寬度就不執行，min-width必須大于最小寬度才執行。

22.meta標簽的name屬性值？

name 屬性主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。
meta標簽的name屬性語法格式是：＜meta name="參數" content="具體的參數值"＞。
其中name屬性主要有以下幾種參數：
A 、Keywords(關鍵字)說明：keywords用來告訴搜索引擎你網頁的關鍵字是什么。
B 、description(網站內容描述) 說明：description用來告訴搜索引擎你的網站主要內容.
C 、robots(機器人向導)說明：robots用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。
content的參數有all,none,index,noindex,follow,nofollow,默認是all。
舉例：＜meta name="robots" content="none"＞D 、author(作者)

23.一般做手機頁面切圖有幾種方式?

響應式布局，彈性布局display：flex，利用js編寫設定比例，給根元素設定像素，使用rem為單位。

24.px/em/rem有什么區別？為什么通常給font-size 設置的字體為62.5%

相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。
1、em的值并不是固定的；
2、em會繼承父級元素的字體大小。使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。
rem是相對于瀏覽器進行縮放的。1rem默認是16px，在響應式布局中，一個個除來轉換成rem，太麻煩，所以重置rem
body{font-size=62.5% } 此時1rem=10px;若是12px則是1.2rem.

25.sass和scss有什么區別?sass一般怎么樣編譯的

文件擴展名不同，Sass 是以“.sass”后綴為擴展名，而 SCSS 是以“.scss”后綴為擴展名；語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。

26.如果對css進行優化如何處理？

壓縮打包，圖片整合，避免使用Hack，解決兼容問題，使用簡寫，讓CSS能保證日后的維護。

27.如何對css文件進行壓縮合并? gulp ?

使用gulp, 首頁全局安裝gulp。
1、npm install --global gulp
2、其次局部安裝gulp。npm install gulp --save-dev
3、在項目根目錄下創建一個名為 gulpfile.js 的文件
var gulp=require('gulp');
gulp.task('default', function() {
// 將你的默認的任務代碼放在這});
4、運行gulp。（默認的名為 default 的任務（task）將會被運行，想要單獨執行特定的任務（task），請輸入 gulp <task> <othertask>）
gulp
合并和壓縮JS、CSS文件
壓縮JS，CSS文件需要引用如下組件：
gulp-minify-css: 壓縮css

28.組件? 模塊化編程？

組件化編程: 將js css html包裝一起提供方法和效果；
模塊化化: 將相同的功能抽取出來存放在一個位置進行編程

29.圖片和文字在同一行顯示?

1 在css中給div添加上“vertical-align:middle”屬性。
2 分別把圖片和文字放入不同的div中，然后用“margin”屬性進行定位，就可以使他們顯示在同一行。
3 把圖片設置為背景圖片。

30.禁止事件冒泡

event.stopPropagation()

31.禁止默認事件

event.preventDefault()

32.a標簽中 active hover link visited 正確的設置順序是什么?

a標簽的link、visited、hover、active是有一定順序的
a:link
a:visited
a:hover
a:active

33.a標簽中如何禁用href 跳轉頁面或定位鏈接

e.preventDefault();
href="javascript：void(0);

34.手機端上圖片長時間點擊會選中圖片，如何處理?

onselect=function() {
return false
}

35.video標簽的幾個個屬性方法

src：視頻的URL poster：視頻封面，沒有播放時顯示的圖片 preload：預加載 autoplay：自動播放 loop：循環播放 controls：瀏覽器自帶的控制條 width：視頻寬度 height：視頻高度

36.常見的視頻編碼格式有幾種?視頻格式有幾種?

視頻格式：MPEG-1、MPEG-2和MPEG4 、AVI 、RM、ASF和WMV格式
視頻編碼格式：H.264、MPEG-4、MPEG-2、WMA-HD以及VC-1

37.canvas在標簽上設置寬高和在style中設置寬高有什么區別？

canvas標簽的width和height是畫布實際寬度和高度，繪制的圖形都是在這個上面。而style的width和height是canvas在瀏覽器中被渲染的高度和寬度。如果canvas的width和height沒指定或值不正確，就被設置成默認值。

38.border-image？box-sizing?

Border-image : 圖形化邊框
Box-sizing : 屬性允許您以特定的方式定義匹配某個區域的特定元素。
語法：box-sizing：content-box | border-box
Content-box : padding和border不被包含在定義的width和height之內。對象的實際寬度等于設置的width值和border、padding之和，即 ( Element width=width + border + padding) 此屬性表現為標準模式下的盒模型 .
Border-box : padding和border被包含在定義的width和height之內。對象的實際寬度就等于設置的width值，即使定義有border和padding也不會改變對象的實際寬度，即 ( Element width=width ) 此屬性表現為怪異模式下的盒模型。

39.漸進增強和優雅降級

漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。
降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。
“優雅降級”觀點
“優雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段，并把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本。
在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。
“漸進增強”觀點
“漸進增強”觀點則認為應關注于內容本身。
內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被 Yahoo! 所采納并用以構建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。
那么問題來了。現在產品經理看到IE6,7,8網頁效果相對高版本現代瀏覽器少了很多圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會如何說服他？

40.解釋在ie低版本下的怪異盒模型和c3的怪異盒模型和彈性盒模型?

IE當padding+border的值小于width或者height:
盒模型的寬度=margin(左右)+width（width已經包含了padding和border的值）
盒模型的高度=margin(上下)+height（height已經包含了padding和border的值）
當padding+border的值大于width或者height:
盒模型的寬度=margin(左右)+padding(左右)+border(左右)
盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px （加一個默認行高 19px）所以相當于是padding+border和width或者height比大小，誰大取誰。
以上幾種DOCTYPE都是標準的文檔類型，無論使用哪種模式完整定義DOCTYPE，都會觸發標準模式，而如果DOCTYPE缺失則在ie6，ie7，ie8下將會觸發怪異模式（quirks 模式） CSS3box-sizing有兩個值一個是content-box，另一個是border-box。
當設置為box-sizing:content-box時，將采用標準模式解析計算，也是默認模式；
當設置為box-sizing:border-box時，將采用怪異模式解析計算；
Css3彈性盒模型引入了新的盒子模型—彈性盒模型，該模型決定一個盒子在其他盒子中的分布方式以及如何處理可用的空間。使用該模型，可以很輕松的創建自適應瀏覽器窗口的流動布局或自適應字體大小的彈性布局。

41.animation對應的屬性

寫法：animation: name duration timing-function delay iteration-count direction;
下面是對應的屬性的介紹
animation-name 規定需要綁定到選擇器的 keyframe 名稱。
animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function 規定動畫的速度曲線。
animation-delay 規定在動畫開始之前的延遲。
animation-iteration-count 規定動畫應該播放的次數。
animation-direction 規定是否應該輪流反向播放動畫。

42.transition?

css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值注意區別transform，transform是進行2D轉換的如移動，比例化，反過來，旋轉，和拉伸元素。

43.h5新特性？

1、繪畫的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、對本地離線存儲的更好的支持
4、新的特殊內容元素，比如 article、footer、header、nav、section 5、新的表單控件，比如 calendar、date、time、email、url、search

44.canvas 如何繪制一個三角形|正方形

moveto 是移動到某個坐標， lineto 是從當前坐標連線到某個坐標。
這兩個函數加起來就是畫一條直線。畫線要用“筆”，那么MoveTo()把筆要畫的起始位置固定了（x,y）然后要固定終止位置要用到LineTo函數確定終止位置（xend,yend）,這樣一條線就畫出來了。每次與前面一個坐標相連。
stroke() 方法會實際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑。默認顏色是黑色。

<!DOCTYPE HTML5>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>畫布</title>
  </head> 
<body>
     <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
     Your browser does not support the canvas element.
     </canvas>
     <script type="text/javascript">
         var c=document.getElementById("myCanvas");
//三角形
         var cxt=c.getContext("2d");
         cxt.moveTo(10,10);
         cxt.lineTo(50,50);
         cxt.lineTo(10,50);
         cxt.lineTo(10,10);
         cxt.stroke();
//正方形
         var cxt2=c.getContext("2d");
         cxt2.moveTo(60,10);
         cxt2.lineTo(100,10);
         cxt2.lineTo(100,50);
         cxt2.lineTo(60,50);
         cxt2.lineTo(60,10);
         cxt2.stroke(); 
     </script>
</body>
</html>

45.所用bootstap版本？

3.0

46.css清除浮動的幾種方式？

1、父級div定義 height
2、結尾處加空div標簽 clear:both
3、父級div定義偽類:after 和 zoom
4、父級div定義 overflow:hidden
5、父級div定義 overflow:auto
6、父級div 也一起浮動
7、父級div定義 display:table

47.為什么要初始化CSS樣式。

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

48.CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋轉,縮放,定位,傾斜增加了更多的CSS選擇器多背景 rgba 在CSS3中唯一引入的偽元素是::selection.媒體查詢，多欄布局 border-image

49.解釋下 CSS sprites，以及你要如何在頁面或網站中使用它。

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以并發，但是也有限制，一般瀏覽器都是6個。對于未來而言，就不需要這樣做了，因為有了`http2`。

50.什么是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

FOUC - Flash Of Unstyled Content 文檔樣式閃爍
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是造成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，然后再去導入外部的CSS文件，因此，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關系。
解決方法：只要在<head>之間加入一個<link>或者<script>元素就可以了。

51.a點擊出現框，解決方法:

在前面

今年國慶假期終于可以憋在家里了不用出門了，不用出去看后腦了，真的是一種享受。這么好的光陰怎么浪費，睡覺、吃飯、打豆豆這怎么可能（耍多了也煩），完全不符合我們程序員的作風，趕緊起來把文章寫完。

這篇文章比較基礎，在國慶期間的業余時間寫的，這幾天又完善了下，力求把更多的前端所涉及到的關于文件上傳的各種場景和應用都涵蓋了,若有疏漏和問題還請留言斧正和補充。

自測讀不讀

以下是本文所涉及到的知識點，break or continue ?

文件上傳原理
最原始的文件上傳
使用 koa2 作為服務端寫一個文件上傳接口
單文件上傳和上傳進度
多文件上傳和上傳進度
拖拽上傳
剪貼板上傳
大文件上傳之分片上傳
大文件上傳之斷點續傳
node 端文件上傳

原理概述

原理很簡單，就是根據 http 協議的規范和定義，完成請求消息體的封裝和消息體的解析，然后將二進制內容保存到文件。

我們都知道如果要上傳一個文件，需要把 form 標簽的enctype設置為multipart/form-data,同時method必須為post方法。

那么multipart/form-data表示什么呢？

multipart互聯網上的混合資源，就是資源由多種元素組成，form-data表示可以使用HTML Forms 和 POST 方法上傳文件，具體的定義可以參考RFC 7578。

multipart/form-data 結構

看下 http 請求的消息體

請求頭：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次請求要上傳文件，其中boundary表示分隔符，如果要上傳多個表單項，就要使用boundary分割，每個表單項由———XXX開始，以———XXX結尾。

消息體- Form Data 部分

每一個表單項又由Content-Type和Content-Disposition組成。

Content-Disposition: form-data 為固定值，表示一個表單元素，name 表示表單元素的名稱，回車換行后面就是name的值，如果是上傳文件就是文件的二進制內容。

Content-Type：表示當前的內容的 MIME 類型，是圖片還是文本還是二進制數據。

解析

客戶端發送請求到服務器后，服務器會收到請求的消息體，然后對消息體進行解析，解析出哪是普通表單哪些是附件。

可能大家馬上能想到通過正則或者字符串處理分割出內容，不過這樣是行不通的，二進制buffer轉化為string,對字符串進行截取后，其索引和字符串是不一致的，所以結果就不會正確，除非上傳的就是字符串。

不過一般情況下不需要自行解析，目前已經有很成熟的三方庫可以使用。

至于如何解析，這個也會占用很大篇幅，后面的文章在詳細說。

最原始的文件上傳

使用 form 表單上傳文件

在 ie時代，如果實現一個無刷新的文件上傳那可是費老勁了，大部分都是用 iframe 來實現局部刷新或者使用 flash 插件來搞定，在那個時代 ie 就是最好用的瀏覽器（別無選擇）。

DEMO

這種方式上傳文件，不需要 js ，而且沒有兼容問題，所有瀏覽器都支持，就是體驗很差，導致頁面刷新，頁面其他數據丟失。

HTML

 <form method="post" action="http://localhost:8100" enctype="multipart/form-data">

        選擇文件:
            <input type="file" name="f1"/> input 必須設置 name 屬性，否則數據無法發送<br/>
<br/>
            標題：<input type="text" name="title"/><br/><br/><br/>

        <button type="submit" id="btn-0">上 傳</button>

</form>

復制代碼

文件上傳接口

服務端文件的保存基于現有的庫koa-body結合 koa2實現服務端文件的保存和數據的返回。

在項目開發中，文件上傳本身和業務無關，代碼基本上都可通用。

在這里我們使用koa-body庫來實現解析和文件的保存。

koa-body 會自動保存文件到系統臨時目錄下，也可以指定保存的文件路徑。

然后在后續中間件內得到已保存的文件的信息，再做二次處理。

ctx.request.files.f1 得到文件信息，f1為input file 標簽的 name
獲得文件的擴展名，重命名文件

NODE

/**
 * 服務入口
 */
var http=require('http');
var koaStatic=require('koa-static');
var path=require('path');
var koaBody=require('koa-body');//文件保存庫
var fs=require('fs');
var Koa=require('koa2');

var app=new Koa();
var port=process.env.PORT || '8100';

var uploadHost=`http://localhost:${port}/uploads/`;

app.use(koaBody({
    formidable: {
        //設置文件的默認保存目錄，不設置則保存在系統臨時目錄下  os
        uploadDir: path.resolve(__dirname, '../static/uploads')
    },
    multipart: true // 開啟文件上傳，默認是關閉
}));

//開啟靜態文件訪問
app.use(koaStatic(
    path.resolve(__dirname, '../static') 
));

//文件二次處理，修改名稱
app.use((ctx)=> {
    var file=ctx.request.files.f1;//得道文件對象
    var path=file.path;
    var fname=file.name;//原文件名稱
    var nextPath=path+fname;
    if(file.size>0 && path){
        //得到擴展名
        var extArr=fname.split('.');
        var ext=extArr[extArr.length-1];
        var nextPath=path+'.'+ext;
        //重命名文件
        fs.renameSync(path, nextPath);
    }
    //以 json 形式輸出上傳文件地址
    ctx.body=`{
        "fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
    }`;
});

/**
 * http server
 */
var server=http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ......   ');
復制代碼

CODE

https://github.com/Bigerfe/fe-learn-code/

在線咨詢

上一篇：JavaScript瀏覽器端數據存儲方案之Index
下一篇：daisyUI - 主題漂亮、代碼純凈！免費開源的

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。