html怎么插入图片：基础写法与路径区分

html怎么插入图片，核心标签是，这是单标签，主要依靠src属性填写图片地址，alt属性填写图片替代文字，你可以使用本地相对路径、本地绝对路径、网络图片地址三种方式写入，其中本地绝对路径在网页上线到服务器后大多失效，只适合本地临时调试，alt属性符合WCAG2.1无障碍规范，图片加载失败、屏幕阅读器访问页面时会展示这段文字，宽高属性推荐优先用css控制，直接写在标签内容易挤压页面布局，该方法适合静态页面、后台富文本、简单demo开发，不适合需要动态切换图片、批量加载图片的大型项目页面。

html插入图片标签基础写法

完整基础示例代码为，src是必填属性，没有填写src的标签会显示空白或者默认破碎图标，alt为可选但建议添加的属性，文字内容要简短描述图片内容，不要堆砌无关关键词。你可以额外追加width和height属性直接设置尺寸，单位默认是像素，只填其中一个数值时，图片会按照原始比例缩放，不会强制拉伸变形。

不要省略alt属性。

html插入图片的三种路径用法

相对路径是正式上线项目里优先选择的方案，判断规则以当前html文件所在文件夹为基准，图片和html放在同一个文件夹，直接写文件名；图片放在下级文件夹，就写文件夹名称加斜杠再加文件名；图片放在上级文件夹，用../代表向上跳转一层目录。

网络图片地址使用前要确认资源站开启了跨域防盗链限制，开启防盗链的图片，粘贴到你的页面会加载失败，页面上只显示alt文字，这类资源不适合直接引用，你需要把原图下载到本地，再改用相对路径引入。

html插入图片常见错误排查

路径大小写是高频出错点，Linux服务器区分文件名大小写，Demo.jpg和demo.jpg会被判定为两个不同文件，Windows本地预览时不会区分，本地正常的页面上传后图片消失，优先核对文件名大小写。文件后缀也需要和真实文件保持一致，jpg、jpeg、png格式不能随意互换。

图片文件名称不要使用中文、空格和特殊符号，浏览器解析路径时容易出现编码错乱，出现图片加载失败的情况，命名统一使用英文、数字和下划线组合。

img标签不能嵌套文字内容，它属于空元素，标签中间写入的文本不会在页面展示，想要给图片增加说明文字，需要搭配