前言： 大家好，我是[小奇腾]。欢迎来到 “幼儿园前端” 第 12 集！ 撒花！🎉 今天是我们 HTML 基础篇的最后一集。 在之前的 11 集里，我们学会了用各种标签（h1, div, a, img, table, form）把网页的“身体”搭出来了。 但作为一个专业的网页，光有身体还不够，还得有“脑子”——也就是写在
<head>里的配置信息。 为什么有的网页在手机上字特别小？为什么有的网页能在百度排第一？ 秘密全在今天这集！
本期详细的视频教程bilibili：幼儿园前端 #12：HTML 完结篇！Head 里的秘密 —— 怎样让百度搜到你？
一、 必须背诵的一行代码：Viewport（视口）
还记得我们在第 04 集生成的骨架里，有这么一行“天书”吗？
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. 如果没有它（灾难现场）
手机浏览器会默认自己是“电脑屏幕”。 当你用手机打开网页时，它会把整个宽宽的页面缩小塞进手机里。 后果：字像蚂蚁一样小，用户必须用手指放大才能看清。
做测试的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视口测试</title>
<style>
/* 关键点：我们要强制搞一个很宽的盒子 */
.pc-layout {
width: 980px; /* 强制宽度 980像素（模拟以前的电脑网页） */
background-color: lightblue;
font-size: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="pc-layout">
<h1>这是一个给电脑看的宽页面</h1>
<p>
如果在这个页面没有加 Viewport 标签，手机浏览器会以为自己在显示一个宽屏电脑网页。
为了把这 980px 宽的东西塞进只有 375px 宽的手机里，
手机会“自作聪明”地把整个画面缩小不到原来的 1/3。
<br><br>
结果就是：你看这段字的时候，会觉得像蚂蚁一样小！
</p>
</div>
</body>
</html>
建议这里整个页签关闭后再去重新测试，不要在原来的页签上注释后再刷新
2. 加上它（秒变移动端）
width=device-width：告诉浏览器，“手机屏幕多宽，我的网页就多宽”，别硬撑。initial-scale=1.0：告诉浏览器，“初始缩放比例是 1:1”，别缩小。
结论：只要你想做给手机看，这行代码必须死死焊在
<head>里！
二、 SEO 三件套：讨好搜索引擎
SEO (Search Engine Optimization) = 搜索引擎优化。 说人话就是：怎么讨好百度和 Google，让别人搜关键词时，你的网站排在前面。
虽然 <title> 很重要，但搜索引擎还看重另外两个 <meta> 标签：
1. 网页描述 (description)
当你在百度搜索时，标题下面那段灰色的小字，就是在这里写的。
<meta name="description" content="幼儿园前端教程，专为新手打造，零基础学习 HTML 和 CSS，通俗易懂。">
- 作用：吸引用户点击。如果不写，百度会随机抓取你网页里的文字，可能语句不通。
2. 关键词 (keywords)
虽然现在 Google 不太看重这个了，但写上总比不写好。告诉搜索引擎你的核心业务是什么。
<meta name="keywords" content="前端, HTML教程, 编程入门, 零基础">
三、 网页的小头像：Favicon
你看浏览器的标签页（Tab）上，掘金有个蓝色的小几何图形，百度有个蓝色的爪子。这个小图标叫 Favicon。 如果你的网页没有它，就是一个土土的灰色地球。
怎么加？ 在 <head> 里加一行 <link>：
<link rel="icon" href="./favicon.ico">
注意：你需要准备一个叫 favicon.ico 或者 logo.png 的正方形小图片，放在代码旁边。
四、 总结：一个满分的 <head>
以后写网页，直接复制下面这套**“黄金头部”**，专业度瞬间拉满：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="这是一个超级棒的个人主页">
<meta name="keywords" content="个人主页, 简历, 作品集">
<link rel="icon" href="./logo.png">
<title>我的最终版 HTML 页面</title>
</head>
五、 HTML 篇 · 毕业感言 🎓
恭喜你！坚持看到了第 12 集。 现在的你，已经掌握了：
- ✅ 结构：h1-h6, p, div, span
- ✅ 列表：ul, ol, li
- ✅ 媒体：img (懒加载), a (跳转)
- ✅ 表格：table, tr, td
- ✅ 交互：form, input, button
- ✅ 配置：meta, title
现在的网页虽然“丑”了点（全是黑白文字），但它的骨架是标准的、语义是清晰的、功能是完整的。 这就像盖房子，我们已经把毛坯房盖好了！
