HTML&CSS基礎-框架集
作者：尹正傑
版權聲明：原創作品，謝絕轉載！否則將追究法律責任。
一.HTML源代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格簡介</title> </head> <body> <!-- 表格在日常生活中使用的非常多，比如Excel就是專門用來創建表格的工具。 表格就是用來表示一些格式化數據的，比如："課程表"，"銀行對賬單"，在網頁中也可以創建出不同的表格。 --> <!-- 在HTML中，使用table標簽來創建一個表格,表格中有以下幾個常用屬性: border: 等設置為"1"時，表示顯示邊框。 width: 可以為表格設置邊框 align: 當其值為"center"時就可以居中 雖然咱們可以直接在標簽設置樣式，但是官網建議咱們在CSS修改樣式喲~ 溫馨提示: table是一個塊元素 --> <table border="1" width="40%" align="center"> <!-- 在table標簽中使用tr來表示表格中的一行，有幾行就又幾個tr。 --> <tr> <!-- 在tr標簽中需要使用td來創建一個單元格，有幾個單元格就有幾個td rowspan: 橫向合並單元格，數字為幾就合並幾個橫向單元格，默認為1. --> <td>A1</td> <td>A2</td> <td>A3</td> <td rowspan="2">A4</td> </tr> <tr> <td>B1</td> <td>B2</td> <td>B3</td> </tr> <tr> <td>C1</td> <td>C2</td> <td>C3</td> <td>C4</td> </tr> <tr> <!-- 在tr標簽中需要使用td來創建一個單元格，有幾個單元格就有幾個td colspan: 橫向合並單元格，數字為幾就合並幾個橫向單元格，默認為1. --> <td>D1</td> <td>D2</td> <td colspan="2">D3</td> </tr> </table> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>長表格</title> <style type="text/css"> table{ /*設置表格的寬度*/ width: 300px; /*設置居中*/ margin: 0 auto; /*設置邊框*/ /*border: 1px solid black;*/ /** * table的td之間默認有一個距離，通過border-spacing屬性可以設置這個像素 */ /*border-spacing: 0px;*/ /** * border-collapse可以用來設置表格的邊框合並，如果設置了該屬性，border-spacing會自動失效 */ border-collapse: collapse; } /** * 偽類nth-child的even參數可以選中偶數行，而odd則可以選中奇數行。 * * 溫馨提示: * nth-child屬性IE8及以下版本並不支持，若非要達到相同的效果則需要引入JS來搞事情。 */ tbody > tr:nth-child(even){ background-color: yellow; } /** * 當鼠標移入到tr標簽后，會改變顏色 */ tr:hover{ background-color: deeppink; } /*為td標簽設置樣式*/ td,th{ /*設置邊框*/ border: 1px solid black; } </style> </head> <body> <table> <!-- 有一些情況下，表格是非常長的，這時就需要將表格分為三個部分，即表頭，表格的主體，表格底部。 在HTML中為我們提供了三個標簽: <thead>: 表頭,該標簽的內容永遠會顯示在表格的頭部 <tbody>: 表格主體,該標簽的內容永遠都會顯示在表格的中間，如果表格中沒有寫<tbody>，瀏覽器會自動在表格中添加<tbody>並且將所有的tr都放到<tbody>中。 綜上所述，我們應該注意tr並不是table的子元素，而是tbody的子元素。因此通過"table > tr"無法選中行，需要通過"tbody> tr"選中行 <tfoot>: 表格底部，該標簽的內容永遠會顯示在表格的底部 以上三個標簽的作用就是區分表格的不同部分，它們都是table的子標簽，都需要直接寫道table中,tr標簽需要寫在這些標簽中。 --> <thead> <th>日期</th> <th>收入</th> <th>支出</th> <th>合計</th> </thead> <tbody> <tr> <td>2018-03-05</td> <td>29800</td> <td>16800</td> <td>13000</td> </tr> <tr> <td>2018-05-05</td> <td>29800</td> <td>16800</td> <td>13000</td> </tr> <tr> <td>2018-07-05</td> <td>29800</td> <td>16800</td> <td>13000</td> </tr> <tr> <td>2018-09-05</td> <td>29800</td> <td>16800</td> <td>13000</td> </tr> <tr> <td>2018-10-05</td> <td>35000</td> <td>16800</td> <td>13000</td> </tr> <tr> <td>2018-12-05</td> <td>35000</td> <td>16800</td> <td>13000</td> </tr> <tr> <td>2019-02-05</td> <td>35000</td> <td>16800</td> <td>13000</td> </tr> <tr> <td>2019-04-05</td> <td>35000</td> <td>16800</td> <td>13000</td> </tr> <tr> <td>2019-06-05</td> <td>35000</td> <td>16800</td> <td>13000</td> </tr> <tr> <td>2019-08-05</td> <td>35000</td> <td>16800</td> <td>13000</td> </tr> </tbody> <tfoot> <td></td> <td></td> <td>合計</td> <td>130000</td> </tfoot> </table> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格的布局</title> </head> <body> <!-- 以前表格更多的情況實際上是用來進行布局的，但是這種方式早被CSS所淘汰了，我們生產環境中盡量不要使用表格進行布局，因為耦合性太差，維護成本高。 但是有一些網站由於歷史問題，可能依舊使用的是表格方式布局，我們應該對此有一定的了解。 表格的列數由td最多的那行決定 表格是可以嵌套的，可以在td中再放置一個表格 下面就是使用表格進行的一個簡單布局效果，可以簡單對表格布局有一個體驗。生產環境中最好不要使用表格布局，因為這種技術已經被CSS淘汰了，而是使用表格進行布局可能會顯得咱們不專業了。 --> <table border="1" width="100%" > <tr height="100px"> <td colspan="2"></td> </tr> <tr height="400px"> <td width="20%"></td> <td width="80%"> <table border="1" width="100%" height="100%"> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> </td> </tr> <tr height="100px"> <td colspan="2"></td> </tr> </table> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>完善clearfix</title> <style type="text/css"> .box1{ width: 300px; height: 300px; background-color: red; } .box2{ width: 300px; height: 200px; background-color: yellow; /** * 子元素和父元素相鄰的垂直外邊距會發生重疊，子元素的外邊距會傳遞給父元素。 * 使用空的table標簽可以隔離父子元素的外邊距，阻止外邊距的重疊。 */ margin-top: 100px; } .box3{ border: 10px blue solid; } .box4{ width: 100px; height: 100px; background-color: deeppink; float: left; } /** * 解決父子元素的外邊距重疊 * * .box1:before{ * content: ""; * 將一個元素設置為表格顯示 * display: table; * } /** * 解決父元素高度塌陷 * * .clearfix:after{ * content: ""; * display: block; * display: table; * clear: both; * } * / /** * 經過修改后的clearfix是一個多功能的，既可以解決高度塌陷，又可以確保父元素和子元素的垂直外邊距不會重疊 */ .clearfix:after, .clearfix:before{ content: ""; display: table; clear: both; } /*兼容IE6*/ .clearfix{ zoom: 1; } </style> </head> <body> <div class="box3 clearfix"> <div class="box4"></div> </div> <div class="box1 clearfix"> <div class="box2"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表單簡介</title> </head> <body> <!-- 表單的作用就是用來將用戶信息提交給服務器的，比如:百度的搜索框，注冊，登錄這些操作都需要填寫表單。 使用form標簽創建一個表單，form標簽中指定一個action屬性，該屬性指向的是一個服務器的地址，當我們提交表單時會提交到action屬性對應的地址。 使用from創建的僅僅是一個空白的表單，我們還需要向form中添加不同的表單項。 --> <form action="target.html"> <!-- 在表單中可以使用fieldset來為表單項進行分組，可以將表單項中的同一組放到一個fieldset中。 --> <fieldset> <!-- 在fieldset中可以使用legend子標簽來指定組名 --> <legend>用戶信息</legend> <!-- 在HTML中還為我們提供了一個標簽，專門用來選中表單中的提示文字的label標簽。 該標簽可以指定一個for屬性，該屬性的值需要指定一個表單項的id值。綁定后可以當點擊具體的id標簽文字時會選中該標簽。 --> <label for="user">用戶名:</label> <!-- 使用input來創建一個文本框，它的type屬性是text。 如果希望表單項中的數據會提交到服務器中，還必須給表單項指定一個name屬性，name表示提交內容的名字。 用戶填寫的信息會附在url地址后面以查詢字符串(屬性名=屬性值)的形式發送給服務器，例如:"https://node101.yinzhengjie.org.cn?username=Jason&passwd=123456"。 在文本框中也可以指定value屬性值，該值將作為文本框的默認值顯示 --> <input id="user" type="text" name="username" value="yinzhengjie"/> <br /><br /> <label for="pwd">密 碼:</label> <!-- 使用input創建一個密碼框，它的type屬性值是password --> <input id = "pwd" type="password" name="passwd"/> <br /><br /> </fieldset> <fieldset> <legend>用戶愛好</legend> <!-- 單選按鈕: 使用input來創建一個單選按鈕，他的type屬性使用radio 單選項按鈕通過name屬性進行分組，name屬性相同是一組按鈕,向這種需要用戶選擇但是不需要用戶直接填寫內容的表單項，還必須指定一個value屬性，這樣被選中的表單項的value屬性值將會最終提交給服務器 如果希望在單選按鈕或者多選框中指定默認選中的選項，則可以在希望中的項中添加checked="checked"屬性 --> 性別:<input type="radio" name="gender" value="male" checked="checked" id="boy"/><label for="boy">男</label> <input type="radio" name="gender" value="female" id="girl"/><label for="girl">女</label><br /><br /> <!-- 多選框: 使用input創建一個多選框，它的type屬性使用checkbox 如果希望在單選按鈕或者多選框中指定默認選中的選項，則可以在希望中的項中添加checked="checked"屬性 --> 愛好:<input type="checkbox" name="hobby" value="lol" checked="checked"/>英雄聯盟 <input type="checkbox" name="hobby" value="cf"/>穿越火線 <input type="checkbox" name="hobby" value="basketball" checked="checked"/>籃球 <input type="checkbox" name="hobby" value="movie"/>電影 <input type="checkbox" name="hobby" value="music"/>QQ音樂<br /><br /> </fieldset> <!-- 下拉列表: 使用select來創建一個下拉列表。 下拉列表的name屬性需要指定一個select，而value舒徐要指定給option。 可以通過在option中添加selected="selected"來講該選項設置為默認值 當為select添加一個 multiple="multiple"屬性，則下拉列表變為一個多選的下拉列表。 在select中可以使用optgroup標簽對選項進行分組，同一個optgroup的option是一組，可以通過label屬性來指定分組的名稱。 --> 請選擇你喜歡的明星: <select name="star" multiple="multiple"> <optgroup label="女明星"> <!--在下拉列表中使用option標簽來創建一個一個列表項--> <option value="lyf">劉亦菲</option> <option value="czh">陳紫函</option> <option value="fbb">范冰冰</option> <option value="dzq" selected="selected">鄧紫棋</option> <option value="lxr">林心如</option> </optgroup> <optgroup label="男明星"> <option value="ldh" selected="selected">劉德華</option> <option value="wbq">王寶強</option> <option value="wj">吳京</option> </optgroup> </select><br /><br /> <!-- 使用textarea創建一個文本域。 --> 自我介紹:<textarea name="info"></textarea><br /><br /> <!-- 提交按鈕可以將表單中的信息提交給服務器。使用input創建一個提交按鈕，它的type屬性是submit，在提交按鈕中可以通過value屬性來指定按鈕上的文字。 --> <input type="submit" value="注冊"/> <!-- 使用"<input type="reset" />"可以創建一個重置按鈕，點擊重置按鈕以后表單中內容將會恢復為默認值。 --> <input type="reset" /> <!-- 使用<input type="button" />可以用來創建一個單純的按鈕，這個按鈕默認沒有任何功能，只能被點擊。 --> <input type="button" value="按鈕" /> <br /><br /> <!-- 除了使用input，也可以使用button標簽來創建按鈕。這種方式和使用input類似，只不過由於它是成對出現的標簽，使用起來更加的靈活。 --> <button type="submit">提交</button> <button type="reset">重置</button> <button type=""button">按鈕</button> </form> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>框架集</title> </head> <!-- 框架集和內聯框架的作用類似，都是用於在一個頁面中引用其它的外部頁面,框架集可以同時引入多個頁面，而內聯框架只能引入一個，在H5標准中，推薦使用框架集，而不是使用內聯框架。 使用frameset來創建一個框架集，注意frameset不能和body出現在同一個頁面中，所以要使用框架集，頁面中不可以使用body標簽。 frameset由以下兩個常用屬性: rows: 指定框架集中的所有的框架，一行一行的排列。 cols: 指定框架集中的所有的頁面，一列一列的排列。 這兩個屬性frameset必須選擇一個，並且需要在屬性中指定每一部分所占的大小。 在frameset中也可以嵌套frameset標簽。 溫馨提示: frameset和iframe一樣，它里面的內容都不會被搜索引擎所檢索，所以如果搜索引擎檢索到的頁面是一個框架頁的話，它是不能去判斷里邊的內容的。 使用框架集則意味着頁面中不能使用自己的內容，只能引入其它的頁面，而我們每單獨加載一個頁面瀏覽器都需要重新發送依次http請求，引入幾個頁面就需要發送幾次請求，用戶的體驗比較差。 其實我依舊還是不推薦使用frameset和iframe，如果非得用建議使用frameset而不使用iframe。 --> <frameset cols="30%,*,30%"> <!-- 在frameset中使用frame子標簽來指定引入的頁面，引入幾個頁面就寫幾個frame，frame是一個自閉合標簽。 --> <frame src="06.表格簡介.html" /> <frame src="09.長表格.html" /> <!-- 嵌套一個frameset --> <frameset rows="30%,50%,*"> <frame src="10.表格的布局.html" /> <frame src="11.完善clearfix.html" /> <frame src="12.表單簡介.html" /> </frameset> </frameset> </html>
二.瀏覽器打開以上代碼渲染結果
