你花了3小时写出的第一个网页，在手机上打开时字体缩到蚂蚁大小。这不是你的错——某个藏在第7行的标签，90%的教程故意跳过不讲。
HTML（超文本标记语言）的入门教程是个经典陷阱：第一天扔给你50个标签当单词表背，第二天让你"照抄这段代码"。你复制粘贴时像在做手工，完全不懂为什么这里要加个斜杠，那里要套两层括号。结果页面崩了，你怀疑是不是自己不适合写代码。
真相是：HTML本身不难，难的是教学顺序完全反了。新手真正卡住的从来不是标签怎么写，而是标签之间怎么"对话"。这个认知没打通，背再多标签也是碎片。
把网页想象成盖房子
忘掉那些缩写。如果网页是一栋房子，HTML是砖墙和房间格局，CSS（层叠样式表）是刷漆和挑家具，JavaScript（脚本语言）是电灯开关。结构永远是第一步，没人先选沙发再砌墙。
HTML的核心叫"标签"——用尖括号包起来的小指令，比如
。绝大多数标签成双成对：开头
，结尾
，中间塞内容。这设计像括号，告诉浏览器"从这里到那里是一段"。
但标签本身只是砖块。真正让房子立起来的，是它们嵌套的规则——哪个包哪个，谁是谁的父级，这层关系搞错，页面直接塌。
每个网页的隐藏骨架
在写任何标题或段落之前，所有HTML页面必须以这段代码开场：
——这行告诉浏览器"按HTML5的现代规则来"，跳过它，浏览器就进入猜谜模式，猜错概率一半一半。
——把整个页面包起来。lang="en"这个属性悄悄告诉搜索引擎和屏幕阅读器"这是英文内容"，对SEO（搜索引擎优化）的影响比新手想象的大得多。
——页面后台控制室，访客看不见，但决定一切：
——访客实际看到的东西全在这里：标题、段落、图片、链接。
注意第4行那个——这就是让页面在手机上正常显示的开关。没它，手机浏览器会假装自己是桌面屏幕，把网页硬塞进小屏幕，字体缩成蚂蚁。大部分"零基础速成课"为了省时间，直接删掉这行演示，导致新手在真机上测试时集体懵圈。
你真正需要记住的标签
不用背字典。日常开发高频使用的标签就这几类：
标题层级：
到，数字越小字号越大。是一个页面的大标题，理论上只出现一次，像书的封面；是章节标题，是小节——这层级的嵌套关系，搜索引擎爬虫会拿来理解你的内容结构。
段落与文本：
包段落，加粗（表示重要性），斜体（表示强调）。别用和，那是旧时代的视觉标签，现代HTML要求语义化——标签说明"这是什么"，而不是"长什么样"。
链接与图片：创建超链接，href是目的地；插入图片，alt是给屏幕阅读器的文字描述，图片加载失败时也会显示，SEO和可访问性双收。
列表与容器：
无序列表（ bullet 点），
- 有序列表（数字），
- 是列表项；
是通用容器，本身无意义，用来包裹其他元素做布局——新手最容易滥用这个，把页面塞满无意义的
套娃，后期维护像拆炸弹。
那个让一切通顺的嵌套规则
现在回到开头的问题：为什么有些页面手机上看正常，有些崩成灾难？
答案在HTML的"文档对象模型"（DOM）结构里——浏览器把标签解析成一棵树，父子层级必须闭合正确。是树根，和是两根主枝，下面的标签层层分叉。交叉嵌套会直接导致渲染错误，而就是告诉浏览器"按设备实际宽度来画这棵树"。
很多新手写完代码用电脑浏览器测试，一切完美，发到手机上当场翻车。问题往往就是少了那行viewport设置，或者标签没闭合导致结构断裂。调试时浏览器开发者工具（F12）里的Elements面板，就是让你可视化这棵树哪里长歪了。
写HTML的最高境界，是让别人读你的代码时，能直接"看"到页面结构——标签的语义、层级、闭合位置，像建筑的承重墙一样清晰。到那一步，CSS和JavaScript才是加分项，而不是救火队员。
你现在打开自己写过的第一个HTML文件，检查第7行有没有那个viewport标签？如果没有，加上它，在手机刷新，告诉我字体是不是终于像人写的了。
热门跟贴