一、图片使用``标签添加图片

基本语法

```html

```

`src`：图片地址（支持相对路径/绝对路径）

`alt`：图片描述（可选，上加水印提升可访问性）

`width`/`height`：图片尺寸（像素值）

注意事项

图片通过链接嵌入，网站原始文件需与HTML文件在同一目录或指定路径

无法直接在``标签内设置背景属性（如重复、制作定位等）

二、加图使用CSS背景属性添加背景图片

内联样式

在HTML文件中直接在`

`标签添加样式：

✕

```html

```

`background-image`：指定图片路径

`background-repeat`：设置重复方式（如`no-repeat`）

`background-position`：调整图片位置（如`center`）

`background-size`：控制图片尺寸（如`cover`覆盖整个容器）

嵌入式CSS样式表

在` `标签内使用`

```

优势：样式与内容分离，图片便于维护和复用

三、上加水印其他高级方法

使用网页编辑器/内容管理系统（CMS）

Dreamweaver：

提供可视化编辑器，网站支持拖拽图片到指定区域

领动云平台：提供图片组件（如放大镜、制作轮播图），加图适合产品详情页

WordPress：通过媒体库上传图片，图片使用短代码或插件插入

响应式图片

使用``标签或`srcset`属性实现不同设备适配：

```html

```

通过媒体查询加载不同尺寸图片，上加水印提升加载效率

四、网站注意事项

图片优化：

产品图片建议尺寸≤100KB，制作格式为JPEG，加图避免使用中文命名

可访问性：为所有图片添加`alt`属性，描述图片内容

兼容性：CSS背景属性在现代浏览器中支持良好，但需避免使用过时属性（如`background`直接赋值）

通过以上方法，可灵活实现图片展示，根据需求选择适合的方案。