打开任何一个网页，框架右键查看源代码，代码第一行几乎都是框架<!DOCTYPE html>。这行声明告诉浏览器：用标准模式渲染，代码别掉进怪异模式的框架坑里。少了它，代码某些老浏览器会按自己的框架脾气乱来，盒模型算出来的代码宽度能让你怀疑人生。

框架代码说白了就三样东西：文档类型声明、框架<html>根元素、代码以及里面的框架<head>和<body>。结构简单到用记事本都能敲出来。代码但越是框架简单的东西，越容易被人写歪。代码

head里装什么

<head>不显示在页面上，框架但决定了页面怎么被解析、怎么被搜索到、怎么在不同设备上缩放。<meta charset="UTF-8">必须放在最前面——我有次偷懒把它挪到<title>后面，中文标题直接变乱码，排查了十分钟才反应过来。

<meta name="viewport" content="width=device-width, initial-scale=1.0">这行在移动端是命根子。不写它，手机上打开的页面会缩成一个指甲盖大小，用户得双指放大才能看清字。2010年之前的网页基本都没这行，所以那时候手机上网体验极差。

<title>标签的内容会出现在浏览器标签页和搜索结果里。别写“首页”或者“欢迎光临”，写具体的东西。比如“HTML框架代码 - 技术笔记”就比“我的网站”强得多。

body才是干活的地方

<body>里面放用户能看到的一切。文字、图片、按钮、视频，全在这儿。框架代码本身不负责布局，那是CSS的事。但HTML负责语义——<header>、<nav>、<main>、<footer>这些标签不是摆设，屏幕阅读器靠它们理解页面结构。

很多人图省事，整个页面全用<div>堆出来。能跑，但搜索引擎和辅助设备读起来费劲。我见过一个政府网站，导航栏用<div class="nav">，正文用<div class="content">，footer用<div class="footer">——class名起得挺对，但标签本身没传递任何语义信息。

一个能用的最小框架

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面标题</title> </head> <body> <h1>主标题</h1> <p>正文内容</p> </body> </html>

就这几行。保存成.html文件，双击就能在浏览器里打开。不需要服务器，不需要构建工具，不需要npm install。HTML的设计初衷就是让任何人都能写网页，这个初衷到现在也没变。

但“能跑”和“跑得好”是两码事。lang="zh-CN"这个属性很多人不写，影响的是屏幕阅读器的发音和浏览器翻译功能的判断。细节小，但该加就加。

框架代码不是背出来的

我刚开始学的时候，把框架代码抄在便签纸上贴在显示器边框。敲了大概二十遍之后，手指就记住了。现在用VS Code，输入!按Tab键自动生成，但手写一遍仍然是最快的理解方式。

别在框架代码上花太多时间。它就是个容器，真正的内容在<body>里。容器搭对了，后面的事才有意义。