一、基础
1、写HTML代码的快捷生成方式：在VScode中，英文的 ！然后回车即可出现如下画面
圈出的那两行不重要，可以删除也可保留。
2、注释标签
<!-- 注释，防止乱码-->
<meta charset="UTF-8"> 快捷键 ctrl + /（取消注释也是）
二、常用标签
1、标题标签 <h1></h1>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 注释，防止乱码-->
<meta charset="UTF-8">
<title>第一个HTML</title>
</head>
<body>
你好，html
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
2、段落便签 <p></p>
我们想要的分段效果：
未使用p标签：
使用p标签：
<h1>入党从自身做起</h1>
我们不仅仅要做到思想上入党，更要在实际行动中有所体现。所以，在今后的生活工作中，我要努力做到以下几点：
<p></p>
1、不断加强自我的政治理论学习，提高自我的政治觉悟、思想水平，进取与周围党员就党的理论进行讨论、学习。
<p></p>
2、经常主动向党组织汇报自我的思想、学习、工作和有关的问题，主动和入党联系人进行交流，使自我更快的提高，也使党组织时刻了解自我的发展情景。
<p></p>
3、在平时的工作中勤奋努力，进取提高，不断提高业务水平，努力钻研专业知识。
3、 换行符 <br>
<h1>入党从自身做起</h1>
我们不仅仅要做到思想上入党，更要在实际行动中有所体现。所以，在今后的生活工作中，我要努力做到以下几点：
<p></p>
1、不断加强自我的政治理论学习，提高自我的政治觉悟、思想水平，进取与周围党员就党的理论进行讨论、学习。
<p></p>
2、经常主动向党组织汇报自我的思想、学习、工作和有关的问题，主动和入党联系人进行交流，使自我更快的提高，也使党组织时刻了解自我的发展情景。
<br>
3、在平时的工作中勤奋努力，进取提高，不断提高业务水平，努力钻研专业知识。
段落和换行的对比：红色的是使用段落符的效果，蓝色的使用换行符的效果
4、文字格式符
4.1 加粗 <b></b> 或者 <strong></strong>
4.2 倾斜 <em></em> 或者 <i></i>
我们不仅仅要做到<em><b>思想上入党</b></em>，更要在<i><strong>实际行动中有所体现。</strong></i>
4.3 删除标签 <del></del> 或者 <s></s>
原价：<del>150</del>
<br>
现价： 99 
4.4下划线 <u></u>
<u>很多事情没有来日方长</u>我现在就要快乐！ 
5、图片标签
5.1 <img src="路径.jpg">
当我使用相对路径，以html所在位置为基准，找到图片所在位置
(1)当图片和 .html 文件都在桌面时
<img src="blue.jpg">(2）当图片和 .html 文件在同一磁盘不同文件夹内,就需跳出一级目录，使用 ../
如需跳出两级目录，就是 ../../
<img src="/../Html/blue.jpg">（3）当图片和 .html 文件在同一磁盘，我的 .html文件 在D盘的根目录下，图片在D盘的Html文件夹内
在使用img 标签时,发现按照src语法引用本地图片地址时,图片加载失败，代码如下
<img src="Html/blue.jpg">使用谷歌浏览器运行之后，出现如下情况
当我尝试多次，最终如下代码可以正常显示（谷歌浏览器），这次使用的是绝对路径
<img src="D:/Html/blue.jpg">使用绝对路径的好处：无论html移动到哪里，图片的路径是固定不变的，都可以访问到
5.2 描述图片信息
（1）当图片显示不出来的时候，对图片加以描述 alt="描述"
当图片正常显示的时候，那句描述的话语不会出现
<img src="Html/blue.jpg" alt="看月亮还是看你">
（2）当鼠标移动到图片时，会显示相关信息 title= " 信息"
5.3 设置宽和高
width设置宽，height设置高 ，可使用px 或百分比
（1）使用px
<img src="D:/Html/blue.jpg" alt="看月亮还是看你" title="蓝色" width="350px" height="480">
(2)利用百分比
<img src="D:/Html/blue.jpg" alt="看月亮还是看你" title="蓝色" width="48%" height="59%"> 
设置百分比的好处：图片不会压缩或拉长，会根据当前电脑的展示页面按照设置的百分比显示图片。
5.4 设置边框 border=" "
<img src="D:/../Html/blue.jpg" alt="看月亮还是看你" title="蓝色" width="48%" height="59%" border="3px" >
6、超链接标签 <a href="地址"></a>
6.1外部链接
<a href="https://baike.baidu.com/item/%E5%AE%8C%E5%85%A8%E4%BA%8C%E5%8F%89%E6%A0%91/7773232">完全二叉树</a> 和满二叉树的比较 
点击"完全二叉树"直接跳转到百度百科的完全二叉树，但是默认打开的是当前的页面，如果想要重新打开一个页面，就是用 target="_blank"
<a href="https://baike.baidu.com/item/%E5%AE%8C%E5%85%A8%E4%BA%8C%E5%8F%89%E6%A0%91/7773232" target="_blank">完全二叉树</a> 和满二叉树的比较
6.2锚点链接
可以快速定位到⻚⾯中的某个位置.
<a href="#111">第⼀章</a>
<a href="#222">第⼆章</a>
<a href="#333">第三章</a>
<p id="111">
第⼀章剧情介绍 <br>
第⼀章剧情介绍 <br>
...
</p>
<p id="222">
第⼆章剧情介绍 <br>
第⼆章剧情介绍 <br>
...
</p>
<p id="333">
第三章剧情介绍 <br>
第三章剧情介绍 <br>
...
</p>
点击第一行的第一章可以直接跳转到如下图
以谷歌浏览器为例，也可直接改后缀地址为222，直接会跳到第二章。
7、表格标签
<table></table> 表格
<tr></tr> 行
<th></th> 列（居中加粗显示）
<td><td> 列（居左显示）
border="数字" 设置表格边框
height="数字px" 设置表格高度
width="数字px" 设置表格宽度
<table border="1" height="500px" width="500px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张泽</td>
<td>男</td>
<td>21</td>
</tr>
<tr>
<td>宋依</td>
<td>女</td>
<td>22</td>
</tr>
</table> 
合并单元格（使用不多，了解即可）
跨⾏合并: rowspan="n"
跨列合并: colspan="n"
8、列表标签
8.1 ⽆序列表 ul li 和有序列表 ol li
<h2>无序列表</h2>
<ul>
<li>哆啦A梦</li>
<li>海绵宝宝</li>
<li>猫和老鼠</li>
<li>大耳朵图图</li>
</ul>
<h2>有序列表</h2>
<ol>
<li>小学</li>
<li>初中</li>
<li>高中</li>
<li>大学</li>
</ol>
8.2 ⾃定义列表
dl (总标签) dt (⼩标题) dd (围绕标题来说明)
上⾯有个⼩标题, 下⾯有⼏个 ，围绕着标题来展开的
<h3>⾃定义列表</h3>
<dl>
<dt>我所学的课程</dt>
<dd>计算机网络</dd>
<dd>操作系统</dd>
<dd>JAVA</dd>
</dl> 
