2018/09/27Web前端學習第三課
阿新 • • 發佈:2018-12-12
(一). 學習內容
- 列表標籤 UL OL LI;
- 表格標籤 Table, 使用表格標籤佈局頁面;
- 使用 DIV 標籤定義框架個錨點的定義;
- frame 和 iframe 標籤定義框架和錨點的定義;
- style 屬性的應用;
- From 表單中的 input select textarea 等標籤。
- 列表標籤的使用;
- DIV 標籤的頁面佈局;
- frame 的使用;
- style 屬性;
- 表單元素的使用。
(三). 課程知識點
關鍵字 | 英文 | 解釋 |
---|---|---|
ul標籤 | <ul> |
定義無序列表 |
ol標籤 | <ol> |
定義有序列表 |
li標籤 | <li> |
定義列表項 |
塊級標籤 | - | 獨佔一行 |
行級標籤 | - | 行內顯示內容,不獨佔 |
div標籤 | <div> |
佈局容器 |
span標籤 | <span> |
文字內容 |
樣式 | style="..." |
可定義顏色字型等屬性 |
顏色 | color | 更改顏色 |
大小 | font-size | 更改字型大小 |
span標籤 | <span> |
修改段落中的某些文字 |
frameset標籤 | <frameset> |
將視窗分割為框架 |
ifram標籤 | <ifram> |
內聯框架 |
表單 | <from> |
- |
型別 | <type="..."> |
- |
預設值 | value |
- |
隱藏域 | hidden |
- |
文字輸入框 | text |
- |
按鈕 | button |
- |
多選框 | cheakbox |
- |
單選框 | radio |
- |
空格鍵 |   |
- |
檔案上傳 | file |
- |
(四). 作業完成情況
1. 使用 Table 標籤和 From 表單元素完成一個個人簡歷的網頁編寫
程式碼展示
<!DOCTYPE html>
<html>
<head>
<title>簡歷</title>
</head>
<body>
<!--表格定義開始-->
<table border="1" cellspacing="0" width="800px" height="100%" align="center">
<tr style="height: 80px">
<th colspan="5">
<h1 align="center">我的簡歷</h1>
</th>
</tr>
<tr style="height: 50px">
<th width="130px" bgcolor="#DODODO">姓名</th>
<td width="130px">
<input type="text" name="x1" value="填寫姓名" style="width: 160px;border: 0" />
</td>
<th width="130px" bgcolor="#DODODO">性別</th>
<td width="130px">
<select style="width: 160px;height: 40px">
<option value="女生">女生</option>
<option value="男生">男生</option>
</select>
</td>
<th width="130px" rowspan="5" bgcolor="#DODODO">
<input type="file" name="x2" style="width: 120px;height: 0px">
</th>
</tr>
<tr style="height: 50px">
<th width="130px" bgcolor="#DODODO">籍貫</th>
<td width="130px">
<input type="text" name="x1" value="**省**市" style="width: 160px;border: 0"/>
</td>
<th width="130px" bgcolor="#DODODO">名族</th>
<td width="130px">
<select style="width: 160px;height: 40px">
<option value="漢族">漢族</option>
<option value="少數名族">少數名族</option>
</select>
</td>
</tr>
<tr style="height: 50px">
<th width="130px" bgcolor="#DODODO">出生年月</th>
<td width="130px">
<input type="text" name="x1" value="**年**月**日" style="width: 160px;border: 0"/>
</td>
<th width="130px" bgcolor="#DODODO">政治面貌</th>
<td width="130px">
<input type="radio" name="1" value="團員"> 團員
<input type="radio" name="1" value="非團員"> 非團員
</td>
</tr>
<tr style="height: 50px">
<th width="130px" bgcolor="#DODODO">學歷</th>
<td width="130px">
<select style="width: 160px;height: 40px">
<option value="本科">本科</option>
<option value="大專">大專</option>
<option value="大專以下">大專以下</option>
<option value="研究生即以上">研究生及以上</option>
</select>
</td>
<th width="130px" bgcolor="#DODODO">專業</th>
<td width="130px">
<input type="text" name="x1" value="填寫專業" style="width: 160px;border: 0"/>
</td>
</tr>
<tr style="height: 50px">
<th width="130px" bgcolor="#DODODO">學制</th>
<td width="130px">
<input type="text" name="x1" value="填寫學制" style="width: 160px;border: 0"/>
</td>
<th width="130px" bgcolor="#DODODO">身高</th>
<td width="130px">
<input type="text" name="x1" value="填寫身高" style="width: 160px;border: 0"/>
</td>
</tr>
<tr style="height: 50px">
<th width="130px" bgcolor="#DODODO">培養方式</th>
<td width="130px">
<input type="text" name="x1" value="填寫培養方式" style="width: 160px;border: 0"/>
</td>
<th width="130px" bgcolor="#DODODO">通訊地址</th>
<td width="130px" colspan="2">
<input type="text" name="x1" value="填寫通訊地址" style="width: 160px;border: 0"/>
</td>
</tr>
<tr style="height: 50px">
<th width="130px" rowspan="2" bgcolor="#DODODO">聯絡方式</th>
<th width="130px" bgcolor="#DODODO">Tel</th>
<th width="130px" bgcolor="#DODODO">QQ</th>
<th width="130px" bgcolor="#DODODO" colspan="2">email</th>
</tr>
<tr style="height: 50px">
<td width="130px">
<input type="text" name="x1" value="手機號碼"style="width: 160px;border: 0"/>
</td>
<td width="130px">
<input type="text" name="x1" value="QQ號" style="width: 160px;border: 0"/>
</td>
<td width="130px" colspan="2">
<input type="text" name="x1" value="email地址" style="width: 160px;border: 0"/>
</td>
</tr>
<tr style="height: 50px">
<th width="130px" bgcolor="#DODODO">新浪部落格</th>
<td colspan="4">
<input type="text" name="x1" value="部落格賬號" style="width: 650px;border: 0"/>
</td>
</tr>
<tr>
<th width="130px" height="120px" bgcolor="#DODODO">主修課程</th>
<td width="130px" height="120px" colspan="4">
<input type="text" name="x1" value="主修課程" style="width: 650px;height: 120px;border: 0"/>
</td>
</tr>
<tr>
<th width="130px" height="80px" bgcolor="#DODODO">所獲榮譽證書</th>
<td width="130px" height="80px" colspan="4">
<input type="text" name="x1" value="榮譽證書" style="width: 650px;height: 80px;border: 0"/>
</td>
</tr>
<tr>
<th width="130px" height=