聲明：本教程源于本人學習的一些經驗的總結，希望大家幫忙完善與指正，也希望會給初學者帶來方便，希望大家不要隨便轉載，寫的不是很好，還不完善，不過轉載時要注明作者和出處，附加原文的鏈接地址，謝謝了

上講回顧：上一講我主要講解了一下網頁的基本結構與網頁主體部分的基本結構，以及常用的html標簽。

非常感謝網友對我的大力支持，謝謝你們給我的鼓勵！

我繼續上一講：又開始實戰了，代碼敲起來！

So easy !

標簽4：img

使用指數：****

功能：導入圖片

類型：內聯元素

常用屬性：id，class，title

特別屬性：1.src:導入圖片總要知道圖片在哪不是，src就解決這個問題。他的值就是圖片存放的路徑啦。

 　　　　  2.alt:與title功能類似，都是提示功能，我們知道有的時候一個網頁的圖片不一定及時（或者就是不能成功）加載，那么為了給用戶一個友好的說明，故用此屬性

例子：1.在E盤新建兩個文件夾，命名為html，和images。在html文件夾中建一個html文件命名為：index.html，復制一張你比較喜歡的圖片到images文件夾中（例如images.jpg），ok，代碼開始了：

index.html：

So easy ! 

插播廣告：../images/images.jpg：..代表返回到上一級文件，什么意思呢，我們的目的是找到html文件夾外面的images文件夾中的images.jpg文件，那我們就一步一步的進行，首先從html文件夾跳出來（..），這是我們已經指向E盤了，然后找E盤中的images文件夾（/images）;最后找到文件（/ images.jpg）;光聽我講是不行的，要多實踐哦！

當然img標簽還有兩個常用屬性width和height，分別來限制顯示圖片的寬度和高度；默認為圖片的實際尺寸，不妨試試這段代碼，你就明白啦：

So easy ! 

好，我們繼續頭部講解,導航的搜索框部分代碼被我省略了，表單元素準備單獨進行將講解。

So easy ! 

有人可能疑問這代碼的運行結果與所給的圖片差的太多了，哈哈，這是正常的，但到目前為止至少文字還是對的，如果感興趣可以提前去學習一下css；

好標簽繼續：

標簽5：ul

使用指數：*****

功能：構造一個無序列表，必須配合li來使用

類型：塊級元素

常用屬性：id，class

標簽6：ol

使用指數：*****

功能：構造一個有序列表，必須配合li來使用

類型：塊級元素

常用屬性：id，class

何為無序？何為有序？運行一下代碼便知分曉：

So easy ! 

感興趣的可以提前去看看他們的list-style屬性，你會覺得很有意思，這里就不介紹了，這部分還是在講解css的時候再說吧。到這里header就完成了。

整理：

So easy ! 

效果好難看。。。

至于content部分我只講三小塊，不要驚訝，因為其他的大體都是一樣的啊，目的還是為了讓大家認識一些常用的標簽，ok，Begin！Right now！

1:

代碼：

So easy ! 

標簽7：h1,h2,h3,h4,h5,h6

使用指數：***

功能：構造一個標題，通常用于顯示一塊的標題部分，或者文章的標題部分，默認的字體是加粗的，不同級別的標題標簽只是字體大小不同而已

類型：塊級元素

常用屬性：id，class

標簽8：p

使用指數：*****

功能：構造一個段落

類型：塊級元素（但是不同與div）

常用屬性：id，class

例子（這里我引用了w3cSchool的例子）：

2.

看這個結構顯然是一個沒有順序的列表：我們借此來鞏固學習一下ul，畢竟他很重要，另外的目的就是為下文鋪墊：

代碼：

So easy ! 

像這種文字以列表形式存在，而且沒有順序性，也沒有標題，我們通常可以使用ul和li的組合來描述

3.

這個與上面一個唯一的不同點就是多了一個標題（“求購信息”），可能有人會想到用這樣的組合完成：

當然是很好的，不過這里我要介紹里一個標簽組合來實現這個架構：

好亂啊，但其實你耐心一點就很容易了。

標簽9：dl

使用指數：*****

功能：構造一個列表，與dt，dd配合使用

類型：塊級元素

常用屬性：id，class

例子：

至于尾部我就不講了，相信你已經可以寫出他的html部分了

下一講我將為大家重點講解表單元素和table元素。