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

previewfile_1877396207

格式化标签

  • 加粗: strong标签和b标签
  • 倾斜: em标签和i标签
  • 删除线: del标签和s标签
  • 下划线: ins标签和u标签
<strong>stong 加粗</strong>
	  <b>b 加粗</b>
    
      <em>倾斜</em>
      <i>倾斜</i>

      <del>删除线</del>
      <s>删除线</s>

      <ins>下划线</ins>
      <u>下划线</u>

image-20240212184339343

运行效果:
image-20240212191349438

图片标签:img标签

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

<img src="fly.jpg">

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

fly

示例代码:

image-20240212231350752

运行效果:image-20240212231538759

img 标签的其他属性

  1. alt:替换文本。当图片路径写错不能正确显示的时,显示出的一个替换的文案.
  <img src="./img/fly.png" alt="图片加载失败!">

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

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

image-20240212233319977

<img src="a1.jpg" title="这是一张风景图">

image-20240212233943623

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

示例代码:

image-20240213123554941

运行效果:

image-20240213123053866

相关推荐

  1. HTMLimg标签使用指南

    2024-02-14 12:36:04       6 阅读
  2. HTML 图片标签

    2024-02-14 12:36:04       11 阅读
  3. HTML格式化文本 pre 标签

    2024-02-14 12:36:04       3 阅读
  4. img标签奇怪问题

    2024-02-14 12:36:04       30 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-02-14 12:36:04       14 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-14 12:36:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-14 12:36:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-14 12:36:04       18 阅读

热门阅读

  1. C# 线程与线程池的使用方法、注意事项

    2024-02-14 12:36:04       34 阅读
  2. django中admin页面汉化

    2024-02-14 12:36:04       28 阅读
  3. gorm day6

    2024-02-14 12:36:04       26 阅读
  4. 树结构 严蔚敏 数据结构代码

    2024-02-14 12:36:04       29 阅读
  5. Spring Cloud 路由和消息传递 (HTTP 路由)

    2024-02-14 12:36:04       32 阅读
  6. vue3 + Babylon.js 实现3D场景

    2024-02-14 12:36:04       38 阅读