以下是一个简单的静态网页范例,包含了基本的结构和内容:
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文件来查看效果。