房产网站首页需用语义化html结构：header包品牌与导航，section包banner并配h2，main包房源列表且每项用article，footer嵌address放联系信息，确保可访问性、seo与性能。

直接说结论：房产网站首页不是堆图+导航就行，核心是让访客3秒内判断“这有没有我想要的房子”，所有结构、文案、跳转都得服务于这个目标。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

首页必须用 <header></header> 包住品牌区和主导航，别用 <div class="header"> <p>用户第一眼看到的是 logo、公司名、联系电话和顶部导航（如“新房”“二手房”“租房”“找经纪人”）。这些属于页面最顶层的全局性内容，语义上就是 <code><header></header>。用 <div> 套着不仅对 SEO 不友好，还会让读屏工具误判结构层级。 <ul> <li>常见错误：把 banner 轮播图也塞进 <code><header></header> —— banner 是首页内容的一部分，不是网站头部，应放在 <main></main> 内或紧随其后

正确做法：<header></header> 只含 logo、标语、电话、主导航；<nav aria-label="主导航"></nav> 包裹导航链接，加 aria-label 提升可访问性

兼容性注意：IE11 以下不支持 <header></header> 语义，但不影响渲染；若需兼容老版本，CSS 中仍要写 header { display: block; }

banner 轮播图必须用 <section></section> 包裹，并配 <h2></h2>

轮播图不是装饰，它是首页第一个信息触点，常承载“限时特价”“学区房上线”“VR 全景看房”等强动作引导。搜索引擎和辅助设备靠 <h2></h2> 理解这块在讲什么，裸图或仅用 <div> 会导致信息断层。 <ul> <li>错误示例：<code><div class="banner"><img src="..."></div> —— 没有上下文，无法被索引，读屏时只读“图片”，不读“主推三居室，首付20万起”

推荐结构：<section><h2>本周热门房源推荐</h2> <div class="carousel">...</div></section>

轮播组件本身建议用原生 JS 实现（避免 jQuery 依赖），关键帧切换用 CSS transform + transition，比 left 位移更流畅、更省性能

房源列表区块必须用 <main></main> 包裹，且每个房源项用 @#@#@#@#@#@#@#@#@#@0

注意：<address></address> 不能放公司简介或友情链接，只放联系人/地址/通信方式；多个联系人可用多个 <address></address>

最容易被忽略的是：首页所有语义标签（<header></header>、<main></main>、<section></section>、<article></article>、<footer></footer>）必须形成逻辑嵌套，不能交叉或遗漏。比如 <main></main> 里没 <section></section> 或 <article></article>，就等于告诉机器“这里没实质内容”——哪怕页面满屏房源图，也可能被降权或跳过解析。