🎃个人专栏：
🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客
🐳Java基础：Java基础_IT闫的博客-CSDN博客
🐋c语言：c语言_IT闫的博客-CSDN博客
🐟MySQL：数据结构_IT闫的博客-CSDN博客
🐠数据结构：数据结构_IT闫的博客-CSDN博客
💎C++：C++_IT闫的博客-CSDN博客
🥽C51单片机：C51单片机（STC89C516）_IT闫的博客-CSDN博客
💻基于HTML5的网页设计及应用：基于HTML5的网页设计及应用_IT闫的博客-CSDN博客
🥏python：python_IT闫的博客-CSDN博客
🐠离散数学：离散数学_IT闫的博客-CSDN博客
🥽Linux：Linux_Y小夜的博客-CSDN博客
🚝Rust：Rust_Y小夜的博客-CSDN博客
欢迎收看，希望对大家有用！
学习推荐：
在当今这个飞速发展的信息时代，人工智能（AI）已经成为了一个不可或缺的技术力量，它正在逐步改变着我们的生活、工作乃至整个社会的运作方式。从智能语音助手到自动驾驶汽车，从精准医疗到智慧城市，人工智能的应用已经渗透到了我们生活的方方面面。因此，学习和掌握人工智能相关的知识和技能，对于任何希望在这个时代保持竞争力的个人来说，都已经变得至关重要。
然而，人工智能是一个涉及数学、计算机科学、数据科学、机器学习、神经网络等多个领域的交叉学科，其学习曲线相对陡峭，对初学者来说可能会有一定的挑战性。幸运的是，随着互联网教育资源的丰富，现在有大量优秀的在线平台和网站提供了丰富的人工智能学习材料，包括视频教程、互动课程、实战项目等，这些资源无疑为学习者打开了一扇通往人工智能世界的大门。
前些天发现了一个巨牛的人工智能学习网站：前言 – 人工智能教程通俗易懂，风趣幽默，忍不住分享一下给大家。
目录
🎯功能简介
🎯代码解析
🎯核心代码
🎯效果展示
🎯功能简介
🐳这是一个用户注册的简单网页表单，包括用户名、密码、确认密码、年龄、出生年月、性别、爱好、喜欢的颜色、经常浏览的网站、所在城市、上传照片和备注等信息项。用户可以填写各种个人信息并提交注册。页面还包括了一些基本的样式设计，如字体颜色、背景颜色、边框样式等。用户填写完信息后可以点击注册按钮提交信息，或者点击重填按钮清空已填信息。🥏
🎯代码解析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{ margin: auto; border: 1px solid; border-collapse: collapse; } caption{ font-size: 24px; font-weight: bold; color: blue; padding-bottom: 15px; } td{ padding: 6px; border: 1px solid; } tr:nth-child(-n+12){ background-color: #eee; text-indent: 5px; } td:nth-child(2){ background-color: #cff; margin: 5px 10px; } tr:nth-last-child(1){ background-color: #9cf; text-align: center; } tr:nth-child(12){ text-align: center; } span{ font-size: 18px; font-weight: bold; color: red; } input{ width: 250px; height: 20px; border: 1px solid #d4cdba; } input:focus,select:focus,textarea:focus{ background-color: #eef; } input[type="number"]{ width: 50px; } input[type="date"]{ width: 150px; } input[type="radio"],input[type="checkbox"] { height: 15px; width: 15px; } input[type="color"]{ width: 30px; height: 30px; margin: 0px; } select,input[type="file"]{ height: 30px; width: 200px; font-size: 16px; font-weight: 500; border: 2px solid skyblue; } input[type="button"],input[type="submit"],input[type="reset"]{ width: 100px; height: 30px; background: #93b518; margin: 5px 10px; border-radius: 5px; font: bold 18px "黑体"; } </style> </head> <body>这部分代码定义了一个 HTML 文档的基本结构，包含了一些 CSS 样式定义。其中，
<style>标签中的样式定义了表格、标题、单元格和输入框等的样式。
<form action="f1"> <table> <caption>用户注册</caption> <tr> <td>用户名:</td> <td><input type="text" required autofocus ><span>*</span>(必填项)</td> </tr> <tr> <td>密码:</td> <td><input type="password" required placeholder="密码由6到9位的字母和数字组成"><span>*</span>(必填项)</td> </tr> <tr> <td>确认密码:</td> <td><input type="password" required placeholder="密码由6到9位的字母和数字组成"><span>*</span>(必填项)</td> </tr> <tr> <td>年龄:</td> <td><input type="number" step="1"></td> </tr> <tr> <td>出生年月:</td> <td><input type="date" value="日期"></td> </tr> <tr> <td>性别:</td> <td> <input type="radio" name="sex" value="男" id="man" checked> <label for="man">男</label> <input type="radio" name="sex" value="女" id="woman"><label for="woman">女</label> </td> </tr> <tr> <td>爱好:</td> <td> <input type="checkbox" name="hobby" value="音乐" checked id="y"> <label for="y">音乐</label> <input type="checkbox" name="hobby" value="美术" id="m"> <label for="m">美术</label> <input type="checkbox" name="hobby" value="舞蹈" id="w"> <label for="w">舞蹈</label> <input type="checkbox" name="hobby" value="健身" id="j"> <label for="j">健身</label> </td> </tr> <tr> <td>你喜欢的颜色:</td> <td><input type="color" value="black"></td> </tr> <tr> <td>你经常浏览的网站:</td> <td> <input type="url" list="url"> <datalist id="url"> <option value="https://www.haust.edu.cn"></option> <option value="https://www.bilibili.com"></option> <option value="https://www.zhihui.com"></option> </datalist> </td> </tr> <tr> <td>你所在的城市:</td> <td> <select> <option value="--请选择城市--" selected>--请选择城市--</option> <optgroup label="河南省"></optgroup> <option value="洛阳">洛阳</option> <option value="郑州">郑州</option> <option value="商丘">商丘</option> <option value="周口">周口</option> <optgroup label="其他省市"></optgroup> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> </select> </td> </tr> <tr> <td >上传本人照片:</td> <td ><input type="file" multiple></td> </tr> <tr> <td>备注:</td> <td><textarea rows="12" cols="80"></textarea></td> </tr> <tr> <td colspan="2"> <input type="submit" value="注册"> <input type="reset" value="重填"> <input type="button" value="关闭"> </td> </tr> </table> </form>这部分代码定义了一个表单，并包含了一系列的表单元素。其中的
<input>标签用于接收用户输入的数据，包括用户名、密码、年龄、出生年月、性别、爱好、颜色、经常浏览的网站和上传照片等。<select>标签用于选择所在城市，<textarea>标签用于输入备注信息。最后，三个<input>标签分别表示提交表单、重置表单和关闭表单。
🎯核心代码
table{ margin: auto; border: 1px solid; border-collapse: collapse; } caption{ font-size: 24px; font-weight: bold; color: blue; padding-bottom: 15px; } td{ padding: 6px; border: 1px solid; } tr:nth-child(-n+12){ background-color: #eee; text-indent: 5px; } td:nth-child(2){ background-color: #cff; margin: 5px 10px; } tr:nth-last-child(1){ background-color: #9cf; text-align: center; } tr:nth-child(12){ text-align: center; } span{ font-size: 18px; font-weight: bold; color: red; } input{ width: 250px; height: 20px; border: 1px solid #d4cdba; } input:focus,select:focus,textarea:focus{ background-color: #eef; } input[type="number"]{ width: 50px; } input[type="date"]{ width: 150px; } input[type="radio"],input[type="checkbox"] { height: 15px; width: 15px; } input[type="color"]{ width: 30px; height: 30px; margin: 0px; } select,input[type="file"]{ height: 30px; width: 200px; font-size: 16px; font-weight: 500; border: 2px solid skyblue; } input[type="button"],input[type="submit"],input[type="reset"]{ width: 100px; height: 30px; background: #93b518; margin: 5px 10px; border-radius: 5px; font: bold 18px "黑体"; }
🎯效果展示
