HTML5 网站开发完整教程
本教程将分为以下几个主要部分,你可以根据自己的节奏学习：
（图片来源网络，侵删）
- 第一部分：基础入门 - 了解 Web 是什么,以及如何搭建开发环境。
- 第二部分：HTML 核心基础 - 学习网页的骨架结构。
- 第三部分：CSS 样式美化 - 学习如何让网页变得美观。
- 第四部分：JavaScript 交互实现 - 学习如何让网页“动”起来。
- 第五部分：响应式设计与进阶 - 学习如何让网站适配各种设备。
- 第六部分：项目实战与资源 - 通过一个完整项目巩固所学,并提供学习资源。
第一部分：基础入门
什么是 HTML5？
- HTML (HyperText Markup Language) 是网页的骨架，定义了网页的内容和结构（比如哪里是标题，哪里是段落）。
- HTML5 是 HTML 的最新版本，它不仅包含了 HTML，还引入了新的语义化标签、多媒体支持、绘图 API 等强大功能，让开发更高效,体验更丰富。
开发环境准备
你只需要一个最简单的工具：文本编辑器。
-
推荐工具 (免费):
- Visual Studio Code (VS Code): 目前最流行的代码编辑器，插件丰富,对前端开发支持极佳。
- Sublime Text: 轻量、快速、经典。
- Notepad++ (Windows): 简单易用。
-
安装步骤:
- 下载并安装你选择的文本编辑器。
- （可选但强烈推荐）安装 Live Server 插件（以 VS Code 为例），这个插件可以让你在浏览器中实时看到代码修改后的效果,极大地提升了开发效率。
第二部分：HTML 核心基础
你的第一个 HTML 页面
在电脑上新建一个文件夹，my-website，在里面创建一个文件，命名为 index.html，用文本编辑器打开它,输入以下内容：
（图片来源网络，侵删）
<!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>这是一个段落，HTML 就这么简单！</p>
</body>
</html>
保存文件，然后用浏览器（如 Chrome, Firefox）打开它，恭喜你,你已经创建了你的第一个网页！
代码解析
<!DOCTYPE html>: 声明文档类型，告诉浏览器这是一个 HTML5 文档。<html lang="zh-CN">: 整个网页的根元素，lang属性用于指定网页的语言。<head>: 头部，包含网页的元数据（描述数据的数据），比如标题、字符编码、引入的样式表等,这些内容不会直接显示在页面上。<meta charset="UTF-8">: 指定字符编码为 UTF-8，可以正确显示中文、表情符号等。<meta name="viewport" ...>: 响应式设计的核心,确保在移动设备上能正确缩放。<title>: 显示在浏览器标签页上的标题。<body>: 主体,包含所有在页面上可见的内容。<h1>: 一级标题,最重要的标题。<p>: 段落标签。
常用 HTML5 语义化标签
HTML5 引入了许多语义化标签，让代码结构更清晰，对搜索引擎（SEO）和屏幕阅读器（无障碍访问）更友好。
<header>: 页面或区域的头部，通常包含 logo、导航等。<nav>: 导航链接区域。<main>: 页面的主要内容，一个页面中只有一个main。<article>: 独立的内容单元，比如一篇博客文章、一条新闻。<section>: 文档中的一个区域,通常有标题。<aside>: 侧边栏或与主要内容相关但独立的内容。<footer>: 页面或区域的底部，通常包含版权信息、联系方式等。
示例结构：
<body>
<header>
<h1>网站标题</h1>
<nav>
<a href="#">首页</a> | <a href="#">lt;/a> | <a href="#">联系</a>
</nav>
</header>
<main>
<section>
<h2>文章标题</h2>
<article>
<p>这里是文章的具体内容...</p>
</article>
</section>
</main>
<aside>
<h3>侧边栏</h3>
<p>这里是侧边栏内容...</p>
</aside>
<footer>
<p>© 2025 我的网站. 保留所有权利.</p>
</footer>
</body>
其他重要标签
- :
<h1>-<h6>(标题),<p>(段落),<strong>(强调),<em>(斜体强调)。 - 列表:
- 无序列表:
<ul>(列表),<li>(列表项)。 - 有序列表:
<ol>(列表),<li>(列表项)。
- 无序列表:
- 链接:
<a href="https://www.example.com">这是一个链接</a>。 - 图片:
<img src="image.jpg" alt="图片描述">。src是图片路径，alt是替代文本,非常重要！ - 多媒体:
- 视频:
<video src="movie.mp4" controls></video>(controls属性显示播放控件)。 - 音频:
<audio src="sound.mp3" controls></audio>。
- 视频:
第三部分：CSS 样式美化
HTML 负责结构，CSS (Cascading Style Sheets) 负责表现,即美化网页。
（图片来源网络，侵删）
如何引入 CSS
在 index.html 的 <head> 中添加：
<link rel="stylesheet" href="style.css">
然后在 my-website 文件夹中新建一个 style.css 文件。
CSS 基本语法
CSS 规则由 选择器 和 声明块 组成。
/* 选择器 { 属性: 值; 属性: 值; } */
p {
color: blue;
font-size: 16px;
}
p: 选择器，选择所有的<p>color: 属性,定义文字颜色。blue: 值,颜色的值。font-size: 属性,定义字体大小。
盒模型
理解 CSS 盒模型是布局的关键，每个 HTML 元素都可以看作一个盒子,包含：
- Content (内容): 文本或图片。
- Padding (内边距): 内容与边框之间的空间。
- Border (边框): 围绕内容和内边距的线。
- Margin (外边距): 盒子与其他元素之间的空间。
div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
/* 盒子的总宽度 = width + padding + border + margin */
}
常用布局方法
-
Flexbox (弹性盒布局): 一维布局模型，非常适合在容器中排列项目（如导航栏、卡片列表）。
.container { display: flex; /* 开启 Flexbox 布局 */ justify-content: space-between; /* 主轴对齐方式 */ align-items: center; /* 交叉轴对齐方式 */ } -
Grid (网格布局): 二维布局模型,非常适合复杂的页面整体布局。
.grid-container { display: grid; grid-template-columns: 1fr 3fr; /* 两列，第一份宽度，第二份三倍宽度 */ grid-template-rows: auto 1fr auto; /* 三行 */ gap: 20px; /* 网格间距 */ }
第四部分：JavaScript 交互实现
HTML 定义结构，CSS 美化外观，JavaScript 则负责行为和交互，比如响应用
