黑馬程式員第二天
今天主要學習了表格，串列和表單，
一.表格標簽
主要作用：用于顯示，展示資料，不是用來布局頁面的，
1.基本語法：
表格標簽：<table> <.table>用于定義表格的標簽
行標簽：<tr> </tr>定義表格中的行
單元格標簽：<td> </td>定義 表格中的單元格
表頭單元格標簽：<th> </th>
注：<tr>嵌套在<table>里 <td>嵌套在<tr>里
表頭單元格也是單元格文字，加粗，居中顯示，在一行，突出重要性，
2.表格的相關屬性：（不常用，通過css來設定，寫在table里）
align= left左，right右，center居中，（對齊方式）
border=”1“ ：邊框
cellpadding=”數值“：文字和單元格之間的距離
cellspacing=”數值“：單元格和單元格之間的距離
width=”數值“：表格寬度
height=”數值“：表格高度
3. 表結構標簽：
頭部區域：<thead> 一個大的區域，里邊一定有<tr>
主體區域：<tbody>
4.合并單元格：
①合并單元格方式：
跨行合并：rowspan=”合并單元格個數“
跨列合并：colspan=”合并單元格個數“
②目標單元格：
跨行：最上側為目標單元格，寫合并代碼
跨列：最左側為目標單元格，寫合并代碼
洗掉多余單元格
5.表格上方的標題：<caotion> </caption>寫在table開頭
6.案例：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align="center" border="1" cellpanding="0" cellspacing="0" width="800" height="800">
<thead>
<tr>
<th colspan="5">簡介</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>姓名</td>
<td>德萊厄斯</td>
<td>專業</td>
<td>嘉里敦屋里系</td>
<td rowspan="3"></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>dles@163.com</td>
<td>聯系方式：29392132904</td>
</tr>
<tr>
<td>出生日期</td>
<td>瓦羅蘭歷三五八年獨立日</td>
<td>電話</td>
<td>4008823823</td>
<td>郵編：710121</td>
</tr>
<tr>
<td colspan="2">實習經歷</td>
<td colspan="3"></td>
</tr>
</tbody>
</table>
</body>
</html>
二.三種串列
1.無序串列：<ul> </ul>串列項：<li> </li>
沒有順序之分，是并列的，
ul標簽中只能放li標簽，li標簽里放什么都可以，
2.有序串列：<ol> </ol>串列項：<li></li>
有順序
ul標簽中只能放li標簽，li標簽里放什么都可以，
**3.自定義串列：**用于對術語或名詞進行描述
自定義串列：<dl>
定義專案或名字：<dt>
解釋專案或名字：<dd>
dl標簽只能放dt和dd標簽
4.案例：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>去超市要買的東西</h3>
<ul>
<li>吃的</li>
<li>
<ul>
<li>餅干</li>
<li>面包</li>
<li>巧克力
<ul>
<li>德芙</li>
<li>費列羅</li>
</ul>
</li>
</ul>
</li>
<li>用的</li>
<li>喝的</li>
</ul>
</body>
</html>
三.表單
為了收集用戶資訊
組成：表單域，表單控制元件（表單，元素），提示資訊
表單域：包含表單元素的區域<form>
form會把它范圍內的表單元素資訊提交給服務器
三種常見的屬性：action=”提交到的地址“；method=”“提交方式；name=”“表單名字
1.input：輸入表單元素input type=”屬性值“
文本框：text
密碼框：password
提交按鈕：submit ，value=“字”提交按鈕中顯示的字
重置按鈕：清空表單或回鶻默認值，reset
單選按鈕：radio，可以實作多選一，但是要實作多選一，要加上name，name 是表單元素的名字，單選的選項name必須一樣，
復選框：checkbox，實作多選一，復選按鈕名字也要一樣，value：表單中元素的值，
checked=“checked”，簡寫成checked：默認的選中，可以單，復，
普通按鈕：button，獲取短信驗證碼，
lable標簽：將焦點（游標）轉到或者選擇對應的表單元素上
<lable for="text">用戶名：</lable><input type="text" id="text">
for屬性值對相應id屬性值，應當相同，
2.select：下拉表單元素，多個選項讓用戶選擇，節約空間
<select>
<option> </option>
</select>
selected=“selected”,簡寫成selected：默認選中
3.textarea：文本域標簽，內容較多，用于定義多行文本輸入的控制元件，
4.案例：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<table align="center">
<!-- 第一行 -->
<tr>
<td>昵稱</td>
<td><input type="text"></td>
</tr>
<!-- 第二行 -->
<tr>
<td>密碼</td>
<td><input type="password"></td>
</tr>
<!-- 第三行 -->
<tr>
<td>郵箱</td>
<td><input type="text"><select name="" id="">
<option value="">qq.com</option>
</select></td>
</tr>
<!-- 第四行 -->
<tr>
<td>性別</td>
<td><input type="radio" name="xingbie" id="1" checked><label for="1">男</label>
<input type="radio" name="xingbie" id="2"><label for="2">女</label>
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>興趣</td>
<td><input type="checkbox" name="xingqu" id="3"><label for="3">旅游</label>
<input type="checkbox" name="xingqu" id="4"><label for="4">攝影</label>
<input type="checkbox" name="xingqu" id="5"><label for="5">運動</label>
</td>
</tr>
<!-- 第六行 -->
<tr>
<td>個人介紹</td>
<td></td>
</tr>
<!-- 第七行 -->
<tr>
<td colspan="2">
<textarea name="" id="" cols="45" rows="5"></textarea>
</td>
</tr>
<!-- 第八行 -->
<tr align="center">
<td colspan="2">
<input type="submit" value="注冊">
</td>
</tr>
<!-- 第九行 -->
<tr>
<td>上傳個人照片：</td>
<td></td>
</tr>
<!-- 第十行 -->
<tr>
<td colspan="2">
<input type="file" name="" id="">
</td>
</tr>
</table>
</form>
</body>
</html>
四.心得體會
今天學習的內容較多，單詞也很多，需要多記多背多鞏固，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/172852.html
標籤：其他