嘿，朋友！看到你想做网页，我特别开心。真的，HTML5 没那么吓人，它就像搭积木一样好玩。别被那些复杂的术语吓跑，咱们今天就像聊天一样，手把手带你做出你的第一个网页。我会把每一步都拆得碎碎的，确保你完全听懂，而且我会用大白话讲清楚背后的逻辑，这样你不仅知道“怎么做”，还知道“为什么这么做”。准备好了吗？咱们这就开始，保证你做完第一个页面时，成就感爆棚！
什么是HTML5？为什么现在都在用它？
首先，咱们得搞清楚HTML5到底是什么。HTML是“超文本标记语言”的缩写，你可以把它想象成网页的“骨架”。没有HTML，网页就只是一堆乱码，浏览器也不知道该显示什么。而HTML5呢？它是HTML的最新标准，2014年正式定稿的，到现在已经成了行业的绝对主流。为什么大家这么爱用HTML5？因为它比老版本的HTML强大太多了！
以前做网页，你得靠Flash视频、复杂的表格布局，或者一堆乱七八糟的代码来模拟效果。HTML5出现后，一切都简化了。比如，你想放视频？不需要插件，直接用<video>标签就行；想画图？<canvas>标签让你像在画布上绘画一样；还有语义化标签，比如<header>、<footer>、<article>，这些标签让浏览器和搜索引擎更容易理解你的页面结构。这不仅仅是技术升级，更是设计理念的进化——让网页更智能、更环保、更易于访问。
我举个例子你就明白了。假设你要做一个简单的博客页面。在HTML4时代，你可能得用一堆<div>加上复杂的class命名来区分头部、内容和底部，代码写得自己都快不认识。但用HTML5，你可以直接写：
<header>这是我的博客标题</header>
<article>
<h1>第一篇文章</h1>
<p>这里是文章正文...</p>
</article>
<footer>版权所有 2026</footer>
看，是不是清晰多了？不仅代码简洁，而且结构一目了然。这对于新手来说，简直是福音。另外，HTML5还支持移动端友好，现在人人都有手机，你的网页在手机上看也要整齐美观，HTML5的天然优势让这点变得容易很多。
所以，学习HTML5不是赶时髦，而是站在巨人的肩膀上，用最现代、最实用的方式进入网页世界。记住，HTML5是基础，后面咱们要学的CSS和JavaScript都是建立在它之上的。今天，咱们先稳稳地扎好这个根。
网页的基本结构：理解HTML文档的骨架
好，接下来咱们进入正题。每个HTML页面都有个标准的结构，就像盖房子要先打地基、立框架一样。你得知道这些基本结构，不然代码写出来浏览器也会懵。
一个最基础的HTML5文档长这样：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>这是我用HTML5做的第一个网页。</p>
</body>
</html>
我来一行一行解释，别嫌啰嗦，细节很重要。
第一行<!DOCTYPE html>，这叫文档类型声明。它告诉浏览器：“嘿，我用的是HTML5标准，别用老一套来解析我。”这不是可有可无的，很多浏览器如果没有这个声明，可能会进入“怪异模式”，导致页面显示混乱。所以，永远记得加上它。
第二行<html lang="zh-CN">，这是HTML文档的根元素。所有网页内容都包裹在这个标签里面。lang="zh-CN"表示语言是简体中文，这对搜索引擎和屏幕阅读器（帮助视障人士浏览网页的工具）特别重要。它能让你的网页更国际化，也更友好。
第三行到第六行是<head>部分，这里存放的是页面的“元数据”。元数据就是关于页面的信息，用户直接看不到，但浏览器和搜索引擎需要它。
<meta charset="UTF-8">：这行设置字符编码为UTF-8。UTF-8能支持几乎所有语言的字符，包括中文、日文、韩文等。如果不设置这个，你的网页在显示中文时可能会变成乱码，那可太糟糕了。<meta name="viewport" content="width=device-width, initial-scale=1.0">：这行是响应式设计的核心。它告诉浏览器：“页面宽度要匹配设备的屏幕宽度，初始缩放比例是1.0。”有了这行，你的网页在手机、平板、电脑上都能自动调整布局，不会出现内容太小或需要水平滚动的情况。对于新手来说，这行代码是必须的，能帮你省去后期很多麻烦。<title>我的第一个网页</title>：这是页面的标题，会显示在浏览器标签页上。当用户把你的网页加为书签时，看到的也是这个标题。所以，起个好标题很重要，它就像你网页的“名片”。
第七行到第十行是<body>部分，这是网页的“身体”，用户能直接看到的一切内容都在这里。比如那个<h1>标题和<p>段落。你以后写的所有文字、图片、链接，都会放在<body>里面。
理解了这个结构，你就有了写任何HTML页面的基础模板。你可以把它当成一个固定格式，每次新建网页时，先把这个框架复制过来，然后再往里填充内容。这样既高效，又不容易出错。
核心标签详解：从标题到段落，从列表到链接
现在，咱们来认识HTML里最常用的标签。标签就像工具箱里的工具，每个工具都有特定的用途。HTML5有很多标签，但咱们先从最核心的开始，保证你能覆盖80%的日常需求。
文本相关标签
标题标签：
<h1>到<h6>。<h1>是最大的标题，<h6>是最小的。一般用来做文章的主标题、副标题。比如：<h1>这是我的主标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3>记住，一个页面通常只有一个
<h1>，这样有助于SEO（搜索引擎优化）。标题之间要有层次感，不能乱用。段落标签：
<p>。用于包裹一段文字。比如：<p>这是第一段文字。HTML5让网页设计变得更简单了。</p>段落之间会自动有间距，你不需要手动加空行。
强调标签：
<strong>和<em>。<strong>表示重要内容，浏览器通常会加粗显示；<em>表示强调，通常会倾斜显示。它们不仅有样式作用，还有语义意义，告诉搜索引擎和辅助技术这段内容很重要或需要强调。<p>HTML5 <strong>非常重要</strong>，你应该 <em>认真学习</em>。</p>换行和水平线：
<br>是换行标签，<hr>是水平分割线。比如：<p>第一行<br>第二行</p> <hr>
列表标签
列表是展示一组相关信息的绝佳方式。HTML5有两种列表：无序列表和有序列表。
无序列表：用
<ul>包裹，每个列表项用<li>。比如：<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul>浏览器会自动在前面加圆点。
有序列表：用
<ol>包裹，每个列表项用<li>。比如：<ol> <li>第一步：打开浏览器</li> <li>第二步：输入网址</li> <li>第三步：按回车</li> </ol>浏览器会自动编号。
列表可以嵌套，比如在一个有序列表里套一个无序列表，形成多级结构。这在制作导航菜单或步骤说明时非常有用。
链接和图片
链接：用
<a>标签，href属性指定链接地址。比如：<a href="https://www.example.com">点击这里访问示例网站</a>如果想在新的标签页打开链接，可以加
target="_blank"：<a href="https://www.example.com" target="_blank">在新标签页打开</a>链接是网页的“筋脉”，把各个页面连接起来，形成网状结构。
图片：用
<img>标签，src属性指定图片路径，alt属性提供替代文本（当图片无法显示时，或者屏幕阅读器读取时用到）。比如：<img src="photo.jpg" alt="一张美丽的风景照">记得给图片加
alt描述，这不仅对无障碍访问重要，也能提升SEO。如果图片只是装饰性的，可以用空alt=""。
语义化标签：HTML5的革命性进步
前面我提到了语义化标签，现在详细说说。HTML5引入了一组专门用来描述页面结构的标签，让代码更有意义。
<header>：页面的头部，通常包含logo、导航、标题等。<nav>：导航链接区域。<main>：页面的主要内容区域，每个页面最好只有一个<main>。<section>：表示文档中的一个独立部分，比如一个章节。<article>：表示一篇独立的文章，比如博客帖子、新闻。<aside>：侧边栏，内容与主内容相关但不是主体。<footer>：页面底部，包含版权信息、联系方式等。
举个例子，一个博客页面的结构可以这样写：
<header>
<h1>我的博客</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>第一篇博客</h2>
<p>这是博客正文内容...</p>
</article>
<article>
<h2>第二篇博客</h2>
<p>这是另一篇博客内容...</p>
</article>
</main>
<aside>
<h3>最新文章</h3>
<ul>
<li><a href="#">文章一</a></li>
<li><a href="#">文章二</a></li>
</ul>
</aside>
<footer>
<p>版权所有 © 2026</p>
</footer>
你看，这样的结构不仅清晰，而且搜索引擎非常喜欢，因为它们能轻易理解页面的逻辑。对于新手来说，多使用这些语义化标签，能让你的代码更专业，也更易于维护。
布局与样式基础：让网页看起来更美观
光有结构还不够，网页还得好看。这就需要我们引入样式。在HTML5时代，CSS（层叠样式表）是控制样式的标准工具。虽然CSS是一门独立的语言，但咱们可以边学HTML边接触基础CSS，这样你能更快看到效果，保持学习动力。
什么是CSS？
CSS用于描述HTML元素如何显示在屏幕上。它负责颜色、字体、大小、间距、布局等视觉方面。没有CSS，网页就像黑白素描，只有文字；有了CSS，网页就变成了一幅色彩斑斓的画。
CSS有三种引入方式：
- 内联样式：直接在HTML标签的
style属性里写。比如：<p style="color: red;">红色文字</p>。不推荐大量使用，因为会让HTML和CSS混在一起，难以维护。 - 内部样式表：在
<head>里用<style>标签包裹CSS代码。适合单个页面简单的样式。 - 外部样式表：创建一个单独的.css文件，然后在HTML中用
<link>标签引入。这是最推荐的方式，因为样式可以复用，文件结构清晰。
咱们用外部样式表来演示，这是专业开发者的标准做法。
基本CSS选择器和属性
选择器用来告诉CSS哪些HTML元素要应用样式。常见的选择器有：
- 元素选择器：直接选标签，比如
p { color: blue; }会让所有段落变成蓝色。 - 类选择器：用
.开头，比如.highlight { background: yellow; }，然后HTML里加class="highlight"。 - ID选择器：用
#开头，比如#header { font-size: 24px; }，然后HTML里加id="header"。ID应该是唯一的。
基础属性示例：
color：文字颜色。background-color：背景颜色。font-size：字体大小。margin：外边距（元素外部的空间）。padding：内边距（元素内部的空间）。border：边框。
举个例子，假设我们有个简单的页面结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式基础练习</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>我的样式页面</h1>
</header>
<main>
<p class="intro">这是一个段落，使用了类选择器。</p>
<div id="box">这是一个盒子，使用了ID选择器。</div>
</main>
</body>
</html>
然后，在styles.css文件中：
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
.intro {
color: #555;
font-size: 18px;
line-height: 1.6;
}
#box {
background-color: #fff;
border: 2px solid #ccc;
padding: 20px;
margin-top: 20px;
}
这样，页面就有了基本的样式。你可以看到，CSS让网页瞬间变得专业。记住，样式是叠加的：如果多个选择器匹配同一个元素，浏览器会根据优先级和顺序来决定用哪个样式。稍后我会提到优先级，但现在先熟悉这些基本概念。
盒模型：理解布局的核心
盒模型是CSS布局的基础。每个HTML元素都可以看作一个盒子，这个盒子有四层：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。
- 内容区：元素实际显示的内容，比如文字或图片。
- 内边距：内容区和边框之间的空白，增加元素的“呼吸感”。
- 边框：围绕内边距的线条，可以自定义样式、颜色和宽度。
- 外边距：盒子与其他元素之间的空白，用于控制间距。
举个例子：
.box {
width: 300px;
height: 200px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
这个.box元素总宽度会是300 + 20*2 + 1*2 + 10*2 = 362像素（因为左右都有padding和margin）。理解盒模型对布局至关重要，它能帮你精确控制元素的位置和大小。
基础布局方法：从浮动到Flexbox
早期网页布局常用“浮动”（float）和“清除浮动”，但这种方法复杂且容易出错。现代CSS推荐使用Flexbox或Grid布局，它们更直观、更强大。咱们先学Flexbox，因为它最适合做一维布局（比如一行或一列）。
Flexbox的核心是容器和项目。你在容器上设置display: flex;，然后就可以控制项目的排列、对齐、间距等。
示例：做一个简单的导航栏
<nav class="navbar">
<a href="#" class="nav-item">首页</a>
<a href="#" class="nav-item">关于</a>
<a href="#" class="nav-item">联系</a>
</nav>
.navbar {
display: flex;
justify-content: space-around; /* 项目之间均匀分布 */
background-color: #333;
padding: 10px;
}
.nav-item {
color: white;
text-decoration: none;
padding: 10px 20px;
}
.nav-item:hover {
background-color: #555;
border-radius: 5px;
}
这样，导航项就会水平排列，中间有均匀间距，而且鼠标悬停时会有交互效果。Flexbox还有很多属性，比如align-items控制垂直对齐，flex-direction改变排列方向（行或列），flex-wrap允许项目换行。这些都需要在实践中慢慢熟悉。
记住，布局不是一蹴而就的。多试错，多查看浏览器开发者工具（按F12打开），观察每个元素的尺寸和位置，你会进步很快。
实战项目：动手制作你的第一个网站页面
理论学再多，不如动手做一遍。现在，咱们来做一个完整的实战项目：一个简单的个人介绍页面。这个页面会包含