当前位置：首页 > news >正文

HTML 列表、表格、表单综合案例

news 来源：原创 2025/6/12 20:44:35

1 案例一

<!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>文本域</title>
</head>
<body><ul><li><img src="../1.jpg" alt="图片的替换文本"><h3>主帅安东尼奥回西班牙休假国青抵达海口进行隔离</h3></li><li><img src="../../HTML_img/4.jpg" alt="图片的替换文本"><h3>梅州主帅：申花有强有力的教练组球员体能水平高</h3></li><li><img src="../2.jpg" alt="图片的替换文本"><h3>马德兴：00后球员将首登亚洲舞台调整心态才务实</h3></li></ul>
</html>

运行效果：

2 案列二

<!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>注册信息</title>
</head>
<body><h1>注册信息</h1><form action=""><!-- 因为传送数据的时候，信息一起传送，所以放入一个 form 内 --><!-- 表单控制 --><!-- 个人信息 --><h2>个人信息</h2><label>姓名：</label><input type="text" placeholder="请输入真实姓名"> <br><br><label>密码：</label><input type="password" placeholder="请输入密码"><br><br><label>确认密码：</label><input type="password" placeholder="请输入确认密码"><br><br><label>性别：</label><!-- 直接在最外层加 label 标签，扩大选中范围 --><label><input type="radio" name="gender" id="man">男</label><label><input type="radio" name="gender" id="girl" checked>女</label><br><br><label>居住城市：</label><select><option>徐州</option><option selected>杭州</option><option>南京</option><option>上海</option><option>北京</option></select><br><br><!-- 教育经历 --><h2>教育经历</h2><label>最高学历：</label><select><option>博士</option><option selected>硕士</option><option>本科</option><option>专科</option></select><br><br><label>学校名称：</label><input type="text"><br><br><label>所学专业：</label><input type="text"><br><br><label>在校时间：</label><select><option>2022</option><option>2023</option><option>2024</option><option>2025</option></select>--<select><option>2025</option><option>2026</option><option>2027</option></select><br><br><!-- 工作经历 --><h2>工作经历</h2><label>公司名称：</label><input type="text"><br><br><label>工作描述：</label><br><textarea></textarea><br><br><!-- 协议 和 按钮 --><!-- <input type="checkbox"> 已阅读并同意以下协议： --><!-- 已阅读并同意以下协议：   这些字可以放入 label 标签 --><input type="checkbox"><label>已阅读并同意以下协议：</label><br><ul><!-- <a href="#" ><li>《用户服务协议》</li></a><a href="#"><li>《隐私政策》</li></a> -->   <!-- li 标签包含 a 标签 --><li><a href="#">《用户服务协议》</a></li><li><a href="#">《隐私政策》</a></li></ul><br><br><!-- 提交按钮 --><button>免费注册</button><!-- 重置按钮 --><button type="reset">重新填写</button></form>
</html>

运行效果：