![[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标签
HTML由<>包裹的特殊字符，分单标签和双标签，HTML文档由标签将内容由不同的形式表示出来
每个标签可以视为一个元素，标签的属性定义标签的表达形式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML标签</title> </head> <body> <h1>一些双标签</h1> <p>p标签，段落标签</p> <div>div，块标签</div> <h6>h1,2,3,4,5,6,六级标题标签</h6> <a href="http://php.cn">a,超链接标签</a> <h1>一些单标签</h1> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1605018186,2918784672&fm=26&gp=0.jpg" alt="蓝泽润"> hr标签<hr> br标签<br> </body> </html>
点击 "运行实例" 按钮查看在线实例
HTML列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML列表<title> </head> <body> 无序列表 <ul> <li>观看视频</li> <li>消化理解</li> <li>编程实战</li> </ul> 有序列表 <ol> <li>观看视频</li> <li>消化理解</li> <li>编程实战</li> </ol> 详情列表 <dl> <dt>观看视频</dt> <dd>下班之后观看视频</dd> <dt>消化理解</dt> <dd>将课堂知识消化理解</dd> <dt>编程实战</dt> <dd>使用代码实现学的内容</dd> </dl> </body> </html>
点击 "运行实例" 按钮查看在线实例
列表与表格
列表更适合展示单项数据，表格适合展示多项数据之间的联系，一个事物的多个属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML表格</title> </head> <body> <table> <!-- 表头 --> <thead> <tr> <th>商品类别</th> <th>商品名称</th> <th>商品单价</th> <th>***数量</th> <th>共计金额</th> </tr> </thead> <!-- 表格正文 --> <tr> <td rowspan="3">电子产品</td> <td>联想笔记本</td> <td>5000</td> <td>20</td> <td>100000</td> </tr> <tr> <td>联想笔记本</td> <td>5000</td> <td>20</td> <td>100000</td> </tr> <tr> <td>联想笔记本</td> <td>5000</td> <td>20</td> <td>100000</td> </tr> <tr> <td colspan="4">共计</td> <td>300000</td> </tr> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
注册表单的实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML注册表单</title> </head> <body> <form> <p> <label for="name">用户名：</label> <input type="text" name="name" placeholder="用户名不能超过8个字符"> </p> <p> <label for="password">密码：</label> <input type="password" name="password" placeholder="密码不能小于6个字符"> </p> <p> <label for="email">邮箱：</label> <input type="email" name="email" placeholder="example@admin.com"> </p> <p> <label for="age">年龄：</label> <input type="number" name="age" min="16" max="60"> </p> <p> <label for="course">课程：</label> <select name="course"> <option selected>请选择...</option> <optgroup label="前端"> <option value="html">HTML</option> <option value="css">CSS</option> <option value="javascript">JavaScript</option> </optgroup> <optgroup label="后端"> <option value="php">PHP</option> <option value="mysql">MySQL</option> <option value="redis">Redis</option> </optgroup> </select> </p> <p> <label>兴趣：</label> <input type="checkbox" name="ins[]" value="game"><label>game</label> <input type="checkbox" name="ins[]" value="code"><label>code</label> <input type="checkbox" name="ins[]" value="girl"><label>girl</label> </p> <p> <label>性别：</label> <input type="radio" name="gender" value="male"><label>男生</label> <input type="radio" name="gender" value="female"><label>女生</label> <input type="radio" name="gender" value="secret"><label>秘密</label> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重填"> <button>提交</button> </p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
总结
常用的HTML标签，了解基本的功能
input标签有多种表现形式，不同的类型有不同的属性
button标签相当于<input type="submit">
ps:周末有事把作业耽搁了，趁着午休把作业搞出来