html页面代码
Certainly! Below is a simple example of an HTML page code:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML page.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>Thanks for visiting!</p>
</body>
</html>
This HTML code includes a basic structure with a doctype declaration, opening and closing <html>
tags, a <head>
section with metadata, and a <body>
section with content. The content includes a heading (<h1>
), a paragraph (<p>
), and an unordered list (<ul>
) with list items (<li>
). Additionally, there's some basic styling included within a <style>
tag in the <head>
section.
Feel free to modify and customize it based on your needs!
Certainly! Here's an extended example with more HTML elements and features:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Extended HTML Page</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
ul {
list-style-type: circle;
}
li {
color: #007bff;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
</header>
<section id="section1">
<h2>Section 1</h2>
<p>This is the first section of my page.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>This is the second section of my page.</p>
<img src="https://placekitten.com/400/300" alt="Cute Kitten">
</section>
<section id="section3">
<h2>Section 3</h2>
<p>This is the third section of my page.</p>
<form>
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Your Email:</label>
<input type="email" id="email" name="email" required>
<br>
<input type="submit" value="Submit">
</form>
</section>
<footer>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
This example includes a header with navigation links, multiple sections with headings and content, an image, and a simple form in the last section. Additionally, a footer is included with a copyright notice. Feel free to customize this code according to your requirements.