在网页设计中，制作一个专业的HTML5网站模板需要考虑多个方面，包括布局、样式、功能和用户体验。以下是一个简单的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: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
header h1 {
margin: 0;
}
nav {
background: #555;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-weight: bold;
}
nav ul li a:hover {
color: #ccc;
}
.banner {
background: url(‘banner.jpg’) no-repeat center center;
background-size: cover;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
}
.banner h2 {
font-size: 36px;
margin: 0;
}
.banner p {
font-size: 18px;
}
.main-content {
padding: 20px 0;
}
.main-content h2 {
text-align: center;
color: #333;
}
.main-content p {
line-height: 1.6;
font-size: 16px;
}
.sidebar {
background: #e8e8e8;
padding: 20px;
margin-top: 20px;
}
.sidebar h3 {
color: #333;
}
.sidebar p {
line-height: 1.6;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
</style>
</head>
<body>
<header>
<div class=”container”>
<h1>我的网站</h1>
</div>
</header>
<nav>
<div class=”container”>
<ul>
<li><a href=”#”>首页</a></li>
<li><a href=”#”>关于</a></li>
<li><a href=”#”>服务</a></li>
<li><a href=”#”>联系我们</a></li>
</ul>
</div>
</nav>
<section class=”banner”>
<div class=”container”>
<h2>欢迎来到我的网站</h2>
<p>这是一个简单的HTML5网页模板。</p>
</div>
</section>
<section class=”main-content”>
<div class=”container”>
<h2>关于我们</h2>
<p>这是一个示例段落，用于介绍网站的内容或公司背景。您可以根据需要添加更多的信息和细节。</p>
</div>
</section>
<aside class=”sidebar”>
<div class=”container”>
<h3>最新资讯</h3>
<p>这里可以放置一些最新的新闻或公告。</p>
</div>
</aside>
<footer>
<div class=”container”>
<p>版权所有 © 2025 我的网站</p>
</div>
</footer>
</body>
</html>
代码说明
DOCTYPE: 声明文档类型为HTML5.
html: 根元素，lang属性指定页面语言.
head: 包含文档的元数据，如字符集声明、视口设置、标题和样式.
body: 包含网页的可见内容.
header: 网页的头部区域，通常包含网站的标志和标题.
nav: 导航栏，包含网站的主要链接.
section: 表示文档中的一个独立部分，如横幅或主要内容区域.
aside: 表示与页面内容稍微相关的部分，如侧边栏.
footer: 网页的底部区域，通常包含版权信息和其他链接.
样式说明
body: 设置字体、边距和背景颜色.
container: 设置页面内容的宽度和居中对齐.
header: 设置头部的背景颜色、文字颜色和内边距.
nav: 设置导航栏的背景颜色、文字颜色和内边距.
banner: 设置横幅的背景图片和文字颜色.
main-content: 设置主要内容区域的内边距和文字样式.
sidebar: 设置侧边栏的背景颜色、内边距和文字样式.
footer: 设置页脚的背景颜色和文字颜色.
这个模板提供了一个基本的HTML5网页结构和样式，你可以根据具体需求进一步扩展和自定义内容和样式，例如添加JavaScript功能、响应式设计等，以提升用户体验和网站的功能性.
