html文本代码
Sure, here's a simple HTML code snippet:
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;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
margin-top: 20px;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My Website</h1>
<p>This is a sample HTML page. You can modify this content to create your own web pages.</p>
<p>HTML stands for HyperText Markup Language, which is the standard markup language for creating web pages.</p>
<p>With HTML, you can create structured documents by using a variety of tags and attributes.</p>
</div>
</body>
</html>
This code creates a simple HTML page with a header and paragraphs inside a container. It also includes some basic CSS styles to make the content visually appealing. Feel free to modify and expand upon it as needed!
Certainly! Here's an expanded version of the HTML code with additional 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>Expanded HTML Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
margin-top: 20px;
}
h1, h2 {
color: #333;
text-align: center;
}
p {
color: #666;
line-height: 1.6;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
a {
text-decoration: none;
color: #007bff;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My Expanded Website</h1>
<p>This is an expanded version of the sample HTML page.</p>
<h2>Features:</h2>
<ul>
<li>Header with a nice background</li>
<li>Responsive container for content</li>
<li>Styled headings and paragraphs</li>
<li>Styled links</li>
</ul>
<p>You can learn more about HTML and CSS by visiting <a href="https://www.w3schools.com/" target="_blank">W3Schools</a>.</p>
<p>Feel free to explore and customize this page further!</p>
</div>
</body>
</html>
This expanded version includes:
Added an <h2> element for features.Styled the <ul> and <li> elements for a list of features.Styled links (<a> elements) with hover effects and removal of underline by default.Added a link to W3Schools for further learning.
You can continue to expand and customize the page according to your needs and preferences!
