1、網頁前端基礎分析

我們知道網頁是由HTML+CSS+JavaScript結合起來共同完成靜態/動態網頁的開發，如果把一個網頁比喻成一個人，HTML相當於人的骨架，CSS是包裹骨架的肉和衣服，JavaScript是人做出的各種動作，而後臺語言是告訴前端需要做什麼，相當於人可以完成指定的任務工作，這樣前端+後臺組合成了一個有靈魂、有思想的人。我們知道任何一個網頁都是通過一個個盒子模型組合起來的，使用過網易部落格的同學都知道，其中有一個功能叫做部落格設定，在裡面可以編輯自己部落格主頁的組成和佈局，而每一個分塊都是一個盒子，因此前端介面都是通過一個個DIV+CSS組合，這就相當於人有上衣，有褲子，有鞋……

2、CSS初始化

因為不同的瀏覽器使用的是不同的核心，在解析資料時不同的瀏覽器對同一個html/css標籤可能出現不同的預設資料，導致在不同的瀏覽器顯示出不同的效果，為了避免這種情況的發生需要對css進行初始化，所謂初始化就是對css中的標籤設定指定的值，這樣瀏覽器拿到的是同一標籤的同一個值，就不會出現差異化。我們通過瀏覽器的檢視原始碼可以看到不同的網站都有自己的初始化程式碼，我們在開發過程可以借鑑。目前不同的網站進行初始化引用的方式也不同，引用CSS有四種方式，上一篇部落格已經講過，使用最多的就是第二種百度的初始化程式碼和第四種新浪微博的初始化程式碼。

3、CSS Sprite（精靈圖）

精靈圖是一種css影象合成技術，該方法是將一些用來在頁面顯示的小圖示整合在一張圖片上，通過url引用圖片，css的background定位合成圖的某一位置，這樣將多個圖片合成一張圖，減少了請求伺服器下載圖片的次數，提高了效能。通過瀏覽器的審查元素功能，可以找到各個網站用到的精靈圖：亞馬遜商城的精靈圖、噹噹網的精靈圖

注意：

不是把所有的圖片都可以合成到一張圖上，一定是一些小圖示，不會隨意改變大小的圖片，且對畫素沒有什麼要求。

在整合的時候要把每張圖片都留出一定的空間，至少不能重疊，否則無法定位顯示圖片。

.logo_l{
/*
*設定圖片的寬和高
*設定圖片的外邊距：按上、右、下、左的順序，這樣就能定點陣圖片在div區的位置
*/
	width: 200px;
	height: 55px;	
margin:24px 0 19px 9px;
/*
* 地址引用精靈圖，左上角的座標（0,0），-20px 0表示將圖片橫座標左移20px,縱座標不變，結合寬高得到圖片
*/
	background:url(../image/sprite.png) -20px 0;
//定義塊級元素的縮排，通過縮排將不要顯示的隱藏起來。
	text-indent:-9999px; 
}
 

總結：HTML和CSS其實涉及到的內容比較少，除了標籤就是屬性樣式，看知識點講解的視訊就那些東西，看完之後也沒有什麼感覺，通過這樣一個小的例項能夠很好的把學過的串聯起來，更深刻的理解每個標籤都可以應用到那些功能上，通過怎樣的組合可以使介面更美觀。不過估計我不適合做前端，做前端是需要精細和審美的，很顯然我都不具備。