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>
<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>
4.3 删除标签 <del></del> 或者 <s></s>
4.4下划线 <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> 原文链接：https://blog.csdn.net/blue2580/article/details/124462480
731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
