1.无序列表(常用)
ul li(没有顺序,默认li会有圆点)
![无序列表](https://i-blog.csdnimg.cn/blog_migrate/06c99e9924637f24c3c99137079da190.png#pic_center)
<!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>
</head>
<body>
<h2>无序列表</h2>
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>臭豆腐</li>
<li>
<p>圣女果</p>
<ul>
<li>123</li>
</ul>
</li>
</ul>
</body>
</html>
2.有序列表(不常用)
ol li(默认li会有数字排序)
![有序列表](https://i-blog.csdnimg.cn/blog_migrate/3b08d55c3d372d55f521717ddbabfc6f.png#pic_center)
<!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>
</head>
<body>
<ol>
<li>张三</li>
<li>张三</li>
<li>张三</li>
</ol>
</body>
</html>
3.自定义列表
dl dt dd(dt相当于核心,dd相当于对核心的拆分)
![自定义列表](https://i-blog.csdnimg.cn/blog_migrate/e56f0379361fefc14dab176ff2d27b73.png#pic_center)
<!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>
</head>
<body>
<dl>
<dt>服务支持</dt>
<dd>售后服务</dd>
<dd>上门服务</dd>
<dd>包换服务</dd>
</dl>
</body>
</html>
4.表格
table caption(表格标题) thead(表头) tbody(身体) tr(列) th(第一行标题单元格) td(单元格)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f9cc0c3e54ed3ee2cb7f5624d7a2cf5d.png#pic_center)
<!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>
</head>
<body>
<table border="10" width="400" hight="120">
<caption>
学生成绩单
</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>100</td>
<td>Fighting</td>
</tr>
<tr>
<td>李四</td>
<td>100</td>
<td rowspan="2">加油</td>
</tr>
<tr>
<td>123</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
</html>
5.form表单
input中type设置样式,text:‘文本’,password:‘密码框’,radio:‘单选框’,checkbox:‘复选框’
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9c2cfc1cb5b29853f04209c0317692ea.png#pic_center)
<!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>
</head>
<body>
<form action="">
昵称: <input type="text" placeholder="请您输入昵称" /> <br />
密码: <input type="password" placeholder="请您输入密码" /> <br />
性别: <input type="radio" name="sex" checked /> 男
<input type="radio" name="sex" /> 女 <br />
爱好: <input type="checkbox" checked /> 吃饭
<input type="checkbox" /> 睡觉 <input type="checkbox" /> 打豆豆 <br />
上传头像: <input type="file" multiple />
<br />
<input type="sumbit" />
<input type="reset" />
<input type="button" value="普通按钮" />
<button>1323</button>
</form>
</body>
</html>
6.button
<button type="submit" value="提交所填"></button>
<button type="reset" value="重置"></button>
<button type="button" value="按钮"></button>
7.select下拉
![select种option设置属性值](https://i-blog.csdnimg.cn/blog_migrate/77c126b5a72d9982f3143ab57755a6ec.png#pic_center)
<!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>
</head>
<body>
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="" selected>广东</option>
<option value="">深圳</option>
</select>
</body>
</html>
8.textarea文本域
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/bb7810740654058332364c400f9a868b.png#pic_center)
<!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>
</head>
<body>
<textarea name="" id="" cols="30" rows="10" maxlength="10"></textarea>
</body>
</html>
9.label标签
设置当点击radio时,也可以通过点击文字实现效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1378687c4325edf9e809669daaa2a619.png#pic_center)
<!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>
</head>
<body>
<input type="radio" name="sex" id="female" />
<label for="female">女</label>
<input type="radio" name="sex" id="male" />
<label for="male">男</label>
婚否
<label>
<input type="radio" name="marry" /> 未婚
</label>
<label>
<input type="radio" name="marry" />
已婚
</label>
</body>
</html>
10.综合案例
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b4354803c7ac27758d352905d53dd1bf.png#pic_center)
<!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>
</head>
<body>
<table border="1" width="600" height="200">
<h1>就业榜</h1>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
<tr>
<td>1001</td>
<td>1</td>
<td>5</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td><a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
11.综合案例2
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/fd98d1ae1826e6d1867f2d0bf4facfb8.png#pic_center)
<!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>
</head>
<body>
<form action="">
<h1>青春不常在,抓紧谈恋爱</h1>
<hr />
昵称:<input type="text" placeholder="请输入昵称" /> <br><br>
性别:<label>
<input type="radio" name="sex" /> 男
</label>
<label>
<input type="radio" name="sex" /> 女
</label> <br><br>
所在城市:<select name="" id="">
<option value="">北京</option>
<option value="" selected>上海</option>
<option value="">天津</option>
<option value="">广东</option>
<option value="">深圳</option>
</select>
<br><br>
婚姻状况:
<label>
<input type="radio" name="marry"> 未婚</label>
<label>
<input type="radio" name="marry"> 已婚</label>
<label>
<input type="radio" name="marry"> 保密</label>
<br><br>
喜欢的类型: <input type="checkbox"> 可爱
<input type="checkbox"> 性感
<input type="checkbox"> 御姐
<input type="checkbox"> 萝莉
<input type="checkbox"> 小鲜肉
<input type="checkbox"> 大叔
<br><br>
个人介绍: <br>
<textarea name="" id="" cols="30" rows="10"></textarea>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<input type="checkbox"> 我同意所有条款
<br><br>
<input type="submit" value="免费注册">
<input type="reset">
</form>
</body>
</html>