网页与前端 Web

「网页的骨架。我要的东西是放最上面、中间、还是右边，全靠它定。」

搭建网页内容结构的标记语言，决定一个页面里有什么、谁是谁、按什么顺序排。

「我想让我的网站能被别人用百度、谷歌搜到，最好排名还靠前一点。」

让搜索引擎能收录、能读对、再把你的页面排到结果前面的一整套做法。

「浏览器上面那个页签文字、搜出来那段小字、分享出去的标题卡片，都是从哪来的？」

写在页面头部、浏览器不直接显示正文里却能读到的那几行信息，决定标题栏和分享卡长什么样。

「网页的化妆师。告诉我哪里要居中、要不要留白、字多大、什么颜色，都归它管。」

负责网页「长什么样」的样式语言，控制颜色、间距、字体、布局这些视觉细节。

「同一个网页，电脑上好看，手机上一打开就乱成一团，能不能让它自己适应？」

让同一个页面根据屏幕宽度自动调整布局，一套代码适配电脑、平板、手机。

「我改了页面，但打开还是旧的，是不是它把我旧的页面存下来了？」

浏览器把访问过的网页资源存一份在本地，下次直接用旧的——省流量，但也让你看到旧页面。

「浏览器把网页变成一棵可以查看、可以改动的结构树，我让 AI「把标题改成红色」改的就是这棵树。」

浏览器加载网页后搭出来的「活结构树」，页面上的每个元素在树里都有一个位置。

「我想把链接发到微信/QQ/微博时，能带出一张好看的标题卡片和配图，而不是光秃秃一条网址。」

写在页面头部的一组标签，决定链接被转发到社交平台时显示的标题、描述和配图。

「让我的网站不只靠鼠标能用，键盘、读屏、还有色弱的用户也能用。」

让网站不依赖某一种输入或感官也能被所有人使用的一套标准。

「网页的「大脑」：点按钮会发生什么、数据怎么算、页面怎么跟着变，都是它说了算。」

让网页从「能看」变成「能动」的编程语言：点击、计算、存取数据、更新页面都靠它。

「把一块界面连同它的样子和反应打包成一块积木，哪里要用就搬一块，改一处全部跟着变。」

可复用的界面积木：界面 + 样式 + 行为打包成一块，写一次、用很多处。

「页面现在「记住」的数据：输入框里打了什么、开关是开是关、购物车有几件，页面长什么样全靠它。」

界面当前记住的数据集合：输入、开关、选中项、计数，页面按它来显示。