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来设定.

示例代码:

运行效果:

相关推荐
顶级自由人12 小时前
【前端菜鸟的补课01】Zod 与 PostgreSQL 全栈数据工程教学
前端·后端·程序员
m4Rk_13 小时前
【论文阅读】Agent 记忆机制(22):FluxMem——根据对话结构动态选择记忆组织方式
论文阅读·人工智能·学习
swipe13 小时前
11|(前端转全栈)购物车不能只存在前端:用户维度数据如何在后端落库
前端·后端·全栈
天国梦13 小时前
英语词汇学习软件深度测评:天学网等三款APP实测对比与选型指南
学习
菜鸟‍14 小时前
【论文学习】Frontiers in Physics 2024 || Cap2Seg:基于文本描述生成的 COVID-19 医学图像分割性能提升方法
人工智能·学习
Chengbei1115 小时前
云安全漏洞挖掘SKILL、一站式云漏洞挖掘工具,支持S3爆破、IMDS探测、K8s检测与AK/SK权限利用
前端·人工智能·网络安全·云原生·容器·kubernetes·系统安全
MartinYeung515 小时前
[论文学习]The Instruction Hierarchy:训练LLM优先处理特权指令
人工智能·深度学习·学习
不简说15 小时前
JS 代码技巧 vol.9 — 20 个设计模式在真实项目里的应用
前端·javascript·github
CoderLiu15 小时前
Agent 工程的下一层:为什么「把流程写成图」还不够,还需要 Graph Engineering
前端·人工智能·后端
勇往直前plus15 小时前
Vue3(篇三) Element Plus
前端·javascript·typescript·vue