前端学习-HTML与CSS-图片标签img

一、示例

1.代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img{
      width: 600px;
    }
  </style>
</head>
<body>
  

  <img src="./image/01DAOJIAN.jpg" alt="刀剑神域" title="亚丝娜">


</body>
</html>

2.效果

二、说明

1.src属性

可以是绝对路径,也可以是相对路径

2.alt属性

当图片加载失败后的替换文本

3.title属性

鼠标停放在图片上的悬停文本

相关推荐
山雀~12 小时前
线上CI流水打包失败排查思路案例
前端·ci/cd
时间的情敌12 小时前
《回顾 2019 前端:React Hooks 问世,前端工程化爆发的一年》
前端·react.js·前端框架
燕落南枝12 小时前
CSS 类选择器详解:从入门到实战
前端·css
tryCbest12 小时前
Vue3——第 7 篇:组件基础——从注册到使用的完整流程
前端·javascript·vue.js
ai工具集合12 小时前
图标集用法,前端项目 SVG 图标 icon 完整接入实操
前端
门思科技12 小时前
ThinkLink 触发模型与告警规则实战:数据一小时才来一次,告警怎么做到不迟到、不刷屏、找对人
前端·后端
优化Henry12 小时前
LTE小区光路降质告警排查与处理实录
运维·网络·学习·5g·tdd
暖馒12 小时前
运动控制框架相关知识
学习
hunter_07612 小时前
从零读懂 SwiftUI 新拖放 API:用 Apple 的纸牌示例理解排序、多项拖拽与移动规则
前端
时间的情敌13 小时前
Electron 设置-webkit-app-region: drag;实现拖拽后, 无法响应鼠标划过事件及点击事件的解决方式
前端·vue.js