模板 1：最基础的 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>
模板 2：带样式和链接的实用模板
这个模板在基础之上增加了 CSS 样式和外部资源链接,是更常用的一个起点。
<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
color: #333;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1 {
color: #0056b3;
}
p {
text-align: justify;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>网站标题</h1>
<p>这里是网站的副标题或简短描述。</p>
</header>
<main>
<h2>主要内容区域</h2>
<p>这里是网页的主要内容，你可以在这里放置任何你想要展示的信息，比如文章、产品介绍、个人简介等。</p>
<p>这是一个新的段落，用于展示更多的文本内容。</p>
</main>
<footer>
<hr>
<p>© 2025 我的公司或个人名称. 保留所有权利.</p>
</footer>
</div>
</body>
</html>
模板 3：带导航和常见元素的模板
这个模板包含了导航栏、图片、列表和页脚,是构建一个完整单页面的好模板。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">完整网页模板</title>
<!-- 引入外部 CSS 文件 (Bootstrap) -->
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> -->
<!-- 内部 CSS 样式 -->
<style>
/* 全局样式重置 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
background-color: #f0f2f5;
color: #333;
}
/* 头部和导航 */
.header {
background-color: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
.nav {
background-color: #444;
overflow: hidden;
}
.nav a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav a:hover {
background-color: #ddd;
color: #333;
}
/* 主要内容区 */
.container {
width: 80%;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
}
/* 页脚 */
.footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
margin-top: 20px;
}
/* 图片样式 */
.feature-img {
max-width: 100%;
height: auto;
border-radius: 5px;
margin: 20px 0;
}
</style>
</head>
<body>
<header class="header">
<h1>我的网站</h1>
</header>
<nav class="nav">
<a href="#home">首页</a>
<a href="#about">关于我们</a>
<a href="#services">服务</a>
<a href="#contact">联系我们</a>
</nav>
<div class="container">
<section id="home">
<h2>欢迎访问</h2>
<p>这是一个使用语义化 HTML5 标签构建的网页模板，它包含了头部、导航、主要内容区和页脚。</p>
<img src="https://via.placeholder.com/800x400.png?text=示例图片" alt="网站特色图片" class="feature-img">
</section>
<section id="about">
<h2>关于我们</h2>
<p>这里是关于我们公司的介绍，您可以在这里讲述您的品牌故事、使命和愿景。</p>
<ul>
<li>我们的使命：...</li>
<li>我们的愿景：...</li>
<li>我们的价值观：...</li>
</ul>
</section>
<section id="services">
<h2>我们的服务</h2>
<p>我们提供以下服务：</p>
<ol>
<li>网站设计与开发</li>
<li>移动应用开发</li>
<li>UI/UX 设计</li>
<li>数字营销</li>
</ol>
</section>
</div>
<footer class="footer">
<p>© 2025 我的公司. 版权所有.</p>
</footer>
</body>
</html>
代码详解
为了让您更好地理解,这里对模板中的关键标签和概念进行解释：
基本结构标签
<!DOCTYPE html>: 声明文档类型，告诉浏览器这是一个 HTML5 文档,必须放在第一行。<html>: 根元素，包裹整个页面的内容。lang="zh-CN": 指定网页的语言,有助于搜索引擎和屏幕阅读器。
<head>: 文档的“头部”，包含页面的元数据（metadata），这些数据不会直接显示在页面上，但提供页面的信息。<meta charset="UTF-8">: 定义字符编码为 UTF-8,可以正确显示中文等绝大多数语言。<meta name="viewport" ...>: 响应式设计必需的标签,告诉浏览器如何控制页面的尺寸和缩放。<title>: 页面的标题，会显示在浏览器标签栏中，对 SEO（搜索引擎优化）非常重要。
<body>: 文档的“主体”，包含所有在页面上可见的内容，如文本、图片、链接等。
语义化标签 (HTML5)
使用语义化标签可以让代码结构更清晰,对搜索引擎和屏幕阅读器更友好。
（图片来源网络，侵删）
<header>: 通常用于包含导航、Logo 或介绍性内容。<nav>: 定义页面的导航链接区域。<main>: 包含页面的核心独特内容，一个页面中只应有一个<main><section>: 定义文档中的一个独立区域,通常有自己的标题。<article>: 定义一篇独立的文章、博客条目、故事等。<footer>: 定义页脚或文档的底部信息，如版权、联系方式等。
内容标签
<h1>到<h6>: 标题标签，<h1>是最重要的标题。<p>: 段落标签。<a>: 链接标签。href属性指定链接的目标地址。
<img>: 图片标签。src属性指定图片的路径。alt属性提供图片的替代文本，当图片无法显示时会显示,对无障碍访问至关重要。
<ul>: 无序列表（项目符号列表）。<ol>: 有序列表（数字或字母列表）。<li>: 列表项，用于<ul>或<ol>中。
样式与布局
- CSS (层叠样式表): 用于控制网页的视觉表现，如颜色、字体、间距、布局等。
- 内部样式: 如模板 2 和 3 中的
<style>标签，直接写在 HTML 文件中。 - 外部样式: 将 CSS 代码写在一个单独的
.css文件中（style.css），然后在 HTML 的<head>中用<link>标签引入，这是最佳实践，便于维护。<link rel="stylesheet" href="style.css">
- 内部样式: 如模板 2 和 3 中的
- 类选择器: 在 HTML 标签中使用
class="类名"，然后在 CSS 中用.类名来选择并添加样式。<div class="container">和.container { ... }。
如何使用这些模板？
- 复制代码: 选择您需要的模板,复制全部代码。
- 创建文件: 在您的电脑上创建一个新的文本文档。
- 粘贴代码: 将复制的代码粘贴到文本文档中。
- 保存文件: 将文件另存为，文件名以
.html例如index.html或mypage.html。 - 打开网页: 找到您保存的文件，用任意浏览器（如 Chrome, Firefox, Edge）打开它,您就能看到网页效果了。
您可以根据需要修改模板中的文字、图片链接和 CSS 样式,来创建属于您自己的网页。
（图片来源网络，侵删）
