1.1 HTML 基础
什么是 HTML？它是超文本标记语言。HTTP 是超文本传输协议，超文本的能力完全超过了文本，图片、链接、音频都可以放上去；标记语言就是由标签构成的语言。
HTML 的所有代码基本都是标签：
<h1>我是一级标题</h1>
这个括号 <h1> 就是标签。我们学习 HTML 大部分就是要学习这些标签。注意我们一般用两个标签来表示开始和结束，结束的标签要加上 /，开始和结束标签之间就是标签内容。开始标签中可能会带有属性。
下面来看看 HTML 的基本结构：
第一行不用管，第二行 html 是整个 html 文件的根标签，之后是 head 和 body。head 和 body 是兄弟关系，html 对于 head 和 body 是父节点关系。head 中的 title 是标题，body 中写内容。
我们要编写代码，可以使用 VS Code，也可以找别的软件。只要有这样的 html 文件就行，双击就能运行。
我们可以点击浏览器的开发者工具，就能看到当前界面的代码了。我们现在开始使用 VS Code，进入页面，输入问号就可以快速打出这些代码。
好了现在我们正式开始标签的学习。
1.2 HTML 标签
1）标题标签 h1-h6
就是标题从 1-6，序号越大标题越小，直接上代码：
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
</body>
具体效果就是这样式的了。
2）段落标签 p
在 HTML 中换行符和空格都会失效，如果想另起一个段落，就要使用 p 标签，可以表示一个段落：
<p>第一段，巴拉巴拉~ 巴拉巴拉</p>
<p>第二段，巴拉巴拉</p>
有很多空格和换行看下结果，是以段落的形式。那么我们想要在第一段换行而不是另起一段呢，我们就需要使用下面的标签了。
3）换行标签 br
这个就是换行了，我们试试：
<p>第一段，巴拉巴拉~<br/>巴拉巴拉</p>
<p>第二段，巴拉巴拉</p>
看看结果，换行 ok 了。
有换行了，那空格呢，我们要用 来代替空格，看看代码：
<p>第一段，巴拉巴拉~<br/>巴拉巴拉</p>
<p>第二段，巴拉 巴拉</p>
看结果：换行和空格都有了。
4）图片标签 img
我们还可以放上图片，使用 img 标签：
如果放的不是绝对路径而是相对路径，那么图片就要放到 HTML 的同级路径中：
<img src="./images/demo.png" alt="示例图片">
看看效果。好大的图，我们还可以把它缩小一点，给它设置属性：
<img src="./images/demo.png" width="200" height="200">
这样就变小了。
5）超链接
这个就是一个链接，我们可以跳转到我们设置的链接：
<a href="./demo.html">龙图</a>
看看效果。点击之后会跳转。同时，我们还可以把网站、空链接或者是下载 rar 包放上去，会进行对应的操作。
6）表格标签
table标签：表示整个表格tr标签：表示表格的一行td标签：表示单元格
我们先来随便写，后面我们使用 CSS 的时候再考虑属性那些：
<table>
<tr>
<td>第一行 第一格</td>
<td>第一行 第二格</td>
</tr>
<tr>
<td>第二行 第一格</td>
<td>第二行 第二格</td>
</tr>
</table>
框框和线线啥的都没有，还是那样，等 CSS。
7）form 标签
表单标签分成两个部分：
- 表单域：包含表单元素的区域，即 form 头标签和尾标签中间的部分。
- 表单控件：输入框、提交按钮等，重点是 input。
<form action="URL" method="get"></form>
这中间就是表单域，action 是我们要访问的 URL。这里写了个 Method，之前咱们不是学过 HTTP 请求方法吗，这就是那 4 个方法：GET, POST, PUT, DELETE。
8）表单 input 标签
包括各种输入控件：单行文本框、按钮、单选框、复选框。
标签中有 Type（必须有），取值有：text, password, button, file, image 等等。
标签中还有 name，name 给 input 起了个名字，并且表单提交的时候，查询字符串的键值对中的 key 就是这个 name，我们从后端传来的值就是 value。
标签中还有 value，就是 input 的默认值。
下面介绍常用的 input：
- 文本框
<input type="text">
可以输入文本。
- 密码框
<input type="password">
这样式的，还能点击右边那个小眼睛看自己输入的密码。
- 单选框
<input type="radio" name="sex">男<br/>
<input type="radio" name="sex">女<br/>
看效果。这里的按钮只能点击一个，点不了两个，可以自己试试。并且要注意，使用单选框的时候要让单选框具有相同的 name 属性。
- 复选框
爱好：<input type="checkbox">吃饭 <input type="checkbox">睡觉
看效果：都能勾选上。
- 普通按钮
<input type="button" value="点我">
我们现在点击没有反应，等下两期我们学 JS，我们就能有效果了。
- 提交按钮
<form>
<input type="submit" value="提交">
</form>
就是把表单域中的所有元素提交到后端。
9）表单 select 标签
下拉菜单：
<select>
<option value="1">计算机网络</option>
<option value="2">网络工程</option>
<option value="3" selected>人工智能</option>
</select>
selected 意思是默认选中。
10）表单 textarea 标签
文本域内容，可以描述些东西。
可以写点东西。
表单练习
我们来做一个小练习：把刚才所有学的都用上，来实现一个这样的界面。
注意这个查询字符串，我们来看代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单练习</title>
</head>
<body>
<form action="./Demo7.html">
用户名：<input type="text" name="username"><br>
密码：<input type="password" name="password"><br>
性别：
<input type="radio" name="sex" value="1"><label for="sex1">男</label>
<input type="radio" name="sex" value="2"><label for="sex2">女</label>
<input type="radio" name="sex" value="3"><label for="sex3">其他</label>
<br>
兴趣：
<input type="checkbox" name="hobby" value="1"><label for="hobby1">睡觉</label>
<input type="checkbox" name="hobby" value="2"><label for="hobby2">吃饭</label>
<input type="checkbox" name="hobby" value="3"><label for="hobby3">编程</label>
<br>
专业：
<select name="chose">
<option value="1">人工智能</option>
<option value="2">计算机网络</option>
<option value="3">计算机科学与技术</option>
<option value="4" selected>网络工程</option>
</select><br>
简介： <textarea></textarea><br>
<input type="submit" value="提交">
</form>
</body>
</html>
这里多了个 label，这个是啥意思呢？就是我们之前点击单选框，点击的是哪个圆圈，加上 label 之后，就直接点击那个汉字就能选中了。都加 value 是为了提交给后端时有对应的选项，比如选性别男，就是 value=1。
11）无语义 div span
我们就把它当做盒子，div 是大盒子，span 是小盒子。我们之前学的那些代码其实都挺乱的，我们把代码都放到盒子里，这样改变排版布局呀啥的都很方便：
<div>
<span>小盒子 1</span>
<span>小盒子 2</span>
</div>
<div>
<span>小盒子 3</span>
<span>小盒子 4</span>
</div>
有点像表格。好啦，我们掌握这些 HTML 足够了。
