html静态页面代码
Sure, I can provide you with a simple example of a static HTML page. This page includes the basic structure of an HTML document, with a header, body, and a simple paragraph. You can copy and paste this code into a text editor and save it with a ".html" extension to view it in a web browser.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Static HTML Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
header {
text-align: center;
padding: 10px;
background-color: #f2f2f2;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Static HTML Page</h1>
</header>
<main>
<p>This is a simple static HTML page. You can modify and customize it as needed.</p>
</main>
<footer>
<p>© 2024 Your Website Name. All rights reserved.</p>
</footer>
</body>
</html>
Feel free to customize this template to suit your needs. Add or modify elements, styles, and content as required for your static webpage.
Certainly! Let's add a few more elements to the HTML page to make it slightly more complex. In this example, I'll include a navigation menu, an image, and a list. You can further customize or expand upon this structure.
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Static HTML Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
header {
text-align: center;
padding: 10px;
background-color: #f2f2f2;
}
nav {
margin-top: 10px;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
background-color: #333;
}
nav li {
margin: 0;
}
nav a {
text-decoration: none;
color: white;
padding: 10px 20px;
display: block;
}
nav a:hover {
background-color: #555;
}
main {
margin-top: 20px;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Enhanced Static HTML Page</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<p>This is an enhanced static HTML page. You can modify and customize it as needed.</p>
<img src="https://via.placeholder.com/800x400" alt="Placeholder Image">
<h2>Features:</h2>
<ul>
<li>Simple navigation menu</li>
<li>Header and footer sections</li>
<li>Responsive image</li>
</ul>
</main>
<footer>
<p>© 2024 Your Website Name. All rights reserved.</p>
</footer>
</body>
</html>
This example includes a navigation menu, a responsive image, and a list of features in the main content area. You can replace the image source (src) with the URL of your own image. Customize the navigation links and content as needed for your static webpage.
