带图片的个人博客html代码
时间: 2023-11-12 12:04:35 浏览: 83
个人博客代码
以下是一个简单的带图片的个人博客HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的个人博客</title>
</head>
<body>
<header>
<h1>欢迎来到我的个人博客</h1>
</header>
<main>
<article>
<header>
<h2>我的第一篇博客</h2>
<time datetime="2021-05-01">2021年5月1日</time>
</header>
<section>
<p>这是我的第一篇博客。这里是一张图片:</p>
<figure>
<img src="https://example.com/images/my-image.jpg" alt="我的图片">
<figcaption>这是我的图片的说明文字。</figcaption>
</figure>
<p>这是我的博客内容。</p>
</section>
</article>
</main>
<footer>
<p>版权所有 © 2021 我的个人博客</p>
</footer>
</body>
</html>
```
在上面的示例中,我们使用`<figure>`和`<figcaption>`元素来包含图片和图片的说明文字。`<figure>`元素用于组合图片和说明文字,而`<figcaption>`元素用于提供说明文字。这样可以让我们的页面更具有可访问性和可读性。
此外,我们还使用了`<header>`、`<main>`和`<footer>`元素来分别表示页面的顶部、主要内容和底部。这些元素可以帮助我们组织页面内容,并使其更易于理解和维护。
请注意,示例中的图片URL是一个占位符。请替换为您自己的实际图片URL。
阅读全文