HTML零基础入门教学第一期：认识网页与搭建第一个网页-初晴小屋

660cea040c201619

前言

欢迎来到HTML零基础系列教学！本系列专为完全零基础、想入门网页开发的同学打造，全程不讲晦涩理论，只讲实用知识，手把手带你从0到1学会写网页、做接口页面、搭建个人网站。

本期是第一期，我们将彻底搞懂：HTML是什么、网页是怎么构成的、需要什么工具、亲手写出人生第一个完整网页代码。

一、什么是HTML？

HTML 全称超文本标记语言（HyperText Markup Language），是所有网页的基础骨架。

我们平时浏览的百度、抖音、个人网站、API页面，所有网页的底层都是HTML。

核心特点

1. 不是编程语言：没有逻辑运算、没有判断循环，是「标记语言」，用来搭建页面结构。

2. 纯文本格式：任何记事本都能编写，无需复杂软件。

3. 浏览器解析运行：写好的代码，用浏览器打开就能看到网页效果。

4. 所有前端、网站开发的入门必修课，PHP、JS开发都需要HTML基础。

二、网页的三层结构（必懂基础）

一个完整的网页，由三层技术组成，分工明确：

1. HTML（骨架）：搭建页面结构，比如标题、文字、图片、按钮、链接。

2. CSS（皮肤）：负责美化页面，颜色、大小、边距、布局、背景。

3. JavaScript（动作）：负责交互，点击跳转、弹窗、随机数据、动态效果。

本期只学HTML骨架，打好基础，后续逐步更新CSS、JS、PHP结合实战。

三、编写网页需要什么工具？

1. 极简工具（新手首选）

– 电脑自带：记事本/备忘录（所有电脑都有，零安装）

– 专业推荐：VS Code（免费、轻量、代码高亮、报错提示，开发必备）

建议：新手先用记事本熟悉代码，熟练后换VS Code提升效率

2. 运行工具

任意浏览器：Chrome、Edge、QQ浏览器均可，双击文件即可打开网页。

四、HTML固定基础结构（所有网页通用）

所有HTML网页，必须遵守固定骨架，缺一不可，这是行业标准：

<html lang="zh-CN<!-- 头部区域：存放网页配置、标题、参数，用户看不到 --><!-- 编码格式：防止中文乱码 -->
    <meta charset="UTF-8<!-- 网页标题：浏览器标签栏显示的文字 -->
    我的第一个网页</head><!-- 主体区域：用户所有能看到的内容，全部写在这里 -->
</body></html>

逐行详细`

文档声明，必须写在第一行，告诉浏览器使用最新HTML5标准解析页面网页的最外层根标签， lang=”zh-CN” 代表网页语言为**中文**<head>

网页头部，属于后台配置区，不会在页面显示任何内容，只负责设置网页属性`

重中之重：设置网页编码为万能UTF-8，不加这行中文一定会乱码。

5. “

设置浏览器顶部标签的标题，比如百度的“百度一下，你就知道”。

6.`

网页可视化区域，文字、图片、视频、按钮、API内容，全部写在body里面。

五、手把手实战：写第一个带内容的网页

我们在基础骨架上，添加文字、标题、段落，完成第一个完整可运行网页。

完整可直接复制代码

<meta charset="UTF-8">
    零基础HTML教学第一
<body>
<!-- 一级标题：页面大标题 -->
   <h1>欢迎学习</h1<!-- 二级标题：小标题 -->
   <h2>本期核心</h2>

<!-- 段落标签：存放普通文字 -->
   <p>HTML是网页的骨架，所有网站、API页面、个人主页都是基于HTML搭建！<p>从零学习网页开发，轻松搭建属于自己的网站和</p>
</body>
</html>

六、代码运行步骤（新手必看）

1. 在电脑桌面新建文本文档

2. 打开文档，复制粘贴上面全部代码

3. 点击【另存为】，文件名填写： index.html

4. 编码选择：UTF-8（防止乱码）

5. 保存类型：所有文件

6. 保存后，桌面会出现一个网页图标文件

7. 双击文件，即可用浏览器打开你的第一个网页！

七、本期学习的3个核心标签<h1

` 标题标签

– h1：最大标题（一个页面建议只有1个）

– h2-h6：依次变小的小标题