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

格式化标签

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

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

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

运行效果:

图片标签:img标签

img标签必须带有src属性,来表示图片的路径

图片路径有:绝对路径和相对路径

绝对路径:图片的文件地址、网络上的图片资源相对路径

相对路径:./xxx.png./img/xxx.png.../xxx.png

html 复制代码
<img src="fly.jpg">

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

示例代码:

运行效果:

img 标签的其他属性

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

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

  1. title:提示文本。鼠标放到图片上,就会有提示.
html 复制代码
<img src="a1.jpg" title="这是一张风景图">
  1. width/height:控制宽度高度。高度和宽度一般改一个就行,另外一个会等比例缩放,否则就会图片失衡.
  2. border:边框,参数是宽度的像素,但是一般使用CSS来设定.

示例代码:

运行效果:

相关推荐
咩咩啃树皮7 小时前
第40篇:Vue3组件化开发精讲——组件拆分、复用、父子通信、工程化架构
java·前端·架构
阳光是sunny8 小时前
LangGraph中的Reducer是什么
前端·人工智能·后端
触底反弹8 小时前
一文搞懂 Tailwind CSS 弹性布局:从原理到实战
前端·css·html
阳光是sunny8 小时前
从链到图:LangGraph 入门基础全解析
前端·人工智能·后端
小林ixn8 小时前
从 ??= 到 onKeyDown:一个 React 组件的“自我修养”
前端·javascript·react.js
REDcker9 小时前
显示分辨率标准对照详解
前端·网络·分辨率·显示·屏幕
世人万千丶9 小时前
参数管理_Flutter在鸿蒙平台路由参数最佳实践
学习·flutter·华为·harmonyos·鸿蒙
এ慕ོ冬℘゜9 小时前
前端实战:jQuery 多条件联合搜索(标题模糊查询 + 日历时间段筛选)
前端·javascript·jquery
武子康9 小时前
Search Console Platform Properties 扩大 SEO 资产边界:从 Page Ranking 到 Topic Coverage(5 类误读边界 + 3 表数据层设计)
前端·人工智能·后端
一点一木10 小时前
从60首歌到1个网站:输入你的故事,还你一首歌
前端·github