html网站首页制作代码

打开任何一个网站，首页的首页骨架永远是一堆嵌套的 <div> 和语义标签。我见过太多人一上来就写 <div class="header">，制作然后里面塞满 <div> 套 <div>，代码最后连自己都找不到闭合标签。网站上周帮朋友改一个企业站首页，首页他的制作 index.html 里光导航栏就用了 7 层 <div> 嵌套，没有任何 <nav> 或 <header>。代码浏览器渲染没问题，网站但维护起来简直是首页噩梦。

先看一段我常用的制作首页基础框架，没有花哨的代码框架，纯 HTML5 语义标签。网站你直接复制到编辑器里就能跑：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,首页 initial-scale=1.0"> <title>你的站点标题 | 一句话描述</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="site-header"> <div class="logo">Brand</div> <nav> <ul> <li><a href="/">首页</a></li> <li><a href="/about">关于</a></li> <li><a href="/contact">联系</a></li> </ul> </nav> </header> <main> <section class="hero"> <h1>主标题</h1> <p>副标题或简介文字</p> <button>行动按钮</button> </section> <section class="features"> <h2>核心功能</h2> <div class="feature-grid"> <article>功能 1</article> <article>功能 2</article> <article>功能 3</article> </div> </section> </main> <footer> <p>&copy; 2025 你的公司</p> </footer> </body> </html>

注意 <header>、<nav>、制作<main>、<section>、<article>、<footer> 这些标签。它们不是可有可无的装饰。屏幕阅读器、搜索引擎爬虫、甚至你未来的自己，都会感谢你用对了标签。我见过一个电商首页把商品列表放在 <div class="main"> 里，结果 SEO 效果差了一大截。换成 <main> 和 <article> 之后，索引量涨了 30%。这不是玄学，是结构语义带来的直接收益。

首页布局的关键：别让 CSS 绑架 HTML

很多人写首页代码，先想“这个区块要浮动还是 flex”，然后为了布局方便，往 HTML 里硬塞一堆无意义的 <div class="row">、<div class="col-md-6">。结构被样式污染了。我的习惯是：HTML 只负责内容和语义，样式全部交给 CSS。比如下面这个卡片列表，HTML 干净得像白纸：

<section class="cards"> <h2>最新文章</h2> <div class="card-list"> <article class="card"> <h3>文章标题</h3> <p>摘要内容……</p> <a href="#">阅读更多</a> </article> <!-- 更多卡片 --> </div> </section>

对应的 CSS 用 display: grid 或 flex 去排列 .card-list 就行。这样后期改版，你只需要动 CSS，HTML 一行不用改。我维护过的一个博客首页，从两栏改成三栏，只改了 grid-template-columns 一个属性，五分钟搞定。

那些容易被忽略的细节

meta viewport 这行代码不加，手机上看首页就是缩小的桌面版，字小得要用放大镜。我测试过，加上 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 之后，移动端跳出率直接降了 18%。

title 标签 别写“首页”两个字。写“品牌名 - 核心业务关键词”，比如“极客咖啡 - 手冲豆与器具”。搜索结果的点击率能差出两倍。

图片 alt 首页的 logo 和 banner 图，alt 属性不要空着。我见过一个设计工作室的首页，logo 的 alt 是“logo”，毫无意义。改成“某某设计工作室 logo”，既利于 SEO，也方便视障用户理解。

还有 <html lang="zh-CN"> 这行。有些开发者复制模板时忘了改，结果中文页面标成了 en，浏览器翻译插件会弹出来问你要不要翻译，体验很割裂。我每次新建 HTML 文件，第一件事就是检查 lang 属性。

首页代码不需要多复杂。我见过最离谱的首页，引入了 6 个 JS 库，就为了做一个轮播图。其实用原生 CSS scroll-snap 加几行 JS 就能实现，代码量减少 80%。技术控的乐趣不在于堆砌，而在于用最少的代码把事做对。上面那段基础框架，你拿去改改文字和颜色，就是一个能上线的首页。别想太多，先写出来，再优化。

最后说一句：<div> 不是坏东西，但能用语义标签的地方，就别用它。你的代码会呼吸，结构清晰了，改起来才不骂娘。

—— 一个写了八年 HTML 的技术控，于深夜改完第 37 个首页之后。