标签: semantic-markup

我正在重新编码包含类似于此的图表的旧网站:

alt text http://dl.getdropbox.com/u/240752/rental-chart.gif

如何用纯HTML表示此图表？我不喜欢把它作为一个图像包含在内.

我正在考虑一个表,只是用图像替换,或者可能用绝对定位的表行覆盖,但我认为这可能有点脆弱.

欢迎任何建议.

从未在图像标记中使用过ismap属性.

提到http://www.w3schools.com/tags/tag_img.asp和它说

将图像指定为服务器端图像映射.很少用.请改用usemap

由于我是前端Web开发人员,我可能没有机会使用它.

任何服务器端的人都能对它有所了解吗？

阅读http://www.w3schools.com/tags/tag_noscript.asp后,对noscript标签上的onclick事件感到困惑.

有人知道这个目的吗？

如果没有目的,他们为什么要保留它？

感谢您提前得到任何答案.

请参阅/* Common Classes */本页的部分.

http://webdesign.about.com/od/css/a/master_stylesht_2.htm

这些css类是否适合在任何项目中使用？在语义方面？

/* Common Classes */

.clear { clear: both; }

.floatLeft { float: left; }

.floatRight { float: right; }

.textLeft { text-align: left; }

.textRight { text-align: right; }

.textCenter { text-align: center; }

.textJustify { text-align: justify; }

.blockCenter { display: block; margin-left: auto; margin-right: auto; } /* remember to set width */

.bold { font-weight: bold; }

.italic { font-style: italic; }

.underline { text-decoration: underline; }

.noindent { margin-left: …

该分频器列表的首选语义和可访问标记是什么？

我正在为项目使用jQuery mobile,它使用了这个标记

<ul data-role="listview" data-dividertheme="d" data-inset="true"> 
    <li data-role="list-divider">A</li> 
    <li><a href="index.html">Adam Kinkaid</a></li> 
    <li><a href="index.html">Alex Wickerham</a></li> 
    <li><a href="index.html">Avery Johnson</a></li> 
    <li data-role="list-divider">B</li> 
    <li><a href="index.html">Bob Cabot</a></li> 
    <li data-role="list-divider">C</li> 
    <li><a href="index.html">Caleb Booth</a></li> 
    <li><a href="index.html">Christopher Adams</a></li> 
</ul>

我认为对于分隔符(A,B,C ...)应该使用HTML标题标记.

我理解在HTML5上使用article,section和aside标签.在许多方面,这些标签似乎取代了我们在HTML/XHTML上使用的div标签.好吧,div标签也在HTML5上继续.我可以在何时何地使用div标签进行更多语义标记？

概要:我需要显示如下表格:

必要性:

• 语义HTML编码
• 没有脚本

HTML:

<table>
<thead>
    <tr>
        <th colspan=2>
            One
        </th>
        <th colspan=2>
            Two
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            One
        </td>
        <td>
            Two
        </td>
        <td>
            Three
        </td>
        <td>
            Four
        </td>
    </tr>
    <tr>
        <td>
            One
        </td>
        <td>
            Two
        </td>
        <td>
            Three
        </td>
        <td>
            Four
        </td>
    </tr>
<tbody>
</table>

第一次尝试:

"border-collapse属性"

我试图border-collapse: separate;在thead和border-collapse: collapse;上tbody但根本不起作用.

table {
    border-collapse: collapse;
    border-spacing: 1em;
}

table thead {
    border-collapse: separate;
}

table tbody tr { …

我有一个信息表,但不是典型的表格,标题是顶部:

Foo | Fnord | Fizzy | Buzz
----|-------|-------|-----------------
  42| Yes   | No    | Mr. mann
  13| Yes   | Flarg | Colonel Mustard
   1| Plum  | No    | Ms. Scarlet

我想把它放在一边:

Foo   | 42       | 13              | 1
Fnord | Yes      | Yes             | Plum
Fizzy | No       | Flarg           | No
Buzz  | Mr. Mann | Colonel Mustard | Ms. Scarlet

通过做类似的事情显然是允许的

<table>
    <tr><th>Heading 1</th><td>Data 1</td></tr>
    <tr><th>Heading 2</th><td>Data 2</td></tr>
</table>

所以我打算继续这样做,但我确实想检查它是否在语义或其他方面有任何中断.这是做我想要的正确方法吗？

在Bootstrap 3中,我能够执行以下操作(用于语义标记):

.div1 {
    .make-xs-column(12);
}
.div2 {
    .make-xs-column(12);
}

示例HTML:

<div class="div1">
    <!-- Stuff Goes Here -->
</div>
<div class="div2">
    <!-- More Stuff Goes Here -->
</div>

在内联类定义中,我可以通过执行以下操作来更改div1和div2的顺序:

<div class="div1 col-xs-push-12">
</div>
<div class="div2 col-xs-pull-12">
</div>

是否可以使用LESS mixins更改列顺序？或者此功能目前无法使用？做这样的事情是不错的做法？:

.div1 {
    .make-xs-column(12);
    .col-sm-push-12;
}
.div2 {
    .make-xs-column(12);
    .col-sm-pull-12;
}

编辑:我的意思是询问xs列而不是sm.我应该拉动并推动sm +设备并反转我的标记顺序吗？

假设我正在编写标记来描述一本包含几行细节的书,例如:

双城记

• 作者:查尔斯狄更斯
• 出版年份:1859年
• 类型:历史小说
• 平均回顾:3.8/5

这是一个问题:即使我在示例中将其格式化为列表,但它在语义上并不是一个列表.此外,其中许多字段都是用户可配置的,因此书籍,作者和时间的标记并不真正适用.什么时候使用<p>,<li>,<dl>,<div>或为这些线路的别的东西吗？如果我不回归<div>,<p>标签似乎最接近我想要的,即使它不是一个完整的文本段落.

什么是这些非列表,非完全段落项目的正确标记,其关键字和值在运行时才会知道？