WEB表单和表格标签综合案例
案例：
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单标签</title>
</head>
<body><h1 style="text-align: center; color: black;">【音乐节名称】报名名单</h1><p style="text-align: center; color: dimgray;">欢迎参加我们盛大的音乐节，请仔细填写一下表格</p><form style="max-width: 600px; margin: 0 auto;"><div style="margin-bottom: 10px;"><label for="username" style="display: block; font-weight: bold;margin-bottom: 3px;">姓名：</label><input type="text" id="username" name="用户姓名" placeholder="请输入姓名" required style="width: 100%;padding: 8px; border: 1px solid #ccc; border-radius: 8px;"></div><div style="margin-bottom: 10px;"><label for="password" style="display: block; font-weight: bold;margin-bottom: 3px;">登录密码：</label><input type="password" id="password" name="登录密码" placeholder="请输入密码，以便后续信息查询" required style="width: 100%;padding: 8px; border: 1px solid #ccc; border-radius: 8px;"></div><div style="margin-bottom: 10px;"><label for="email" style="display: block; font-weight: bold;margin-bottom: 3px;">邮箱：</label><input type="email" id="email" name="邮箱" placeholder="请输入邮箱，以便接受音乐节相关通知" required style="width: 100%;padding: 8px; border: 1px solid #ccc; border-radius: 8px;"></div><div style="margin-bottom: 10px;"><label for="number" style="display: block; font-weight: bold;margin-bottom: 3px;">电话：</label><input type="number" id="number" name="电话" placeholder="请输入电话，以便接受音乐节相关通知" required style="width: 100%;padding: 8px; border: 1px solid #ccc; border-radius: 8px;"></div><div style="margin-bottom: 10px;"><label for="age" style="display: block; margin-bottom: 3px; font-weight: bold;">年龄：</label><input type="number" id="age" name="age" min="1" max="120" placeholder="请输入您的年龄"requiredstyle="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 8px;"></div><div style="margin-bottom: 10px;"><label for="date" style="display: block; font-weight: bold;margin-bottom: 3px;">生日：</label><input type="date" id="date" name="生日" placeholder="年/月/日" required style="width: 100%;padding: 8px; border: 1px solid #ccc; border-radius: 8px;"></div><div style="margin-bottom: 15px;"><label for="arrivalTime" style="display: block; margin-bottom: 5px; font-weight: bold;">预计到达时间：</label><input type="time" id="arrivalTime" name="arrivalTime"style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"></div><div style="margin-bottom: 15px;"><label for="stayPeriod" style="display: block; margin-bottom: 5px; font-weight: bold;">音乐节停留日期时间：</label><input type="datetime-local" id="stayPeriod" name="stayPeriod"style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"></div><div style="margin-bottom: 15px;"><label for="preferredMonth" style="display: block; margin-bottom: 5px; font-weight: bold;">您希望未来举办音乐节的月份：</label><input type="month" id="preferredMonth" name="preferredMonth"style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"></div><div style="margin-bottom: 15px;"><label for="preferredWeek" style="display: block; margin-bottom: 5px; font-weight: bold;">您希望未来举办音乐节的周次：</label><input type="week" id="preferredWeek" name="preferredWeek"style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"></div><div style="margin-bottom: 15px;"><label for="satisfaction" style="display: block; margin-bottom: 5px; font-weight: bold;">您对本次音乐节宣传的满意度：</label><input type="range" id="satisfaction" name="satisfaction" min="0" max="100" value="50"style="width: 100%;"></div><div style="margin-bottom: 15px;"><label for="favoriteColor" style="display: block; margin-bottom: 5px; font-weight: bold;">您希望音乐节主色调：</label><input type="color" id="favoriteColor" name="favoriteColor"></div><div style="margin-bottom: 15px;"><label for="profilePic" style="display: block; margin-bottom: 5px; font-weight: bold;">上传您的靓照（用于音乐节留念墙）：</label><input type="file" id="profilePic" name="profilePic"></div><div style="margin-bottom: 15px;"><p style="font-weight: bold;">性别：</p><input type="radio" id="male" name="gender" value="male"><label for="male">男</label><input type="radio" id="female" name="gender" value="female"><label for="female">女</label></div><div style="margin-bottom: 15px;"><p style="font-weight: bold;">您喜欢的音乐类型（可多选）：</p><input type="checkbox" id="rock" name="musicTypes" value="rock"><label for="rock">摇滚</label><input type="checkbox" id="pop" name="musicTypes" value="pop"><label for="pop">流行</label><input type="checkbox" id="jazz" name="musicTypes" value="jazz"><label for="jazz">爵士</label><input type="checkbox" id="electronic" name="musicTypes" value="electronic"><label for="electronic">电子</label></div><div style="margin-bottom: 15px;"><label for="travelMethod" style="display: block; margin-bottom: 5px; font-weight: bold;">您来参加音乐节的交通方式：</label><select id="travelMethod" name="travelMethod"style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"><option value="bus">巴士</option><option value="car">自驾</option><option value="train">火车</option><option value="plane">飞机</option></select></div><div style="margin-bottom: 15px;"><label for="comments" style="display: block; margin-bottom: 5px; font-weight: bold;">留言（如特殊需求、建议等）：</label><textarea id="comments" name="comments" rows="4" cols="50" placeholder="请留下您的宝贵意见"style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;"></textarea></div><div><input type="submit" value="提交报名信息"style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;"><input type="reset" value="重置表单"style="background-color: #f44336; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; margin-left: 10px;"></div></form></form>
</body>
</html> 表格案例：
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格标签</title>
</head>
<body style="font-family: Arial, Helvetica, sans-serif; padding: 20px;"><h1 style="text-align: center;color: #789;">热门数码产品评测汇总</h1><p style="text-align: center;color: gray;">在当今数字化时代，数码产品层出不穷。为了帮助大家更好地挑选适合自己的数码产品，以下是近期热门数码产品的详细评测。</p><h2 style="color:burlywood;border-bottom:1px solid #789;padding-bottom: 5px;">一、手机类</h2><p style="color: #789;">手机已经成为我们生活中不可或缺的一部分，下面为您介绍几款热门手机。</p><ul style="list-style-type: disc;"><li style="font-weight: bold; color: #789;">苹果 iPhone 16：作为苹果公司的最新款手机，它延续了一贯的高品质和流畅系统。搭载了全新的处理器，性能强劲。</li><li style="font-weight: bold; color: #789;">华为 P70：华为在拍照领域一直表现出色，P70 更是在拍照技术上有了新的突破，同时拥有强大的信号处理能力。</li><li style="font-weight: bold; color: #789;">小米 15：小米以性价比著称，小米 15 在保持高性价比的同时，也在性能和功能上有了很大提升。</li></ul><table border="1" style="width: 100%;border-collapse: collapse;"><thead style="background-color: #f2f2f2;"><tr><th style="padding: 10px;border: 1px solid #ccc;">手机型号</th><th style="padding: 10px;border: 1px solid #ccc;">处理器</th><th style="padding: 10px;border: 1px solid #ccc;">摄像头像素</th><th style="padding: 10px;border: 1px solid #ccc;">电池容量</th><th style="padding: 10px;border: 1px solid #ccc;">价格</th></tr></thead><tbody><tr><td style="padding: 10px;border: 1px solid #ccc; color: yellow;">苹果 iPhone 16</td><td style="padding: 10px;border: 1px solid #ccc;">A18</td><td style="padding: 10px;border: 1px solid #ccc;">主摄 4800 万</td><td style="padding: 10px;border: 1px solid #ccc;">3500mAh</td><td style="padding: 10px;border: 1px solid #ccc;"> 7999 元起</td></tr></tbody></table><h2 style="color:burlywood;border-bottom:1px solid #789;padding-bottom: 5px;">二、平板电脑类</h2><p style="color: #789;">平板电脑适合娱乐、办公等多种场景，以下是几款热门平板电脑的介绍。</p><ol style="color: goldenrod;"><li style="font-style: italic; font-weight: bold;text-decoration: underline;">苹果 iPad Pro 2024：拥有强大的性能和出色的屏幕显示效果，适合专业人士进行创意工作。</li></ol>
</body>
</html>