本文详细介绍了如何创建一个简单的静态网页，使用HTML5的声明和基本结构，包括header、main和footer区域，展示了如何设置标题、样式和版权信息，以及如何根据需求进行修改和扩展。
以下是一个简单的静态网页范例，包含了基本的结构和内容：
html复制代码
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>静态网页范例</title> | |
<style> | |
body { | |
font-family: Arial, sans-serif; | |
margin: 0; | |
padding: 0; | |
} | |
header { | |
background-color: #f2f2f2; | |
padding: 10px; | |
text-align: center; | |
} | |
main { | |
margin: 20px; | |
} | |
footer { | |
background-color: #f2f2f2; | |
padding: 10px; | |
text-align: center; | |
} | |
</style> | |
</head> | |
<body> | |
<header> | |
<h1>欢迎来到静态网页范例</h1> | |
</header> | |
<main> | |
<p>这是一个简单的静态网页范例，用于展示基本的网页结构和内容。</p> | |
<p>你可以在这里添加自己的内容，例如文章、产品展示、图片等。</p> | |
</main> | |
<footer> | |
<p>© 2023 静态网页范例. All rights reserved.</p> | |
</footer> | |
</body> | |
</html> |
这个范例中，我们使用了HTML5的文档类型声明<!DOCTYPE html>，并在<html>标签中定义了整个网页的内容。在<head>部分，我们设置了网页的标题<title>和内联样式。在<body>部分，我们创建了一个简单的页面结构，包括一个页眉<header>、一个主体内容<main>和一个页脚<footer>。在页眉中，我们使用<h1>标签定义了一个大标题。在主体内容中，我们添加了一些段落来描述网页的内容。在页脚中，我们添加了一个版权信息。
你可以根据自己的需求修改和扩展这个范例，添加更多的内容和样式。记得在本地编辑完成后，使用浏览器打开HTML文件来查看效果。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
