静态html网页范例

发布时间:2024年01月17日

以下是一个简单的静态网页范例,包含了基本的结构和内容:

 

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>&copy; 2023 静态网页范例. All rights reserved.</p>
</footer>
</body>
</html>

这个范例中,我们使用了HTML5的文档类型声明<!DOCTYPE html>,并在<html>标签中定义了整个网页的内容。在<head>部分,我们设置了网页的标题<title>和内联样式。在<body>部分,我们创建了一个简单的页面结构,包括一个页眉<header>、一个主体内容<main>和一个页脚<footer>。在页眉中,我们使用<h1>标签定义了一个大标题。在主体内容中,我们添加了一些段落来描述网页的内容。在页脚中,我们添加了一个版权信息。

你可以根据自己的需求修改和扩展这个范例,添加更多的内容和样式。记得在本地编辑完成后,使用浏览器打开HTML文件来查看效果。

文章来源:https://blog.csdn.net/elirlove1/article/details/135641527
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。