![在这里插入图片描述](https://img-blog.csdnimg.cn/c43e618a700a4236aebf1a184414d58e.jpeg) @[TOC](文章目录) --- # 前言 `提示：这里可以添加本文要记录的大概内容：` 本次主要讲解html文本标签部分，常用的标签 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d1646411b81344bfae590e0fda52db96.png) 主要以实操的形式为大家讲解。 --- # 一、古诗一首两相思【宋】李禺枯眼望遥山隔水，往来曾见几心知？壶空怕酌一杯酒，笔下难成和韵诗。途路阻人离别久，讯音无雁寄回迟。孤灯夜守长寥寂，夫忆妻兮父忆儿。 ## 当我们把带格式的古诗放进body里面 ![在这里插入图片描述](https://img-blog.csdnimg.cn/113a017143354bbbb1656d883824f905.png) 这个结果就十分差强人意。我们的理想效果： ![在这里插入图片描述](https://img-blog.csdnimg.cn/f02797806029497ba7aeef2c18f87c52.png) ## 1.换行标签咱们一步一步来，我们先达到换行的效果,我们只需要在需要换行的地方加上
```css 两相思
【宋】李禺
枯眼望遥山隔水，往来曾见几心知？
壶空怕酌一杯酒，笔下难成和韵诗。
途路阻人离别久，讯音无雁寄回迟。
孤灯夜守长寥寂，夫忆妻兮父忆儿。
``` 结果如下： ![在这里插入图片描述](https://img-blog.csdnimg.cn/997eb753359748e79a49436ceb5e7b55.png) 这样我们就实现了换行的效果，一个br标签就是一次换行，如果我们在第一句诗后多加一个br标签，相当于多换了一行。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/5dfaa57dbaee4dacbd7b3b17ce66e3d9.png) ## 2.h标签标题标签是成对存在的一共有六种分别是 ```css

``` 标题标签顾名思义，就是让里面的内容达到标题的效果，独占一行&加粗加大显示，它的行间距要比br要大。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2ea7e8da13a0426585f636506dae865b.png) ## 3.p标签 p标签依旧顾名思义，就是让里面的内容达到段落的效果，具有换行的效果默认占据一行，段落之间区隔要大于正文间距。语义就是段落。 ```css

``` ## 4.居中标签是具有属性的，它的书写方式是key，键值对。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/4ddeb06ce2dd4629aa0cf094ef6b7f73.png) align="center"，我们需要把它写到标签里以段落标签为例： ```css

``` ## 5.文本格式化标签标签 ```css 加粗斜体下划线删除 ``` ![在这里插入图片描述](https://img-blog.csdnimg.cn/732182ee47ba4ea7b3d2269474eb17f7.png) ## 6.特殊字符 ![在这里插入图片描述](https://img-blog.csdnimg.cn/a1805915211244389c2bd36826d8146f.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/a8fd76233fd5469781f795d904037a77.png) ## 7.pre标签它可以保留空格和换行，并把字体变成等宽字体。 ```css

``` ## 我们现在就可以达到我们的理想效果了 ```css

两相思

【宋】李禺

枯眼望遥山隔水，往来曾见几心知？
壶空怕酌一杯酒，笔下难成和韵诗。
途路阻人离别久，讯音无雁寄回迟。
孤灯夜守长寥寂，夫忆妻兮父忆儿。

两相思 
	
【宋】李禺
	
枯眼望遥山隔水，往来曾见几心知？
	
壶空怕酌一杯酒，笔下难成和韵诗。
	
途路阻人离别久，讯音无雁寄回迟。
	
孤灯夜守长寥寂，夫忆妻兮父忆儿。

``` ![在这里插入图片描述](https://img-blog.csdnimg.cn/85ac849686304f70babc33c06c15353a.png) 如果我们想要一条贯穿的直线，就像我们古诗课本中的。

可以达到我们的要求。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/48df858c357449e48283f8318615461f.png) # 二.图像标签引入图像所用标签 ```css ``` ## 2.1图像标签的属性 ```css 属性采用键值对格式：key = “value” src: 要显示图片的路径. alt: 图片没有加载成功时的提示. title: 鼠标悬浮时的提示信息. width: 图片的宽，也可以设置为浏览器宽度的百分比 height:图片的高 (宽高两个属性只用一个会自动等比缩放.) ``` 如果在宽或高填写一个值（数字或百分比)，图片会按比例放大或者缩小。这里数字的单位是px，百分比指的是浏览器的宽度和高度的占比。如果我们同时指定宽和高，图片很很可能显示不完全（失真）。 ## 特别强调一下路径相对路径以引用文件所在位置为参考基础，而建立出的目录路径同一级路径：位于HTML文件同一级下一级路径： / 上一级路径： ../ ```css 如果按照我们的习惯，在html文件所在目录中，有images文件夹，里面放有logo.png，我们要引入的话

如果在html同一目录下，有一logo2.png文件，我们引入

``` 绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始路径或者网络上的绝对路径地址 ```css

``` ## 2.2可参考的CC0资源（图片素材）网站 ```css https://www.pexels.com/zh-cn https://www.freeimages.com/cn https://pixabay.com/zh/ https://unsplash.com/ https://www.splitshire.com/ https://stocksnap.io/ ``` ![在这里插入图片描述](https://img-blog.csdnimg.cn/e9bd6bdb88bd49849b63e8958754ffb8.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/7be02c89e7404e059c9e13bfe4bc7b79.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/f281376d939e4583886428e79b8dc74d.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/f4c9565949444c35a18103a761c5df23.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/6fa334f267104b2c973adcea61d6d8cb.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/c65dcac54a6a4375992ca6dd119bd118.png) # 三.HTML特殊字符符号大全大家可以直接参考这篇博客https://blog.csdn.net/x650007/article/details/120099777 ![在这里插入图片描述](https://img-blog.csdnimg.cn/1a19b37335eb41289783b0a74d973da2.png) 而且都是可复制的，作者有心了。 # 总结还是那这首古诗 ```css 两相思

两相思

【宋】李禺

思妻诗【顺读】
枯眼望遥山隔水，往来曾见几心知？
壶空怕酌一杯酒，笔下难成和韵诗。
途路阻人离别久，讯音无雁寄回迟。
孤灯夜守长寥寂，夫忆妻兮父忆儿。

思夫诗 【倒读】

儿忆父兮妻忆夫，寂寥长守夜灯孤。
			
迟回寄雁无音讯，久别离人阻路途。
			
诗韵和成难下笔，酒杯一酌怕空虚。
			
知心几见曾来往，水隔山遥望眼枯。

``` ![在这里插入图片描述](https://img-blog.csdnimg.cn/12b52185278d496289e1fbf9ca14797b.png)