這篇文章主要給大家詳細解釋一下這些代碼的作用和意義，以及編寫網(wǎng)頁代碼的格式與思路。

下面我貼上html代碼：

<!--HTML--
<div
<h2這是我的第一個網(wǎng)頁</h2
<pBODY標簽表示網(wǎng)頁主體元素的容器，它包含了網(wǎng)頁所有的html標簽如：文本、圖片、列表等等。以后我們編寫的網(wǎng)頁標簽都需要放在這里面，這里我寫了一段文字，它就會在瀏覽器里顯示出來。這些就構(gòu)成了我們網(wǎng)頁的基本格式，大家也不需要去背，知道表示什么意思就行，需要的時候直接拿來用。</p
<p<img src="http://tpt360.com/tuimg/yan.png"</p
</div

從代碼當(dāng)中可以發(fā)現(xiàn)，所有的標簽內(nèi)容都被一個div標簽所包含著，div屬于組合塊級元素，常用來區(qū)分不同的區(qū)域或模塊，它可以是獨立的，可分割的，它有自動換行的屬性，但你可以通過使用css來給它定義樣式或布局。

h2屬于標題標簽，從h1到h6都可以自定義，一般網(wǎng)頁的標題或者需要著重表現(xiàn)的都可以用，p標簽表示段落或者一段文字介紹，img標簽表示頁面中的圖像，你可以直接引入圖片地址，注意，它是一個單標記。

那么知道了這些標簽的意義，我們就可以根據(jù)自己實際的需求給這段html代碼定義css樣式，

首先，我想給整個區(qū)域限制一個高度和寬度，那么我們就應(yīng)該這樣寫：

<style type="text/css"
div {
 width: 300px; /*這里給個300像素的寬度*/
}

... /*未完待續(xù)*/

</style

如果想加入其他的樣式可以繼續(xù)定義，如：添加一個背景顏色，添加一個內(nèi)邊距或外邊距。

div {
 width: 300px; /*這里給個300像素的寬度*/
 background: #f2f2f2; /*這里給一個灰色的背景*/
 padding: 20px; /*這里給一個20像素的內(nèi)邊距*/
 margin: 20px; /*這里給一個20像素的外邊距*/ 
}

注意：內(nèi)邊距的意思就是一個獨立的區(qū)塊或者標簽往內(nèi)部擴展距離，外邊距就是往外部擴展距離，新入門的同學(xué)這里容易搞混。

接下我們定義標題，標題比較簡單，比如，給它一個20像素的大小，標題顏色為紅色，需要讓它居中，那么就應(yīng)該這樣寫：

h2 {
 font-size: 20px; /*這里給個20像素的字體大小*/
 color: #ff0000; /*這里給一個紅色的字體顏色*/
 text-align: center; /*讓它居中*/
}
```

文字介紹和標題差不多，就是字體小一點，注意的是需要給段落定義一個行高，調(diào)整段落之間的間隔。

p {
 font-size: 14px; /*這里給個14像素的字體大小*/
 color: #333; /*這里給一個黑色的字體顏色*/
 line-height: 24px; /*這里給一個24像素的行高*/
}

最后圖片就更簡單了，直接讓它自適應(yīng)寬度，跟隨div，設(shè)置一個100%。

img {
	width: 100%;
}

一個簡單的網(wǎng)頁代碼和設(shè)計思路就這樣完成了，如果你懂了這些代碼的作用和意義，那么恭喜你，你就基本入門了，因為所有的網(wǎng)頁代碼基本都是按照這種格式和思路編寫的。下一篇給大家繼續(xù)介紹其他常用的html+css標簽以及實戰(zhàn)演示，謝謝觀看?。?！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。