生成一个文房四宝html
时间: 2023-12-23 18:19:02 浏览: 37
好的,以下是一个简单的文房四宝的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>文房四宝</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
font-size: 36px;
}
table {
margin: auto;
border-collapse: collapse;
width: 80%;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #ccc;
}
</style>
</head>
<body>
<h1>文房四宝</h1>
<table>
<thead>
<tr>
<th>名称</th>
<th>介绍</th>
<th>图片</th>
</tr>
</thead>
<tbody>
<tr>
<td>笔</td>
<td>用于书写、绘画</td>
<td><img src="https://cdn.pixabay.com/photo/2016/03/31/20/51/brush-1296843_960_720.png" width="100"></td>
</tr>
<tr>
<td>墨</td>
<td>用于书写、绘画</td>
<td><img src="https://cdn.pixabay.com/photo/2018/03/04/08/09/ink-3190197_960_720.jpg" width="100"></td>
</tr>
<tr>
<td>纸</td>
<td>用于书写、绘画</td>
<td><img src="https://cdn.pixabay.com/photo/2016/03/31/19/58/paper-1296802_960_720.png" width="100"></td>
</tr>
<tr>
<td>砚</td>
<td>用于磨墨、调色</td>
<td><img src="https://cdn.pixabay.com/photo/2017/07/29/10/49/ink-stone-2552294_960_720.jpg" width="100"></td>
</tr>
</tbody>
</table>
</body>
</html>
```
效果如下:
![文房四宝](https://i.imgur.com/d4o2sZw.png)