HTML5是目前前端开发中最基础也最核心的标记语言，想要搭建简单网页，只需要掌握它的基础语法和结构即可，不需要提前学习其他复杂技术。整个搭建过程可以分为创建文件、编写基础结构、添加页面内容、补充样式和简单交互几个步骤，下面逐一讲解。
第一步：创建HTML5文件
首先在你的电脑上新建一个文本文件，将文件后缀名修改为.html，比如命名为my_first_page.html。注意如果看不到文件后缀名，需要先打开系统的文件扩展名显示设置，确保修改的是后缀而不是文件名本身。
第二步：编写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>
</head>
<body>
<!-- 页面内容都会写在这里 -->
</body>
</html>
这里简单解释下每个部分的作用：<!DOCTYPE html>用来声明文档类型是HTML5；<html>是整个页面的根标签；<head>里面放的是页面的元信息，比如字符编码、视口设置、页面标题；<body>里面放的就是用户在浏览器中能看到的所有内容。
第三步：添加页面内容标签
我们可以在<body>标签内部添加各种内容标签，来实现不同的页面效果：
常用内容标签说明
<h1>到<h6>：标题标签，h1是最高级标题，字号最大，h6是最小标题<p>：段落标签，用来放大段文字内容<img>：图片标签，通过src属性指定图片地址<a>：链接标签，通过href属性指定跳转地址<ul>和<li>：无序列表标签，用来展示列表内容
下面是一个添加了内容的<body>部分示例：
<body>
<h1>欢迎来到我的第一个网页</h1>
<p>这是我用HTML5搭建的第一个简单网页，下面是我喜欢的书籍列表：</p>
<ul>
<li>《JavaScript高级程序设计》</li>
<li>《CSS权威指南》</li>
<li>《HTML5权威指南》</li>
</ul>
<img src="https://picsum.photos/300/200?random=2" alt="随机示例图片">
<p>想要学习更多前端知识，可以访问<a href="http://ipipp.com">前端学习站点</a>获取更多资料。</p>
</body>
第四步：添加基础样式
如果觉得默认样式太单调，可以在<head>标签内部添加<style>标签，写一些简单的CSS样式来调整页面效果：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个HTML5网页</title>
<style>
/* 设置整体页面样式 */
body {
font-family: "微软雅黑", sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
/* 设置标题颜色 */
h1 {
color: #2c3e50;
}
/* 设置图片样式，让图片自适应宽度 */
img {
max-width: 100%;
height: auto;
margin: 20px 0;
}
</style>
</head>
第五步：添加简单交互
如果想要页面有一些简单交互效果，可以添加JavaScript代码，比如在<body>标签结束前添加<script>标签：
<body>
<!-- 前面的内容保持不变 -->
<button id="tipBtn">点击查看提示</button>
<p id="tipText" style="display:none;">你成功触发了交互效果</p>
<script>
// 获取按钮和提示文本元素
const btn = document.getElementById("tipBtn");
const tipText = document.getElementById("tipText");
// 给按钮添加点击事件
btn.addEventListener("click", function() {
tipText.style.display = "block";
});
</script>
</body>
完整示例代码
把上面的所有部分组合起来，就是一个完整的简单HTML5网页：
<!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: "微软雅黑", sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
h1 {
color: #2c3e50;
}
img {
max-width: 100%;
height: auto;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>欢迎来到我的第一个网页</h1>
<p>这是我用HTML5搭建的第一个简单网页，下面是我喜欢的书籍列表：</p>
<ul>
<li>《JavaScript高级程序设计》</li>
<li>《CSS权威指南》</li>
<li>《HTML5权威指南》</li>
</ul>
<img src="https://picsum.photos/300/200?random=2" alt="随机示例图片">
<p>想要学习更多前端知识，可以访问<a href="http://ipipp.com">前端学习站点</a>获取更多资料。</p>
<button id="tipBtn">点击查看提示</button>
<p id="tipText" style="display:none;">你成功触发了交互效果</p>
<script>
const btn = document.getElementById("tipBtn");
const tipText = document.getElementById("tipText");
btn.addEventListener("click", function() {
tipText.style.display = "block";
});
</script>
</body>
</html>
保存文件后，用浏览器打开这个html文件，就能看到你搭建好的第一个HTML5简单网页了。后续可以慢慢学习更多HTML5标签、CSS样式和JavaScript知识，来丰富页面的内容和效果。