1 案例一
html
<!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 案列二
html
<!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>运行效果：
参考链接：