前端開發知識總結

時間 2019-12-20

標籤前端開發知識總結简体版

原文原文鏈接

目錄：javascript

1、HTML部分css

2、CSS部分html

3、JavaScript部分前端

4、jQuery部分html5

5、Bootstrap部分java

1、HTML部分web

XHTML和HTML有什麼區別

XHTML是一種基本的web網頁設計語言，XHTML是一個基於XML的置標語言
XHTML 元素必須被正確的嵌套
XHTML 元素必須被關閉
標籤名必須用小寫字母
XHTML 文檔必須擁有根元素

　　2. 前端頁面有哪幾層構成，分別是什麼？做用是什麼？ajax

1.結構層 HTML（頁面結構內容）表示層
2. CSS（網頁的樣式和外觀）
3. js（實現網頁的交互，動畫效果）

　　3. form表單中input標籤的readonly和disabled屬性有何區別？數據庫

readonly=「readonly」是隻讀，不能夠修改， disabled=「disabled」是禁用，整個文本框是顯示灰色狀態  form中method是數據傳遞的方式，action是與後臺數據庫提交的

　　　4.內聯標籤有哪些？塊級標籤有哪些？json

行內標籤：a b img em br i span input select
塊級標籤：div p h1-h6 form ul dl ol table

　　5. 內聯標籤和塊級標籤有什麼區別？

內聯標籤不能夠設置寬高，不獨佔一行；
塊級標籤能夠設置寬高，獨佔一行

　　6. 簡述form標籤的功能和屬性

功能：表單用於項服務器傳輸數據，從而實現用戶與web服務器的交互
屬性：1. action：表單提交到哪，通常指向服務器端一個程序，程序接收到表單提交過來的數據（即表單元素值）做相應處理；
2.method：表單的提交方式 post/get默認取值是get

　　7. 圖形標籤是什麼，它的主要屬性有哪些？

<img>標籤 
主要屬性：
src：要顯示圖片的路徑
alt：圖片沒有加載成功時的提示
title：鼠標懸浮時的提示信息
width：圖片的寬，height：圖片的高（寬高兩個屬性只有一個會自動等比縮放）

　　8. input標籤都有哪些類型　　

TYPE：text 文本輸入框
password：密碼輸入框
radio：單選框
checkbok：多選框
submit：提交按鈕
button：按鈕（須要配合js使用）
file：提交文件

　　9. input 標籤都有哪些屬性？

name：表單提交項的鍵
value：radio 和checkbok 默認被選中
readonly：只讀 ， text 和 password
disabled：對所用input均可以使用

　　10. src和href的區別

src：指向外部資源的位置， 用於替換當前元素， 好比js腳本，圖片等元素
href：指向網絡資源所在的位置，用於在當前文檔和引用資源間肯定聯繫，加載CSS

　　11. 選擇器中id ，class有什麼區別

在網頁中，每一個id名稱只能用一次，class能夠容許重複使用

2、CSS部分

　　1. CSS的基本語法

由兩個主要的部分構成：選擇器，以及一條或多條聲明

　　2. CSS的引入方式有哪些？

1.內嵌方式：
style標籤
<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <style>
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>這是一個p標籤！</p>
    </body>
</html>

2. 行內樣式
<!doctype html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<p style="color: blue;">這是一個p標籤！</p>
</body>
</html>

3.外聯樣式表-連接式
link標籤
p {
  color: green;
}
而後在HTML文件中經過link標籤引入：
<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <p>這是一個p標籤！</p>
    </body>
</html>

　　3. CSS的選擇器有哪些？

1. 基本選擇器     通配符選擇器    標籤選擇器    id選擇器    類選擇器    
2.  組合選擇器    子代選擇器    後代選擇器    羣組選擇器    交集選擇器    毗鄰選擇器    兄弟選擇器
3. 屬性選擇器

　　4. CSS僞類的做用

CSS僞類是用來添加一些選擇器的特殊效果
超連接未被訪問時的狀態：a:link{background-color:blue;}
鼠標懸停時的狀態：a:hover { color:green}
鼠標單擊時的狀態：a:visited{color:yellow;}
鼠標不鬆手的狀態：a:active{color:blue;}
獲取焦點時的狀態：input:focus{background-color:red;}

　　5. 什麼是CSS優先級，其基本規則是什麼？

CSS優先級，是指CSS樣式在瀏覽器中被解析的前後順序。
基本規則：行內樣式 > 內部樣式表 > 外部樣式表 ID選擇器 > 類選擇器 > 標籤選擇器

　　6. CSS隱藏元素的幾種方法（至少說出三種）

1.Opacity：元素自己依然佔據它本身的位置並對網頁的佈局起做用。它也將響應用戶交互；
2.Visibility: 與opacity惟一不一樣的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏
3. Display： Display設爲none任何對該元素直接打用戶交互操做都不可能生效。此外，讀屏軟件也很差讀到元素的內容。這種方式產生的效果就像元素徹底不存在
4. Position：不會影響佈局，能讓元素保持能夠操做
5. Clip-path： clip-path屬性尚未在IE或者Edge下被徹底支持，若是要在你的Clip-path中使用外部的SVG文件，瀏覽器支持度還要低

　　7. CSS清除浮動的幾種方法（至少兩種）

1.給父元素添加overflow：hidden（推薦使用）
.wrap{
    overflow:hidden;
}

2.after僞元素（官方推薦）
.wrap:after{
content:"";
clear:both;
display:block;
height:0;
visibility:hidden;
}

3. 給父盒子設定固定高度；缺點：不靈活
4. 給浮動元素最後一個加一個空的塊級元素，且該元素爲不浮動float：none，設置clear：both，就會撐開盒子
缺點：結構冗餘

　　8. 頁面導入樣式時，使用link和@import有什麼區別？

<link rel="stylesheet" type="text/css" href="./css/index.css"> 
<style type="text/css"> @import url('./css/index.css'); </style> 
1，link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS; 
2，頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載; 3，import是CSS2.1提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

　　9. 介紹一個CSS的盒子模型

有兩種：IE盒子模型和標籤w3c盒子模型
IE的content部分包含border 和 padding；
盒子模型：內容（content），填充（padding），邊界（margin），邊框（border）

　　10. Display：none和visibility：hidden的區別是什麼？

visbility：hidden    ------------ 將元素隱藏，可是還佔用位置
Display：none     ------------ 將元素的顯示設爲無，不佔任何的位置

　　11. 設置一個div的最小寬度爲100像素，最大高度爲50像素

min-width: 100px;
max-height: 50px;

　　12. 在變形CSS樣式的贖回，若是想要設置標記容器和主容器之間的補白，用什麼來表示？

marker-offset

　　13. CSS屬性是否區分大小寫？

不區分。（HTML, CSS都不區分，但爲了更好的可讀性和團隊協做，通常都小寫，而在XHTML 中元素名稱和屬性是必須小寫的。）

　　14. 對行內元素設置margin-top 和 margin-bottom是否起做用？

不起做用，（須要注意行內元素的替換元素img，input，他們是行內元素，可是能夠爲其設置寬高，而且margin屬性也是對其起做用的，有着相似於Inine-block的行爲）
img input 行內塊元素，能夠設置

　　15. 對內聯元素設置padding-top和 padding-bottom是否會增長它的高度？

不會。同上題，要注意行內元素的替換元素，img設置padding-top/bottom是會起做用的。

　　16. screen關鍵詞是指設備的物理屏幕大小仍是瀏覽器的視窗

瀏覽器的視窗

　　17. rgba()和Opacity的透明效果有什麼不一樣？　

rgba()和Opacity都能實現透明效果，但最大的不一樣是Opacity做用於元素，以及元素內的全部內容的透明度
而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果）

　　18. css中可讓文字在垂直和水平方向上重疊的兩個屬性是什麼？

垂直方向：line-height
水平方向：letter-spacing

　　19. 關於letter-spacing的妙用知道嗎？

能夠用於消除inline-block元素間的換行符空格間隙問題

　　20. px和em的區別？

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em的值不是固定的，而且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em

　　21. 知道css有個content屬性嗎？有什麼做用？有什麼應用？

css的content屬性專門應用在 before/after 僞元素上，用於來插入生成內容。
最多見的應用是利用僞類清除浮動。

　　22. 簡述css動畫的優缺點？

優勢：
    1.在性能上會稍微好一些，瀏覽器會對CSS3的動畫作一些優化（好比專門新建一個圖層用來跑動畫）
    2.代碼相對簡單
缺點：
    1.在動畫控制上不夠靈活
    2.兼容性很差
    3.部分動畫功能沒法實現（如滾動動畫，視差滾動等）

3、JavaScript部分

　　1. js的引入方式有哪些？

1. 直接編寫
2. 導入文件

　　2.如何在js中定義使用變量？

1. 聲明變量時不用聲明變量類型，所有使用var關鍵字
2. 一行能夠聲明多個變量，而且能夠是不一樣類型
3. 聲明變量時，能夠不用var，若是不用var那麼它是全局變量
4. 變量命名，首字符只能是字母，下劃線，$美圓符 三選一，餘下的字符能夠是下劃線，美圓符號或任何字母或數字字符且區分大小寫，x與X是兩個變量

　　3. js的基本數據類型有哪些？

1.數字類型（number）
2.字符串類型（string）
3.布爾類型（Boolean）
4.null類型
5.undefined類型

　　4.null和undefined的區別？

null是一個表示「無」的對象，轉爲數值時爲0；
undefined是一個表示「無」的原始值，轉爲數值時爲nan

　　5. js有哪些運算符？

1. 算術運算符(+ - * / % ++ -- )
2. 比較運算符(> >= < <= != == === !==) 
3. 邏輯運算符(&& || ！)
4. 賦值運算符(= += -= *= /=) 
5. 字符串運算符(+ 鏈接，兩邊操做數有一個或兩個是字符串就作鏈接運算)

　　6. js的typeof返回哪些數據類型？

number string Object function boolean underfind

　　7. 分別解釋數組方法pop()、push()、unshift()、shift()的功能？

shift()頭部刪除 pop()尾部刪除
Unshift()頭部添加 push()尾部添加

　　8. ajax請求的時候get和post方式的區別？

get方式參數放在url後面
post放在虛擬載體裏面有大小限制

　　9. ajax請求時，如何解釋json數據？

使用eval parse，鑑於安全性考慮 使用parse更靠譜

　　10. 事件委託是什麼？

事件代理：本身完成不了當前的點擊事件，交給父級元素作這件事件
$('ul').on('click','.btn',function(){
})
讓利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行

　　11. 添加刪除替換插入到某個節點的方法分別是什麼？

添加：obj.appendChild()
刪除：obj.removeChild()
替換：obj.replaceChild（）
插入：obj.insertBefore（）

　　12. 簡述一下什麼是JavaScript的同源策略？

通常腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裏的同一來源指的是主機名、協議和端口號的組合

　　13. 簡述一下對this對象的理解

this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化，可是有一個總原則，那就是this指的是調用函數的那個對象
this通常狀況下：是全局對象Global，做爲方法調用，那麼this就是指這個對象

　　14. 編寫一個b繼承a的方法

function A（name）{
    this.name = name;
    this.sayHello = function(){alert(this.name+"say Hello!");};
}
function B(name,id){
    this.temp = A;
    this.temp(name);
    delete this.temp;
    this.id = id;
    this.checkId= function(ID) {alert(this.id==ID)};
}

　　15. 如何阻止事件冒泡和默認事件

function stopBubble（e）{
if (e && e.stopPropagation)
    e.stopPropagation()
else
    window.event.cancelBubble=true
}
return false

$(function(ev){
    //1.阻止事件冒泡
    ev.stopPropagation()
    //阻止默認事件
    ev.preventDefault();
    //阻止了冒泡和默認
    return false;
});

　　16. 瀏覽器端的js包括哪幾個部分？

核心（ecmascript）
文檔對象模型（DOM）
瀏覽器對象模型（BOM）

　　17. js動畫有哪些實現方法?

用定時器setTimeout執行一次和setInterval

　　18. js動畫的優缺點？

優勢：
    1. 控制能力很強，能夠單幀的控制，變換
    2.兼容性好，寫的好頑強能夠兼容IE6，且功能強大

缺點：
    計算沒有css快，另外常常須要依賴其它的庫

　　19. 跨域的幾種方式？

jsonp（利用script標籤的跨域能力）跨域、
websocket（html5的新特性，是一種新協議）跨域、
設置代理服務器（由服務器替咱們向不一樣源的服務器請求數據）、
CORS（跨源資源共享，cross origin resource sharing）、
iframe跨域、
postMessage(包含iframe的頁面向iframe傳遞消息)

　　20.div標籤，最小寬度爲300px，最大高度爲200px。背景色默認爲綠色，經過點擊標籤，使div背景顏色紅綠來回切換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box {
            width: 300px;
            height: 200px;
            background: green;

        }
    </style>
</head>
<body>
    <div class="box">
        div標籤
    </div>

</body>
<script type="text/javascript">

    var oBox = document.getElementsByClassName('box')[0];
    console.log(oBox.innerText)
    var a = 1;
    oBox.onclick = function() {
        a++;
        if(a%2==0){
            this.style.background = 'red';

    }else if(a%2==1){
            this.style.background = 'green'
        }

    }
    
</script>
</html>

4、jQuery部分

　　1.jQuery是什麼？

jQuery是一個快速的，簡潔的JavaScript庫，是用能方便的處理HTMLdocuments，events，實現動畫效果，而且方便地爲網站提供AjAX交互

　　2. jQUery的優點是什麼？

它的文檔說明很全，並且各類應用也說的很詳細，同時還有不少成熟的插件可供選擇

　　3.什麼是jQUery對象？

jQuery對象就是經過jQuery包裝DOM對象後產生的對象。jQUery對象是jQUery獨有的，若是一個對象是jQuery對象，那麼它就可使用jQUery裏的方法：$("#test").html()

　　4.jQuery都有哪些選擇器？

1. 基礎選擇器
id選擇器$('#brother').css('color','red');
標籤選擇器：$('a').css({'color':'green','font-size':'24px'});
類選擇器：$('.li3').css('background','yellow');
通配符選擇器:console.log($(''));
$('').html('');    // 清空整個界面的dom元素

2.層級選擇器
後代選擇器：$('#box p').css('color','red');
子代選擇器：$('#box>p').css('color','green');
毗鄰選擇器，匹配全部的緊接着選中元素的兄弟：$('#father+p').css('font-size','30px');
兄弟選擇器 $('#father~p').css('background','gray');

3.過濾選擇器
獲取第一個 $('li:first').css('background','gray');
獲取最後一個 $('li:last').css('background','yellow');
獲取奇數 $('li:odd').css('color','red');
獲取偶數 $('li:even').css('color','green');
選中索引值爲1 $('li:eq(1)').css('font-size','32px');
大於索引值1 $('li:gt(1)').css('font-size','60px');
小於索引值1 $('li:lt(1)').css('font-size','10px');

4.屬性選擇器
$('li[id]').css('color','red');
$('li[class=what]').css('font-size','30px');
$('li[class!=what]').css('font-size','50px');
$('input[name^=username]').css('background','gray');
$('input[name$=222]').css('background','green');
$('button[class*=danger]').css('background','orange');

解釋：
        標籤名【屬性名】，查找全部含有id屬性的該標籤名的元素
        匹配給定的屬性 是what值 【attr=value】 匹配給定的屬性是某個特定值的元素
        沒有class也會發生變化，[attr!=value]匹配全部不包含有特定的屬性，或者屬性不等於特定值的元素
        匹配給定的屬性是以某些值開始的元素   ^ 
        匹配給定的屬性是以某些值結尾的元素   $
        匹配給定的屬性是以包含某些值的元素    *

　　5.篩選選擇器

$('span').eq(1).css('color','red');
$('span').first().css('font-size','28px');
$('span').last().css('color','greenyellow');
console.log($('span').parent());
$('span').parent('.p1').css({'width':'300px',height:'400px','background':'red'});
$('.list').siblings('li').css('color','red');
$('div').find('button').css('background','gray');


解釋：
    獲取第n個元素 數值從0開始 .eq()
    獲取第一個元素    .first()
    獲取最後一個元素    .last()
    獲取父元素       .parent()
    選擇全部的兄弟元素        .siblings（）
    查找全部的後代元素    .find()

　　6. 簡述一下jQuery的篩選器的分類，分別簡單舉例介紹一下。

過濾篩選器 如：$("li").eq(2) $("li").first() $("ul li").hasclass("test") 
查找篩選器 如： 查找子標籤： $("div").children(".test") $("div").find(".test") 
向下查找兄弟標籤： $(".test").next() $(".test").nextAll() $(".test").nextUntil() 
向上查找兄弟標籤： $("div").prev() $("div").prevAll() $("div").prevUntil() 
查找全部兄弟標籤： $("div").siblings()
查找父標籤： $(".test").parent() $(".test").parents() $(".test").parentUntil()

　　7. jQuery的美圓符號$有什麼做用？

其實美圓符號$只是「jQuery」的別名，它是jQuery的選擇器

　　8. body中的onload（）函數和jQuery中的document.ready()有什麼區別？

1. 咱們能夠在頁面中使用多個document.ready(),但只能使用一次onload()
2. document.ready()函數在頁面DOM元素加載完之後就會被調用，而onload（）函數則要在全部的關聯資源（包括圖像，音頻）加載完畢後纔會調用

　　9.jQuery中的Delegate（）函數有什麼做用？

1. 若是你有一個父元素，須要給其下的子元素添加事件，這時你可使用delegate（）了，代碼以下：
$("ul").delegate("li","click",function(){
$(this).hide();
});
2. 當元素在當前頁面中不可用時，可使用delegate（）
//事件代理：本身完成不了當前的點擊事件，交給父級元素作這件事件
//事件代理
$('ul').on('click','.name,.luffy',function(){
console.log($(this));
});

　　10. 請用jQuery實現，在一個表單中，若是將全部的div元素都設置爲綠色

$("div").css("color","green")

　　11. jQUery中的hover（）和toggle（）有什麼區別？

hover（）和toggle（）都是jQuery中兩個合成事件
hover（）方法用於模擬光標懸停事件
toggle()方法是連續點擊事件

　　12. jQuery表單提交前有幾種校驗方法？分別爲？

formData：返回一個數組，能夠經過循環調用來校驗
jaForm：返回一個jQuery對象，全部須要先轉換成dom對象
fileValue：返回一個數組
beforeSend（）

　　13. $(this) 和 this 關鍵字在 jQuery 中有何不一樣？

$(this)返回一個jQuery對象，你能夠對它調用多個jQuery方法，好比用text（）獲取文本，用val（）獲取值等
this 表明當前元素，它是JavaScript關鍵詞中的一個，表示上下文中的當前dom元素。你不能對它調用jQuery方法，直到它被$()函數包囊，例如：$(this)

　　14. jQuery中 detach() 和 remove() 方法的區別是什麼？

detach() 和 remove() 方法都被用來移除一個DOM元素，二者之間的主要不一樣在於：
detach() 會保持對過去被解除元素的跟蹤，所以它能夠被取消解除
remove（） 方法則會保持過去被移除對象的引用，你也還能夠看看 用來向DOM中添加元素的appendTO（）方法


var a = $('button').remove();
console.log(a[0],a[1]);
$('ul').append(a[0]);         // 時間沒了


var b = $('button').detach();
console.log(b[0]);
$('ul').append(b[0]);         //事件會保留

　　15. 你要是在一個 jQuery 事件處理程序裏返回了 false 會怎樣？

這一般用於阻止事件向上冒泡

　　16. 如何在點擊一個按鈕時使用 jQuery 隱藏一個圖片？

$('ButtonToClick').click(function(){
    $('#ImageToHide').hide();
});

　　17. jQuery.get() 和 jQuery.ajax()方法之間的區別是什麼?

ajax（）方法更強大，更具可配置性，讓你能夠指定等待多久，以及如何處理錯誤。
get（）方法是一個只獲取一些數據的專門化方法

　　18. 用jQuery如何將一個 HTML 元素添加到 DOM 樹中的？

經過appendTo（）方法在指定的DOM元素末尾添加一個現存的元素或者一個新的HTML元素
$('<a href='#'>luffy</a>').appendTo($('ul'));
append appendTo
prepend prependTo
before  insertBefore  after  insertAfter
clone   replaceWith  replaceAll
empty  remove  detach

　　19. 如何找到全部HTML select標籤的選中項？

$('[name=NameOfSelectedTag]:selected')
這段代碼結合使用了屬性選擇器和：selected選擇器，結果只返回被選中的選項。你可按需修改它，好比用id屬性而不是name屬性來獲取<select>標籤

　　20. remove（）和empty（）的區別？

remove：刪除節點，並刪除元素節點綁定的事件
empty：清空節點元素的內容，可是節點還存在，只是內容被清空，相似$().html('')

　　21. 在jQuery中你是如何去操做樣式的？

addClass（）來追加樣式
removeClass（）：刪除樣式
toggle（）：切換樣式

　　22. 簡述beforeSend方法有的做用？

發送請求前能夠修改XMLHTTPRequest對象的函數，在beforeSend中，若是返回false，能夠取消本次的ajax請求，XMLHTTPRequest對象是惟一的參數，因此在這個方法裏能夠作驗證

　　23. jQuery對象和dom對象是怎樣轉換的？

jQuery轉dom對象：jQuery對象是一個數組對象，能夠經過[index]的豐富獲得相應的DOM對象，還能夠經過get[index]去獲得相應的DOM對象
DOM對象轉jQuery對象：$(DOM對象）

　　24. radio單選選組的第二個元素爲當前選中值，該怎麼去取？

$('input[name=items]').get(1).checked = true;

　　25. 在ajax中data主要有幾種方式？

三種，
html拼接的，
json數組，
form表單經serialize()序列化的

　　26. jQuery 中的方法鏈是什麼？使用方法鏈有什麼好處？

方法鏈是對一個方法返回的結果調用另外一個方法，這使得代碼簡潔明瞭，同時因爲只對 DOM 進行了一輪查找，性能方面更加出色

　　27. 哪一種方式更高效：document.getElementbyId("myId") 仍是 $("#myId")？

第一種，由於它直接調用了 JavaScript 引擎。

5、Bootstrap部分

　　1.什麼是 Bootstrap？

Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。

　　2. 爲何使用 Bootstrap？

移動設備優先 瀏覽器支持 容易上手 響應式設計 它爲開發人員建立接口提供了一個簡潔統一的解決方案。 它包含了功能強大的內置組件，易於定製。 它還提供了基於 Web 的定製。 它是開源的。

　　3. Bootstrap 包含哪些內容？

1. 基本結構：Bootstrap 提供了一個帶有網格系統、連接樣式、背景的基本結構。
2. CSS：Bootstrap 自帶如下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。 
3. 組件：Bootstrap 包含了十幾個可重用的組件，用於建立圖像、下拉菜單、導航、警告框、彈出框等等。
4. JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您能夠直接包含全部的插件，也能夠逐個包含這些插件。 
5. 定製：您能夠定製 Bootstrap 的組件、LESS 變量和 jQuery 插件來獲得您本身的版本。

　　4. Bootstrap HTML編碼規範語法。

1. 用兩個空格來代替製表符（tab） -- 這是惟一能保證在全部環境下得到一致展示的方法。 2. 嵌套元素應當縮進一次（即兩個空格）。 
3. 對於屬性的定義，確保所有使用雙引號，毫不要使用單引號。 
4. 不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規範中明確說明這是可選的。 
5. 不要省略可選的結束標籤（closing tag）（例如，</li> 或 </body>）。

　　5. Bootstrap CSS編碼規範語法。

1. 用兩個空格來代替製表符（tab） -- 這是惟一能保證在全部環境下得到一致展示的方法。
2.爲選擇器分組時，將單獨的選擇器單獨放在一行。 
3. 爲了代碼的易讀性，在每一個聲明塊的左花括號前添加一個空格。 
4. 聲明塊的右花括號應當單獨成行。 
5. 每條聲明語句的 : 後應該插入一個空格。
6. 爲了得到更準確的錯誤報告，每條聲明都應該獨佔一行。 
7. 全部聲明語句都應當以分號結尾。最後一條聲明語句後面的分號是可選的，可是，若是省略這個分號，你的代碼可能更易出錯。 
8. 對於以逗號分隔的屬性值，每一個逗號後面都應該插入一個空格（例如，box-shadow）。,
9. 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的內部的逗號後面插入空格。這樣利於從多個屬性值（既加逗號也加空格）中區分多個顏色值（只加逗號，不加空格）。 
10.，對於屬性值或顏色參數，省略小於 1 的小數前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。 
11. 十六進制值應該所有小寫，例如，#fff。在掃描文檔時，小寫字符易於分辨，由於他們的形式更易於區分。
12. 儘可能使用簡寫形式的十六進制值，例如，用 #fff 代替 #ffffff。 
13. 爲選擇器中的屬性添加雙引號，例如，input[type="text"]。只有在某些狀況下是可選的，可是，爲了代碼的一致性，建議都加上雙引號。 
14. 避免爲 0 值指定單位，例如，用 margin: 0; 代替 margin: 0px;。

　　6. 讓中的每一行對鼠標懸停狀態做出響應的類名是什麼？

table-hover

　　7. 讓表格更加緊湊，單元格中的內補（padding）均會減半的類名是什麼？

table-condensed

　　8. 輸入框設置 readonly 後的結果是什麼？

禁止用戶修改輸入框中的內容。處於只讀狀態的輸入框顏色更淺（就像被禁用的輸入框同樣），可是仍然保留標準的鼠標狀態。

　　9. 輸入框設置 disabled 屬性後的結果是什麼？

禁止其與用戶有任何交互（焦點、輸入等）。被禁用的輸入框顏色更淺，而且還添加了 not-allowed 鼠標狀態。

　　10. 簡述下button都有哪些經常使用的狀態，及類名分別是什麼？

默認樣式    btn-default
首選項  btn-primary
成功    btn-success
通常信息    btn-info
警告    btn-warning
危險    btn-danger
連接    btn-link

　　11. 爲元素添加什麼屬性，使其表現出禁用狀態？

disabled

　　12. 經常使用的情境背景色都有哪些，並把類名寫出？

首選項  bg-primary
成功    bg-success
通常信息    bg-info
警告    bg-warning
危險    bg-danger

　　13. 簡述 .show 和 .hidden 類的做用？

能夠強制任意元素顯示或隱藏(對於屏幕閱讀器也能起效)

　　14. 在bootstrap中被刪除的文本使用什麼標籤？

<del>

　　15. 在bootstrap中無用文本使用什麼標籤？

<s>

　　16. 在bootstrap中額外插入的文本使用什麼標籤？

<ins>

　　17. 在bootstrap中爲文本添加下劃線使用什麼標籤？

<u>

　　18. 在bootstrap中給以內的每一行增長斑馬條紋樣式類名是什麼？

table-striped

　　19 . 簡介一下柵格系統

柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中,系統會自動分爲最多12列。

　　20. 在bootstrap中讓段落突出顯示的類名是什麼？

lead

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。