房源详情页核心是构建可信、易扫描、seo及无障碍友好的语义化html结构：用组织图片并配真实描述，用标记键值对信息，用提供静态地址与交通文字替代，确保弱网/无js/读屏器下信息完整可访问。
房源详情页的核心不是“怎么写HTML”，而是如何用HTML组织可信、易扫描、对搜索引擎和移动端友好的结构。直接堆图片、乱用<div>、忽略语义标签，会导致SEO差、读屏器无法理解、图片加载失败后信息全丢。
<h3>用<code><figure></figure>和<figcaption></figcaption>包房源主图，别只用<img>
单张<img src="...">没有上下文，搜索引擎和辅助技术不知道这张图在表达什么。房源主图必须说明“这是客厅实拍”还是“卧室朝南视角”。
- 把每张关键图（如客厅、厨房、外立面）用
<figure></figure>包裹，配<figcaption></figcaption>写简明描述，比如<figcaption>主卧实景｜朝南｜带飘窗</figcaption> - 避免在
alt里堆砌关键词，例如alt="北京朝阳区二手房出租 月租8500 公寓 房源详情页"——这会被判定为作弊；真实描述即可：alt="次卧实景，墙面浅灰，木地板，含嵌入式衣柜" - 如果图是轮播，确保每个
<figure></figure>独立可访问，不要把所有<img>塞进一个<div class="slider">里然后只给容器加<code>role="region"却不处理焦点和语义房源信息用
<dl></dl>不用<table>或一堆<code><p></p>面积、楼层、朝向、装修、产权年限这些是典型的“键-值对”，
<dl></dl>（description list）是HTML原生支持的语义化方案，比用<table>更轻量，比用<code><p><strong>建筑面积：</strong>89.5㎡</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>更利于机器解析。-
<dt></dt>放字段名（如<dt>挂牌时间</dt>），<dd></dd>放值（如<dd>2024-03-17</dd>），一对<dt></dt> <dd></dd>表示一个属性 - 避免用
<span class="label">总价</span><span class="value">620万元</span>这种纯CSS驱动的结构——没有语义，爬虫和读屏器无法建立关联 - 如果某字段有单位（如“得房率”），把单位放在
<dd></dd>内，不要写成<dd>72</dd> <span>%</span>，否则屏幕阅读器可能跳过单位
地图嵌入必须提供文字替代和静态位置信息
几乎所有房源页都嵌高德/百度地图，但一旦JS加载失败、用户禁用JS或使用命令行浏览器，地图区域就成白板——而地址、交通、周边这些关键信息却消失了。
- 在
<iframe></iframe>前或后，用<address></address>标签写标准地址：<address>北京市朝阳区建国路8号SOHO现代城B座1208室</address>，它本身就有语义（代表联系信息） - 补充步行可达的地铁站和距离，例如
<p>距国贸站A口步行约380米（约5分钟）</p>，不要只写“近地铁” - 如果用
<iframe></iframe>嵌地图，必须设title属性，如title="房源地理位置：北京市朝阳区建国路8号，周边含国贸地铁站、银泰中心、SKP商场"，否则读屏器只报“内联框架”
真正难的不是写出能显示的HTML，而是让每张图、每行数据、每个坐标点，在无JS、弱网、高对比度模式、甚至纯文本环境下，依然传递完整意图。很多页面上线后被投诉“打不开”“看不清”，问题常出在语义缺失，而非样式没调好。
-
