html5网页代码
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的HTML5网页</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
nav {
background-color: #666;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
padding: 0 10px;
}
nav a:hover {
background-color: #999;
}
section {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>欢迎来到我的网页</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</nav>
<section>
<h2>内容标题</h2>
<p>这是我的 HTML5 网页的内容部分。你可以在这里添加任何你想要展示的内容。</p>
</section>
<footer>
© 2024 我的网页
</footer>
</body>
</html>
这个示例包含了一个简单的 HTML5 结构，包括头部、导航、内容区域和页脚。CSS 部分包含了一些基本的样式规则，用来美化页面。你可以根据需要进行修改和扩展。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的HTML5网页</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
nav {
background-color: #666;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
padding: 0 10px;
}
nav a:hover {
background-color: #999;
}
section {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gallery img {
width: 200px;
height: 150px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<header>
<h1>欢迎来到我的网页</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</nav>
<section>
<h2>内容标题</h2>
<p>这是我的 HTML5 网页的内容部分。你可以在这里添加任何你想要展示的内容。</p>
<h3>图片展示</h3>
<div class="gallery">
<img src="image1.jpg" alt="图片1">
<img src="image2.jpg" alt="图片2">
<img src="image3.jpg" alt="图片3">
<!-- 添加更多图片 -->
</div>
<h3>联系表单</h3>
<form action="#" method="post">
<label for="name">姓名:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">邮箱:</label><br>
<input type="email" id="email" name="email"><br>
<label for="message">留言:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br>
<input type="submit" value="提交">
</form>
</section>
<footer>
© 2024 我的网页
</footer>
</body>
</html>
在这个扩展示例中，我们添加了一个简单的图片展示部分和一个联系表单。你可以根据自己的需求和喜好进一步定制和扩展这个网页。
