溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
布局標記
首先要介紹的布局標記是div標記，div可以做網頁的層也可以做網頁的分區。當div做網頁的層時可以實現漂浮在網頁上的效果，就像我們經常可以在網站里看見的那些漂浮廣告。div做網頁的分區時，則是可以布置網頁的格局，把一個網頁分為多個模塊，由這些模塊結構來構建出一個網頁。
div里有一個style屬性這個屬性是用來控制樣式的，比如可以調整背景顏色、組件的寬高、組件的位置等等，基本和樣式相關的都可以使用style屬性來控制。
示例：
運行結果：
從運行結果就可以看出，一個div就占它所設定的大小，每個div都是分開的，將網頁分成了一個個的塊。
我們查看一下百度搜索的源碼就可以看到，這個頁面用的最多的標記就是div，所以也就可以知道這個頁面是使用div標簽來布局的：
我們來簡單分析一下這個頁面的布局，從整體頁面可以看出這個頁面是用一個div來套住整個頁面，然后在這個div里面則是采用了上中下的布局方式：
頭div，也就是套住整個頁面的div：
里面大體的上中下布局：
上：
中：
下：
整個網頁就是這樣一個大體的布局方式：
從以上簡單的分析中可以發現，每個div里幾乎都嵌套著div再繼續布局，一個網頁就像堆積木一樣，將這些div結合起來構建出了一個頁面，這就是div分區的一個應用。
我們也可以模仿這樣一個布局方式做出一個“百度”，代碼示例：
運行結果：
表單的提交網頁使用百度的接收頁面就可以實現搜索了：
實現搜索的功能很簡單先使用百度隨便搜索一下，就可以獲取到它的服務器接收頁面的地址和表示搜索關鍵字的屬性：
然后在form的action屬性里把服務器接收頁面的地址填上，然后再把文本框的name屬性賦值為wd就可以利用百度的服務器接收頁面實現搜索功能：
以上就是div分區的一個應用，下面簡單介紹一下div層的實現方式，實際上div的分區就像是行，而div的層則像是列，代碼示例：
運行結果：
從運行結果可以看到div是一列一列的，當縮放窗口時會自動改變位置：
table標記和div標記一樣都是屬于網頁布局的標記，table主要是用來做表格，table里常用的屬性是：border表格的邊界線、cellpadding 表格的填充程度、cellspacing 內間距距離，table要嵌套thead、tbody、tfood、tr、th、td等標簽來實現表格。
thead是用來表示表格的頭部分的，tbody是用來表示表格的內容部分的，tfood是用來表示表格的尾部分的。這三個標簽并沒有實際的效果，只是為了爬取數據的時候好辨認某段內容是表格的什么部分。
tr實現表格的行，th實現表格的表頭，td實現表格的單元格，表格主要是使用這三個標簽來完成的，代碼示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1"> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> <th>手機號碼</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>
運行結果：
td標簽里有個colspan屬性，可以讓列合并，這個屬性的數字代表合并幾列，注意這個數字得算上此屬性本身所在的那一列，代碼示例：
運行結果：
從運行結果可以看到有一個單元格的內容被擠到表格外面去了，這是因為沒有對應的去刪除一個單元格，合并多少列就得對應的刪除多少個單元格：
運行結果：
cellpadding屬性的數值可以改變表格的填充程度，數值越大表格就越大，cellspacing 屬性的數值可以改變表格的內間距距離，代碼示例：
運行結果：
border可以去掉表格的邊界線，代碼示例：
運行結果：
我們可以使用style屬性來調整表格的顏色，代碼示例：
運行結果：
以上就把table制作表格的基本用法介紹完了，接下來介紹一下nav：導航條和footer：網頁尾部，實際上這兩個標記只是起到一個說明的作用而已沒有什么實際效果，也是為了在爬取數據的時候讓別人知道這是個導航條這是個網頁尾部，代碼示例：
運行結果：
以上就是網頁布局類標簽的內容，思維導圖總結：
列表標記
首先要介紹的第一個列表是ul無序列表，無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記，ul需要嵌套li實現列表效果。無序列表始于 <ul> 標簽，每個列表項則始于 <li>，代碼示例：
運行結果：
這種無序列表是使用得最多的列表，別看無序列表的原始效果不好看，這是因為沒有使用樣式。無序列表的特性適合做導航條的多項列表和列表框，例如這個網頁就是使用了ul無序列表制作的導航條：
接下來是ol有序列表同樣，有序列表也是一列項目，列表項目使用自增的數字進行標記，所以稱為有序列表。有序列表始于 <ol> 標簽，每個列表項也是始于 <li> 標簽，代碼示例：
運行結果：
最后是dl自定義列表，自定義列表不僅僅是一列項目，而是項目及其注釋的組合。自定義列表以 <dl> 標簽開始，每個自定義列表項則以 <dt> 開始，每個自定義列表項的定義以 <dd> 開始，代碼示例：
運行結果：
常用列表標簽：
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
