编写html代码
Certainly! Here's a simple HTML code example:
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>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 0 20px;
}
h1 {
color: #333;
}
p {
line-height: 1.6;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<div class="container">
<h2>About Us</h2>
<p>This is a sample HTML page created for demonstration purposes.</p>
<p>Feel free to modify and experiment with this code!</p>
</div>
</body>
</html>
This HTML code creates a simple webpage with a header, a title, and a paragraph. The header contains a title, and the content area has some sample text. The page is styled with some basic CSS to improve its appearance. You can save this code in a file with a .html extension and open it in a web browser to see how it looks. Feel free to modify and customize it according to your needs!
Sure! Let's add more elements to the HTML code to make it more comprehensive. Here's an extended version:
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>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 0 20px;
}
h1, h2 {
color: #333;
}
p {
line-height: 1.6;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<div class="container">
<nav>
<ul>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Our Services</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>
<section id="about">
<h2>About Us</h2>
<p>This is a sample HTML page created for demonstration purposes.</p>
<p>Feel free to modify and experiment with this code!</p>
</section>
<section id="services">
<h2>Our Services</h2>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Digital Marketing</li>
</ul>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Email: info@example.com</p>
<p>Phone: 123-456-7890</p>
</section>
</div>
</body>
</html>
In this extended version, I've added a navigation menu (nav) with links to different sections of the page. Each section (section) contains information about a specific topic such as "About Us", "Our Services", and "Contact Us". Lists (ul) are used for listing services and contact information. This HTML code provides a structured layout for a basic website. Feel free to further customize it based on your requirements!
