这篇内容算是自己学习时的笔记，整理了一下，希望能帮助到您，有错误也欢迎指正。
HTML是什么
HTML指的是超文本标记语言，是HyperText Markup Language的缩写，它是一种用于创建网页的标准标记语言，它使用标记来描述网页的内容和结构。HTML使用标签来定义文本样式、创建列表、插入图像和视频，以及构建网页的结构。此外，HTML还支持超链接（用于导航到其他网页）、表单（用于用户输入）和多媒体（如音频和视频）等功能。HTML标签可以通过属性来扩展其功能，属性为标签提供了额外的信息，如图像的URL、链接的目标等。HTML是一种可扩展的语言，它的版本随着时间的推移而不断演变和更新。最新的HTML版本是HTML5，它引入了许多新的元素和API，提供了更强大的功能和更好的用户体验。
用什么软件和工具编写
HTML可以使用很多软件和工具来进行编写，比如电脑自带的记事本NotePad，Visual Studio Code，Sublime Text，WebStorm，Dreamweaver等等，你可以直接到软件的官网上去下载对应的软件，按步骤安装即可。
本教程使用VS Code来演示如何编写HTML，如果你选择了VS Code，你可以在扩展商店里下载一个叫Live Sever的插件，方便你在编写的时候预览网页效果。
第一个HTML文件
使用VS Code，在新建一个HTML文件后，你可以输入一个英文输入法中的感叹号，然后回车，就可以得到一个HTML的基本框架。
以下是对该代码的解析，这里在HTML文档中添加注释可以按快捷键Ctrl+'/'，也可以手动输入。
<!--这是一个注释--><!DOCTYPE html>
<!--文档类型声明，声明为HTML5文档-->
<html lang="en">
<!-- html是HTML文档的根元素，lang属性指定了文档的语言为英文(en) -->
<head>
<!-- head是HTML文档的头部分。 -->
<meta charset="UTF-8">
<!-- 指定了文档所用的字符编码，这里为UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置文档的视口，指定了文档在设备上显示的宽度(width=device-width)和初始缩放级别(initial-scale) -->
<title>Document</title>
<!-- 设置了文档的标题，将显示在浏览器的标题栏或标签页上 -->
</head>
<body>
<!-- body是HTML文档的主体部分，包含实际显示在网页页面上的内容 -->
</body>
</html>标题
在HTML中，标题是通过<h1>~<h6>进行定义的。
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>运行效果如图所示，通过观察可以发现，标题从<h1>到<h6>字体逐渐变小并且加粗，同时一个标题自占一行。
效果：
<h1>~<h6>标题标签都是成对存在，这样的标签叫作双标签，前边遇见的<html></html>，<head></head>和<body></body>也都是双标签。我们管实际内容之前的标签叫作起始标签，管之后的标签叫作结束标签。而上边的<meta>标签就是一个单标签，单标签通常不包含其他内容，仅用于设置元信息或插入一些独立的标记。
段落
在HTML中，段落通过<p>标签来定义的。
这里我们可以比较一下直接在<body>标签内写文本内容和在<p>标签内写文本内容的区别。
<body>
HTML指的是超文本标记语言，是HyperText Markup Language的缩写，它是一种用于创建网页的标准标记语言。
这是一个段落。
<p>HTML指的是超文本标记语言，是HyperText Markup Language的缩写，它是一种用于创建网页的标准标记语言。</p>
<p>这是一个段落</p>
</body>
运行发现，直接在<body>内写的文本内容不会分段，仔细观察还可以发现两段文字之间有一个空格，这是因为网页并不认识多个空格，只认识一个空格。而在不同的<p>标签内写的内容则会分段显示。
效果：
换行与分隔线
上面说到直接在<body>内写文本内容不会分段，但我们可以通过在文本后边增加换行标签<br>来实现这种效果。如下：
HTML指的是超文本标记语言，是HyperText Markup Language的缩写，它是一种用于创建网页的标准标记语言。
<br>
这是一个段落。效果：
而分隔线标签<hr>可以用来在HTML界面中创造水平线，以分隔内容。
<h1>这是一个标题</h1>
<hr>
<p>这是一个段落</p>
<hr>
<p>这是一个段落</p>效果：
文本格式化标签
| 标签 | 描述 |
| <b>/<strong> | 文字加粗。 |
| <u>/<ins> | 添加下划线。 |
| <i>/<em> | 文字倾斜。 |
| <s>/<del> | 添加删除线。 |
可以看到上表中的每种描述都有两个标签与之对应，我们可以通过运行代码看看在视觉上是否有不同。
<b>加粗</b>
<strong>加粗</strong>
<u>下划线</u>
<ins>下划线</ins>
<i>倾斜</i>
<em>倾斜</em>
<s>删除线</s>
<del>删除线</del>效果：
我们可以发现在视觉上并没有不同。但是<b>,<u>,<i>,<s>都只是在视觉上存在效果，没有太强的语义含义，而<strong>用于表示文本的强调或重要性，<ins>表示插入的文本即文档中新添加或插入的内容，<em>表示强调的文本，可以是关键词、短语或句子，<del>表示文本被删除不再有效，这种区别是给开发人员来看的。
图片、音频和视频标签
首先我们在代码文件夹下要有图片、音频和视频文件，如下。
图片标签<img>
src是图片的路径；alt是替换文本，即当图片加载失败时显示的文本；width和height是图片的宽和高，只要修改其中一个值，另一个值就会等比例缩放，这样的好处是保证图片的形状不变；title是当鼠标悬停在图片上时显示的文字。
<body>
<img src="Cat.png" alt="猫咪">
<img src="Cats.png" alt="猫咪">
<img src="Cat.png" alt="猫咪" width="100" title="喵">
</body>效果：
音频标签<audio>
src是音频的路径；controls是显示播放的控件；autoplay是自动播放，但浏览器一般都不支持该功能，毕竟一打开网页就播放音频很容易让人尴尬或者把人吓一跳；loop是循环播放，即在音频播放完之后从头开始重新播放。
<audio src="music.mp3" controls autoplay loop>音乐</audio>效果 ：
视频标签<video>
src、controls、autoplay和loop和音频标签均相同，说下muted，在谷歌浏览器中支持自动播放，但是必须配合muted静音播放。可以找一个有声视频在谷歌浏览器中试试，我这个视频本身就是无声的，看不出效果。
<video src="cat.mp4" controls autoplay muted loop></video> 效果：
绝对路径
绝对路径就是完整的路径，包括完整的磁盘路径和网页地址。
使用<a>标签来设置超文本链接，<a>标签之间的文字将会显示为蓝色字体并带有下划线，访问之后变成紫色。href属性用来描述链接地址；target属性用于指定链接在何处打开，_blank即为在新窗口或标签页打开链接。
<img src="file:///D:/HTML/images/cat.gif" alt="猫">
<a href="https://www.csdn.net" target="_blank">CSDN</a> 效果：
| target属性值 | 作用效果 |
| _self | 默认值，在当前窗口或标签页中打开链接。 |
| _blank | 在新窗口或标签页中打开链接。 |
| _parent | 在父级框架中打开链接。 |
| _top | 在顶级框架中打开链接，取消所有嵌套框架。 |
相对路径
相对路径是指相对于当前文档的路径，包括同级、上级和下级，在介绍图片音频视频标签时举的例子都是同级文件，这里就不再赘述。
下级文件的相对路径
这里我在images上一级文件夹中新建了一个示例文件，此时cat.gif就是示例文件的下级，那么如何在示例文件中插入cat.gif呢？
首先要找到目标文件相对于当前文档的位置，打开images文件夹，然后我们就找到了目标的cat.gif，同理，路径即为images/cat.gif。
<img src="images/cat.gif" alt="猫">上级文件的相对路径
如图，想要在相对路径.html插入示例.html的相对路径链接，首先我们要回到上级文件夹code，因为code与示例.html是同级的，而要回到上一级，即在路径前加 ../ 。
<a href="../示例.html" target="_blank">上级文件</a>
<!--回到上两级文件在前边加../../-->列表
无序列表
<ul>标签定义无序列表，<li>标签定义列表项。示例如下：
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
<li>火龙果</li>
</ul>效果：
有序列表
<ol>标签定义有序列表，<li>标签定义列表项。示例如下：
<ol>
<li>薯片</li>
<li>巧克力</li>
<li>酸奶</li>
<li>棒棒糖</li>
</ol>效果：
自定义列表
<dl>标签定义 自定义列表，<dt>标签定义 自定义列表项目，<dd>定义 列表项。
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
</dl>效果：
表格
| 标签 | 描述 |
| <table> | 定义表格 |
| <thead> | 定义表格的页眉、表头 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的脚注、页脚 |
| <tr> | 定义表格的行 |
| <th> | 定义表头单元格 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
这里举一个学生信息表的例子来说明。
border属性是表格的边框，如果不定义边框属性，表格将不会显示边框，同时可以用width属性和height属性来改变表格的宽高。
rowspan属性可以跨行合并单元格，跨几行，rowspan的值就是几；colspan属性可以跨列合并单元格，道理同rowspan。
<table border="1" width="150" height="100">
<caption><strong>学生信息表</strong></caption>
<thead>
<tr>
<th>班级</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">三年二班</td>
<td>张三</td>
<td>99</td>
</tr>
<tr>
<td>李四</td>
<td>90</td>
</tr>
<tr>
<td>王五</td>
<td>95</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>评语</td>
<td colspan="2">都挺好</td>
</tr>
</tfoot>
</table>效果：
表单
HTML 表单用于收集用户的输入信息，表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
使用<form>标签来创造表单，action属性定义了表单数据提交的URL，表单的输入字段、单选框、多选框、按钮、下拉表单等都在<form>标签内。
<form action="">
</form>输入input
文本框
文本框的type属性值是text，name属性用于标识表单字段，id属性用于关联<label>元素，当id和for的值相同时，点击<label>标签中的文字的时候输入框就会出现文本光标。
<label for="username">文本框</label>
<input type="text" name="username" id="username">效果：
密码框
密码框的type属性值是password，name和id的用法和文本框一样，placeholder用于在框内显示提示信息，
<label for="password">密码框</label>
<input type="password" name="password" id="password" placeholder="请输入密码">效果：
输入的密码会自动变成黑点。
单选框
radio用于单选一，相同的name属性值的选项只能选中一个，checked是在打开网页时默认选择这一项，在多选框中同样适用。
<input type="radio" name="gender" id="male" checked>
<label for="male">男</label>
<input type="radio" name="gender" id="female">
<label for="female">女</label>效果：
多选框
多选框的type属性值是checkbox，多选框的文字前是方框，而单选框是圆圈，勾选之后方框上会出现一个对勾。
爱好
<input type="checkbox" name="hobby" id="stayup">
<label for="stayup">熬夜</label>
<input type="checkbox" name="hobby" id="programming">
<label for="programming">编程</label>
<input type="checkbox" name="hobby" id="bald">
<label for="bald">秃头</label>效果：
上传文件
<input type="file">
点击选择文件之后就会打开文件资源管理器可以选择文件，而有时候需要上传多个文件，此时会用到multiple。
<input type="file" multiple>
提交、重置、自定义按钮
submit是提交按钮，用户点击后，表单的内容会被传送到服务器。reset是重置按钮，可以把表单内的内容重置回初始状态。button是普通按钮，后续可以通过JS定义其功能。可以通过value的值改变按钮上显示的文字。
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮">效果：
按钮button
<button>标签定义了按钮，和<input>里的type类型一样，button是普通按钮，reset是重置按钮，submit是提交按钮。
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>效果：
下拉菜单
<select>标签定义了下拉选项列表，<option>标签定义了下拉选型列表中的选项。可以在option标签内增加selected属性来预选这一项。
<select name="city">
<option>北京</option>
<option selected>上海</option>
<option>广州</option>
<option>深圳</option>
</select> 效果：
文本域
<textarea>标签定义了文本域，cols是列数，rows是行数。
<textarea cols="30" rows="10"></textarea>效果：
语义标签
语义=意义，使用语义标签可以用更具结构和语义的方式来描述网页的内容，使网页的结构更加清晰明了。
无语义的语义标签
<div>和<span>是使用频次很高的语义标签。
这是语义标签
<div>这是div标签</div>
<span>这是span标签</span>
<span>这是span标签</span>效果：
观察网页效果可以发现<div>标签和<span>标签的视觉效果和普通网页并没有区别，同时也可以发现<div>标签会换行，而<span>标签不会换行。
有语义的语义标签
这里是常用的几个具有语义的语义标签，借用菜鸟教程-HTML5 语义元素的图来说明一下这几个标签的位置关系。
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>
字符实体
HTML 中的预留字符必须被替换为字符实体，如不能使用大于号(>)和小于号(<)，会被浏览器误认为是标签。一些在键盘上找不到的字符也可以使用字符实体来替换。
字符实体有很多，详细可以看HTML ISO-8859-1 参考手册，这里只说常用的字符实体空格 。前边说过网页只认识一个空格不认识多个，那么当要输入多个空格时就需要用到 .
<body>
好好学习 天天向上
</body>
本篇内容到此结束，希望对您有所帮助。
