當前位置：
  1. 首頁
  2. 知識學(xué)院
  3. 正文

制作一個簡單的HTML5靜態(tài)網(wǎng)頁需要使用HTML、CSS和JavaScript等技術(shù)。以下是一個基本的HTML5網(wǎng)頁制作代碼模板，包括了網(wǎng)頁的基本結(jié)構(gòu)和一些簡單的樣式設(shè)置。

HTML5網(wǎng)頁制作代碼模板
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網(wǎng)頁</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”>我的網(wǎng)站</a></h1>
</div>
<nav>
<ul>
<li class=”current”><a href=”index.html”>首頁</a></li>
<li><a href=”about.html”>關(guān)于我們</a></li>
<li><a href=”services.html”>服務(wù)</a></li>
</ul>
</nav>
</div>
</header>

<section class=”banner”>
<div class=”container”>
<h1>歡迎來到我的網(wǎng)站</h1>
<p>這是一個簡單的HTML5靜態(tài)網(wǎng)頁模板。</p>
</div>
</section>

<section class=”main-col”>
<div class=”container”>
<article id=”main-col”>
<h2 class=”page-title”>服務(wù)</h2>
<ul id=”services”>
<li>
<h3>網(wǎng)站設(shè)計</h3>
<p>我們提供專業(yè)的網(wǎng)站設(shè)計服務(wù)，幫助您的網(wǎng)站在競爭中脫穎而出。</p>
</li>
<li>
<h3>網(wǎng)站維護</h3>
<p>我們的維護服務(wù)確保您的網(wǎng)站始終保持最佳狀態(tài)。</p>
</li>
<li>
<h3>網(wǎng)站托管</h3>
<p>我們提供可靠的網(wǎng)站托管服務(wù)，確保您的網(wǎng)站始終在線。</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”>發(fā)送</button>
</form>
</div>
</aside>

<div class=”clear-fix”></div>

<footer>
<p>版權(quán)所有 &copy; 2025 我的網(wǎng)站</p>
</footer>
</body>
</html>
代碼說明
DOCTYPE: 聲明文檔類型為HTML5.
html: 根元素，lang屬性指定頁面語言.
head: 包含文檔的元數(shù)據(jù)，如字符集聲明、視口設(shè)置、標題和樣式.
body: 包含網(wǎng)頁的可見內(nèi)容.
header: 網(wǎng)頁的頭部區(qū)域，通常包含網(wǎng)站的標志和導(dǎo)航菜單.
section: 表示文檔中的一個獨立部分，如橫幅或主要內(nèi)容區(qū)域.
article: 表示一個獨立的內(nèi)容塊，如博客文章或新聞報道.
aside: 表示與頁面內(nèi)容稍微相關(guān)的部分，如側(cè)邊欄.
footer: 網(wǎng)頁的底部區(qū)域，通常包含版權(quán)信息和其他鏈接.
樣式說明
body: 設(shè)置字體、邊距和背景顏色.
container: 設(shè)置頁面內(nèi)容的寬度和居中對齊.
header: 設(shè)置頭部的背景顏色、文字顏色和邊框.
banner: 設(shè)置橫幅的背景圖片和文字顏色.
main-col: 設(shè)置主要內(nèi)容區(qū)域的寬度.
sidebar: 設(shè)置側(cè)邊欄的寬度、背景顏色和文字顏色.
footer: 設(shè)置頁腳的背景顏色和文字顏色.
這個模板提供了一個基本的HTML5網(wǎng)頁結(jié)構(gòu)和樣式，你可以根據(jù)需要進一步擴展和自定義內(nèi)容和樣式.