Question

建筑物（博物馆）有7个等级（+3到-3），每个等级分为不同的房间/区域。将鼠标悬停在某个区域上会显示一个描述该区域的弹出窗口。

我正在寻找能准确代表7个级别及其区域的标记。该计划应该是有意义的，并且可以在没有任何CSS / JS的情况下“导航”。

编辑：有些澄清，标记只需要代表建筑的“语义结构”，而不是空间布局（CSS将在布局和图形中添加）。

Answer 1

闻起来像是一个嵌套的无序列表。

Answer 2

听起来像SVG的工作？（Sample Adobe Building in San Jose）

我意识到这确实使用了JavaScript，但如果你有7层* 10+房间？使用纯CSS会变得相当毛茸茸。您可以使用一些<ul>元素来创建嵌套级别的房间，但如果建筑物很大，我认为列表（即使呈现为块）也不会有意义查看。

Answer 3

查看microformats，特别是XOXO Microformat。

Answer 4

使用HTML5（但如果您想使用HTML 4.01，则不应该有很大的不同）：

如果您想用图片代表建筑物，可以使用Image Map，map和area。 area（href属性）可以链接到包含会议室详细说明的页面。 alt属性可能包含房间的简短描述，例如“草莓房（4级）”。

如果标记更像是文本替代（例如，如果您使用object，canvas或类似的东西），我会使用标题结构：

<section>
 <h1>The building</h1>

 <section id="level-1">
  <h1>Level 1</h1>

   <section id="level-1-room-1">
    <h1>Room 1</h1>
    <p>description of room 1</p>
   </section>

   <section id="level-1-room-2">
    <h1>Room 2</h1>
    <p>description of room 2</p>
   </section>

 </section> <!-- #level-1 -->

 <section id="level-2">
  <h1>Level 2</h1>

   <section id="level-2-room-1">
    <h1>Room 1</h1>
    <p>description of room 1</p>
   </section>

   <section id="level-2-room-2">
    <h1>Room 2</h1>
    <p>description of room 2</p>
   </section>

 </section> <!-- #level-2 -->

</section>

（对于HTML 4.01，您可以使用div代替section并相应地调整标题级别。

您如何使用语义HTML标记建筑计划/地图？

4 个答案: