一.列表标签
主要是用来布局的，整齐好看。
1.无序列表
ul和li
如果要把前面的实心圆改成其他样式，则需要增加属性，浏览器默认展示方式为为"disc"（实心圆）。下面的属性示例为"square"（黑色小方块），也可以有"circle"（空心圆圈）。
2.有序列表
ol和li
cpp
<h1>这是有序列表</h1>
<ol>
<li>这是有序列表1</li>
<li>这是有序列表2</li>
<li>这是有序列表3</li>
<li>这是有序列表4</li>
</ol>
那我们不想让它通过1 2 3 4来标号，想通过其他方式，怎么办？通过type属性可以控制序号是哪个类型的：
（1）a：表示小写英文字母编号。 （2）A：表示大写英文字母编号。
（3）i：表示小写罗马数字编号。 （4）I：表示大写罗马数字编号。
（5）1：表示数字编号（默认）。
那现在不想让它从1开始，从任意一个数字开始，怎么办？此时有第二个属性：start。
3.自定义列表
dl、dt、dd
二.表单标签
用表单标签来完成和服务器的一次交互，表单是让用户输入信息的重要途径。
分成两个部分：
1.表单域： 包含表单元素的区域，重点是form标签。
cpp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action=""></form> //action引号里填写服务器地址，这个到我们学完后端就知道该填写什么
</body>
</html>2.表单控件： 输入框，提交按钮等，重点是input标签。
（1）input标签里的属性：
（ 注意input是一个单标签，它属于一个表单控件，表单控件需要搭配表单域来进行编写。）
第一个属性：type。可以通过对type进行对应的取值，来控制input的类型
①文本框：<input type="text"> （单行输入）
②密码框：<input type="password">
cpp
<body>
<form action=""></form>
姓名<input type="text">
<br>
密码<input type="password">
</body>
③单选框：<input type="radio" name="sex">男
（注意：checked="checked"代表默认，name="gender"代表唯一）
cpp
<body>
<form action="">
姓名<input type="text">
<br>
密码<input type="password">
<br>
性别<input type="radio" name="gender">男
<input type="radio" name="gender" checked="checked">女
</form>
</body>
④复选框：<input type="checkbox"> 吃饭 <input type="checkbox> 睡觉 <input type="checkbox">
⑤普通按钮：<input type="button" value="我是个按钮">，当前点击了没有反应，需要搭配JS使用（后面会重点研究）。
<input type="button" value="我是个按钮" οnclick="alert('hello')">
cpp
<input type="button" value="这是一个普通按钮" onclick="alert('hello')">
**⑥提交按钮：**提交按钮必须放到form标签内，点击后就会尝试给服务器发送。
cpp
<form action="test.html>
<input type="text" name="username">
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>⑦选择文件：
cpp
<input type="file">三.label标签
搭配input使用，点击label也能选中对应的单选/复选框，能够提升用户体验。
for属性：指定当前label和哪个相同id的input标签对应（此时点击才是有用的）。
cpp
<body>
<label for="male">男</label>
<input type="radio" name="sex" id="male">
<label for="female">女</label>
<input type="radio" name="sex" id="female">
</body>四.select标签----下拉菜单
option中定义selected="selected"表示默认选中。注意！可以给的第一个选项，作为默认选项。
cpp
<select name="" id="">
<option value="">--请选择年份--</option>
<option value="" selected="selected">--1990--</option>
<option value="">--1991--</option>
<option value="">--1992--</option>
<option value="">--1993--</option>
<option value="">--1994--</option>
</select>五. textarea标签
文本域中的内容，就是默认内容，注意，空格也会有影响。
rows和cols不会直接使用，都是用css来改的。
cpp
textarea name="" id="" cols="30" rows="20"></textarea>六.无语义标签--没有固定的用途
言外之意，就是拿这个标签啥都可以干。通常情况下，会用无语义标签进行页面设计。
1.div标签
div标签是独占一行的，是一个大盒子。
2.span标签
span标签不独占一行，是一个小盒子。
cpp
<body>
<div>
<div>
<span>吃饭</span>
<span>睡觉</span>
<span>玩游戏</span>
<span>运动</span>
</div>
<div>吃饭</div>
<div>睡觉</div>
<div>玩游戏</div>
<div>运动</div>
</div>
</body>
七.案例展示01：展示简历信息
cpp
<body>
<h1>如意猴</h1>
<div>
<h2>基本信息</h2>
<img src="https://picsum.photos/id/104/800/600" alt="" width="200" hight="200">
<span><p>求职意向：C++开发</p></span>
<span><p>联系电话：17735131048</p></span>
<span><p>个人邮箱：17735131048@qq.com</p></span>
<span><p>求职意向：C++开发</p></span>
<span><p><a href="https://gitee.com/">我的Gitee</a></p></span>
<span><p><a href="https://mp.csdn.net/mp_blog/creation/editor/159886549?spm=1000.2115.3001.4503">我的博客</a></p></span>
</div>
<div>
<h2>教育背景</h2>
<ol>
<li>小学</li>
<li>初中</li>
<li>高中</li>
<li>大学</li>
</ol>
</div>
<div>
<h2>专业技能</h2>
<ul>
<li>掌握Java编程</li>
<li>掌握数据结构</li>
<li>掌握前端相关技能：html、css、Javascript</li>
</ul>
</div>
<div>
<h2>个人项目</h2>
<ol>
<h3><li>留言墙</li></h3>
<p>开发时间：2023年4月1日~2023年4月28日</p>
<p>功能介绍</p>
<ul>
<li>支持留言发布</li>
<li>支持匿名留言</li>
</ul>
</ol>
<ol>
<h3><li>学习小助手</li></h3>
<p>开发时间：2023年5月1日~2023年5月28日</p>
<p>功能介绍</p>
<ul>
<li>错词检测</li>
<li>支持同学探讨</li>
</ul>
</ol>
</div>
<div>
<h2>个人评价</h2>
<p>热爱生活，热爱编程</p>
</div>
</body>运行结果展示：
八.案例展示02
cpp
<table>
<thead><h3>请填写简历信息</h3></thead>
<tr>
<td>
<label for="name">姓名</label>
</td>
<td><input type="text" name="" id=""></td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" id="male" checked="checked">
<lable for="male">
<img src="./fmale.png" alt="" width="20" height="20">男
</lable>
<input type="radio" name="sex" id="female">
<label for="female">
<img src="./fmale.png" alt="" width="20" height="20">女
</label>
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<select name="" id="">
<option value="">--请选择年份--</option>
<option value="">--2000--</option>
<option value="">--2001--</option>
<option value="">--2002--</option>
<option value="">--2003--</option>
<option value="">--2004--</option>
</select>
<select name="" id="">
<option value="">--请选择月份--</option>
<option value="">--1--</option>
<option value="">--2001--</option>
<option value="">--2002--</option>
<option value="">--2003--</option>
<option value="">--2004--</option>
</select>
<select name="" id="">
<option value="">--请选择日期--</option>
<option value="">--2000--</option>
<option value="">--2001--</option>
<option value="">--2002--</option>
<option value="">--2003--</option>
<option value="">--2004--</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="">就读学校</label>
</td>
<td>
<input type="text" id="school">
</td>
</tr>
<tr>
<td>应聘岗位</td>
<td>
<input type="checkbox" name="" id="fe">
<label for="fe">前端开发</label>
<input type="checkbox" name="" id="server">
<label for="server">后端开发</label>
<input type="checkbox" name="" id="test">
<label for="test">测试开发</label>
<input type="checkbox" name="" id="yunwei">
<label for="yunwei">运维开发</label>
</td>
</tr>
<tr>
<td>掌握的技能</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td>项目经历</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" id="read">
<label for="read">我已仔细阅读公司的招聘要求</label>
</td>
</tr>
<tr>
<td></td>
<td><a href="#">查看我的状态</a></td>
</tr>
<tr>
<td></td>
<h3><td>应聘者确认信息:</td></h3>
</tr>
<tr>
<td></td>
<td>
<ul>
<li>以上信息有效的</li>
<li>可以尽早去公司实习</li>
<li>可以接受加班</li>
</ul>
</td>
</tr>
</table>
</body>运行结果展示：
以上就是今天的内容，喜欢的朋友们记得一键三连喔~下节我们将讲述CSS有关内容。