Question

尝试使用语义正确的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和当前页面选择内容）。

请提出任何建议

由于

Answer 1

<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>里面而且不关心它的位置和造型

Answer 2

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

<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"/>

Answer 3

您可以使用<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即可。

语义上正确的XHTML标记

3 个答案: