Question

我必须显示以下元素：

First Name : (Fetched from Database)

Last Name  : (Fetched from Database)

User Name  : (Fetched from Database)

Address    : (Multiple line of Data Fetched from database)

我的问题是根据语义在这里使用哪些HTML元素？

dt dd是块级元素。我必须以内联方式显示标签及其值。

Answer 1

至于我，这完全取决于你。它可以是ol，例如在启动ASP.NET MVC 4项目中，或者如您所提到的dl - dt - dd或div第

Answer 2

从这里取得的例子：http://www.onextrapixel.com/2009/05/13/how-to-use-dl-dt-and-dd-html-tags-to-list-data-vs-table-list-data/
您可以在此处找到结果（演示）：http://www.onextrapixel.com/examples/dl-tags-vs-table/

使用dl，dt和dd;你可以得到这样的代码：

HTML

<dl>          
    <dt>Name: </dt>
    <dd>John Don</dd>

    <dt>Age: </dt>
    <dd>23</dd>

    <dt>Gender: </dt>
    <dd>Male</dd>

    <dt>Day of Birth:</dt>
    <dd>12th May 1986</dd>
</dl>

CSS

/*DL, DT, DD TAGS LIST DATA*/
dl {
    margin-bottom:50px;
}

dl dt {
    background:#5f9be3;
    color:#fff;
    float:left; 
    font-weight:bold; 
    margin-right:10px; 
    padding:5px;  
    width:100px; 
}

dl dd {
    margin:2px 0; 
    padding:5px 0;
}

使用普通表显示此数据，您将拥有：

HTML

<table>
    <tr>
        <td class="title">Name: </td>
        <td class="text">John Don</td>
    </tr>
    <tr>
        <td class="title">Age: </td>
        <td class="text">23</td>
    </tr> 
    <tr>
        <td class="title">Gender: </td>
        <td class="text">Male</td>
    </tr>     
    <tr>
        <td class="title">Day of Birth:</td>
        <td class="text">12th May 1986</td>
    </tr>
</table>

CSS

/*TABLE LIST DATA*/
table {
    margin-bottom:50px;
}

table tr .title {
    background:#5f9be3;
    color:#fff;
    font-weight:bold;
    padding:5px; 
    width:100px;   
}

table tr .text {
    padding-left:10px;
}

table vs dl, dt and dd

Answer 3

我可以争论两个给定的答案，<table>和<dl>，甚至争论关于<ol>的pro / con，以及<ul>，因为那是语义。无论您选择哪种路线，您都应该使用微格式，微数据或rdfa或它们的组合来增强您的标记。我将专注于微格式，因为它们非常容易实现，是在网络上部署最广泛使用的语义Web技术，并且我几乎在您现在所处的确切情况下使用它们。

豪华标记+微格式=现实世界语义或豪华标记+微观数据=现实世界语义以及豪华标记+ rdfa =现实世界语义。

您选择标记内容的任何元素，通过将html类（微格式）应用于它们，为其提供真正的语义，同时使其更易于访问和移植。它们也是简单的样式/交互钩子。在你的情况下，我会用hcard标记每个用户，然后为用户提供访问/查看/保存vcard的方式，而不是仅仅保存到你的桌面，因为大多数vcard实现都很糟糕。检查出来：
http://microformats.org

用于显示数据形式的HTML语义

3 个答案: