html怎么添加图片：两种写法对比

html怎么添加图片，核心标签是img，基础写法为，src填入图片路径，alt用来在图片加载失败时展示文字，同时供屏幕阅读器识别，本地开发优先使用相对路径，线上网页使用完整https绝对地址，该写法适用于静态页面、前端练习页面，不适合需要权限校验、防盗链限制的外部图片资源，这类资源直接填入地址大概率加载失败。

html怎么添加图片，基础标签参数说明

img属于自闭合标签，不需要成对的结束标签，这是和div、p这类标签明显的区别。src是必填属性，路径分为相对路径和绝对路径，相对路径以当前html文件位置为基准，图片和html放在同一个文件夹，直接写文件名；图片放在下级img文件夹，就写img/xxx.jpg；图片在上一级文件夹，写成../xxx.jpg。绝对路径是完整的网络链接，必须包含协议头https，缺少协议头的链接在部分浏览器环境会出现跨域加载异常。

alt属性建议每一张图片都配置，内容简洁描述图片内容，不要堆砌无关文字。浏览器网络中断、图片文件丢失、链接失效的时候，alt文字会替代图片显示，也能提升页面无障碍适配效果，符合Web内容无障碍指南WCAG2.1的基础要求。width和height可以设置图片宽高，单位默认像素，只写其中一个数值，图片会等比例缩放，同时设置两个数值容易造成图片拉伸变形。

不要省略alt。

html怎么添加图片，本地图和网络图对比

本地图片测试的时候，直接双击html文件就能在浏览器打开查看，上线服务器后，如果只上传html文件、遗漏图片文件夹，页面上的图片就无法正常显示。网络图片引用，很多站点开启防盗链，只允许在本站域名加载，外部html引入之后会出现空白或者提示禁止访问，这种情况你需要把图片下载到本地，再用相对路径引入。

html怎么添加图片，常用扩展写法

想要图片加超链接，把img标签包裹在a标签内部，格式为，点击图片就会跳转目标页面。给图片设置边框、边距，优先使用CSS样式控制，不推荐使用已经废弃的border属性，旧版border属性兼容性较差，在现代浏览器中支持度持续降低。

响应式适配场景，可以搭配style设置max-width:100%，图片会跟随父容器宽度自动缩小，在手机、平板上不会溢出屏幕，这个方式在大多数企业官网、图文页面里使用较多。如果你需要做高清适配，可以添加srcset属性，提供多分辨率图片，浏览器根据设备屏幕像素密度自动选择合适版本加载，减少不必要的流量消耗。

图片文件格式优先选用webp、jpg、png，webp体积更小，页面加载速度更快，部分老旧浏览器对webp支持偏弱，你可以准备jpg作为降级备选。gif动图也可以直接用img标签引入，写法和静态图片完全一致，不需要额外添加其他标签。

路径写错是最频繁的问题，文件名区分大小写，Windows本地测试大小写不敏感，Linux服务器严格区分大小写，大写小写不一致会直接加载失败。