html的格式化标签和图片(img)标签

浅浅的花香味﹌ 2024-05-06 21:21 82阅读 0赞

![previewfile\_1877396207][previewfile_1877396207]

## **格式化标签** ##

*  加粗: `strong`标签和`b`标签
 *  倾斜: `em`标签和`i`标签
 *  删除线: `del`标签和`s`标签
 *  下划线: `ins`标签和`u`标签

stong 加粗
 	 b 加粗
 
 倾斜
 倾斜
 
 <del>删除线</del>
 <s>删除线</s>
 
 <ins>下划线</ins>
 下划线

![image-20240212184339343][]

**运行效果：**  
![image-20240212191349438][]

## **图片标签：img标签** ##

> img标签必须带有src属性，来表示图片的路径  
> 图片路径有：绝对路径和相对路径  
> 绝对路径：图片的文件地址、网络上的图片资源相对路径  
> 相对路径：./xxx.png./img/xxx.png…/xxx.png

上面这行代码的作用是把fly.jpg这个图片文件放到和html中的同级目录中.

![fly][]

**示例代码：**

![image-20240212231350752][]

**运行效果：**![image-20240212231538759][]

## **img 标签的其他属性** ##

1.  `alt`:替换文本。当图片路径写错不能正确显示的时，显示出的一个替换的文案.

> `alt`后面的文案，只有当图片加载出错的时候才会展示，如果图片加载成功，这个文案就不会展示。

1.  `title`:提示文本。鼠标放到图片上，就会有提示.

![image-20240212233319977][]

![image-20240212233943623][]

1.  `width/height`:控制宽度高度。高度和宽度一般改一个就行，另外一个会等比例缩放，否则就会图片失衡.
2.  `border`:边框,参数是宽度的像素，但是一般使用CSS来设定.

**示例代码：**

![image-20240213123554941][]

**运行效果：**

![image-20240213123053866][]

[previewfile_1877396207]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/550249ab7a99438ea63f4e884b83ab51.jpeg
[image-20240212184339343]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/8d98109867c44dda982c2d942c1b34d8.png
[image-20240212191349438]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/7bd02dd125164db3b172f59fa9a4847d.png
[fly]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/6c18a0996bf94b0bb72db51d4d9b9db4.png
[image-20240212231350752]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/1a768246031c449b91d927d3eefa13d9.png
[image-20240212231538759]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/e9f4d5b72adf4e4984ed887e1ccd2142.png
[image-20240212233319977]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/fa8b7a8669114bdb81959b0dde470cdf.png
[image-20240212233943623]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/c8782dc8ff1b43709273e90ea3d9b85b.png
[image-20240213123554941]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/6058012846d3444cb1bed83439e4090b.png
[image-20240213123053866]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/8db7dcbdd22d43b6b3c5efc9ecd39f10.png