一篇文章中我分享了一段圖文標(biāo)簽，這篇文章主要給大家詳細(xì)解釋一下這些代碼的作用和意義，以及編寫(xiě)網(wǎng)頁(yè)代碼的格式與思路。

下面我貼上html代碼：

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

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

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

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

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

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

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

</style>

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

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

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

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

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

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

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

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

img {
	width: 100%;
}

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

多同學(xué)希望在進(jìn)入html設(shè)計(jì)課程階段之前做一下預(yù)習(xí)和準(zhǔn)備工作。源碼時(shí)代UI老師為大家準(zhǔn)備了預(yù)習(xí)小卡片（對(duì)于零基礎(chǔ)的你來(lái)說(shuō)要死記硬背哦）

一、A單詞表

二、B單詞表

三、C單詞表

四、D單詞表

五、E單詞表

六、F單詞表

七、G單詞表

八、H單詞表

九、I單詞表

十、J單詞表

十一、l單詞表

十二、M單詞表

十三、N單詞表

十四、O單詞表

十五、P單詞表

十六、R單詞表

r

十七、S單詞表

十八、T單詞表

十九、U/W/V單詞表

至于綜合理解方面的事情，我們上課見(jiàn)！

（正在上這個(gè)階段課程的同學(xué)們也別忘了用歸類(lèi)進(jìn)行復(fù)習(xí)哦，主要是為你們準(zhǔn)備的，還傻傻分不清楚...）