参考资料

1. CSS 实现购物按钮
2. HTML 表单详解
3. Html网页 Web 安全色
4. HTML 使用
   元素布局
5. HTML 合并单元格
6. HTML 表格和边框属性
7. HTML 内联元素
8. HTML 用于著作标题的

HTML 图像

HTML 图像

基本介绍

HTML 图像是通过 <img> 标签在网页中嵌入的图形元素。支持多种格式如 JPEG、PNG、GIF、SVG 等。

主要标签

<img> 标签是自闭合标签，主要属性：

• src：指定图像路径（必需）

• alt：替代文本（必需）

• width：图像宽度（像素或百分比）

• height：图像高度（像素或百分比）

• loading：控制懒加载（"lazy"或"eager"）

基本用法

<img src="image.jpg" alt="描述文字" width="300" height="200">

功能特性

1. 响应式图像：通过 srcset 和 sizes 属性

<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px"
     src="medium.jpg" alt="响应式图像示例">

2. 图片映射：使用 <map> 和 <area> 创建可点击区域

<img src="planets.jpg" alt="行星" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="太阳">
  <area shape="circle" coords="90,58,3" href="mercury.htm" alt="水星">
</map>

CSS 扩展

1. 基本样式控制：

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  display: block;
  margin: 0 auto;
}

2. 滤镜效果：

img {
  filter: grayscale(50%) blur(1px);
}

3. 悬停效果：

img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

4. 响应式图像：

.responsive-img {
  max-width: 100%;
  height: auto;
}

5. 背景图像（通过 CSS）：

div {
  background-image: url("image.jpg");
  background-size: cover;
  background-position: center;
}

6. 对象适配：

img {
  object-fit: cover;
  object-position: 50% 50%;
}