HTML学习之href属性、表格、表单实践操作 0404
href属性
演示文件的代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>这是href属性的一些用法展示</title> </head> <body> <h3>展示一些href中超链接的用法</h3> <h4>第一：跳转网页</h4> <a href="http://www.16ak.cn/" target="_blank"> 艾克资源博客</a> <h4>第二：下载文件</h4> <a href="https://down.115z.com/azdtbqdrj_20200402152602.apk" download="ruanjian.apk" >点我下载 </a> <h4>第三：邮件的发送</h4> <a href="mailto:981077525@qq.com"> 点我联系博主发送邮件 </a> <h4>第四：电话的拨打</h4> <a href="tel:1325****702">点击这里打电话给我</a> <h4>第五：锚点跳转展示</h4> <a href="#maodian1">点我跳转至第一锚点</a> <a href="#maodian2">点我跳转至第二锚点</a> <a href="#maodian3">点我跳转至第三锚点</a> <a href="#maodian4">点我跳转至第四锚点</a> <div id="maodian1" style="margin-top: 1000px;">我是第一锚点</div> <div id="maodian2" style="margin-top: 1000px;">我是第二锚点</div> <div id="maodian3" style="margin-top: 1000px;">我是第三锚点</div> <div id="maodian4" style="margin-top: 1000px;">我是第四锚点</div> </body></html>
代码演示地址：演示地址
表格
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>这是我的表格元素代码文件</title> </head> <body> <table border="1" cellpadding="5" cellspacing="0" width="500" height="300" align="center" > <!-- 对列统一设置,colgroup中设置的属性对所有列均有效 --> <colgroup bgcolor="lightpink"> <!-- 如果不想自定义某一列属性,只写元素不写属性 --> <col /> <!-- 第二列个性化定制: 背景为浅绿色 --> <col bgcolor="lightgreen" /> <!-- 第三列背景为黄色,并跨越2列都有效 --> <col bgcolor="yellow" span="2" /> <!-- 第四列,使用第3列的样式 --> <col /> <!-- 最后一列无特殊样式,采用父级样式 --> <col /> </colgroup> <!-- 表格标题 --> <caption style="font-size: 1.5rem; margin-bottom: 10px;"> 员工信息表 </caption> <!-- 表格页眉 --> <thead bgcolor="lightblue"> <th>部门</th> <th>ID</th> <th>姓名</th> <th>职务</th> <th>手机</th> </thead> <!-- 表格主体1 --> <tbody> <tr> <td rowspan="3" align="center">开发部</td> <td>101</td> <td>小王</td> <td>主管</td> <td>188345****</td> </tr> <tr> <!-- <td>开发部</td> --> <td>102</td> <td>小张</td> <td>程序员</td> <td>158123****</td> </tr> <tr> <!-- <td>开发部</td> --> <td>103</td> <td>小李</td> <td>实习生</td> <td>13399*****</td> </tr> </tbody> <!-- 表格主体2 --> <tbody> <tr> <td rowspan="3" align="center">销售部</td> <td>104</td> <td>小马</td> <td>主管</td> <td>135345****</td> </tr> <tr> <!-- <td>开发部</td> --> <td>105</td> <td>小刘</td> <td>客服</td> <td>157123****</td> </tr> <tr> <!-- <td>开发部</td> --> <td>106</td> <td>小朱</td> <td>实习生</td> <td>138349*****</td> </tr> </tbody> <!-- 表格页脚 --> <tfoot> <tr bgcolor="wheat"> <td align="center">备注:</td> <td colspan="4">所有员工离职必须提交30天提交书面申请</td> </tr> </tfoot> </table><h2 align="center" style="color:blue ;font-size:2rem">这是我自己制作的演示表格</h2> <table align="center" width="500" height="300" border="1" cellpadding="5" cellspacing="0" bgcolor="red" > <colgroup > <col bgcolor="blank" /> <col bgcolor="lightgreen" /> <col bgcolor="yellow" span="1" /> <col bgcolor="lightgreen" span="2"/> <col /> </colgroup> <caption style="font-size: 1.5rem;"> 小学生上课日程表 </caption> <tr bgcolor="lightpink"> <td></td> <td align="center"> 周一 </td> <td align="center"> 周二 </td> <td align="center"> 周三 </td><td align="center"> 周四 </td><td align="center"> 周五 </td> </tr> <tr> <td align="center">第一节</td> <td> 语文 </td> <td> 英语 </td> <td> 数学 </td> <td>语文</td> <td>语文</td> </tr> <tr> <td align="center"> 第二节 </td> <td> 语文 </td> <td> 英语 </td> <td> 数学 </td> <td>语文</td> <td>语文</td> </tr> <tr> <td align="center"> 第三节 </td> <td> 语文 </td> <td> 英语 </td> <td> 数学 </td> <td>语文</td> <td rowspan="2">语文</td> </tr> <tr> <td align="center"> 第四节 </td> <td rowspan="2"> 语文 </td> <td> 英语 </td> <td> 数学 </td> <td>语文</td> </tr> <tr> <td align="center" > 第五节 </td> <td> 英语 </td> <td> 数学 </td> <td>语文</td> <td>语文</td> </tr> <tr><td align="center"> 第六节 </td> <td rowspan="2"> 作文 </td> <td> 英语 </td> <td> 数学 </td> <td>语文</td> <td>语文</td> </tr> <tr><td align="center"> 第七节 </td> <td> 英语 </td> <td> 数学 </td> <td>语文</td> <td>语文</td> </tr> <tr><td align="center"> 备注： </td> <td colspan="5"> 这是我的课程表的备注信息 </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>表单之input</title> <style> form { padding: 20px; width: 350px; box-shadow: 0 0 8px #888; border-radius: 10px; box-sizing: border-box; margin: auto; background-color: lightskyblue; display: grid; gap: 15px; } form > section { display: grid; grid-template-columns: 60px 1fr; } h3 { text-align: center; } input[type="image"] { justify-self: center; } </style> </head> <body> <h3>用户注册</h3> <form action="handle.php" method="post" enctype="application/x-www-form-urlencoded" id="register" > <!-- 单行文本输入框 --> <section> <label for="username">用户名:</label> <!-- 必选且自动获取焦点 --> <input type="text" name="username" id="username" maxlength="20" placeholder="不少于6位" required autofocus /> </section> <!-- 密码输入框 --> <section> <label for="password">密码:</label> <input type="password" name="password" id="password" size="10" placeholder="不少于8位" required /> </section> <!-- 单选框 --> <section> <label for="secret">性别:</label> <div> <!-- 只允许返回一个值,多个input的name属性值必须相同 --> <input type="radio" name="gender" id="male" value="male" /><label for="male" >男</label > <input type="radio" name="gender" id="female" value="female" /><label for="male" >女</label > <!-- checked: 默认选项 --> <input type="radio" name="gender" id="secret" value="female" checked /><label for="secret">保密</label> </div> </section> <!-- 复选框 --> <section> <label for="programme">兴趣:</label> <div> <!-- 允许返回多个值,属性名采用数组格式,便于后端处理 --> <input type="checkbox" name="hobby[]" id="game" checked /><label for="game" >游戏</label > <input type="checkbox" name="hobby[]" id="travel" checked /><label for="travel" >旅游</label > <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /><label for="shoot">摄影</label> <input type="checkbox" name="hobby[]" value="programme" id="programme" checked /><label for="programme">编程</label> </div> </section> <!-- 文件域 --> <section> <label for="userpic">头像:</label> <!-- 设置<form enctype="multipart/form-data">,且为POST提交 才有效--> <input type="file" name="user_pic" id="userpic" /> <!-- 隐藏域: 限制上传文件大小不超过8M --> <input type="hidden" name="MAX_FILE_SIZE" value="8388608" /> </section> <!-- 预定义复合框 --> <section> <label for="course">课程:</label> <input type="text" name="course" list="course" /> <datalist id="course"> <!-- 此<option>使用单标签,与<select>中不同 --> <option value="HTML/CSS开发与实战"> </option> <option value="JavaScript基础与实战"> </option> <option value="PHP开发基础"> </option> <option value="Laravel基础与实战"> </option> </datalist> </section> <!-- 表单控件元素不一定必须写到<form>标签内 --> <!-- 表单控件使用form属性,将它与所属表单绑定 --> <section> <label for="email">邮箱:</label> <input type="email" name="email" id="email" form="register" /> </section> <section> <label for="age">年龄:</label> <input type="number" name="age" id="age" form="register" min="18" max="60" step="1" value="22" /> </section> <!-- 图像域: 提交按钮为图像 --> <!-- 返回点击图片的x/坐标,推荐加上name属性,返回有语义坐标 --> <!-- 测试提交,启动一个本地Web服务器: php -S localhost:8888 --> <input type="image" src="https://ae01.alicdn.com/kf/H109350428f9c441e94c63b44eec253b1N.png" alt="submit" name="submit" width="100" /> </form> <hr /> <h2 align="center" style="font-size: 2rem; color: blue;"> 接下来是我的代码片段 </h2> <h3 style="font-size: 1.17rem;">用户信息修改</h3> <form action="handle.php" method="post" enctype="application/x-www-form-urlencoded" id="register" > <!-- 单行文本输入框 --> <section> <label for="username">原账号:</label> <!-- 必选且自动获取焦点 --> <input type="text" name="username" id="username" maxlength="20" placeholder="不少于6位" required autofocus /> </section> <!-- 密码输入框 --> <section> <label for="password">原密码:</label> <input type="password" name="password" id="password" size="10" placeholder="不少于8位" required /> </section> <section> <label for="password">新密码:</label> <input type="password" name="password" id="password" size="10" placeholder="不少于8位" required /> </section> <!-- 单选框 --> <section> <label for="secret">性别:</label> <div> <!-- 只允许返回一个值,多个input的name属性值必须相同 --> <input type="radio" name="gender" id="male" value="male" /><label for="male" >男</label > <input type="radio" name="gender" id="female" value="female" /><label for="male" >女</label > <!-- checked: 默认选项 --> <input type="radio" name="gender" id="secret" value="female" checked /><label for="secret">保密</label> </div> </section> <!-- 复选框 --> <section> <label for="programme">兴趣:</label> <div> <!-- 允许返回多个值,属性名采用数组格式,便于后端处理 --> <input type="checkbox" name="hobby[]" id="game" checked /><label for="game" >游戏</label > <input type="checkbox" name="hobby[]" id="travel" checked /><label for="travel" >旅游</label > <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /><label for="shoot">摄影</label> <input type="checkbox" name="hobby[]" value="programme" id="programme" checked /><label for="programme">编程</label> </div> </section> <!-- 文件域 --> <section> <label for="userpic">头像:</label> <!-- 设置<form enctype="multipart/form-data">,且为POST提交 才有效--> <input type="file" name="user_pic" id="userpic" /> <!-- 隐藏域: 限制上传文件大小不超过8M --> <input type="hidden" name="MAX_FILE_SIZE" value="8388608" /> </section> <!-- 预定义复合框 --> <section> <label for="course">课程:</label> <input type="text" name="course" list="course" /> <datalist id="course"> <!-- 此<option>使用单标签,与<select>中不同 --> <option value="HTML/CSS开发与实战"> </option> <option value="JavaScript基础与实战"> </option> <option value="PHP开发基础"> </option> <option value="Laravel基础与实战"> </option> </datalist> </section> <!-- 表单控件元素不一定必须写到<form>标签内 --> <!-- 表单控件使用form属性,将它与所属表单绑定 --> <section> <label for="email">邮箱:</label> <input type="email" name="email" id="email" form="register" /> </section> <section> <label for="age">年龄:</label> <input type="number" name="age" id="age" form="register" min="18" max="60" step="1" value="22" /> </section> <!-- 图像域: 提交按钮为图像 --> <!-- 返回点击图片的x/坐标,推荐加上name属性,返回有语义坐标 --> <!-- 测试提交,启动一个本地Web服务器: php -S localhost:8888 --> <input type="image" src="https://ae01.alicdn.com/kf/H109350428f9c441e94c63b44eec253b1N.png" alt="submit" name="submit" width="100" /> </form> </body></html>
演示地址：跳转链接
Correcting teacher：
天蓬老师
Correction status：qualified
Teacher's comments：效果不错, 加油
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
