web網頁練習

 

一. HTML部分

1. XHTML和HTML有什么區別

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。

 

2. 前端頁面有哪幾層構成，分別是什么?作用是什么?

1, 結構層 Html(頁面結構內容，骨架) 表示層
2, CSS（網頁的樣式和外觀） 行為層
3, js（實現網頁的交互，動畫效果）

 

3. 請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；

參考https://www.cnblogs.com/caiyezi/p/5619506.html

4. form表單中input標簽的readonly和disabled屬性有何區別？

readonly=“readonly”是只讀，不可以修改，
disabled=“disabled”是禁用，整個文本框是顯示灰色狀態 
form 中method是數據傳遞的方式，action是與后台數據庫提交的

5. 內聯標簽有哪些？塊級標簽有哪些？

行內標簽：a br span strong label  
塊級標簽：div p h1-h6 form ul ol li table

6. 內聯標簽和塊級標簽有什么區別？

內聯標簽不可以設置寬高，不獨占一行；
塊級標簽可以設置寬高，獨占一行。

 

7. 簡述form標簽的功能和屬性？

功能：表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互
屬性：
1，action: 表單提交到哪.一般指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）作相應處理；定義表單提交時發生的動作，提交給服務器處理程序的地址。 2，method: 定義表單的提交方式 post/get默認取值就是get。get，明文提交，所提交的數據可以顯示在地址上，安全性低，提交數據有大小限制，最大2k；post隱式提交，不會顯示在地址上，安全性高，沒有大小限制。

 

8. 圖形標簽是什么，它的主要屬性有哪些？

<img>標簽
主要屬性：
src: 要顯示圖片的路徑地址.
alt: 圖片沒有加載成功時的提示顯示的內容.
title: 鼠標懸浮時的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

 

9. input標簽都有哪些類型？

type：
text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框 
submit 提交按鈕 
button 按鈕(需要配合js使用.)
file 提交文件

 

10. input標簽都有哪些屬性？

name：表單提交項的鍵
value：表單提交項的值.對於不同的輸入類型，value 屬性的用法也不同
checked：radio 和 checkbox 默認被選中
readonly：只讀. text 和 password
disabled：對所用input都好使

 

11. src和href的區別？

src指向外部資源的位置, 用於替換當前元素, 比如js腳本, 圖片等元素
href指向網絡資源所在的位置, 用於在當前文檔和引用資源間確定聯系, 加載css

 

12. 選擇器中 id，class有什么區別？
在網頁中 每個id名稱只能用一次，class可以允許重復使用

二. CSS部分

1. css的基本語法？
由兩個主要的部分構成：選擇器，以及一條或多條聲明

2. css的引入方式有哪些？
1，行內式
2，嵌入式
3，鏈接式
4，導入式

3. css的選擇器有哪些？

1.基本選擇器：標簽選擇器、類選擇器、ID選擇器、通用選擇器；
2.組合選擇器：后代選擇器（以空格分割）、子元素（兒子）選擇器（以>分割）、相鄰兄弟（毗鄰）選擇器（以+分割）、兄弟（弟弟）選擇器（~）
3.屬性選擇器： ID、class屬性，元素的特定屬性選擇元素。           [class='值']、 [class^='開頭的值']、 [class$='結尾的值']、[title*="hello"]、表單input[type="text"] 

4.分組選擇器：在多個選擇器之間用，分割；如div,p{  }

5.偽類選擇器：沒有訪問的超鏈接a標簽樣式a:link{ }、訪問過的超鏈接a標簽樣式a：visited { }、鼠標懸浮a：hover{ }、鼠標點擊a：active{ }、獲取焦點input：focus{ }

6.偽元素選擇器：first-letter用於文本的首字母設置樣式如p：first-letter、before是在元素內容前面插入新內容如p：before、after用在元素的內容后面插入新內容

 

4. css偽類的作用？
CSS偽類是用來添加一些選擇器的特殊效果。

5. 什么是css優先級，其基本規則是什么？
CSS優先級，即是指CSS樣式在瀏覽器中被解析的先后順序。
基本規則：
1，內聯樣式表的權值最高（內聯樣式）
2，統計選擇符中的ID屬性個數（ID選擇器）
3，統計選擇符中的CLASS屬性個數（類選擇器）
4，統計選擇符中的HTML標簽名個數（元素選擇器）

6. CSS隱藏元素的幾種方法（至少說出三種）
　　1.Opacity:元素的透明度，設置為0，元素本身依然占據它自己的位置並對網頁的布局起作用。它也將響應用戶交互;
　　2.Visibility:將它的值設置為hidden；與 opacity 唯一不同的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏;
　　3.Display:display 設為 none 任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在;
　　4.Position:將元素移至可視區域，既不會影響布局，能讓元素保持可以操作;
　　5.Clip-path:通過剪裁，clip-path 屬性還沒有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低;
　　參考：http://www.divcss5.com/rumen/r18099.shtml

7. CSS清除浮動的幾種方法（至少兩種）
　　1.使用帶clear屬性的空元素；
　　2.使用CSS的overflow屬性；
　　3.使用CSS的:after偽元素；
　　4.使用鄰接元素處理。

8. 頁面導入樣式時，使用link和@import有什么區別？
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 和 pading;
盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)

10. display:none和visibility:hidden的區別是什么？
visibility：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屬性也是對其起作用的，有着類似於Inline-block的行為）

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.部分動畫功能無法實現（如滾動動畫，視差滾動等）

 

 三. 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返回哪些數據類型？
Object  number  function  boolean  underfind

7. 分別解釋數組方法pop()、push()、unshift()、shift()的功能？
pop()尾部刪除
Push()尾部添加
Unshift()頭部添加
shift()頭部刪除

8. ajax請求的時候get 和post方式的區別？
GET方式參數放在url后面
POST放在虛擬載體里面有大小限制
安全問題應用不同一個是論壇等只需要請求的，一個是類似修改密碼的

9. ajax請求時，如何解釋json數據？
使用eval parse,鑒於安全性考慮 使用parse更靠譜

10. 事件委托是什么？
讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行

事件委托是利用事件的冒泡原理來實現的，何為事件冒泡呢？就是事件從最深的節點開始，然后逐步向上傳播事件，舉個例子：頁面上有這么一個節點樹，div>ul>li>a;比如給最里面的a加一個click點擊事件，那么這個事件就會一層一層的往外執行，執行順序a>li>ul>div，有這樣一個機制，那么我們給最外面的div加點擊事件，那么里面的ul，li，a做點擊事件的時候，都會冒泡到最外層的div上，所以都會觸發，這就是事件委托，委托它們父級代為執行事件。

參考：https://www.cnblogs.com/liugang-vip/p/5616484.html

 

11. 添加 刪除 替換 插入到某個節點的方法分別是什么？
添加：obj.appendChidl()
刪除：obj.removeChild()
替換：obj.replaceChild()
插入：obj.innersetBefore()

12. 簡述一下什么是javascript的同源策略？
一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這里的同一來源指的是主機名、協議和端口號的組合

參考：http://www.jb51.net/article/66500.htm

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);  //相當於newA（）;
            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

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. 3 + 2 +“7”的結果是什么？
由於3和2是整數，它們將直接相加。由於7是一個字符串，它將會被直接連接，所以結果將是57。

四. jQuery部分

1. jQuery是什么？
jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTMLdocuments、events、實現動畫效果，並且方便地為網站提供AJAX交互

2. jQuery的優勢是什么？
它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇

3. 什么是jQuery對象？
jQuery 對象就是通過jQuery包裝DOM對象后產生的對象。jQuery 對象是 jQuery 獨有的. 如果一個對象是 jQuery 對象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html()

4. jQuery都有哪些選擇器？

基本選擇器：id選擇器、標簽選擇器、類選擇器、通配符選擇器、
層級選擇器 ：后代選擇器 $('div p')、子代選擇器$('div>p')、毗鄰選擇器$('#brother+li')、兄弟選擇器$('#brother~li')、:first獲取第一個元素 $('li:first')、:last獲取最后一個元素
基本篩選器：獲取第n個元素 數值從0開始$('span').eq(0)、$('span').first(). last是獲取最后一個、.parent() 選擇父親元素 $('span').parent('.p1').、.siblings()選擇所有的兄弟元素、.find()查找所有的后代元素$('div').find('button')

基本過濾選擇器:first 獲取第一個元素、:odd 匹配所有索引值為奇數的元素，從0開始計數、:even 匹配所有索引值為偶數的元素，從0開始計數、:eq(index) 獲取給定索引值的元素 從0開始計數、:gt(index)匹配所有大於給定索引值的元素、:lt(index) 匹配所有小於給定索引值的元素、一個給定索引值的元素$('p:eq(3)')

屬性選擇器：標簽名[屬性名] 查找所有含有id屬性的該標簽名的元素$("li[id]")、[attr=value] 匹配給定的屬性是某個特定值的元素$('li[class=what]')、[attr!=value] 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素$('li[class!=what]')、匹配給定的屬性是以某些值開始的元素$('input[name^=username]').、匹配給定的屬性是以某些值結尾的元素$('input[name$=222]')、匹配給定的屬性是以包含某些值的元素$("button[class*='btn']")

表單選擇器

 

5. 簡述一下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()

 

6. jQuery的美元符號$有什么作用？
其實美元符號$只是”jQuery”的別名，它是jQuery的選擇器

7. body中的onload()函數和jQuery中的document.ready()有什么區別？

1.我們可以在頁面中使用多個document.ready()，但只能使用一次onload()。
2.document.ready()函數在頁面DOM元素加載完以后就會被調用，而onload()函數則要在所有的關聯資源（包括圖像、音頻）加載完畢后才會調用。

8. jQuery中的Delegate()函數有什么作用？

1.如果你有一個父元素，需要給其下的子元素添加事件，這時你可以使用delegate()了，代碼如下：
        $("ul").delegate("li", "click", function(){
            $(this).hide();
        });
2.當元素在當前頁面中不可用時，可以使用delegate()

 

9. 請用jQuery實現，在一個表單中，如果將所有的div元素都設置為綠色。
$(“div”).css(“color”,”green”)

10. jQuery中的hover()和toggle()有什么區別？
hover()和toggle()都是jQuery中兩個合成事件。
hover()方法用於模擬光標懸停事件。
toggle()方法是連續點擊事件。

11. jquery表單提交前有幾種校驗方法？分別為？

formData:返回一個數組，可以通過循環調用來校驗
jaForm：返回一個jQuery對象，所有需要先轉換成dom對象
fieldValue：返回一個數組
beforeSend()

12. $(this) 和 this 關鍵字在 jQuery 中有何不同？
$(this) 返回一個 jQuery 對象，你可以對它調用多個 jQuery 方法，比如用 text() 獲取文本，用val() 獲取值等等
this 代表當前元素，它是 JavaScript 關鍵詞中的一個，表示上下文中的當前 DOM 元素。你不能對它調用 jQuery 方法，直到它被 $() 函數包裹，例如 $(this)

13. jQuery中 detach() 和 remove() 方法的區別是什么？
detach() 和 remove() 方法都被用來移除一個DOM元素, 兩者之間的主要不同在於
detach() 會保持對過去被解除元素的跟蹤, 因此它可以被取消解除,
而 remove() 方法則會保持過去被移除對象的引用. 你也還可以看看 用來向DOM中添加元素的 appendTo() 方法

14. 你要是在一個 jQuery 事件處理程序里返回了 false 會怎樣？
這通常用於阻止事件向上冒泡。

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

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

16. jQuery.get() 和 jQuery.ajax()方法之間的區別是什么?
ajax() 方法更強大，更具可配置性, 讓你可以指定等待多久，以及如何處理錯誤。get() 方法是一個只獲取一些數據的專門化方法。

17. 用jQuery如何將一個 HTML 元素添加到 DOM 樹中的？
通過appendTo() 方法在指定的 DOM 元素末尾添加一個現存的元素或者一個新的 HTML 元素。

18. 如何找到所有 HTML select 標簽的選中項？
$('[name=NameOfSelectedTag] :selected')
這段代碼結合使用了屬性選擇器和 :selected 選擇器，結果只返回被選中的選項。你可按需修改它，比如用 id 屬性而不是 name 屬性來獲取 <select> 標簽。

19. remove() 和 empty()的區別？
remove, 刪除節點，並刪除元素節點綁定的事件。
empty, 清空節點元素的內容，但是節點還存在，只是內容被清空，類似$().html(' ')

20. 在jquery中你是如何去操作樣式的？
addClass() 來追加樣式
removeClass() 來刪除樣式
toggle() 來切換樣式

21. 簡述beforeSend方法有的作用？
發送請求前可以修改XMLHttpRequest對象的函數，在beforeSend中，如果返回false 可以取消本次的Ajax請求。XMLHttpRequest對象是唯一的參數，所以在這個方法里可以做驗證。

22. jquery對象和dom對象是怎樣轉換的？
jquery轉DOM對象:jQuery對象是一個數組對象，可以通過[index]的豐富得到相應的DOM對象還可以通過get[index]去得到相應的DOM對象。
DOM對象轉jQuery對象:$(DOM對象)

23. radio單選組的第二個元素為當前選中值，該怎么去取？
$('input[name=items]').get(1).checked = true;

24. 在ajax中data主要有幾種方式？
三種:
html拼接的，
json數組，
form表單經serialize()序列化的

25. jQuery 中的方法鏈是什么？使用方法鏈有什么好處？
方法鏈是對一個方法返回的結果調用另一個方法，這使得代碼簡潔明了，同時由於只對 DOM 進行了一輪查找，性能方面更加出色

26. 哪種方式更高效：document.getElementbyId("myId") 還是 $("#myId")？
第一種，因為它直接調用了 JavaScript 引擎。

五、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. 讓 <tbody> 中的每一行對鼠標懸停狀態作出響應的類名是什么？
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. 為 <button> 元素添加 什么 屬性，使其表現出禁用狀態？
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中給 <tbody> 之內的每一行增加斑馬條紋樣式類名是什么？
table-striped

19. 簡介一下柵格系統。
柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中,系統會自動分為最多12列。

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