收藏
批改狀態(tài)：合格
老師批語：你的表格代碼呢
1. 談?wù)勀銓tml標簽, 元素與屬性的理解, 并舉例說明
答：html是超文本標記語言，簡單來說，是給搜索引擎解讀的語言。
html網(wǎng)頁由多個元素組成，元素也可以理解成節(jié)點。
一個元素，由標簽和標簽里的屬性組成。
例如：
<li><a href="http://ipnx.cn/" target="_blank">文本鏈接指向</a></li>
其中，<li>和<a>都是標簽，而 href 和 target則是<a>標簽的屬性。
2. 列表有幾種, 如何定義?
列表有3種，一種是無序列表，一種是有序列表，一種是自定義列表。
<ul> <li></li> <li></li> </ul> <ol> <li></li> <li></li> </ol> <dl> <dt></dt> <dd></dd> </dl>
3. 列表與表格的區(qū)別與聯(lián)系?什么時候用列表,什么時候用表格, 為什么?
列表一般為多行一列，主要用作導航的制作比較多，或者列表頁內(nèi)容展示的布局等等。
表格可以為多行多列，一般用于數(shù)據(jù)說明，類似購物車表格，統(tǒng)計表格等等。
4. 編程實現(xiàn),用列表制作你的工作計劃,要求使用三種類型全部實現(xiàn)一次: <ul><ol><dl>
<h3>工作計劃無序列表效果</h3> <ul> <li>1.收集素材</li> <li>2.制作材料</li> <li>3.發(fā)布內(nèi)容</li> </ul> <h3>工作計劃有序列表效果</h3> <ol> <li>收集素材</li> <li>制作材料</li> <li>發(fā)布內(nèi)容</li> </ol> <h3>工作計劃自定義列表效果</h3> <dl> <dt>1.</dt> <dd>收集素材</dd> <dt>2.</dt> <dd>制作素材</dd> <dt>3.</dt> <dd>發(fā)布內(nèi)容</dd> </dl>
效果圖：
5. 編程實現(xiàn)一張商品清單, 使用表格實現(xiàn),要求有行與列的合并,用到colspan, rowspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格代碼與表單代碼實例</title>
<style>
td {
text-align: center
}
thead {
background-color: rgb(0, 17, 255);
color: #fff;
}
</style>
</head>
<body>
<table border="1" width="500" cellspacing="0" cellpadding="0">
<caption>
<h3>購物清單</h3>
</caption>
<!-- 表頭 -->
<thead>
<tr>
<td>采購人</td>
<td>編號</td>
<td>產(chǎn)品名稱</td>
<td>單價</td>
<td>數(shù)量</td>
<td>金額</td>
</tr>
</thead>
<!-- 主體 -->
<tbody>
<tr>
<td rowspan="4">xx</td>
<td>1</td>
<td>手機</td>
<td>3000</td>
<td>1</td>
<td>3000</td>
</tr>
<tr>
<td>2</td>
<td>電腦</td>
<td>5000</td>
<td>1</td>
<td>5000</td>
</tr>
<tr>
<td>3</td>
<td>相機</td>
<td>5000</td>
<td>1</td>
<td>5000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">合計：</td>
<td>3</td>
<td>13000</td>
</tr>
</tfoot>
<!-- 底部 -->
</table>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
效果實例：
6. 編程實一張注冊表單, 要求使用到課堂上講到全部控件,并掌握所有屬性的使用場景與意義
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格代碼與表單代碼實例</title> </head> <body> <form action="logo.php" method="POST"></form> <p> <label for="username">賬號：</label> <!-- label的for屬性與下面input的id屬性一致，作用是點擊文字顯示對應(yīng)光標位置 --> <input type="text" name="usermane" id="username" placeholder="字母+數(shù)字的組合方式"> </p> <p> <label for="password">密碼：</label> <input type="password" name="password" id="password" placeholder="6到8位字符"> </p> <p> <label for="email">郵箱：</label> <input type="email" id="email" name="email" placeholder="example@email.com"> </p> <p> <label for="age">年齡：</label> <input type="number" id="age" name="age" min="16" max="80"> </p> <p> <label for="">課程選擇：</label> <select name="" id=""> <optgroup label="前端課程"> <option value="">請選擇</option> <option value="">HTML5</option> <option value="">CSS3</option> <option value="">JavaScript</option> </optgroup> <optgroup label="后端"> <option value="">php</option> <option value="">mysql</option> <option value="">laravel</option> </optgroup> </select> </p> <p> <label for="">愛好:</label> <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">玩游戲</label> <!-- 注意,type屬性為復(fù)選框checkbox屬性；name屬性為"hobby[]",這是一個數(shù)組屬性 ；checked為默認選擇，可加可不加--> <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">擼代碼</label> <input type="checkbox" name="hobby[]" value="movies" id="movies"><label for="movies">看片</label> </p> <p> <label for="secrecy">性別:</label> <!-- 因為這里點擊性別文字，想默認在保密這個按鈕上，所以做了與保密的關(guān)聯(lián)配置--> <input type="radio" name="gender" id="male"><label for="male">男生</label> <!-- 注意,type屬性為單選框radio--> <input type="radio" name="gender" id="female"><label for="female">女生</label> <input type="radio" name="gender" id="secrecy" checked><label for="secrecy">保密</label> </p> <p> <input type="submit" name="submit" value="提交"> <!-- input類型給submit，設(shè)置為直接提交--> <input type="reset" name="reset" value="重填"> <!-- input類型給reset，設(shè)置為重置按鈕--> <input type="button" name="reset" value="按鈕"> <!-- input類型給button，設(shè)置為按鈕，需配合JS才能執(zhí)行提交--> <button type="button">注冊</button> <!-- button標簽，語義化為按鈕，需配合JS才能執(zhí)行提交--> </p> </body> </html>
點擊 "運行實例" 按鈕查看在線實例
7. 寫出總結(jié), 對于這些常用標簽的應(yīng)用場景進行分析
前端標簽很多，需要實際多寫練習和理解，配合手冊進行練習。不同的應(yīng)用場景，使用最合適的標簽去寫，讓代碼嚴謹并有意義。努力做到知行合一。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號