![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：列表与表格都是非常常用的标签, 应用场景 非常 的多
Collection
Collection
默写HTML文档的基本结构
<!DOCTYPE html> <!--定义文档类型--> <html lang="en"> <!--文档根元素，lann=languge,可为zh-cn--> <head> <meta charset="UTF-8"> <title>文档标题</title> </head> <!--文档头部--> <body> <h1 class="red">第一标题</h1><!--属性值写在起始标签值中，起对元素修饰的作用--> <h2><em>第二标题</em></h2> <h3><strong>第三标题</h3></strong> <h4><big>第四标题</h4></big> <h5><i>第五标题</i></h5> <h6><small>第六标题</h6></small> <!--双标签与单标签的不同--> <img src="https://06imgmini.eastday.com/mobile/20190704/2019070418_e8a154464b7e40b9bee69aa9cbdc85a4_4463_wmk.jpg" alt="小姐姐"> <!--例外：<link href="style.css">,<script src="my.js"</script>--> </body> <!--文档主体--> </html>
点击 "运行实例" 按钮查看在线实例
实例演示无序列表的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>0702作业</title> </head> <body> <h2>0702作业</h2> <!--标题--> <p>无序列表、表格、表单编写实例</p> <!--段落--> <hr> <!--分割线--> <h3>一、无序列表</h3> <ul> <li>1.无序列表</li> <li>2.有序列表</li> <li>3.定义列表</li> </ul> <br> <h3>360浏览器导航</h3> <ul> <li><a href="https://www.so.com/?src=hao_360so">360搜索</a></li> <li><a href="https://www.360kuai.com/pc/home?sign=360_1ee3c341">360资讯</a></li> <li><a href="https://video.360kan.com/">360视频</a></li> <li><a href="http://image.so.com/?src=hao_360so">360图片</a></li> <li><a href="https://ditu.so.com/?src=hao_tablogo">360地图</a></li> </ul> <!--无序列表，常用于导航--> <hr> <h3>二、有序列表</h3> <ol> <li>无序列表</li> <li>有序列表</li> <li>定义列表</li> </ol> <!--有序列表--> <hr> <h3>三、定义列表</h3> <!--定义列表,类似于名词解释, 通常用来制作页脚的导航--> <dl> <dt>快剪辑</dt> <dd>头条推荐</dd> <dt>热点资讯</dt> <dd>下载</dd> <dd>一键加速</dd> </dl> <hr> <!--<dd>与<dt>不同之处--> <dl> <dt>快剪辑</dt> <dt>头条推荐</dt> <dd>热点资讯</dd> <dd>下载</dd> <dd>一键加速</dd> </dl> </body> </html>
点击 "运行实例" 按钮查看在线实例
实例演示表格的用法以及行列合并的应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>参会人员汇总信息表</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5" width="800" align="center"> <caption><big><strong>参会人员汇总信息表</caption></big></strong><!--表格标题--> <thead> <!--表格头部，一个表格一个表头--> <tr bgcolor="lightpink"><!--表格第一行--> <th>序号</th><!--第一行第1个单元格内容--> <th>单位名称</th><!--第一行第2个单元格内容--> <th>预计参会人数</th> <th>联系人姓名</th><!--第一行第4个单元格内容--> <th>联系人电话</th> </tr> </thead> <tbody> <!-- 表格主体, <tbody>可以有多个--> <tr> <!--表格第二行--> <td width="50">1</td> <td width="200">baidu</td> <td width="50">12</td> <td width="200">张三</td> <td width="250">13999999999</td> <!--单元格相加为750,为什么表格宽度要设置为800, 因为还有cellpadding=5,共50px--> </tr> <tr> <!--表格第三行--> <td width="50">2</td> <td width="200">jd</td> <td width="50">10</td> <td width="200">李四</td> <td width="250">13899988999</td> </tr> <tr> <!--表格第四行--> <td width="50">3</td> <td width="200">tb</td> <td width="50">9</td> <td width="200">王五</td> <td width="250">13899988569</td> </tr> </tbody> <tfoot><!-- 表格底部, tfoot也只允许有一个 --> <tr> <!--表格最后一行--> <td colspan="2" rowjspan="2" align="center">总计参会人数</td> <!-- 单元格在列方向上的合并: colspan--> <td rowspan="2">31</td> <td colspan="2" rowspan="2" align="center">---</td> </tr> </tfoot> </table> </table> </body> </html> <!--使用表格编写--> <!--border: 表格与单元格添加边框--> <!--cellspacing: 设置单元格与表格之间的间隙大小,0为折叠--> <!--cellpadding: 设置单元格内容与单元格之间的内边距, 不要太拥挤--> <!--width: 设置表格的宽度, 可以使用相对值:百分比--> <!--align: 设置对齐方式,居中, 居左,居右--> <!--bgcolor: 设置背景色--> <!--colsapn: 单元格在列方向上(水平)的合并--> <!--rowspan: 单元格在行的方向(垂直)合并-->
点击 "运行实例" 按钮查看在线实例
实例演示表单以及常用控件元素的使用（必须掌握）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单于表单中的空间元素</title> </head> <body> <h3>编辑资料</h3> <form action="" method="get" name="editor"> <p> <label for="nickname">昵 称</label> <input type="text" id="nickname" name="nikaname" placeholder="不超过6个字符" autofocus> <!--标签绑定以label标签中for属性与input中的id属性实现，实现标签与内容绑定，autofocus:自动获取焦点, placeholder:提示信息--> <!--select设置默认选项--> </p> <p> <label for="birthday">生日</label> <input type="date" id="birthday" name="birthday" audofucus> <label for="blood">血 型</label> <select name="blood" id="blood" size="1"> <!--默认显示一个，可以用size设置--> <option value="0">请选择</option> <option value="1">A</option> <option value="2">B</option> <option value="3">O</option> <option value="'4">AB</option> </select> </p> <p> <label for="job">职 业</label> <select name="job" id="job"size="1"> <option value="0">计算机/互联网/通信</option> <option value="1">生产/工艺/制造</option> <option value="2">医疗/护理/制***</option> <option value="3">金融/银行/投资/保险</option> <option value="4">商业/服务业/个体经营</option> <option value="5">教育/培训</option> <option value="6">其它</option> <input type="text" placeholder="其它：不超过6个字符"> </select> <!--选自支持分组：optgroup bable="xx"--> </p> <p> <label for="hometown">家 乡</label> <input type="text" id="hometown" name="hometown" autofocus> </p> <p> <label for="email">邮 箱</label> <input type="email" id="email" name="email" placeholder="example@mail.com" required> <!--required:必填项--> </p> <p> <label for="age">年 龄</label> <input type="number" id="age" name="age" min="18" max="70"> </p> <p> <!-- 单选按钮--> <label for="secrecy">性 别</label><!-- 点击"性别"标签会自动定位到"保密"选项上--> <input type="radio" name="gender" walue="male" id="male"> <label for="male">男</label> <input type="radio" name="gender" walue="female" id="female"> <label for="female">女</label> <input type="radio" name="gender" walue="secrecy" id="secrecy" checked><label for="secrecy">保密</label> </p> <p> <!-- 复选框--> <label for="Monday">授课时间</label> <!-- 点击"授课时间"标签会自动定位到“星期一”选项上--> <input type="checkbox" name="studytime[]" value="Monday" id="Monday"><label for="Monday">星期一</label> <input type="checkbox" name="studytime[]" value="Tuesday" id="Tuesday"><label for="Tuesday">星期二</label> <input type="checkbox" name="studytime[]" value="Wednesday" id="Wednesday"><label for="Wednesday">星期三</label> <input type="checkbox" name="studytime[]" value="Thursday" id="Thursday"><label for="Thursday">星期四</label> <input type="checkbox" name="studytime[]" value="Friday" id="Friday"><label for="Friday">星期五</label> <input type="checkbox" name="studytime[]" value="Saturday" id="Saturday"><label for="Saturday">星期六</label> <input type="checkbox" name="studytime[]" value="Sunday" id="Sunday"><label for="Sunday">星期日</label> </p> <p> <!-- 文本域--> <!-- 文本域其实就是一个多行文本框--> <!-- 不要设置value属性, 返回的文本在value属性中--> <label for="graph">个人签名</label> <textarea name="graph" id="graph" cols="30" rows="10" maxlength="30" placeholder="不超过30字" > </textarea> </p> <p> <!--按钮--> <button type="button">保存</button> <button type="button">取消</button> <input type="reset" name="reset" value="重置"> <!--重置只还原默认值，不是删空--> <input type="submit" name="submit" value="提交"> <!--input属性值value必须写--> </p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
【注】：input元素type不同类型及相关属性内容详见HTML表单之input元素类型及相应属性值