面向后端开发者讲解 HTML 基础。内容包括 HTML 定义与文档结构、常用标签（标题、段落、换行、图片、链接、表格、表单控件如 input/select/textarea 以及 div/span 布局）。通过代码示例演示标签用法，修正了路径引用错误，并提供了表单综合练习。旨在帮助读者快速构建静态页面，为后续学习 CSS 和 JavaScript 打下基础。
什么是 HTML？它是超文本标记语言。HTTP 是超文本传输协议，超文本的能力完全超过了文本，图片、链接、音频都可以放上去；标记语言，就是由标签构成的语言。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online
HTML 的所有代码基本都是标签。
<h1>我是一级标题</h1>
这个括号 <h1> 就是标签，我们学习 HTML 大部分就是要学习这些标签。注意我们一般用两个标签来表示开始和结束，结束的标签要加上 /，开始和结束标签之间就是标签内容，开始标签中可能会带有属性。
下面来看看 HTML 的基本结构。
第一行不用管，第二行 html 是整个 html 文件的根标签，之后是 head 和 body，head 和 body 是兄弟关系，html 对于 head 和 body 是父关系。head 中的 title 是标题，body 中写内容。
我们要编写代码，可以使用 VS Code 等编辑器。
只要有这样的 html 文件就行，双击就能运行。
我们可以点击浏览器的开发者工具，就能看到当前界面的代码了。现在使用 VS Code，进入页面，输入问号就可以快速打出这些代码。
好了现在我们正式开始标签的学习。
就是标题从 1-6，序号越大标题越小，直接上代码。
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
</body>
具体效果如下。
在 HTML 中换行符和空格都会失效，如果想另起一个段落，就要使用 p 标签，可以表示一个段落。
<p>第一段，巴拉巴拉~ 巴拉巴拉</p>
<p>第二段，巴拉巴拉</p>
有很多空格和换行看下结果。
是以段落的形式，那么我们想要在第一段换行而不是另起一段呢，我们就需要使用下面的标签了。
这个就是换行了，我们试试。
<p>第一段，巴拉巴拉~<br/>巴拉巴拉</p>
<p>第二段，巴拉巴拉</p>
看看结果。
换行 ok 了。有换行了，那空格呢，我们要用 来代替空格，看看代码。
<p>第一段，巴拉巴拉~<br/>巴拉巴拉</p>
<p>第二段，巴拉 巴拉</p>
看结果。
换行和空格都有了。
我们还可以放上图片，使用 img 标签。
如果放的不是绝对路径而是相对路径，那么图片就要放到 HTML 的同级路径中。
<img src="./image.png">
看看效果。
好大的图，我们还可以把它缩小一点，给它设置属性。
<img src="./image.png" width="100">
这样就变小了。
这个就是一个链接，我们可以跳转到我们设置的链接。
<a href="#">龙图</a>
看看效果。
同时，我们还有把网站、空链接或者是下载 rar 包放上去，会进行对应的操作。
table 标签：表示整个表格tr 标签：表示表格的一行td 标签：表示单元格我们先来随便写，后面我们使用 CSS 的时候再考虑属性那些。
<table>
<tr>
<td>第一行 第一格</td>
<td>第一行 第二格</td>
</tr>
<tr>
<td>第二行 第一格</td>
<td>第二行 第二格</td>
</tr>
</table>
框框和线线啥的都没有，还是那样，等 CSS。
表单标签分成两个部分：
<form action="#" method="get"></form>
这中间就是表单域，action 是我们要访问的 URL，这里写了个 Method，之前咱们学过 HTTP 报文协议，这就是那 4 个方法：get, post, put, delete。
包括各种输入控件，单行文本框、按钮、单选框、复选框。
标签中有 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>
就是把表单域中的所有元素提交到后端。
下拉菜单。
<select>
<option value="1">计算机网络</option>
<option value="2">网络工程</option>
<option value="3" selected>人工智能</option>
</select>
selected 意思是默认选中。
文本域内容，可以描述些东西。
可以写点东西。
我们来做一个小练习：把刚才所有学的都用上。
来实现一个这样的界面。
注意这个查询字符串，我们来看代码。
<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="#">
用户名：<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>
<input type="radio" name="sex" value="4"><label for="sex4">未知</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。
我们就把它当做盒子，div 是大盒子，span 是小盒子。
我们之前学的那些代码其实都挺乱的，我们把代码都放到盒子里，这样改变排版布局呀啥的都很方便。
<div>
<span>小盒子 1</span>
<span>小盒子 2</span>
</div>
<div>
<span>小盒子 3</span>
<span>小盒子 4</span>
</div>
有点像表格。好啦，我们掌握这些 HTML 足够了，后续章节将介绍 CSS 和 JavaScript，之后前端就告一段落啦。