HTML布局標(biāo)記和列表標(biāo)記

布局標(biāo)記

為太和等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及太和網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、做網(wǎng)站、太和網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

首先要介紹的布局標(biāo)記是div標(biāo)記，div可以做網(wǎng)頁的層也可以做網(wǎng)頁的分區(qū)。當(dāng)div做網(wǎng)頁的層時可以實(shí)現(xiàn)漂浮在網(wǎng)頁上的效果，就像我們經(jīng)常可以在網(wǎng)站里看見的那些漂浮廣告。div做網(wǎng)頁的分區(qū)時，則是可以布置網(wǎng)頁的格局，把一個網(wǎng)頁分為多個模塊，由這些模塊結(jié)構(gòu)來構(gòu)建出一個網(wǎng)頁。

div里有一個style屬性這個屬性是用來控制樣式的，比如可以調(diào)整背景顏色、組件的寬高、組件的位置等等，基本和樣式相關(guān)的都可以使用style屬性來控制。

示例：

HTML布局標(biāo)記和列表標(biāo)記

運(yùn)行結(jié)果：

HTML布局標(biāo)記和列表標(biāo)記

從運(yùn)行結(jié)果就可以看出，一個div就占它所設(shè)定的大小，每個div都是分開的，將網(wǎng)頁分成了一個個的塊。

我們查看一下百度搜索的源碼就可以看到，這個頁面用的最多的標(biāo)記就是div，所以也就可以知道這個頁面是使用div標(biāo)簽來布局的：

HTML布局標(biāo)記和列表標(biāo)記

我們來簡單分析一下這個頁面的布局，從整體頁面可以看出這個頁面是用一個div來套住整個頁面，然后在這個div里面則是采用了上中下的布局方式：

頭div，也就是套住整個頁面的div：

HTML布局標(biāo)記和列表標(biāo)記

里面大體的上中下布局：

上：

HTML布局標(biāo)記和列表標(biāo)記

中：

HTML布局標(biāo)記和列表標(biāo)記

下：

HTML布局標(biāo)記和列表標(biāo)記

整個網(wǎng)頁就是這樣一個大體的布局方式：

HTML布局標(biāo)記和列表標(biāo)記

從以上簡單的分析中可以發(fā)現(xiàn)，每個div里幾乎都嵌套著div再繼續(xù)布局，一個網(wǎng)頁就像堆積木一樣，將這些div結(jié)合起來構(gòu)建出了一個頁面，這就是div分區(qū)的一個應(yīng)用。

我們也可以模仿這樣一個布局方式做出一個“百度”，代碼示例：

HTML布局標(biāo)記和列表標(biāo)記

運(yùn)行結(jié)果：

HTML布局標(biāo)記和列表標(biāo)記

表單的提交網(wǎng)頁使用百度的接收頁面就可以實(shí)現(xiàn)搜索了：

HTML布局標(biāo)記和列表標(biāo)記

實(shí)現(xiàn)搜索的功能很簡單先使用百度隨便搜索一下，就可以獲取到它的服務(wù)器接收頁面的地址和表示搜索關(guān)鍵字的屬性：

HTML布局標(biāo)記和列表標(biāo)記

然后在form的action屬性里把服務(wù)器接收頁面的地址填上，然后再把文本框的name屬性賦值為wd就可以利用百度的服務(wù)器接收頁面實(shí)現(xiàn)搜索功能：

HTML布局標(biāo)記和列表標(biāo)記

以上就是div分區(qū)的一個應(yīng)用，下面簡單介紹一下div層的實(shí)現(xiàn)方式，實(shí)際上div的分區(qū)就像是行，而div的層則像是列，代碼示例：

HTML布局標(biāo)記和列表標(biāo)記

運(yùn)行結(jié)果：

HTML布局標(biāo)記和列表標(biāo)記

從運(yùn)行結(jié)果可以看到div是一列一列的，當(dāng)縮放窗口時會自動改變位置：

HTML布局標(biāo)記和列表標(biāo)記

table標(biāo)記和div標(biāo)記一樣都是屬于網(wǎng)頁布局的標(biāo)記，table主要是用來做表格，table里常用的屬性是：border表格的邊界線、cellpadding 表格的填充程度、cellspacing 內(nèi)間距距離，table要嵌套thead、tbody、tfood、tr、th、td等標(biāo)簽來實(shí)現(xiàn)表格。

thead是用來表示表格的頭部分的，tbody是用來表示表格的內(nèi)容部分的，tfood是用來表示表格的尾部分的。這三個標(biāo)簽并沒有實(shí)際的效果，只是為了爬取數(shù)據(jù)的時候好辨認(rèn)某段內(nèi)容是表格的什么部分。

tr實(shí)現(xiàn)表格的行，th實(shí)現(xiàn)表格的表頭，td實(shí)現(xiàn)表格的單元格，表格主要是使用這三個標(biāo)簽來完成的，代碼示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<table border="1">
			<thead>
				<tr>
					<th>姓名</th>
					<th>年齡</th>
					<th>性別</th>
					<th>手機(jī)號碼</th>
					<th>住址</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>小明</td>
					<td>12</td>
					<td>男</td>
					<td>135****1582</td>
					<td>天涯海角</td>
				</tr>
				<tr>
					<td>小紅</td>
					<td>11</td>
					<td>女</td>
					<td>135****5233</td>
					<td>m78星云</td>
				</tr>
				<tr>
					<td>亞洲舞王趙四</td>
					<td>35</td>
					<td>男</td>
					<td>135****0000</td>
					<td>不明</td>
				</tr>	
			</tbody>
			<tfoot>
				<tr>
					<td colspan="5" align="right">
						<a href="">[首頁]</a>
						<a href="">[上一頁]</a>
						<a href="">[下一頁]</a>
						<a href="">[尾頁]</a>
					</td>
				</tr>
			</tfoot>
		</table>
	</body>

</html>

運(yùn)行結(jié)果：

HTML布局標(biāo)記和列表標(biāo)記

td標(biāo)簽里有個colspan屬性，可以讓列合并，這個屬性的數(shù)字代表合并幾列，注意這個數(shù)字得算上此屬性本身所在的那一列，代碼示例：

HTML布局標(biāo)記和列表標(biāo)記

運(yùn)行結(jié)果：

HTML布局標(biāo)記和列表標(biāo)記

從運(yùn)行結(jié)果可以看到有一個單元格的內(nèi)容被擠到表格外面去了，這是因?yàn)闆]有對應(yīng)的去刪除一個單元格，合并多少列就得對應(yīng)的刪除多少個單元格：

HTML布局標(biāo)記和列表標(biāo)記

運(yùn)行結(jié)果：

HTML布局標(biāo)記和列表標(biāo)記

cellpadding屬性的數(shù)值可以改變表格的填充程度，數(shù)值越大表格就越大，cellspacing 屬性的數(shù)值可以改變表格的內(nèi)間距距離，代碼示例：

HTML布局標(biāo)記和列表標(biāo)記

運(yùn)行結(jié)果：

HTML布局標(biāo)記和列表標(biāo)記

border可以去掉表格的邊界線，代碼示例：

HTML布局標(biāo)記和列表標(biāo)記

運(yùn)行結(jié)果：

HTML布局標(biāo)記和列表標(biāo)記

我們可以使用style屬性來調(diào)整表格的顏色，代碼示例：

HTML布局標(biāo)記和列表標(biāo)記

運(yùn)行結(jié)果：

HTML布局標(biāo)記和列表標(biāo)記

以上就把table制作表格的基本用法介紹完了，接下來介紹一下nav：導(dǎo)航條和footer：網(wǎng)頁尾部，實(shí)際上這兩個標(biāo)記只是起到一個說明的作用而已沒有什么實(shí)際效果，也是為了在爬取數(shù)據(jù)的時候讓別人知道這是個導(dǎo)航條這是個網(wǎng)頁尾部，代碼示例：

HTML布局標(biāo)記和列表標(biāo)記

運(yùn)行結(jié)果：

HTML布局標(biāo)記和列表標(biāo)記

以上就是網(wǎng)頁布局類標(biāo)簽的內(nèi)容，思維導(dǎo)圖總結(jié)：

HTML布局標(biāo)記和列表標(biāo)記

列表標(biāo)記

首先要介紹的第一個列表是ul無序列表，無序列表是一個項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記，ul需要嵌套li實(shí)現(xiàn)列表效果。無序列表始于 <ul> 標(biāo)簽，每個列表項(xiàng)則始于 <li>，代碼示例：

HTML布局標(biāo)記和列表標(biāo)記

運(yùn)行結(jié)果：

HTML布局標(biāo)記和列表標(biāo)記

這種無序列表是使用得最多的列表，別看無序列表的原始效果不好看，這是因?yàn)闆]有使用樣式。無序列表的特性適合做導(dǎo)航條的多項(xiàng)列表和列表框，例如這個網(wǎng)頁就是使用了ul無序列表制作的導(dǎo)航條：

HTML布局標(biāo)記和列表標(biāo)記

接下來是ol有序列表同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用自增的數(shù)字進(jìn)行標(biāo)記，所以稱為有序列表。有序列表始于 <ol> 標(biāo)簽，每個列表項(xiàng)也是始于 <li> 標(biāo)簽，代碼示例：

HTML布局標(biāo)記和列表標(biāo)記

運(yùn)行結(jié)果：

HTML布局標(biāo)記和列表標(biāo)記

最后是dl自定義列表，自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。自定義列表以 <dl> 標(biāo)簽開始，每個自定義列表項(xiàng)則以 <dt> 開始，每個自定義列表項(xiàng)的定義以 <dd> 開始，代碼示例：

HTML布局標(biāo)記和列表標(biāo)記

運(yùn)行結(jié)果：

HTML布局標(biāo)記和列表標(biāo)記

常用列表標(biāo)簽：

HTML布局標(biāo)記和列表標(biāo)記

文章標(biāo)題：HTML布局標(biāo)記和列表標(biāo)記
鏈接分享：http://muchs.cn/article30/ipipso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、關(guān)鍵詞優(yōu)化、軟件開發(fā)、品牌網(wǎng)站設(shè)計(jì)、靜態(tài)網(wǎng)站、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容