總體內(nèi)容
1、html 表格
2、傳統(tǒng)布局
3、html 表單
一、表格
-
1.1、
<table>標(biāo)簽：聲明一個表格(默認是看不到的，我們需要設(shè)置它的屬性、行以及具體的表格)，它的常用屬性如下：-
border屬性 定義表格的邊框，設(shè)置值是數(shù)值 -
cellpadding屬性 定義單元格內(nèi)容與邊框的距離，設(shè)置值是數(shù)值 -
cellspacing屬性 定義單元格與單元格之間的距離，設(shè)置值是數(shù)值 -
align屬性 設(shè)置整體表格相對于瀏覽器窗口的水平對齊方式,設(shè)置值有：left|center|right
-
1.2、
<tr>標(biāo)簽：定義表格中的一行-
1.3、
<td>和<th>標(biāo)簽：定義一行中的一個單元格，td代表普通單元格，th表示表頭單元格(默認有加黑的樣式)，它們的常用屬性如下：-
align設(shè)置單元格中內(nèi)容的水平對齊方式,設(shè)置值有：left|center|right -
valign設(shè)置單元格中內(nèi)容的垂直對齊方式top|middle|bottom -
colspan設(shè)置單元格水平合并，設(shè)置值是數(shù)值 -
rowspan設(shè)置單元格垂直合并，設(shè)置值是數(shù)值
-
-
1.4、光說不練假把戲，我們用一個例子對表格制作練習(xí)，如下效果
表格的效果-
<1>、定義一個表格，設(shè)置一些屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <h1>表格</h1> <table border="1" width="600" height="500" align="center"> </table> </body> </html> -
<2>、定義6行5列，行用
<tr>標(biāo)簽標(biāo)示，行中的每個小格子用<td>標(biāo)示<table border="1" width="600" height="500" align="center"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> -
<3>、合并第一行和最后一列
<table border="1" width="600" height="500" align="center"> <tr> <td colspan="5"></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td rowspan="5"></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table>合并第一行和最后一列 -
<4>、設(shè)置寬度比例，以最多列為例
<tr> <td width="15%"></td> <td width="23%"></td> <td width="15%"></td> <td width="23%"></td> <td rowspan="5" width="24%"><img src="images/吉多.png" alt="圖片" width="100%"></td> </tr>設(shè)置寬度比例，以最多列為例
-
二、傳統(tǒng)布局
- 2.1、頁面布局概述
布局也可以叫做排版，它指的是把文字和圖片等元素按照我們的意愿有機地排列在頁面上，布局的方式分為兩種：- <1>、table布局：通過table元素將頁面空間劃分成若干個單元格，將文字或圖片等元素放入單元格中，隱藏表格的邊框，從而實現(xiàn)布局。這種布局方式也叫 傳統(tǒng)布局，目前主要使用在EDM(廣告郵件中的頁面)中，主流的布局方式不用這種。
- <2>、HTML+CSS布局(DIV+CSS)：主要通過CSS樣式設(shè)置來布局文字或圖片等元素，需要用到CSS盒子模型、盒子類型、CSS浮動、CSS定位、CSS背景圖定位等知識來布局，它比傳統(tǒng)布局要復(fù)雜，目前是主流的布局方式。
-
2.2、table布局及實例
效果圖
table來做整體頁面的布局，布局的技巧歸納為如下幾點：
<1>、按照設(shè)計圖的尺寸設(shè)置表格的寬高以及單元格的寬高。
<2>、將表格border、cellpadding、cellspacing全部設(shè)置為0，表格的邊框和間距就不占有頁面空間，它只起到劃分空間的作用。
<3>、針對局部復(fù)雜的布局，可以在單元格里面再嵌套表格，嵌套表格劃分局部的空間。
<4>、單元格中的元素或者嵌套的表格用align和valign設(shè)置對齊方式
<5>、通過屬性或者css樣式設(shè)置單元格中元素的樣式
-
具體的代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>個人簡歷</title> </head> <!--topmargin 頂格處理--> <body topmargin="0"> <table width="800" height="800" border="0" align="center" cellspacing="0" cellpadding="0"> <tr> <td width="260" bgcolor="#f2f2f2" valign="top"> <table width="200" border="0" cellspacing="0" cellpadding="0" align="center"> <tr height="100"></tr> <tr> <td align="right"><img src="images/吉多.png" width="200"></td> </tr> <tr> <td align="right">小虎</td> </tr> <tr> <td align="right">18500652881</td> </tr> <tr> <td align="right">2318151015@qq.com</td> </tr> </table> </td> <td width="30"></td> <td width="480" valign="top"> <table width="480" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="80"></td> </tr> <tr> <td align="right"><img src="images/resume.png" width="238"></td> </tr> </table> <br> <hr/> <br> <table width="480" height="200" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2"><b>個人基本情況</b></td> </tr> <tr> <td><b>姓名：</b>小虎</td> <td><b>籍貫：</b>河南商丘</td> </tr> <tr> <td><b>性別：</b>男</td> <td><b>身高：</b>175</td> </tr> <tr> <td><b>民族：</b>漢</td> <td><b>體重：</b>70kg</td> </tr> <tr> <td><b>出生日期：</b>1992.02.02</td> <td><b>電話：</b>18500652881</td> </tr> <tr> <td><b>現(xiàn)居地址：</b>海淀區(qū)中關(guān)村</td> <td><b>專業(yè)：</b>計算機技術(shù)</td> </tr> </table> <br> <table> <tr> <td><b>教育背景及工作經(jīng)歷</b></td> </tr> <tr> <td><b>2008.09-2011.06</b> 北京大學(xué) 計算機專業(yè)</td> </tr> <tr> <td><b>2011.06-2013.09</b> 希艾歐管理技術(shù)有限公司 iOS開發(fā)工程師</td> </tr> </table> <br> <table> <tr> <td><b>所獲證書</b></td> </tr> <tr> <td><b>2009：</b> 榮獲高級計算機證書</td> </tr> <tr> <td><b>2008：</b> 榮獲優(yōu)秀學(xué)生</td> </tr> </table> </td> <td width="30"></td> </tr> </table> </body> </html>提示：圖片自己找個替換的，也可以找我要源碼
三、html 表單
表單用于搜集不同類型的用戶輸入，表單由不同類型的標(biāo)簽組成，相關(guān)標(biāo)簽及屬性用法如下：
-
3.1、
<form>標(biāo)簽 定義整體的表單區(qū)域(表單內(nèi)容都放到<form></from>里面就好)action屬性 定義表單數(shù)據(jù)提交地址,空內(nèi)容表示提交到本地
method屬性 定義表單提交的方式，一般有“get”方式和“post”方式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單</title> </head> <body> <h1>表單</h1> <from action="" method="post"> 表單內(nèi)容 </from> </body> </html> 3.2、
<label>標(biāo)簽 為表單元素定義文字標(biāo)注(與下面的3.3配合使用)-
3.3、<input>標(biāo)簽 定義通用的表單元素
-
type屬性(name=""是在提交時候的一個字段名)-
type="text"定義單行文本輸入框
`type="text"` 定義單行文本輸入框<div> <label>用戶名：</label> <input type="text" name="userName"> </div> -
type="password"定義密碼輸入框
`type="password"` 定義密碼輸入框<div> <label>密 碼：</label> <input type="password" name="password"> </div> -
type="radio"定義單選框
`type="radio"` 定義單選框<div> <label>性 別：</label> <input type="radio" name="gender" value="0"> 男 <input type="radio" name="gender" value="1"> 女 </div> -
type="checkbox"定義復(fù)選框（多選）
`type="checkbox"` 定義復(fù)選框（多選）<div> <label>愛 好：</label> <input type="checkbox" name="like" value="0"> 打游戲 <input type="checkbox" name="like" value="1"> 打籃球 <input type="checkbox" name="like" value="2"> 打網(wǎng)球 </div> -
type="file"定義上傳文件
`type="file"` 定義上傳文件<div> <label>照 片：</label> <input type="file" name="photo"> </div> -
type="submit"定義 提交 按鈕<div> <input type="submit" name="" value="提交"> </div> -
type="reset"定義 重置 按鈕<div> <input type="reset" name="" value="重置"> </div> -
type="button"定義一個普通按鈕<input type="button" name="" value="普通的按鈕"> -
type="image"定義圖片作為提交按鈕，用src屬性定義圖片地址<input type="image" src="images/logo.png" name="">提示：一般會導(dǎo)致提交兩次，不建議使用，建議使用
submit -
type="hidden"定義一個隱藏的表單域，用來存儲值<input type="hidden" name="hidenValue" value="2">
-
value屬性 定義表單元素的值name屬性 定義表單元素的名稱，此名稱是提交數(shù)據(jù)時的鍵名
-
-
3.4、
<textarea>標(biāo)簽 定義多行文本輸入框
`<textarea>` 標(biāo)簽 定義多行文本輸入框<div> <label>個人介紹：</label> <textarea></textarea> </div> -
3.5、
<option>標(biāo)簽 與<select>標(biāo)簽配合，定義下拉表單元素中的選項
<option>標(biāo)簽 與<select>標(biāo)簽配合，定義下拉表單元素中的選項<div> <label>籍 貫：</label> <select> <option>北京</option> <option>上海</option> <option>杭州</option> <option>廣州</option> </select> </div>
補充：把label與其他標(biāo)簽關(guān)聯(lián)起來，也就是，點擊label與點擊相關(guān)聯(lián)的標(biāo)簽效果一樣，如下：在點擊 密碼 與 輸入框 的效果一樣
<div>
<label for="password">密 碼：</label>
<input type="password" name="password" id="password">
</div>
提示：
for的內(nèi)容與id的內(nèi)容保持一直即可
