网站框架代码

打开一个网站，网站浏览器背后跑的框架其实是一套结构。这套结构由HTML、代码CSS、网站JavaScript三种代码分工完成，框架各管各的代码事，谁也不越界。网站HTML负责内容骨架，框架CSS负责视觉呈现，代码JavaScript负责交互行为。网站三者叠在一起，框架才构成用户看到的代码那张页面。

先看HTML。网站它的框架角色是定义"页面上有什么"。一段导航栏、代码一张图片、一个按钮，在HTML里都是一个个标签节点。拿最常见的页面头部来说，代码通常长这样：

<header> <nav> <ul> <li><a href="/">首页</a></li> <li><a href="/about">关于</a></li> <li><a href="/contact">联系</a></li> </ul> </nav> </header>

这段代码没有任何样式，在浏览器里就是一列带下划线的蓝色文字。但它把页面的信息层级交代清楚了——有一个头部区域，里面有一个导航，导航里放了一个无序列表，列表中有三个链接。搜索引擎爬虫读的就是这层结构。很多人写HTML时习惯全用<div>，结果代码里几百个div嵌套，自己回头看都费劲。换成<header>、<nav>、<main>、<article>这些语义标签，可读性立刻不同。

CSS接在HTML后面，决定这些东西怎么摆、什么颜色、多大尺寸。它通过选择器找到对应的HTML元素，然后施加规则。比如给上面的导航加横向排列和间距：

nav ul {  display: flex; gap: 24px; list-style: none; } nav a {  text-decoration: none; color: #333; font-size: 15px; } nav a:hover {  color: #0066cc; }

三行属性就把竖排列表变成了横排导航，去掉了圆点和下划线，还加了悬停变色。CSS的写法现在主流用Flexbox和Grid做布局，早年靠float和position硬撑的时代基本过去了。一个实际经验：Flexbox处理一维排列（一行按钮、一列卡片）非常顺手，Grid处理二维网格（整页布局、图片墙）更合适。混着用没问题，别硬用一种去覆盖所有场景。

JavaScript是第三层。页面加载完之后，用户点击、滚动、输入，这些动作都需要JS来响应。比如给导航加一个移动端的汉堡菜单展开逻辑：

const toggle = document.querySelector('.menu-toggle'); const navList = document.querySelector('nav ul'); toggle.addEventListener('click', () => {  navList.classList.toggle('open'); });

点击按钮，切换一个class，CSS里再定义.open状态下的显示样式。JS不直接改样式，而是改状态，样式交给CSS处理。这个思路叫做关注点分离，维护起来省事很多。

三层各司其职，但实际项目里往往不止这些。构建工具、框架、包管理器会叠上来。React、Vue这类框架本质上还是在生成HTML、驱动CSS和JS，只是换了一种组织方式。理解原生这三层，再看框架就不会觉得是在学一门新语言。

一个容易踩的坑：HTML结构写得太深。见过一个页面，从body到最内层的内容标签，嵌套了十几层div。CSS选择器写得老长，JS查询节点也费劲。结构扁平一些，语义清晰一些，后面改起来少受罪。

网站框架代码没什么神秘的。打开开发者工具，Elements面板里看到的就是HTML，Styles面板里是CSS，Console和Sources里跑的是JS。想学的话，随便找一个喜欢的网站，右键查看源代码，顺着读一遍，比看教程快。