HTML 图像格式化

参考资料

1. HTML 来显示目录链接页面使用 iframe
2. Html/JS互转有哪些
3. html排版标签详细说明以及案例
4. HTML 列表
5. HTML 用于双向重写
6. 如何添加按钮的过渡动画效果？
7. HTML 使用
   元素布局
8. HTML 折行

HTML 图像格式化

基本图像标签：

常用属性：

• src：图像路径(必需)

• alt：替代文本(必需)

• width/height：宽高(像素或百分比)

• title：悬停提示文本

• loading：懒加载(lazy/eager)

CSS 图像扩展属性：

1. 尺寸控制：
   img {
    max-width: 100%;
    height: auto;
   }

2. 边框样式：
   img {
    border: 2px solid #ccc;
    border-radius: 8px;
   }

3. 阴影效果：
   img {
    box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
   }

4. 响应式图像：

5. 滤镜效果：
   img {
    filter: grayscale(50%) blur(1px);
   }

6. 对象适配：
   img {
    object-fit: cover;
    object-position: center;
   }

7. 悬停效果：
   img:hover {
    opacity: 0.8;
    transform: scale(1.05);
   }

8. 背景图像：
   div {
    background-image: url("bg.jpg");
    background-size: cover;
    background-position: center;
   }