HTML基本结构框架代码

一份HTML文档的骨架，永远只有三根骨头：<html>、框架<head>、代码<body>。基本结构别嫌它简单——你写的框架每个网页，无论复杂到React应用还是代码简单到个人名片，最终都得塌缩成这三层结构。基本结构我见过不少新手把CSS样式直接堆在<body>里，框架浏览器虽然不报错，代码但维护起来像在垃圾堆里找钥匙。基本结构

先看最外层的框架<html>标签。它有两个属性值得记住：lang和dir。代码前者告诉搜索引擎和屏幕阅读器“这页面是基本结构中文还是英文”，后者定义文字方向。框架我调过无数个页面，代码发现很多开发者漏写lang="zh-CN"，结果Chrome的翻译插件老是弹窗问“此页面是否为英文？”。烦人，但完全能避免。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>页面标题</title> </head> <body> <!-- 可见内容放这里 --> </body> </html>

第二层<head>是个“后台办公室”。这里放的东西用户看不见，但每一样都影响体验：<meta charset="UTF-8">负责让中文不乱码，我见过有人忘了这行，整个页面变成“锟斤拷”军团，那画面太美不敢看。<title>决定浏览器标签栏的文字，SEO的命根子。还有样式表、字符集、视口设置——全挤在这个小房间里。

第三层<body>才是真正的舞台。所有文本、图片、按钮、视频，全部铺在这里。有意思的是，<body>里可以嵌套<div>、<article>、<section>这些语义化标签，但无论怎么嵌套，浏览器渲染时都会把它们当成<body>的子元素。有一次我调试一个诡异布局，折腾半天发现是某个<section>没闭合，结果整个页面结构错乱——HTML对标签闭合的宽容度很低，别信“浏览器会自动修复”这种鬼话，它修出来的结构八成不是你想要的。

很多人问：这框架代码到底死板到什么程度？我实测过，删掉<!DOCTYPE html>这一行，页面会进入“怪异模式”，CSS的盒模型计算直接崩掉，padding和margin的算法跟标准模式差一大截。那感觉就像你按国际标准建了个房子，突然有人把地基图纸抽走，墙还是那堵墙，但门框全歪了。

写代码这么多年，我逐渐把这三层结构当成一种“纪律”。<html>是承诺——告诉机器“我这是网页”；<head>是准备——把该交代的都交代清楚；<body>是行动——把内容摊开给人看。哪天你看到有人把