0

只是试图掌握使用语义正确的 XHTML 标记的窍门。

只需为一个小的导航项编写代码。每个按钮都有有效的标题和描述。因此，我认为定义列表会很棒，所以我写了以下内容

<dl>
    <dt>Import images</dt>
    <dd>Read in new image names to database</dd>

    <dt>Exhibition Management</dt>
    <dd>Create / Delete an exhibition </dd>

    <dt>Image Management</dt>
    <dd>Edit name, medium and exhibition data  </dd>
</dl>

但是...我希望上面是 3 个按钮，每个按钮包含 dt 和 dd 文本。我怎样才能用正确的代码做到这一点？通常我会将每个按钮设为一个 div 并将其用于可视按钮行为（onHover 和当前页面选择内容）。

请有任何建议

谢谢

4

3 回答 3

6 
<ul>
    <li><a href="#" title="Read in new image names to database">Import images</a></li>
    <li><a href="#" title="Create / Delete an exhibition">Exhibition Management</a></li>
    <li><a href="#" title="Edit name, medium and exhibition data">Image Management</a></li>
</ul>

这已经足够好了。用于<dl>导航不是很聪明。或在描述中使用<span>内部<li>。<dd>会让你很头疼，因为它们不在里面<dt>，也不关心它的位置和样式

于 2010-06-14T16:36:45.547 回答
1

我对使用您的术语“按钮”感到有些困惑。如果你的意思是一个链接，那么你可以这样做：

<a href="dest.html" title="Read in new image names to database">Import images</a>

但是，如果您指的是输入标签，那么执行此操作的一种方法是使用 input type=image 然后提供 alt 描述。

例如：

<input type="image" src="image.jpg" value="Import images" alt="Read in new image names to database"/>
于 2010-06-14T16:39:20.930 回答
0

您可以使用<label>元素而不是<dt>元素：

<ul>
    <li>
        <a href="#">
            <label for="import-images">Import images</label>
            <span id="import-images">Read in new image names to database</span>
        </a>
    </li>
    <li>
        <a href="#">
            <label for="exhibition-management">Exhibition Management</label>
            <span id="exhibition-management">Create / Delete an exhibition</span>
        </a>
    </li>
    <li>
        <a href="#">
            <label for="image-management">Image Management</label>
            <span id="image-management">Edit name, medium and exhibition data</span>
        </a>
    </li>
</ul>

...元素的for属性<label>只需要匹配id文档中另一个元素的属性即可。

于 2010-06-14T16:44:04.407 回答