零基础也能做网页？十分钟搞懂HTML骨架，程序员老狼带你入门

唯一Chat

发布于 2026-08-25 08:57:47

370

文章被收录于专栏：陶士涵的菜地陶士涵的菜地

经常有朋友问我："老狼，我想知道网站是怎么做出来的，是不是特别难？"

说实话，没那么玄乎。今天咱们就从头开始，把做网页最核心的东西讲明白。

网页到底是怎么构成的？

你平时用浏览器打开的网站，微信点开的网页，扫二维码跳出来的页面——这些的基础单元，全都是网页。

而做网页最基础的东西就两个：

HTML：超文本标记语言，网页的骨架。相当于人的骨骼，决定了网页有什么内容、什么结构
CSS：层叠样式表，网页的皮肉。决定了文字多大、什么颜色、什么字体、排版长什么样

有这俩，网页就能出来了。

每个网页都有一套必写的骨架

不管网页简单还是复杂，基础结构都一样。我给大家拆解一下：

第一行：文档类型声明 <!DOCTYPE html>

注意这个不算标签，但每个网页都不能少。它的作用就是告诉浏览器："用 HTML5 的标准来解析这个网页"。

不写这行，大部分浏览器看着好像也没报错，但遇到各种版本的浏览器，页面就可能解析错乱，显示得乱七八糟。所以第一行一定要写上。

<html> 标签：整个网页的根容器

这是双标签，有开始也有闭合。网页所有的内容，全部要包裹在 <html> 和 </html> 中间。

<head> 标签：网页头部

这里放的是不直接显示在页面上的内容，比如网页标题（<title>）、编码设置、样式引用等。你在浏览器标签栏看到的文字，就是 <title> 控制的。

<body> 标签：网页正文

用户能看到的所有内容，都放在这里。标题、段落、图片、按钮——全部在 <body> 里面。

双标签的逻辑其实很简单

HTML 里的标签大多数是成对出现的，叫双标签：

开始标签：<标签名>
内容：写在开始和闭合标签中间
闭合标签：</标签名>，多了个斜杠

就这么个套路：把内容用前后一对标签包起来。掌握了这个逻辑，你就看懂一半的 HTML 代码了。

一个完整的最小网页长这样：

<!DOCTYPE html>

<html>

<head>

<title>我的网页标题</title>

</head>

<body>

<h1>页面上显示的大标题</h1>

</body>

</html>

就这么多。保存到电脑，双击打开，浏览器里就能看到你的网页了。

⚠️ 两个新手必看的坑

1. 输入法必须切英文

写代码的时候，中文输入法打出来的括号、尖括号都是中文符号，浏览器不认，直接报错。

2. 文件编码选 UTF-8

用记事本保存的时候，编码一定要选 UTF-8，不然中文会变成乱码。

写在最后

HTML 入门真的不难，核心就是记住这套骨架结构和双标签的用法。有了骨架，再用 CSS 去美化外观，一个像样的网页就出来了。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-08-24，如有侵权请联系 cloudcommunity@tencent.com 删除

入门