上節課講了關于表格的一些更多知識和用表格配合div來進行網頁排版。
這節課開始講關于網頁圖片的相關知識。
上節課的課后練習
1.去網上搜索2個自己喜歡的圖片，1個圖片用來作為整個網頁的背景，另一個圖片可以進行重疊組成網頁的背景。
學哥找了2個大尺寸的圖片和2個小尺寸圖片，如下圖目錄所示：
在index.html所在的目錄下創建一個images目錄，將4個圖片全部放進去。
2.給技術經驗的表格增加一個表頭，標題分別是：技術類別，技術點，經驗年數。文字加粗顯示。
在技術經驗的表格的第一行增加一個tr，里面增加3個td，然后復制一個CSS樣式td1，改名為tdh，增加設置文字粗體，背景色設置為淡灰色。
css代碼修改如下：
html代碼修改如下：
刷新頁面：
可以看到，表頭的文字加粗，并且背景色為半透明淺灰色。
設置tdh的background-color:rgba(200,200,200,0.6);，這是一個新的寫法，通過CSS的函數rgba可以設置一個RGBA顏色，這種顏色值帶有一個alpha通道，可以設置顏色的透明度，也就是可以透過當前顏色的比率是多少。
RGBA 顏色值是這樣規定的：rgba(red, green, blue, alpha)。alpha 參數是介于 0.0（完全透明）與 1.0（完全不透明）的數字。
rgba(200,200,200,0.6);就是一個灰色的，透明度為0.6的一個半透明淺灰色。
因為整個body的背景色也是灰色的，因此這里就看不出來tdh的背景色是半透明的，可以來調整body的背景為一個圖片，就能看出來是半透明的了。
設置背景圖片
之前講了通過設置body的background-color屬性來設置整個網頁的背景色。
背景色設置有時候局限性比較大，很多網站都采用圖片來設置背景圖片，可以做到讓網頁更美觀。
設置背景圖片的CSS屬性是像這樣的：
url是一個CSS函數，里面參數是圖片的目錄路徑。
一般采用相對目錄路徑，也就是假設index.html存放在哪一個目錄下，則在這個目錄下創建一個images目錄，將background.jpg文件放到images目錄里面去。
修改css文件的body的樣式，增加background-image，同時刪除bigtitle的width屬性，因為div默認就是寬度為100%，為了防止該屬性對背景圖片的干擾，所以刪除掉不必要的屬性。
css代碼修改如下：
刷新頁面：
可以看到技術經驗的表格的背景色是半透明的，但是4個大標題的背景色不是半透明的，將它也改為半透明色。
修改CSS樣式bigtitle的background-color屬性值為半透明顏色值。
css代碼修改如下：
刷新頁面：
可以看到，大標題的背景色都是半透明的顏色了，這樣看起來比較美觀了。
但是發現一個問題，由于背景圖片的寬度正好是自動適應瀏覽器的寬度的，因此相應的高度不一定能正好完全填滿瀏覽器的高度，因此背景圖片默認是自動向y軸方向進行重復顯示的，顯示的高度根據當前顯示的內容的高度來自動截斷。
因此可以看到有一個明顯的界限，就是圖片開始重復顯示了。
有2種辦法解決這個不好的顯示，一種是做一個比較高的圖片，另一種方法是做一個圖片最下方的圖形顏色和最上方的圖形顏色非常接近或相同的圖片，這樣圖片在重復顯示的時候，就看不出明顯的界限了。
設置可以重復的背景圖片
前面從網絡上找到了，可以重復顯示的背景圖片，下面修改背景圖片看看效果如何。
css代碼修改如下：
刷新頁面：
img標簽和屬性
背景圖片是一個有效改變網頁顯示效果的方法，而圖片更是一個網站上最常用的元素，利用好圖片，可以讓網頁看起來更簡潔美觀大氣，簡稱“高大上”。
現在就來講講如何在網頁中添加圖片元素。
計劃這樣修改網頁：在技術經驗右側增加一個“成果展示”的部分，先修改成類似“工作經歷”和“工作經驗（部分）”一樣，用表格來進行排版，然后在“成果展示”里面增加2個圖片，用來展示曾經做過的項目成果物。
首先，修改“技術經驗”部分，修改為一個2行2列的表格，并添加“成果展示”的大標題部分。
利用前面的table，將table最后一行</td></tr></table>注釋掉不用了，然后修改為增加新的tr行，參照前面的寫法，再增加2行2列。
html代碼修改如下：
刷新頁面：
可以看到出現了新的版塊“成果展示”。里面有2個成果說明。
增加2個圖片
首先準備好2個圖片，圖片格式可以是jpg,png,gif等等，講圖片存放到images目錄下。
然后修改html代碼，使用img標簽來添加圖片，使用形式是這樣的：
img標簽是空標簽，類似于之前的
標簽。它只包含屬性，并且沒有閉合標簽。
使用屬性src來設置要顯示的圖像URL地址。
這里的URL地址可以是一個本地的路徑和文件名，也可以是一個網絡URL地址。
例子：
顯示當前html文件同目錄下的images目錄下的coke12.png圖片文件。
顯示一個網站的圖片網絡地址。
來增加成果展示的圖片，修改html代碼如下：
刷新頁面：
可以看到第1個圖片顯示的非常成功。這里要注意在img標簽設置了屬性width="100%"，這里的寬度是指相對于img標簽元素的父元素而言的，并不是指相對于整個瀏覽器的寬度。也就是前面說過的標簽元素的屬性繼承關系要非常清楚。
大家可以把width="100%"這個屬性去除，刷新頁面看看，體驗一下。
第2個圖片使用了一個網絡地址，大家如果將這個網絡地址直接復制到瀏覽器的地址欄里面去訪問的話，會發現這個圖片文件是不存在的。所以這里的網頁上會呈現一個小圖標，表示圖片資源文件不存在的意思是。
可以通過給img標簽設置alt屬性的方式來給圖像定義一串預備的替換文本，當瀏覽器無法載入圖像時，瀏覽器會顯示這個文本而不是圖像。給頁面上的圖像都加上替換文本是一個好習慣，這樣有助于更好的顯示信息。
給2個圖片都加上alt屬性，修改html代碼如下：
刷新頁面：
可以看到第2個圖片顯示了替換文本。
圖片不存在，終歸是要修改的，來把圖片修改為一個存在的文件。
修改html代碼如下：
刷新頁面：
可以看到這個圖片是一個gif圖片，有動畫效果的。
HTML注釋和CSS注釋
剛才有一行代碼： 比較特殊，這是一個HTML注釋標簽。
注釋標簽的格式 ，當中的注釋內容是可以多行的。
注釋標簽的開始標簽有一個驚嘆號，結束標簽中沒有。
瀏覽器不會顯示注釋內容，類似于python代碼中用#注釋一行不會被執行的代碼。
注釋標簽的作用，一般都是用來記錄或者說明代碼的用途作用等等給程序員來閱讀的。
也可以臨時保存暫時用不到的代碼，方便以后可能的使用。
將html代碼中的這行刪除，這里不需要保留了。
前面說明了HTML注釋，同樣的CSS也可以添加注釋。
使用//兩個斜杠符號對單行CSS代碼進行注釋。
使用/* 注釋內容 /對單行或者多行CSS代碼進行注釋。以“斜杠+型號”開始，“星號+斜杠”結束，均為英文半角小寫。
一般都使用/ */進行注釋，這個包含了單行注釋，比較方便。
注釋掉的CSS樣式將不會體現在瀏覽器網頁樣式顯示。
下面來驗證一下CSS注釋。
學哥覺得這次選擇的背景圖片不是太美觀，還是之前的淡灰色的背景色比較美觀大氣，因此打算修改CSS文件的body的background設置，但是又不確定以后如果找到了更合適的背景圖片，可能還會修改為背景圖片，因此，可以暫時把代碼注釋掉，說不定以后會用的著。
css代碼修改如下：
刷新頁面：
關于代碼縮進
代碼寫到現在，雖然只有2個文件，但是內容已經不少了。html文件有64行，css文件有100行。
大家可能發現，學哥的html代碼沒有注意縮進，也就是標簽元素的層次沒有通過縮進來顯示。
這是因為，學哥為了截圖的時候盡量讓代碼文字大一些，為了讓大家看代碼的時候不容易看錯，而特意設置了一行文本最多顯示60個英文字符。如果在每行前面再增加縮進，那么一行文字能夠實際顯示的字符數就更少了，迫不得已，學哥只能放棄縮進，讓每行文字都頂格寫。雖然這樣寫代碼看起來不太美觀，但學哥因為編程經驗豐富，出錯的可能性是比較小的。
那么對于初學者來說，一定要按照規范每一行都要縮進，讓代碼的層次更清楚。
下面學哥將2種書寫代碼的方式都截圖，大家對比一下看看。一定注意要按照規范的縮進格式來編寫代碼，從而減少錯誤。
不規范的html代碼（字大能看的更清楚）：
不規范的的css代碼（字大能看的更清楚）：
規整的html代碼（字小看不太清楚）：
規整的css代碼（字小看不太清楚）：
課后練習
準備做2個新的網頁，設計好里面的文字內容和圖片。
往期教程
因為教程是系列教程，前后關聯性非常強，請大家按照歷史消息發布時間先后次序進行閱讀。
