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>Demo03</title>
</head>
<body>
<!-- 没有语义标签 -->
<div>1</div>
<span>2</span>
<hr>
<!-- 有语义标签(手机端常用) -->
<head>头部</head>
<nav>导航</nav>
<footer>底部</footer>
<aside>侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>
<hr>
<!-- 字符实体 -->
哗啦哗啦 哗啦哗啦
<hr>
<!-- 列表标签 -->
<!-- 无序 -->
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
<li>火龙果</li>
</ul>
<!-- 有序 -->
<ol>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
<li>火龙果</li>
</ol>
<!-- 自定义 -->
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
<dd>自助服务</dd>
</dl>
<hr>
<!-- 表格标签 -->
<table border="1" width="300" height="150">
<caption><strong>学生成绩单</strong></caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>小明</td>
<td rowspan="2">88</td>
</tr>
<tr>
<td>002</td>
<td>小红</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">不错</td>
</tr>
</tfoot>
</table>
<!-- 合并单元格 左上原则---保留左边或上边的单元格,同一个结构标签中的单元格才能合并-->
<hr>
<!-- 表单标签 -->
<form action="">
<!-- 文本框 -->
账号:<input type="text" placeholder="请输入用户名">
<br><br>
<!-- 密码框 -->
密码:<input type="password" placeholder="请输入密码">
<br><br>
<!-- 单选框 -->
性别:<input type="radio" name="gender" checked id="man"><label for="man">男</label>
<label><input type="radio" name="gender">女</label>
<br><br>
<!-- 多选框 -->
爱好:<input type="checkbox" checked>音乐<input type="checkbox">篮球
<input type="checkbox">跑步
<br><br>
<!-- 文件选择框 -->
<input type="file" multiple>
<br><br>
<!-- 下拉菜单 -->
所在城市:
<select>
<option>北京</option>
<option>上海</option>
<option selected>郑州</option>
<option>武汉</option>
</select>
<br><br>
自我介绍:<br><br>
<textarea rows="5" cols="40" ></textarea>
<br><br>
<!-- 提交按钮 -->
<input type="submit" value="提交注册">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button" value="普通按钮">
<hr>
<button type="submit">提交注册</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
</body>
</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>
<form>
<!-- 文本框 -->
账号:<input type="text" placeholder="请输入用户名">
<br><br>
<!-- 密码框 -->
密码:<input type="password" placeholder="请输入密码">
<br><br>
<!-- 单选框 -->
性别:<input type="radio" name="gender" checked id="man"><label for="man">男</label>
<label><input type="radio" name="gender">女</label>
<br><br>
<!-- 多选框 -->
音乐标签:
<input type="checkbox" checked>流行
<input type="checkbox">民谣
<input type="checkbox">摇滚
<input type="checkbox">说唱
<input type="checkbox">R&B
<input type="checkbox">古风
<br><br>
<!-- 文件选择框 -->
上传头像:
<input type="file" multiple>
<br><br>
<!-- 下拉菜单 -->
所在城市:
<select>
<option>北京</option>
<option>上海</option>
<option selected>郑州</option>
<option>武汉</option>
</select>
<br><br>
自我介绍:<br><br>
<textarea rows="5" cols="40" ></textarea>
<br><br>
<!-- 提交按钮 -->
<input type="submit" value="提交注册">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
</form>
</body>
</html>