CSS Sprites
1.簡介
CSS Sprites在國內很多人叫css精靈，是一種網頁圖片應用處理方式。它允許將一個頁面涉及到的所有零星圖片
都包含到一張大圖中， 利用CSS的“background-p_w_picpath”，“background- repeat”，“background-position”的組合
進行背景定位， 訪問頁面時避免圖片載入緩慢的現象。
2.優點
（1）CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這是CSS Sprites最大的優點，
也是其被廣泛傳播和應用的主要原因；
（2）CSS Sprites能減少圖片的字節；
（3）CSS Sprites解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片命名，不需要對每一個小圖
片進行命名，從而提高了網頁製作效率。
（4）CSS Sprites只需要修改一張或少張圖片的顏色或樣式來改變整個網頁的風格。
3.缺點
（1）圖片合併麻煩：圖片合併時，需要把多張圖片有序的合理的合併成一張圖片，並留好足夠的空間防止版
塊出現不必要的背景。
（2）圖片適應性差：在高分辨的屏幕下自適應頁面，若圖片不夠寬會出現背景斷裂。
（3）圖片定位繁瑣：開發時需要通過工具測量計算每個背景單元的精確位置。
（4）可維護性差：頁面背景需要少許改動，可能要修改部分或整張已合併的圖片，進而要改動css。在避免
改動圖片的前提下，又只能（最好）往下追加圖片，但這樣增加了圖片字節。
2.Bootstrap 排版、鏈接樣式設置了基本的全局樣式。
font-size 設置爲 14px，line-height 設置爲 1.428。
<p> （段落）元素還被設置了等於 1/2 行高（即 10px）的底部外邊距（margin）。
3..text-muted:文字的顏色換成灰色
.text-primary:文字的顏色變成藍色
.text-success:文字的顏色變成綠色
.text-info:文字的顏色變成暗藍色
.text-warning:文字顏色變成暗黃色
.text-danger：文字的顏色變成紅色
4.HTML5新增的表單元素：
datalist規定輸入域的選項列表，通過option創建！
keygen提供一種驗證用戶的可靠方法，密鑰對生成器，私鑰存於客戶端，公鑰發到服務器，用於之後驗證客戶端證書！
output元素用於不同類型的輸出！
5.柵格系統：
會有自動的padding樣式
其字體默認爲14px
其box-sizing默認爲border-box
6.HTML中的標籤分爲閉合標籤和自閉合標籤。 自閉合標籤有<input/><img/><br/><link/><hr/>等
注意<p></p>不是自閉和標籤
7.Bootstrap中：
主要藍（bg-primary），成功綠（bg-success）、信息藍（bg-info）、
警告黃（bg-warning）、危險紅（bg-danger）都可以給文字加上背景顏色。
8.onchange 事件：Event 對象
定義和用法：onchange 事件會在域的內容改變時發生。
語法
onchange="SomeJavaScriptCode"
參數 描述
SomeJavaScriptCode 必需。規定該事件發生時執行的 JavaScript。
支持該事件的 HTML 標籤： <input type="text">, <select>, <textarea>
支持該事件的 JavaScript 對象：fileUpload, select, text, textarea
9.幀元素優先級最高，表單元素總是比非表單元素優先級高,
input屬於窗體元素,層級顯示比flash低。
10.display屬性 :
block : CSS1 塊對象的默認值。將對象強制作爲塊對象呈遞，爲對象之後添加新行 可以定義高度和寬度
none : CSS1 隱藏對象。與 visibility 屬性的hidden值不同，其不爲被隱藏的對象保留其物理空間
inline : CSS1 內聯對象的默認值。將對象強制作爲內聯對象呈遞，從對象中刪除行
inline-block : IE5.5 將對象呈遞爲內聯對象，但是對象的內容作爲塊對象呈遞。
旁邊的內聯對象會被呈遞在同一行內 inherit: 看display默認是不具備繼承性的，
使用inherit可以讓其繼承父對象的display屬性。
11.有兩種寫法：
document.getElementById("input").style.backgroundColor = "red";
inputElement.style.backgroundColor = "#FF0000";
這兩種方法都可以讓一個input的背景顏色變成紅色
12.一個網頁常用<h1>文章標題</h1> 來定義標題，這樣方便SEO優化.
13.html語言中加粗的標籤有<b>和<strong>,或者使用css設置｛font-weight:bold｝
14.CSS中link和@import的區別:
link屬於XHTML標籤，而@import完全是CSS提供的一種方式
當一個頁面被加載的時候，link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載.
link在支持CSS的瀏覽器上都支持而@import只在5.0以上的版本有效.
1，@import url（）機制是不同於link的，link是在加載頁面前把css加載完畢，而@import url（）則是讀取完文件後在加載，所以會出現一開始沒有css樣式，閃爍一下出現樣式後的頁面(網速慢的情況下)。
2，@import 是css2裏面的，所以古老的ie5不支持。
3，當使用javascript控制dom去改變樣式的時候，只能使用link標籤，因爲@import不是dom可以控制的。
4，link除了能加載css外還能定義RSS，定義rel連接屬性，@import只能加載css
頁面中使用CSS的方式主要有3種：
行內添加定義style屬性值，
頁面頭部內嵌調用和外面鏈接調用，
其中外面引用有兩種：link和@import。外部引用CSS兩種方式link和@import的方式分別是：
XML/HTML代碼
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
XML/HTML代碼
<style type="text/css" media="screen">
@import url("CSS文件");
</style>
兩者都是外部引用CSS的方式，但是存在一定的區別：
區別1：link是XHTML標籤，除了加載CSS外，還可以定義RSS等其他事務；@import屬於CSS範疇，只能加載CSS。
區別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以後加載。
區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區別4：ink支持使用Javascript控制DOM去改變樣式；而@import不支持。
補充：@import最優寫法
@import的寫法一般有下列幾種：
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不識別
@import url(style.css) //Windows NS4, Macintosh NS4不識別
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別
@import url("style.css") //Windows NS4, Macintosh NS4不識別
由上分析知道，@import url(style.css) 和@import url("style.css")是最優的選擇，兼容的瀏覽器最多。
從字節優化的角度來看@import url(style.css)最值得推薦。
15.background-p_w_upload :定義背景圖片隨滾動軸的移動方式
取值: scroll | fixed | inherit
scroll: 隨着頁面的滾動軸背景圖片將移動
fixed: 隨着頁面的滾動軸背景圖片不會移動
inherit: 繼承初始值: scroll
繼承性: 否
適用於: 所有元素
background-origin 屬性規定 background-position 屬性相對於什麼位置來定位。
background-clip 屬性規定背景的繪製區域。
16.有一個元素，需要在pc端顯示而在手機端隱藏，需要使用的方法是visible-md-8 hidden-xs
柵格選項
bootstrap3.x使用了四種柵格選項來形成柵格系統，這裏跟大家詳解一下四種柵格選項之間的區別， 其實區別只有一條就是適合不同尺寸的屏幕設備 。我們看class前綴這一項，我們姑且以前綴命名這四種柵格選項，他們分別是col-xs、col-sm、col-md、col-lg，我們懂英文的就知道，lg是large的縮寫，md是mid的縮寫，sm是small的縮寫，xs是extremely small的縮寫。
mobile – xs ( <768px )
tablet – sm ( 768~991px )
desktop – md ( 992~1170px )
large desktop – lg ( >1170px )
17.img標籤中的alt屬性的作用是提供替代圖片的信息，使屏幕閱讀器能獲取到關於圖片的信息。
alt=“ ”裏面放圖片的描述信息，有時候網絡問題圖片顯示不出來，可以顯示該文字信息替代圖片
18.Internet Explorer 9+ 支持 border-radius 和 box-shadow 屬性。
Firefox 、 Chrome 以及 Safari 支持所有新的邊框屬性。
註釋：對於 border-p_w_picpath ， Safari 5 以及更老的版本需要前綴 -webkit- 。
Opera 支持 border-radius 和 box-shadow 屬性，但是對於 border-p_w_picpath 需要前綴 -o-
19.關於IE、FF，CSS的解釋區別描述：
火狐瀏覽器中，非float的div前面有同一父級的float的div，此div若有背景圖，要使用clear：both，才能顯示背景圖，而IE6.0中不用使用clear：both。
在[text-decoration:underline]的屬性下，IE6.0顯示的下劃線會比FireFox低一點。在FireFox中，部分筆畫會在下劃線的下面1個象素左右。
20.爲<table>標籤添加.table類可以給表格添加水平分割線；
爲表格添加table-bordered類可爲表格中每個元素增加邊框；
爲表格添加table-hover類可爲表格中增加鼠標懸停樣式； <br/>
bootstrap
.table 爲任意 <table> 添加基本樣式 (只有橫向分隔線)
.table-striped 在 <tbody> 內添加斑馬線形式的條紋 ( IE8 不支持)
.table-bordered 爲所有表格的單元格添加邊框
.table-hover 在 <tbody> 內的任一行啓用鼠標懸停狀態
.table-condensed 讓表格更加緊湊
21.常用的頁面的圖片格式有三種，GIF、JPG、PNG。 GIF 意爲Graphics Interchange format（圖形交換格式）； JPEG 代表Joint Photograhic Experts Group（聯合圖像專家組），這種格式經常寫成JPG，JPG圖片的擴展名爲jpg；流式網絡圖形格式(Portable Network Graphic Format，PNG)名稱來源於非官方的“PNG's Not GIF”，是一種位圖文件(bitmap file)存儲格式，讀成“ping”。PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，並且還可存儲多到16位的α通道數據。
標籤圖像文件格式 （ Tagged Image File Format ，簡寫爲 TIFF ）是一種靈活的 位圖 格式，主要用來存儲包括照片和藝術圖在內的圖像。 TIFF文件格式適用於在應用程序之間和計算機平臺之間的交換文件，它的出現使得圖像數據交換變得簡單。 TIFF文件以 .tif 爲擴展名。其數據格式是一種3級體系結構，從高到低依次爲：文件頭、一個或多個稱爲IFD的包含標記指針的目錄和數據。
嵌入在HTML文檔中的圖像格式可以是:*.gif , *.bmp , *.jpg.
22.
<tr>
<th >規則名稱：</th>
<td ><input type="text" size="45" id="ruleName" maxlength="30" name="ruleName"/>
<font color="red">*</font>
</td>
</tr>
size:用於設置輸入框的長度。maxlength:用於設置輸入字符的個數限制，在這裏只能輸入30個字符。
23. jquery radio的取值 radio的選中 radio的重置
radio 按鈕組, name=”sex”.
<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>
1. 獲取radio選中的value.
$('input:radio[name=sex]:checked').val();
2. 選擇 radio 按鈕 (Male).
$('input:radio[name=sex]:nth(0)').attr('checked',true);
或者
$('input:radio[name=sex]')[0].checked = true;
3. 選擇 radio 按鈕 (Female).
$('input:radio[name=sex]:nth(1)').attr('checked',true);
或者
$('input:radio[name=sex]')[1].checked = true;
4. 選擇 radio 按鈕 (Unknown).
$('input:radio[name=sex]:nth(2)').attr('checked',true);
或者
$('input:radio[name=sex]')[2].checked = true;
5. 重置 radio 按鈕.
$('input:radio[name=sex]').attr('checked',false);