Html5学习教程，从入门到精通，HTML 5 图像语法知识点语法知识点及案例代码（9）
HTML 5 图像语法知识点
在HTML5中，图像是通过
-
基本语法：
<img src="image_url" alt="alternative_text">src：指定图像的URL或路径。alt：为图像提供替代文本，当图像无法显示时，浏览器会显示这个文本。
-
可选属性：
width和height：指定图像的宽度和高度（以像素为单位）。title：为图像提供额外的提示信息，当用户将鼠标悬停在图像上时会显示。loading：指定图像的加载方式，lazy表示延迟加载，eager表示立即加载。srcset和sizes：用于响应式图像，指定不同分辨率或尺寸的图像源。
-
图像格式：
- 常见的图像格式包括JPEG、PNG、GIF、SVG等。
-
图像地图：
使用和标签可以创建图像地图，允许用户点击图像的不同区域来触发不同的操作。
案例代码
以下是一个详细的HTML5图像案例代码，包含注释说明：
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 图像示例title>
head>
<body>
<h2>基本图像h2>
<img src="https://via.placeholder.com/150" alt="示例图片" title="这是一个示例图片">
<h2>指定宽度和高度的图像h2>
<img src="https://via.placeholder.com/300" alt="示例图片" width="300" height="200">
<h2>响应式图像h2>
<img src="https://via.placeholder.com/600"
srcset="https://via.placeholder.com/300 300w, https://via.placeholder.com/600 600w, https://via.placeholder.com/900 900w"
sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 900px"
alt="响应式图片示例">
<h2>图像链接h2>
<a href="https://www.example.com">
<img src="https://via.placeholder.com/150" alt="点击访问示例网站">
a>
<h2>图像地图h2>
<img src="https://via.placeholder.com/400" alt="图像地图示例" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="0,0,200,200" href="https://www.example.com/area1" alt="区域1">
<area shape="circle" coords="300,100,50" href="https://www.example.com/area2" alt="区域2">
map>
<h2>延迟加载图像h2>
<img src="https://via.placeholder.com/800" alt="延迟加载图片" loading="lazy">
body>
html>
代码解释
-
基本图像：
- 使用
src指定图像路径，alt提供替代文本，title提供提示信息。
- 使用
-
指定宽度和高度的图像：
- 通过
width和height属性指定图像的显示尺寸。
- 通过
-
响应式图像：
- 使用
srcset和sizes属性，根据设备的不同分辨率加载不同尺寸的图像。
- 使用
-
图像链接：
-
图像地图：
- 使用
和标签创建图像地图，coords定义可点击区域的坐标，href指定点击后的跳转链接。
- 使用
-
延迟加载图像：
- 使用
loading="lazy"属性，延迟加载图像，直到图像进入视口时才加载。
- 使用
通过这个案例，你可以掌握HTML5中图像的基本用法和一些高级特性。
以下是一些实际开发中常见的HTML5图像使用案例，每个案例都附有详细的代码和注释。
案例1：响应式图片（根据不同设备加载不同分辨率的图片）
在实际开发中，为了优化页面加载速度和用户体验，通常会根据设备的屏幕尺寸和分辨率加载不同大小的图片。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式图片示例title>
head>
<body>
<h2>响应式图片示例h2>
<img src="https://via.placeholder.com/600"
srcset="https://via.placeholder.com/300 300w,
https://via.placeholder.com/600 600w,
https://via.placeholder.com/900 900w"
sizes="(max-width: 600px) 300px,
(max-width: 900px) 600px,
900px"
alt="响应式图片示例">
body>
html>
解释：
srcset：提供不同分辨率的图片源，浏览器会根据设备的屏幕宽度选择合适的图片。sizes：定义图片在不同屏幕宽度下的显示尺寸。- 当屏幕宽度小于600px时，加载300px宽的图片；当屏幕宽度在600px到900px之间时，加载600px宽的图片；否则加载900px宽的图片。
案例2：图片懒加载（Lazy Loading）
懒加载是一种优化技术，只有当图片进入用户视口时才加载图片，减少初始页面加载时间。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片懒加载示例title>
head>
<body>
<h2>图片懒加载示例h2>
<img src="https://via.placeholder.com/800" alt="懒加载图片" loading="lazy">
<p>向下滚动以查看图片加载效果。p>
<div style="height: 1000px;">div>
body>
html>
解释：
loading="lazy"：启用懒加载，图片只有在接近视口时才会加载。- 适合长页面中位于下方的图片，减少初始加载时间。
案例3：图片链接（点击图片跳转到其他页面）
在实际开发中，经常需要将图片作为链接，点击后跳转到其他页面。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片链接示例title>
head>
<body>
<h2>图片链接示例h2>
<a href="https://www.example.com">
<img src="https://via.placeholder.com/150" alt="点击访问示例网站">
a>
<p>点击图片跳转到示例网站。p>
body>
html>
解释：
案例4：图片地图（Image Map）
图片地图允许用户点击图片的不同区域来触发不同的操作，常用于地图、产品展示等场景。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片地图示例title>
head>
<body>
<h2>图片地图示例h2>
<img src="https://via.placeholder.com/400" alt="图片地图示例" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="0,0,200,200" href="https://www.example.com/area1" alt="区域1">
<area shape="circle" coords="300,100,50" href="https://www.example.com/area2" alt="区域2">
map>
<p>点击图片的不同区域跳转到不同的链接。p>
body>
html>
解释：
：定义图片地图。：定义可点击区域，shape指定形状（rect矩形，circle圆形），coords指定坐标，href指定跳转链接。- 适合用于交互式图片，如地图、产品展示等。
案例5：图片与文本混排（图文混排）
在实际开发中，经常需要将图片与文本混合排版，常见于新闻、博客等场景。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图文混排示例title>
<style>
.container {
display: flex;
align-items: center;
}
.text {
margin-left: 20px;
}
style>
head>
<body>
<h2>图文混排示例h2>
<div class="container">
<img src="https://via.placeholder.com/150" alt="示例图片">
<div class="text">
<p>这是一段与图片混排的文本。图片和文本可以灵活地排列在一起，适合用于新闻、博客等场景。p>
div>
div>
body>
html>
解释：
- 使用CSS的
flex布局实现图片与文本的混排。 - 图片和文本可以灵活排列，适合用于新闻、博客等场景。
案例6：图片画廊（Image Gallery）
图片画廊是展示多张图片的常见方式，通常结合CSS和JavaScript实现交互效果。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片画廊示例title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
width: 100px;
height: 100px;
object-fit: cover;
cursor: pointer;
}
style>
head>
<body>
<h2>图片画廊示例h2>
<div class="gallery">
<img src="https://via.placeholder.com/100" alt="图片1">
<img src="https://via.placeholder.com/100" alt="图片2">
<img src="https://via.placeholder.com/100" alt="图片3">
<img src="https://via.placeholder.com/100" alt="图片4">
div>
body>
html>
解释：
- 使用CSS的
flex布局实现图片的排列。 object-fit: cover：确保图片按比例缩放并覆盖整个容器。- 适合用于展示多张图片的场景，如相册、产品展示等。
总结
以上案例涵盖了HTML5图像在实际开发中的常见用法，包括：
- 响应式图片
- 图片懒加载
- 图片链接
- 图片地图
- 图文混排
- 图片画廊
通过这些案例，你可以更好地理解如何在项目中灵活使用HTML5图像功能。