1.HTML区块：
div标签和span标签都是区块标签，html是超文本标记语言，通过标签来实现前端，而主要对前端的实现还是通过一个个区块。首先先了解一下区块是什么。
编写一个简单的html前端网页并打开这个浏览器网页。
【小插曲：本人使用的编辑软件是VSCode，如果你也用的是这个软件，给你推荐一个好东西。打开VSCode，并进入拓展插件，在拓展中找到Live Server并下载这个插件，下载好后右键写好的前端代码，点击Open with Live Server这样就可以打开这个页面了。】
图1.1 插件下载
图1.2 打开浏览器页面
ok，我编写好了一个前端页面，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML区块</title>
</head>
<body>
<div class="nav">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
<a href="#">链接5</a>
</div>
<div class="content">
<h1>文章标题</h1>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
<p>文章内容</p>
</div>
<span>这是第一个span标签</span>
<span>这是第二个span标签</span>
<span>这是第三个span标签</span>
<span>这是第四个span标签</span>
<hr>
<span>链接点击这里<a href="#">链接</a></span>
</body>
</html>运行该代码，出现一个前端页面，右键页面，点击检查，按ctrl+shift+c，选择元素，这个时候可以往页面去触碰查看，可以查看到一些信息。
图1.3 div.nav
在图1.3当中可以看到有一个蓝色的框，标注着div.nav，这个就是区块。可以在代码中找到对应的内容，在一个<div>标签中有五个超链接，并且class="nav"。
同理，我们去找四个span标签。
图1.4 span
再我们触碰四个span标签后发现了四个span标签是挨着的，我们也可以在开发者工具中去找对应的代码然后他会显示前端部分。
图1.5 开发者工具
了解完区块之后来说明一下两个标签的区别。
1.<div>标签：
div标签是块元素，块元素在前端显示的时候从新的一行开始，占据整行的宽度，在块元素中可以包含块元素和行内元素。所以我们可以在<div>中包含<div>和<span>。
2.<span>标签：
span标签是行内元素，不会独占一行，只占据所需的空间大小，行内元素不能包含块元素，可以包含行内元素。所以我们可以在<span>中包含<span>，但是不能包含<div>。
这就是为什么span元素之间是挨着的，因为span元素是行内元素，其只占据所需要的大小空间。
2.HTML表单：
1.form标签：
还是一样，先编写一个简单的页面，在娓娓道来：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 表单</title>
</head>
<body>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" placeholder="请输入用户名">
<br><br>
<label for="pwd">密码:</label>
<input type="password" id="pwd" placeholder="请输入密码">
<br><br>
<label>性别:</label>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
<br><br>
<label>爱好:</label>
<input type="checkbox" name="hobby">唱歌
<input type="checkbox" name="hobby">跳舞
<input type="checkbox" name="hobby">RAP
<input type="checkbox" name="hobby">篮球
<br><br>
<input type="submit" value="上传">
</form>
<form action="#"></form>
</body>
</html>运行该代码，出现一个前端页面：
图2.1 表单页面
首先代码中有一个<form>标签，在用户名这一行的代码中有一个<label>，有一个<input>。
label中的for会去找跟他同名的id或者name，用来跟他绑定。<input>就是一个输入框，用户可以在输入框中输入数据，<input>中的属性type表示类型，比如text表示文本，用户可以在输入框中输入文本，如果是password，就是密码，用户输入的数据会以"." 的形式保密。而placeholder则是如果没有数据，输入框会显示什么。比如图2.1当中用户没有输入数据的时候，会出现"请输入用户名"，和代码对应上。
form还有一个action属性，这个属性可以实现方法，后续会提到。
2.input标签：
此前提到input的属性type除了text还有password，除了这两个，还有单选框radio，复选框checkbox。这个也很好理解。
radio：当input类型为radio时，其会将该input的name所指定的数据绑定到一起，此时显示的时候会出现圆形单选框，用户只能在这些数据之中去选择一个选中。
checkbox：当input类型为checkbox时，其会将该input的name所指定的数据绑定到一起，此时显示的时候会出现方形复选框，用户可以在这些数据中去选择多个数据。
还有一个类型，submit。
<input type="submit" value="上传">
submit是一个提交按钮，之后可以学到绑定方法去触发事件，而value就是按钮上显示的数据而已。