![[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
0702作业
一. 默写HTML文档的基本结构
总结：
1.<!DOCTYPE HTML>这行是定义文档为html格式的类型（也就是网页）。
2.<meta charset="utf-8">定义的是文档的字符编码格式。
3.<head></head>标签里面的代码是浏览器解析的，也就是给浏览器看的。
4.<body></body>标签是网页的显示主体部分，网页需要显示的内容都要写在里面(也就是用户浏览网页看到的内容包括文字、图片、视频等等)。
二.实例演示无序列表的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无序列表的实例演示</title> </head> <body> <ul> <li>首页</li> <li>首页</li> <li>首页</li> <li>首页</li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例
总结：
1.lang="en 这个属性是文档所展现的语言
2.需要注意的是无序列表是<ul><li>配合使用
三. 实例演示表格的用法以及行列合并的应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例演示表格的用法以及行列合并的应用</title> </head> <body> <h1>实例演示表格的用法以及行列合并的应用</h1> <table border="1" cellspacing="0" cellpadding="3" align="left"> <caption>购物清单</caption> <thead> <tr bgcolor="aqua"> <th>编号</th> <th>名称</th> <th>数量</th> <th>单价</th> </tr> </thead> <tbody> <tr> <td width="50">1</td> <td width="300">这是一个笔记本电脑</td> <td width="50">5</td> <td width="100" rowspan="2">3000</td> </tr> <tr> <td width="50">2</td> <td width="300">这是一个洗衣机</td> <td width="50">2</td> <!-- <td width="100">1000</td>--> </tr> <tr> <td width="50">3</td> <td width="300">这是一辆新款奔驰大G</td> <td width="50">1</td> <td width="100">500000</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">总计:</td> <td>8</td> <td>503000</td> </tr> </tfoot> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
总结：
1.照着老师的代码抄下来的，一脸懵逼，还没记住这些元素的意思，后续继续记这些元素
四. 实例演示表单以及常用控件元素的使用
<!doctype html> <html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <form action="" method="get" name="register"> <!--用户名--> <p> <label for="username">用户名：</label> <input type="text" name="username" id="username" placeholder="请输入用户名" autofocus> </p> <!--密码--> <p> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="请输入密码" autofocus> </p> <!--邮箱--> <p> <label for="email">邮箱：</label> <input type="email" id="email" placeholder="xxx@qq.com" required> </p> <!--日期--> <p> <label for="date">生日：</label> <input type="date" name="date" id="date"> </p> <!--单选框--> <p> <label for="aa">地区：</label> <select name="course" id="aa" size="1"> <optgroup label="山西"> <option value="0">太原</option> <option value="1">大同</option> <option value="2">临汾</option> </optgroup> <optgroup label="北京"> <option value="3">东城</option> <option value="4" selected>顺义</option> <option value="5">通州</option> </optgroup> </select> </p> <p> <!--复选框--> <label for="play">爱好：</label> <input type="checkbox" name="game" id="game"><label for="game">打游戏</label> <input type="checkbox" name="tv" id="tv"><label for="tv">看电视</label> <input type="checkbox" name="play" id="play" checked><label for="play">玩</label> </p> <!--单选框 ps：name属性必须一致不然无法做成单选框--> <p> <label for="no">性别：</label> <input type="radio" id="men" name="sex"><label for="men">男</label> <input type="radio" id="women" name="sex" checked><label for="women">女</label> <input type="radio" id="no" name="sex"><label for="no">保密</label> </p> <!--文本域--> <p> <label for="text">请输入内容：</label> <textarea name="comment" id="text" cols="30" rows="10" maxlength="10" placeholder="最多输入30个字"></textarea> </p> <!--提交按钮--> <p> <input type="button" name="submit" value="提交"> </p> <!--重置按钮--> <input type="reset" name="reset" value="重置"> <p> </p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
