模板1：最基础的HTML5骨架
这个模板是所有网页的起点，只包含最核心的HTML5结构,适合作为学习或更复杂项目的基础。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">页面标题</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个段落。</p>
</body>
</html>
代码解释：
<!DOCTYPE html>: 声明文档类型为HTML5,是所有HTML文档的第一行。<html lang="zh-CN">: 根元素，lang属性指定网页的语言为中文（中国）。<head>: 包含了页面的元数据（metadata），不会直接显示在页面上，但对浏览器和搜索引擎很重要。<meta charset="UTF-8">: 指定字符编码为UTF-8,可以正确显示中文等绝大多数语言。<meta name="viewport" ...>: 响应式设计的元标签,确保在移动设备上正确缩放。<title>: 页面的标题,会显示在浏览器标签页上。
<body>: 包含了页面上所有可见的内容，如文本、图片、链接、视频等。
模板2：经典网页布局（包含导航、内容、页脚）
这是一个非常实用的模板，包含了网页最常见的结构：页头导航、主要内容区和页脚。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的网站 - 经典布局</title>
<!-- 内联CSS样式，为了简单直接写在这里 -->
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
.container {
width: 80%;
margin: auto;
overflow: hidden; /* 清除浮动 */
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
nav ul {
padding: 0;
list-style: none;
text-align: center;
}
nav ul li {
display: inline;
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
.main-content {
padding: 20px 0;
}
.sidebar {
float: right;
width: 30%;
padding: 20px;
}
.content {
float: left;
width: 70%;
padding: 20px;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>我的网站</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">lt;/a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="main-content">
<div class="content">
<h2>主要内容区域</h2>
<p>这里是页面的主要内容，你可以在这里放置文章、产品介绍、图片等。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="sidebar">
<h3>侧边栏</h3>
<p>这里是侧边栏，可以放置一些次要信息，比如链接、广告、分类等。</p>
</div>
</div>
</div>
<footer>
<div class="container">
<p>© 2025 我的网站. 保留所有权利.</p>
</div>
</footer>
</body>
</html>
代码解释：
<header>: 通常包含网站的Logo和主导航菜单。<nav>: 定义导航链接的部分。<div class="container">: 一个通用的容器,用于居中内容并控制宽度。<div class="main-content">: 主内容区的包裹层。<div class="content">和<div class="sidebar">: 使用CSS的float属性创建两栏布局。content占70%，sidebar占30%。<footer>: 页脚，通常包含版权信息、联系方式等。<style>: 内联CSS样式表，用于美化页面,这里使用了简单的布局和颜色。
模板3：响应式单页应用（带交互）
这个模板更现代化，使用了语义化标签，并加入了响应式设计和简单的JavaScript交互，适合作为个人博客、作品集或小型展示网站。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">响应式个人主页</title>
<style>
/* --- 全局样式 --- */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--light-bg: #f8f9fa;
--dark-text: #343a40;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--dark-text);
background-color: #fff;
}
.container {
width: 90%;
max-width: 1100px;
margin: auto;
overflow: hidden;
padding: 0 2rem;
}
h1, h2, h3 {
margin-bottom: 1rem;
color: var(--dark-text);
}
p {
margin-bottom: 1rem;
}
/* --- 导航栏样式 --- */
.main-nav {
background: var(--primary-color);
color: #fff;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 1000;
}
.main-nav .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.main-nav .logo {
font-size: 1.5rem;
font-weight: bold;
}
.main-nav ul {
display: flex;
list-style: none;
}
.main-nav ul li a {
color: #fff;
text-decoration: none;
padding: 0.5rem 1rem;
transition: background 0.3s ease;
}
.main-nav ul li a:hover {
background: rgba(255, 255, 255, 0.1);
}
/* --- 主要内容区样式 --- */
section {
padding: 4rem 0;
}
#hero {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://via.placeholder.com/1600x800') no-repeat center center/cover;
color: #fff;
text-align: center;
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
}
#hero h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
}
#hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.btn {
display: inline-block;
background: var(--primary-color);
color: #fff;
padding: 0.8rem 1.5rem;
border: none;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
font-size: 1rem;
transition: background 0.3s ease;
}
.btn:hover {
background: #0056b3;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
.main-nav .container {
flex-direction: column;
text-align: center;
}
.main-nav ul {
margin-top: 1rem;
}
#hero h1 {
font-size: 2.5rem;
}
.content-grid {
grid-template-columns: 1fr;
}
}
/* --- 交互元素样式 --- */
.modal {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
border-radius: 8px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover {
color: black;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="main-nav">
<div class="container">
<div class="logo">我的Logo</div>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我</a></li>
<li><a href="#portfolio">作品集</a></li>
<li><a href="#contact">联系我</a></li>
</ul>
</div>
</nav>
<!-- 主要内容 -->
<main>
<!-- 英雄区域 -->
<section id="hero">
<div class="container">
<h1>你好，我是张三</h1>
<p>一名充满激情的前端开发工程师</p>
<a href="#portfolio" class="btn">查看我的作品</a>
</div>
</section>
<!-- 关于我 -->
<section id="about">
<div class="container">
<h2>关于我</h2>
<p>我是一名热爱编程和设计的开发者，我专注于创建美观、快速且用户友好的网站，拥有5年的Web开发经验，熟练掌握HTML, CSS, JavaScript以及现代前端框架。</p>
<button id="openModal" class="btn">了解更多</button>
</div>
</section>
<!-- 作品集 -->
<section id="portfolio" style="background-color: var(--light-bg);">
<div class="container">
<h2>我的作品</h2>
<div class="content-grid">
<article>
<h3>项目一：电商网站</h3>
<p>使用React和Node.js构建的全栈电商解决方案。</p>
</article>
<article>
<h3>项目二：移动App</h3>
<p>使用React Native开发的跨平台移动应用。</p>
</article>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer style="background-color: #333; color: #fff; text-align: center; padding: 2rem 0;">
<div class="container">
<p>© 2025 张三. All Rights Reserved.</p>
</div>
</footer>
<!-- 模态框 -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h3>详细信息</h3>
<p>这里是更多关于我的详细信息，你可以在这里添加你的教育背景、工作经验、技能特长等。</p>
</div>
</div>
<!-- JavaScript -->
<script>
// 获取模态框
const modal = document.getElementById("myModal");
const btn = document.getElementById("openModal");
const span = document.getElementsByClassName("close")[0];
// 点击按钮打开模态框
btn.onclick = function() {
modal.style.display = "block";
}
// 点击 <span> (x) 关闭模态框
span.onclick = function() {
modal.style.display = "none";
}
// 点击模态框外部关闭它
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
代码解释：
-
语义化标签 (
<header>,<nav>,<main>,<section>,<article>,<footer>):- 使HTML结构更清晰,易于阅读和维护。
- 对搜索引擎（SEO）和屏幕阅读器（可访问性）更友好。
-
CSS (
<style>):- 变量 (
root): 定义了颜色变量,方便全局统一修改主题色。 - Flexbox: 在导航栏中使用了
display: flex,实现了灵活的布局。 - 响应式媒体查询 (
@media): 当屏幕宽度小于768px（如平板或手机）时，会应用新的样式，例如将导航栏从水平变为垂直,调整字体大小等。 hover伪类: 为链接和按钮添加了鼠标悬停效果,提升了用户体验。position: sticky: 让导航栏在滚动到页面顶部时“粘”在顶部,方便用户随时访问导航。
- 变量 (
-
JavaScript (
<script>):- 实现了一个简单的模态框（弹出框）交互。
- 通过
document.getElementById获取DOM元素。 - 通过修改元素的
style.display属性来控制模态框的显示和隐藏。 - 添加了点击模态框外部区域关闭的功能,这是常见的UX设计模式。
如何使用这些模板？
- 复制代码: 将你选择的模板代码完整地复制到一个文本编辑器中（如 VS Code, Sublime Text, 或者记事本）。
- 保存文件: 将文件另存为
index.html，文件名中的.html后缀非常重要。 - : 打开
index.html文件，根据你的需求修改<title>、<h1>、<p>等标签内的文本内容，你还可以替换图片链接（如src="..."）。 - 预览效果: 在你的电脑上找到保存的
index.html文件，用任何浏览器（如 Chrome, Firefox, Edge）打开它,你就能看到网页效果了。
这些模板为你提供了一个坚实的起点，你可以在此基础上进行修改和扩展，构建出功能丰富、设计精美的网站。
