前的文章我們介紹了很多關于html以及css的基礎內容，從本篇文章開始我們要進行實戰訓練，我們實戰第一篇文章要介紹的就是初始化我們的css代碼；

1）為什么要初始化css代碼

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

其次初始化CSS樣式可以提高編碼質量，保持代碼的統一性，如果不初始化整個頁面做完很糟糕，重復的CSS樣式很多。去掉標簽的默認樣式如：margin,padding，其他瀏覽器默認解析字體大小，字體設置。

我們這里寫一個ul標簽以及a標簽，來看一下默認在網頁中的顯示效果；

從上圖我們可以看出a標簽以及ul標簽都有默認的樣式效果，而且ul距離左側有一段的空隙，如果我們不定義初始化效果的話每次都要進行單獨的修改，這樣會增加代碼的重復度。

2）我們要怎么去做？

1、最簡單的初始化css代碼的方式是使用通配符（*），重置所有的初始樣式。具體的css代碼如下所示：

但是我們不建議這么書寫：因為 *（星號）代表通配符表示了所有的標簽，編寫代碼的時候也非常快，但是這樣寫有一個弊端，就是在網站比較大時，CSS樣式文件也很大，這樣寫時，它會把所有的標簽都初始化一遍，這樣會加大網站運行的負荷，會讓網站加載的時候需要很長一段時間。

2、初始化代碼雖然個人習慣各有差異，但是大同小異，我們可以借鑒大公司的代碼來直接使用即可。下面給大家列舉下騰訊和淘寶的初始化代碼僅供參考，后期可以根據個人習慣進行刪減即可。

淘寶的初始化代碼如下所示：

騰訊的初始化代碼如下所示：

好了，本篇文章就給大家說到這里，大家自己下來可以自己模擬一下，找到適合自己使用的初始化代碼。

每日金句：你20歲時偷過的“懶”，就是你30歲時會掉進去的“坑”。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

篇文章我們說了初始化css的創建，本篇文章我們來說一下如何創建一個初始化html的基本模版以及初始化文件的創建。

1）初始化html文件的創建

我們在對一個網頁進行切圖編碼之前，我們需要創建這么幾個目錄文件， 便于存放我們的代碼；

css文件目錄：該目錄的作用是用于存放我們的網頁css文件，一般我們分為2個文件，一個是用于存放我們上篇文章說到的初始化代碼的base.css，還有一個是用于存放我們自己編寫的網頁代碼的style.css文件；

images文件目錄：該目錄的作用是用于存放我們網頁的切圖文件，網頁中的背景圖片以及元素圖標等都可以存放到此文件夾中；

js文件目錄：該目錄的作用是存放我們編寫的網頁javascript代碼（關于javascript代碼我們將在以后的文章中進行詳解），js代碼的作用是實現網頁中的基本動態展示效果，比如選項卡切換，banner輪播圖切換等效果；

另外還有一個文件就是我們的網頁html文件，首頁我們一般命名為index.html，一般放于跟目錄下邊。標準的目錄文件就如下圖所示：

備注：如果你的電腦看不到.html這個后綴的話, 在文件夾左上角找到組織-文件夾和搜索選項；

然后點擊查看-找到隱藏已知文件類型的擴展名-將前邊的對勾去掉即可；

2）標準html模版的創建

文件創建完成之后我們就要創建標準的index.html的網頁模版，一個網頁模版一般是由主體html、頭部head、內容body組成，其中head區域主要存放網頁標題、關鍵詞、頁面描述以及css和js代碼的引用；而body區域主要存放我們以后對頁面的編碼內容；

具體的標準模版顯示效果就如下圖所示：

好了，本篇文章就給大家說到這里，大家自己下來可以創建屬于自己的通用初始化文件模版，以后開發的時候直接復制使用即可。

每日金句：不要生氣要爭氣，不要看破要突破，不要嫉妒要欣賞，不要拖延要積極，不要心動要行動。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。