幼儿园前端 #04：网页也有“脑子”？5分钟看懂 HTML 标准骨架

2026-01-14 32 阅读2分钟

前言：大家好，我是[小奇腾]。欢迎来到 “幼儿园前端” 第 4 集！上一集我们聊了标签和标签的嵌套结构，也认识了h1、div等标签。虽然浏览器都可以显示，但是这并不是标准的。一个标准的网页需要有头(head)、有身体(body)、还有身份证(DOCTYPE). 今天我们来解剖一下：一个标准的网页骨架到底长什么样！

本期详细的视频教程bilibili：幼儿园前端 #04：网页也有“脑子”？5分钟看懂 HTML 标准骨架

一、不需要背代码，只需要一个感叹号！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

在vscode编辑器中输入感叹号!然后按下 Tab 键就会生成标准骨架
不需要背，但是要看得懂

二、骨架解剖学：网页的”五脏六腑“

<!DOCTYPE html> -- 身份证🆔

他永远在第一行
作用：这不是一个标签，是一个声明，告诉浏览器：“我是HTML5的标准网页，请用最新的模式来渲染我，不要用过时的IE模式”

<html></html> -- 整个身体🚶

作用：根元素，所有代码除了（第一行的声明），其他的都必须包含在<html>里面
lang="en"：告诉浏览器这个页面是英文的
- 小技巧：做中文网站的时候，建议改成 <html lang="zh-CN">。这样浏览器就不会老弹窗问你是否需要翻译此页面。

-- 脑子🧠

特点：隐形的，写在这里的东西。用户在页面上是看不到的
作用：装给浏览器和搜索引擎看的信息
- <meta charset="UTF-8": 防乱码神器，告诉浏览器用“万国码”来读文字，否则中文可能变成乱码显示在页面
- <meta name="viewport" content="width=device-width, initial-scale=1.0"> ：viewport (视口设置) ：防缩水神器。如果不写这行，你的网页在手机上打开时，字会变得像蚂蚁一样小（因为手机会把它当成电脑网页强行缩放）。写了它，就是告诉手机：“我是专门为你设计的，请按 1:1 正常显示，不要瞎缩放。”
- <title>：网页标题，就是浏览器标签页上显示的几个文字（比如：“百度一下，你就知道”）
- <style>/<script>: 指挥身体的 CSS 代码和 JS 脚本通常也放在脑子里。

<body> -- 躯干💪 特点：可见装什么：给用户看的东西（图片、文字、按钮、视频），一定要写在<body>里面

三、总结

HTML = 整个人
Head = 脑袋（思考用的，装配置，页面上看不见）
Body = 身体（展示用的，穿衣服、戴首饰都在这）

四、动手实战：修改你的第一张“名片”

打开 VS Code，用 ! 生成骨架，

改语言：把 lang="en" 改成 lang="zh-CN"。
改标题：把 <title>Document</title> 改成 <title>我的个人主页</title>。
- 观察：保存后，看浏览器的标签页名字是不是变了？

写内容：在 <body> 标签里写一行字：

<body>
    <h1>这是我的身体，大家都能看见！</h1>
</body>