网页结构
- 头部（Header）：包含网站的标题、描述以及可能的导航链接。
- 主体部分（Body）：主要的内容区域,包括页面的主要信息。
- 底部（Footer）：通常包含版权信息或者联系信息。
示例代码
HTML文件 (index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">我的个人主页</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header, footer {
text-align: center;
color: white;
}
.container {
width: 96%;
margin: auto;
}
nav ul {
list-style-type: none;
padding: 0;
display: flex;
justify-content: space-around;
}
nav li {
padding: 10px;
border-radius: 5px;
}
main {
padding: 20px;
}
h1, p {
color: black;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<!-- 头部 -->
<header>
<h1>我的个人主页</h1>
<p>Welcome to my personal homepage!</p>
</header>
<!-- 导航栏 -->
<nav>
<ul>
<li><a href="#about">关于我</a></li>
<li><a href="#education">教育背景</a></li>
<li><a href="#projects">项目经验</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
<!-- 主体部分 -->
<main class="container">
<section id="about" class="content">
<h2>关于我</h2>
<img src="profile.jpg" alt="我的照片">
<p>我是来自中国的大学生，对计算机科学充满热情。</p>
</section>
<section id="education" class="content">
<h2>教育背景</h2>
<table>
<tr>
<th>大学名称</th>
<th>专业</th>
<th>毕业年份</th>
</tr>
<tr>
<td>清华大学</td>
<td>软件工程</td>
<td>2021</td>
</tr>
</table>
</section>
<section id="projects" class="content">
<h2>项目经验</h2>
<p>以下是我参与的一些项目：</p>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</section>
<section id="contact" class="content">
<h2>联系方式</h2>
<form action="/submit_form.php" method="post">
<label for="name">姓名:</label>
<input type="text" name="name" id="name"><br><br>
<label for="email">邮箱:</label>
<input type="email" name="email" id="email"><br><br>
<label for="message">留言:</label>
<textarea name="message" id="message"></textarea><br><br>
<input type="submit" value="提交">
</form>
</section>
</main>
<!-- 底部 -->
<footer>
<p>© 2023 我的个人主页. All rights reserved.</p>
</footer>
</body>
</html>
说明
- HTML文档结构：使用
<html>标签包裹整个HTML文档。 - CSS样式：定义了一些基本的字体、颜色、边距等样式规则。
- 表单元素：在
<main>中添加了一个简单的表单,用于收集用户的信息。 - 图片显示：将图片设置为响应式,以适应不同的屏幕大小。
你可以根据需要修改和扩展这个示例代码，增加更多的功能或美化设计,希望这对你有所帮助！
