用html制作网站首页

我上周帮一个开花店的朋友重做了网站首页。她之前的制作网站首页面是五年前找人套的模板，打开要等三秒，用h页图片挤成一团，制作网站首手机上看字小得跟蚂蚁似的用h页。我花了三个晚上，制作网站首用纯手写的用h页HTML加一点CSS，把整个首页推倒重来。制作网站首做完后她盯着屏幕看了半天，用h页说了一句：“这页面怎么感觉这么轻？制作网站首”——对，“轻”就是用h页手写HTML最直观的回报：没有多余的框架拖累，代码自己就能呼吸。制作网站首

写一个首页，用h页核心不是制作网站首炫技，而是用h页搞清楚“这页到底要替谁说话”。花店的首页，第一屏必须是当季主推的花束照片，配一句“今日可送”的提示，下面直接放一个醒目的电话按钮。这些用HTML写起来并不复杂：一个<header>包住logo和导航，<main>里塞一张大图，<section>放三个拳头产品，最后<footer>写地址和营业时间。结构就这么简单，但很多人一上来就想着加轮播图、加弹窗、加粒子特效——结果首页变成了杂技表演，用户根本不知道眼睛该往哪儿放。

实际动手时，最容易被忽略的是语义化标签。我见过太多人用一堆<div>从头套到尾，那就像用纸箱搭房子——能住，但承重墙在哪儿没人知道。正确的做法是：<nav>给导航，<article>放独立内容块，<aside>搁次要信息。搜索引擎的爬虫晚上来你家串门时，就是靠这些标签认路的。你给爬虫指清楚路，它才愿意把你的页面顶到搜索结果前面去，这比花钱买广告位实在多了。

我朋友那花店首页，最费心思的是那张主图。她原图是店门口拍的，背景有电线杆和垃圾桶。我用Photoshop裁掉杂物，调亮了花色，然后压缩成WebP格式——体积比JPG小了将近一半，但肉眼几乎看不出差别。然后我直接在HTML里写：

<picture> <source srcset="flower.webp" type="image/webp"> <img src="flower.jpg" alt="今日主推：白玫瑰与尤加利叶花束" loading="eager"> </picture>

那行alt属性我改了六遍。刚开始写的是“花束照片”，后来改成“白玫瑰与尤加利叶花束——198元，含配送”。这不是给盲人朋友看的（虽然他们确实需要），更是给搜索引擎看的——你告诉它这张图是卖什么的，它才能把想买花的人带进来。细节就是这么抠出来的。

手机适配是另一个坑。我朋友以前那个模板，在手机上要双指缩放才能看清字。这次我用了最笨也最有效的办法：在<head>里加一行<meta name="viewport" content="width=device-width, initial-scale=1">，然后所有尺寸单位尽量用rem而不是像素。这样用户的iPhone屏幕多大，页面就自动长成多大。我测试时故意把浏览器窗口从宽拉到窄，看着文字和图片像水一样流动着重新排列，没有断裂，没有横向滚动条——那种顺畅感，比写出什么花哨的动画都让人舒坦。

最后说个反直觉的事：这个首页我几乎没有用JavaScript。就一个“点击拨打”的按钮，用了<a href="tel:138xxxx">，连事件绑定都省了。现代浏览器对纯HTML的响应速度是毫秒级的，你不需要为了一个下拉菜单就引入整个jQuery库。我朋友后来问：“这页面是不是太素了？”我说：“你开店是为了让人买花，不是为了让人夸你页面酷。”她想了想，当天下午就接到三通订花电话。

所以你看，用HTML做首页，本质上是一场做减法的练习。去掉花架子，去掉多余的动效，去掉层层嵌套的框架——留下的就是信息本身：你是谁，卖什么，怎么联系。这三件事说清楚了，页面就立住了。代码干净得像刚修剪过的花枝，每一行都有它存在的理由。

写完那个首页后，我养成了个习惯：每写一个标签，就问自己一句——“这行删了会不会影响用户看懂这个页面？”如果不会，那就删。这比任何优化技巧都管用。毕竟，HTML不是用来表演的，它是用来沟通的。就像你递出去一张名片，最重要的不是名片印得多精美，而是对方一眼就能看懂你是干嘛的。