HTML布局標(biāo)記和列表標(biāo)記-創(chuàng)新互聯(lián)
布局標(biāo)記
首先要介紹的布局標(biāo)記是div標(biāo)記，div可以做網(wǎng)頁(yè)的層也可以做網(wǎng)頁(yè)的分區(qū)。當(dāng)div做網(wǎng)頁(yè)的層時(shí)可以實(shí)現(xiàn)漂浮在網(wǎng)頁(yè)上的效果，就像我們經(jīng)常可以在網(wǎng)站里看見的那些漂浮廣告。div做網(wǎng)頁(yè)的分區(qū)時(shí)，則是可以布置網(wǎng)頁(yè)的格局，把一個(gè)網(wǎng)頁(yè)分為多個(gè)模塊，由這些模塊結(jié)構(gòu)來(lái)構(gòu)建出一個(gè)網(wǎng)頁(yè)。
div里有一個(gè)style屬性這個(gè)屬性是用來(lái)控制樣式的，比如可以調(diào)整背景顏色、組件的寬高、組件的位置等等，基本和樣式相關(guān)的都可以使用style屬性來(lái)控制。
示例：
運(yùn)行結(jié)果：
從運(yùn)行結(jié)果就可以看出，一個(gè)div就占它所設(shè)定的大小，每個(gè)div都是分開的，將網(wǎng)頁(yè)分成了一個(gè)個(gè)的塊。
我們查看一下百度搜索的源碼就可以看到，這個(gè)頁(yè)面用的最多的標(biāo)記就是div，所以也就可以知道這個(gè)頁(yè)面是使用div標(biāo)簽來(lái)布局的：
我們來(lái)簡(jiǎn)單分析一下這個(gè)頁(yè)面的布局，從整體頁(yè)面可以看出這個(gè)頁(yè)面是用一個(gè)div來(lái)套住整個(gè)頁(yè)面，然后在這個(gè)div里面則是采用了上中下的布局方式：
頭div，也就是套住整個(gè)頁(yè)面的div：
里面大體的上中下布局：
上：
中：
下：
整個(gè)網(wǎng)頁(yè)就是這樣一個(gè)大體的布局方式：
從以上簡(jiǎn)單的分析中可以發(fā)現(xiàn)，每個(gè)div里幾乎都嵌套著div再繼續(xù)布局，一個(gè)網(wǎng)頁(yè)就像堆積木一樣，將這些div結(jié)合起來(lái)構(gòu)建出了一個(gè)頁(yè)面，這就是div分區(qū)的一個(gè)應(yīng)用。
我們也可以模仿這樣一個(gè)布局方式做出一個(gè)“百度”，代碼示例：
運(yùn)行結(jié)果：
表單的提交網(wǎng)頁(yè)使用百度的接收頁(yè)面就可以實(shí)現(xiàn)搜索了：
實(shí)現(xiàn)搜索的功能很簡(jiǎn)單先使用百度隨便搜索一下，就可以獲取到它的服務(wù)器接收頁(yè)面的地址和表示搜索關(guān)鍵字的屬性：
然后在form的action屬性里把服務(wù)器接收頁(yè)面的地址填上，然后再把文本框的name屬性賦值為wd就可以利用百度的服務(wù)器接收頁(yè)面實(shí)現(xiàn)搜索功能：
以上就是div分區(qū)的一個(gè)應(yīng)用，下面簡(jiǎn)單介紹一下div層的實(shí)現(xiàn)方式，實(shí)際上div的分區(qū)就像是行，而div的層則像是列，代碼示例：
運(yùn)行結(jié)果：
從運(yùn)行結(jié)果可以看到div是一列一列的，當(dāng)縮放窗口時(shí)會(huì)自動(dòng)改變位置：
table標(biāo)記和div標(biāo)記一樣都是屬于網(wǎng)頁(yè)布局的標(biāo)記，table主要是用來(lái)做表格，table里常用的屬性是：border表格的邊界線、cellpadding 表格的填充程度、cellspacing 內(nèi)間距距離，table要嵌套thead、tbody、tfood、tr、th、td等標(biāo)簽來(lái)實(shí)現(xiàn)表格。
thead是用來(lái)表示表格的頭部分的，tbody是用來(lái)表示表格的內(nèi)容部分的，tfood是用來(lái)表示表格的尾部分的。這三個(gè)標(biāo)簽并沒(méi)有實(shí)際的效果，只是為了爬取數(shù)據(jù)的時(shí)候好辨認(rèn)某段內(nèi)容是表格的什么部分。
tr實(shí)現(xiàn)表格的行，th實(shí)現(xiàn)表格的表頭，td實(shí)現(xiàn)表格的單元格，表格主要是使用這三個(gè)標(biāo)簽來(lái)完成的，代碼示例：
<!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ī)號(hào)碼</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="">[首頁(yè)]</a> <a href="">[上一頁(yè)]</a> <a href="">[下一頁(yè)]</a> <a href="">[尾頁(yè)]</a> </td> </tr> </tfoot> </table> </body> </html>
運(yùn)行結(jié)果：
td標(biāo)簽里有個(gè)colspan屬性，可以讓列合并，這個(gè)屬性的數(shù)字代表合并幾列，注意這個(gè)數(shù)字得算上此屬性本身所在的那一列，代碼示例：
運(yùn)行結(jié)果：
從運(yùn)行結(jié)果可以看到有一個(gè)單元格的內(nèi)容被擠到表格外面去了，這是因?yàn)闆](méi)有對(duì)應(yīng)的去刪除一個(gè)單元格，合并多少列就得對(duì)應(yīng)的刪除多少個(gè)單元格：
運(yùn)行結(jié)果：
cellpadding屬性的數(shù)值可以改變表格的填充程度，數(shù)值越大表格就越大，cellspacing 屬性的數(shù)值可以改變表格的內(nèi)間距距離，代碼示例：
運(yùn)行結(jié)果：
border可以去掉表格的邊界線，代碼示例：
運(yùn)行結(jié)果：
我們可以使用style屬性來(lái)調(diào)整表格的顏色，代碼示例：
運(yùn)行結(jié)果：
以上就把table制作表格的基本用法介紹完了，接下來(lái)介紹一下nav：導(dǎo)航條和footer：網(wǎng)頁(yè)尾部，實(shí)際上這兩個(gè)標(biāo)記只是起到一個(gè)說(shuō)明的作用而已沒(méi)有什么實(shí)際效果，也是為了在爬取數(shù)據(jù)的時(shí)候讓別人知道這是個(gè)導(dǎo)航條這是個(gè)網(wǎng)頁(yè)尾部，代碼示例：
運(yùn)行結(jié)果：
以上就是網(wǎng)頁(yè)布局類標(biāo)簽的內(nèi)容，思維導(dǎo)圖總結(jié)：
列表標(biāo)記
首先要介紹的第一個(gè)列表是ul無(wú)序列表，無(wú)序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記，ul需要嵌套li實(shí)現(xiàn)列表效果。無(wú)序列表始于 <ul> 標(biāo)簽，每個(gè)列表項(xiàng)則始于 <li>，代碼示例：
運(yùn)行結(jié)果：
這種無(wú)序列表是使用得最多的列表，別看無(wú)序列表的原始效果不好看，這是因?yàn)闆](méi)有使用樣式。無(wú)序列表的特性適合做導(dǎo)航條的多項(xiàng)列表和列表框，例如這個(gè)網(wǎng)頁(yè)就是使用了ul無(wú)序列表制作的導(dǎo)航條：
接下來(lái)是ol有序列表同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用自增的數(shù)字進(jìn)行標(biāo)記，所以稱為有序列表。有序列表始于 <ol> 標(biāo)簽，每個(gè)列表項(xiàng)也是始于 <li> 標(biāo)簽，代碼示例：
運(yùn)行結(jié)果：
最后是dl自定義列表，自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。自定義列表以 <dl> 標(biāo)簽開始，每個(gè)自定義列表項(xiàng)則以 <dt> 開始，每個(gè)自定義列表項(xiàng)的定義以 <dd> 開始，代碼示例：
運(yùn)行結(jié)果：
常用列表標(biāo)簽：
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
新聞名稱：HTML布局標(biāo)記和列表標(biāo)記-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)地址：http://aaarwkj.com/article28/hopcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、移動(dòng)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、云服務(wù)器、虛擬主機(jī)、商城網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- pythontkinter之頂層菜單、彈出菜單實(shí)例-創(chuàng)新互聯(lián)
- python檢查文件是否存在的方法-創(chuàng)新互聯(lián)
- 如何解決ThinkPHP關(guān)閉調(diào)試模式時(shí)報(bào)錯(cuò)的問(wèn)題-創(chuàng)新互聯(lián)
- 系列文章：云原生Kubernetes日志落地方案-創(chuàng)新互聯(lián)
- spring配置文件參數(shù)的開發(fā)步驟-創(chuàng)新互聯(lián)
- SEO查詢工具5118的用處是什么-創(chuàng)新互聯(lián)
- Lambda，AWS和Python的自動(dòng)化管理操作-自動(dòng)開機(jī)和關(guān)機(jī)-創(chuàng)新互聯(lián)
- 自適應(yīng)網(wǎng)站與傳統(tǒng)網(wǎng)站的區(qū)別及優(yōu)缺點(diǎn) 2022-08-10
- 自適應(yīng)網(wǎng)站建設(shè)有哪些優(yōu)勢(shì) 2021-01-01
- 上海網(wǎng)站建設(shè)公司分享自適應(yīng)網(wǎng)站建設(shè)方案 2022-09-19
- 自適應(yīng)網(wǎng)站和響應(yīng)式網(wǎng)站分別是什么？他們有什么關(guān)系? 2022-06-29
- 自適應(yīng)網(wǎng)站制作 2013-11-21
- 自適應(yīng)網(wǎng)站模版建設(shè)的常見問(wèn)題 2023-01-10
- 創(chuàng)新互聯(lián)小編淺談自適應(yīng)網(wǎng)站設(shè)計(jì)的幾點(diǎn)要素 2021-04-28
- 自適應(yīng)網(wǎng)站制作公司，創(chuàng)新互聯(lián)提供自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì) 2022-01-30
- 自適應(yīng)網(wǎng)站建設(shè)時(shí)需要了解哪些問(wèn)題？ 2022-10-06
- 自適應(yīng)網(wǎng)站建設(shè)-自適應(yīng)網(wǎng)頁(yè)制作容易碰到的問(wèn)題 2016-11-10
- 成都了解自適應(yīng)和自適應(yīng)網(wǎng)站設(shè)計(jì)之間的區(qū)別 2023-02-11
- 自適應(yīng)網(wǎng)站建站心得 2016-10-27