上一講我主要講解了一下網(wǎng)頁的基本結(jié)構(gòu)與網(wǎng)頁主體部分的基本結(jié)構(gòu)，以及常用的html標簽。

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

我繼續(xù)上一講：又開始實戰(zhàn)了，代碼敲起來！

So easy !

標簽4：img

使用指數(shù)：****

功能：導入圖片

類型：內(nèi)聯(lián)元素

常用屬性：id，class，title

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

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

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

index.html：

So easy ! 

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

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

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



So easy !
有人可能疑問這代碼的運行結(jié)果與所給的圖片差的太多了，哈哈，這是正常的，但到目前為止至少文字還是對的，如果感興趣可以提前去學習一下css；
好標簽繼續(xù)：
標簽5：ul
使用指數(shù)：*****
功能：構(gòu)造一個無序列表，必須配合li來使用
類型：塊級元素
常用屬性：id，class
標簽6：ol
使用指數(shù)：*****
功能：構(gòu)造一個有序列表，必須配合li來使用
類型：塊級元素
常用屬性：id，class
何為無序？何為有序？運行一下代碼便知分曉：



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



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

代碼：


So easy !
標簽7：h1,h2,h3,h4,h5,h6
使用指數(shù)：***
功能：構(gòu)造一個標題，通常用于顯示一塊的標題部分，或者文章的標題部分，默認的字體是加粗的，不同級別的標題標簽只是字體大小不同而已
類型：塊級元素
常用屬性：id，class
標簽8：p
使用指數(shù)：*****
功能：構(gòu)造一個段落
類型：塊級元素（但是不同與div）
常用屬性：id，class
例子（這里我引用了w3cSchool的例子）：



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


So easy !
像這種文字以列表形式存在，而且沒有順序性，也沒有標題，我們通?？梢允褂胾l和li的組合來描述

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


當然是很好的，不過這里我要介紹里一個標簽組合來實現(xiàn)這個架構(gòu)：


好亂啊，但其實你耐心一點就很容易了。
標簽9：dl
使用指數(shù)：*****
功能：構(gòu)造一個列表，與dt，dd配合使用
類型：塊級元素
常用屬性：id，class
例子：


至于尾部我就不講了，相信你已經(jīng)可以寫出他的html部分了
下一講我將為大家重點講解表單元素和table元素。

最新評論