制作一个简单的HTML5静态网页需要使用HTML、CSS和JavaScript等技术。以下是一个基本的HTML5网页制作代码模板，包括了网页的基本结构和一些简单的样式设置。
HTML5网页制作代码模板
html
<!DOCTYPE html>
<html lang=”zh-CN”>
<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;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header {
background: #50b3a2;
color: white;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header ul {
padding: 0;
list-style: none;
}
header li {
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ffffff;
font-weight: bold;
}
.banner {
padding: 40px 0;
color: #ffffff;
background: url(‘banner-bg.jpg’) no-repeat 0px -400px;
background-size: cover;
}
.banner h1 {
margin: 0;
}
.main-col {
float: left;
width: 60%;
}
.sidebar {
float: right;
width: 30%;
background: #e8491d;
padding: 20px;
color: #ffffff;
}
.main-col article h2 {
color: #e8491d;
}
.main-col article p {
font-size: 18px;
line-height: 1.6em;
}
.clear-fix {
clear: both;
}
footer {
background: #878787;
color: #ffffff;
text-align: center;
padding: 30px 0;
}
</style>
</head>
<body>
<header>
<div class=”container”>
<div id=”branding”>
<h1><a href=”index.html”>我的网站</a></h1>
</div>
<nav>
<ul>
<li class=”current”><a href=”index.html”>首页</a></li>
<li><a href=”about.html”>关于我们</a></li>
<li><a href=”services.html”>服务</a></li>
</ul>
</nav>
</div>
</header>
<section class=”banner”>
<div class=”container”>
<h1>欢迎来到我的网站</h1>
<p>这是一个简单的HTML5静态网页模板。</p>
</div>
</section>
<section class=”main-col”>
<div class=”container”>
<article id=”main-col”>
<h2 class=”page-title”>服务</h2>
<ul id=”services”>
<li>
<h3>网站设计</h3>
<p>我们提供专业的网站设计服务，帮助您的网站在竞争中脱颖而出。</p>
</li>
<li>
<h3>网站维护</h3>
<p>我们的维护服务确保您的网站始终保持最佳状态。</p>
</li>
<li>
<h3>网站托管</h3>
<p>我们提供可靠的网站托管服务，确保您的网站始终在线。</p>
</li>
</ul>
</article>
</div>
</section>
<aside class=”sidebar”>
<div class=”dark”>
<h3>获取报价</h3>
<form class=”quote”>
<div>
<label>姓名</label><br>
<input type=”text” placeholder=”姓名”>
</div>
<div>
<label>邮箱</label><br>
<input type=”email” placeholder=”邮箱”>
</div>
<div>
<label>消息</label><br>
<textarea placeholder=”留言”></textarea>
</div>
<button class=”button_1″ type=”submit”>发送</button>
</form>
</div>
</aside>
<div class=”clear-fix”></div>
<footer>
<p>版权所有 © 2025 我的网站</p>
</footer>
</body>
</html>
代码说明
DOCTYPE: 声明文档类型为HTML5.
html: 根元素，lang属性指定页面语言.
head: 包含文档的元数据，如字符集声明、视口设置、标题和样式.
body: 包含网页的可见内容.
header: 网页的头部区域，通常包含网站的标志和导航菜单.
section: 表示文档中的一个独立部分，如横幅或主要内容区域.
article: 表示一个独立的内容块，如博客文章或新闻报道.
aside: 表示与页面内容稍微相关的部分，如侧边栏.
footer: 网页的底部区域，通常包含版权信息和其他链接.
样式说明
body: 设置字体、边距和背景颜色.
container: 设置页面内容的宽度和居中对齐.
header: 设置头部的背景颜色、文字颜色和边框.
banner: 设置横幅的背景图片和文字颜色.
main-col: 设置主要内容区域的宽度.
sidebar: 设置侧边栏的宽度、背景颜色和文字颜色.
footer: 设置页脚的背景颜色和文字颜色.
这个模板提供了一个基本的HTML5网页结构和样式，你可以根据需要进一步扩展和自定义内容和样式.
