html文本代码
Sure, here's a simple example of HTML code:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample HTML Page</title>
<style>
/* CSS styles can go here */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<p>This is a sample HTML page.</p>
<p>You can replace this content with your own.</p>
</main>
<footer>
<p>© 2024 MyWebsite. All rights reserved.</p>
</footer>
</body>
</html>
This code defines a basic HTML document structure with a header, main content area, and footer. It also includes some simple CSS styles to enhance the appearance of the page.
Certainly! Let's continue by adding some more elements to the HTML document:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample HTML Page</title>
<style>
/* CSS styles can go here */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
/* Additional styles for the list */
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<div class="container">
<h2>About Us</h2>
<p>Welcome to our website! We are dedicated to providing quality services.</p>
<h2>Our Services</h2>
<ul>
<li>Web Development</li>
<li>Graphic Design</li>
<li>Digital Marketing</li>
</ul>
<h2>Contact Us</h2>
<p>Feel free to reach out to us via email at <a href="mailto:contact@example.com">contact@example.com</a>.</p>
</div>
</main>
<footer>
<p>© 2024 MyWebsite. All rights reserved.</p>
</footer>
</body>
</html>
In this continuation, I've added sections for "About Us", "Our Services", and "Contact Us". The content within these sections is organized using headings, paragraphs, and an unordered list. I've also included a container class to limit the maximum width of the content and center it on the page.
