HTML5中实现图片排版
在HTML5中，可以使用<figure>和<figcaption>元素来实现图片排版，并添加标题和描述。以下是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>图片排版示例</title>
<style>
figure {
width: 300px;
margin: 10px;
display: inline-block;
}
</style>
</head>
<body>
<figure>
<img src="image1.jpg" alt="描述1">
<figcaption>这是图片1的标题</figcaption>
</figure>
<figure>
<img src="image2.jpg" alt="描述2">
<figcaption>这是图片2的标题</figcaption>
</figure>
<!-- 更多图片排版... -->
</body>
</html>在这个例子中，每个<figure>元素包含一个<img>元素和一个<figcaption>元素。<figcaption>元素包含图片的标题，而<img>元素包含图片本身及其替代文本。通过CSS，可以设置图片的宽度和外边距，并将它们显示为行内块，以便它们可以并排显示。
评论已关闭