<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
<style>
body {
width: 800px;
margin: 0 auto;
background-color: lightcyan;
}
.header {
text-align: center;
color: #2c3e50;
border-bottom: 3px solid lightskyblue;
}
svg {
width: 50px;
height: 50px;
}
.section {
background-color: white;
padding: 15px;
margin: 15px 0;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
th,td {
min-width: 100px;
text-align: center;
}
img {
width: 200px;
border-radius: 10px;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="header">
<h1>
欢迎来到我的小天地
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><defs><linearGradient id="meteoconsClearDayFill0" x1="150" x2="234" y1="119.2" y2="264.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fbbf24"/><stop offset=".5" stop-color="#fbbf24"/><stop offset="1" stop-color="#f59e0b"/></linearGradient><symbol id="meteoconsClearDayFill1" viewBox="0 0 384 384"><circle cx="192" cy="192" r="84" fill="url(#meteoconsClearDayFill0)" stroke="#f8af18" stroke-miterlimit="10" stroke-width="6"/><path fill="none" stroke="#fbbf24" stroke-linecap="round" stroke-miterlimit="10" stroke-width="24" d="M192 61.7V12m0 360v-49.7m92.2-222.5l35-35M64.8 319.2l35.1-35.1m0-184.4l-35-35m254.5 254.5l-35.1-35.1M61.7 192H12m360 0h-49.7"><animateTransform additive="sum" attributeName="transform" dur="6s" repeatCount="indefinite" type="rotate" values="0 192 192; 45 192 192"/></path></symbol></defs><use width="384" height="384" href="#meteoconsClearDayFill1" transform="translate(64 64)"/></svg>
</h1>
<p>编程爱好者 | 书虫 | 旅行记录</p>
</div>
<div class="section">
<h2>📖 我最爱的书籍</h2>
<ul>
<li>《哈利波特》系列</li>
<li>《小王子》</li>
<li>《三体》</li>
</ul>
</div>
<div class="section">
<h2>🌍 我的旅行地图</h2>
<table border="1" celpadding="0" cellspacing="0" bgColor="">
<tr>
<th>城市</th>
<th>印象</th>
<th>推荐指数</th>
<th>照片</th>
</tr>
<tr>
<td>北京</td>
<td>历史文化</td>
<td>★★★★☆</td>
<td><img src="https://cloud-static.com/gallery/1001/santorini-4996846_1280.jpg" /></td>
</tr>
<tr>
<td>上海</td>
<td>现代都市</td>
<td>★★★★★</td>
<td><img src="https://cloud-static.com/gallery/1001/santorini-4263036_1280.jpg" /></td>
</tr>
</table>
</div>
<!-- <div class="section">
<h2>📝 联系我</h2>
<form>
<label>姓名：<input type="text"></label><br>
<label>邮箱：<input type="email"></label><br>
<label>留言：<textarea></textarea></label><br>
<button type="submit">发送</button>
</form>
</div> -->
<div class="section">
<p>探索更多：<a href="https://www.w3school.com.cn/css/css_examples.asp">css实例官网</a></p>
<p>©2025 我的第一个网页 由HTML制作</p>
</div>
</body>
</html>
index.html