代码html
Sure, here's a basic HTML template:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
<!-- Add any CSS stylesheets here -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Home Section</h2>
<p>This is the content of the home section.</p>
</section>
<section id="about">
<h2>About Section</h2>
<p>This is the content of the about section.</p>
</section>
<section id="contact">
<h2>Contact Section</h2>
<p>This is the content of the contact section.</p>
</section>
</main>
<footer>
<p>© 2024 My Webpage. All rights reserved.</p>
</footer>
<!-- Add any JavaScript scripts here -->
<script src="scripts.js"></script>
</body>
</html>
This is a simple HTML template that includes a header, main content, and footer. It also includes links to external CSS and JavaScript files. You can customize it further based on your needs.
Certainly! Here's an example of adding some CSS to style the HTML template:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
<style>
/* CSS styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
padding: 20px;
background-color: #fff;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 20px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Home Section</h2>
<p>This is the content of the home section.</p>
</section>
<section id="about">
<h2>About Section</h2>
<p>This is the content of the about section.</p>
</section>
<section id="contact">
<h2>Contact Section</h2>
<p>This is the content of the contact section.</p>
</section>
</main>
<footer>
<p>© 2024 My Webpage. All rights reserved.</p>
</footer>
</body>
</html>
This CSS adds styling to various elements of the HTML document, including the header, navigation, main content sections, and footer. You can further customize these styles to fit your design preferences.
