html – 替换DOA标记

发布时间：2020-12-14 16:33:51 所属栏目：资源来源：网络整理

导读：DOA(或更恰当地,到达之前的死亡)X HTML2工作标准表示支持 the di tag. […] The term and its definition can be grouped within a di element to help clarify the relationship between a term and its definition(s). 为了澄清,该标签将用于对 dt进行分组

DOA(或更恰当地,到达之前的死亡)X HTML2工作标准表示支持 the <di> tag.

[…] The term and its definition can be grouped within a di element to help clarify the relationship between a term and its definition(s).

为了澄清,该标签将用于对< dt>进行分组.和< dd>在< dl>下标记在一起：

<dl>
    <di>
        <dt>defenestrate</dt>
        <dd>throw through or out of the window; "XHTML2 was defenestrated"</dd>
        <dd>what I will do if web standards keep going they way they are</dd>
    </di>
</dl>

无论如何,因为< di>在窗外(嘿),我想知道当前支持的标记模式可以被描述为语义上和结构上等同的是什么(如果有的话)？我基本上接受了< dl>对于我的要求是不够的(就审美要求而言),所以我正在寻找其他解决方案.

我对< di>的意图主要是一个样式hook1,因为我正在使用一个定义列表,并打算将术语/定义分组设置为单个项目.

为了便于访问,我将使用aria- *和role属性来帮助定义关系,但我希望存在一些普遍接受的结构来模拟< di>,我根本没有遇到过.

例如,我正在考虑以下内容：

<ul>
    <li>
        <dfn id="term-1">term</dfn>
        <p aria-labelledby="term-1">definition for term 1</p>
        <p aria-labelledby="term-1">another definition for term 1</p>
    </li>
    <li>
        <dfn id="term-2">term</dfn>
        <p aria-labelledby="term-2">definition for term 2</p>
        <p aria-labelledby="term-2">another definition for term 2</p>
    </li>
</ul>

1.据我了解,这是一个经常被引用的原因,它被排除在HTML5之外(它只是一个样式钩子).坦率地说,我认为这是公牛,因为它是一种完美合理的方式,可以为美学和解析目的分组术语和定义.但谁在乎呢,对吧？不带引号的属性和不完整的标签更为重要.< / sarcasm>

解决方法

HTML5 CR定义了一个 dl element内的分组,以便例如dd元素后跟一个或多个dd元素构成一个组,下一个dd开始一个新组等.在这个意义上,di元素在结构上是多余的.另一方面,dl元素实际上没有语义(除了在结构上是某种东西),并且没有已知的软件以任何特定的方式处理它,超出了默认的渲染问题.

如果你希望将这样一个团体作为一个单元进行设计,那么根据规格和草稿,你大多都不走运.没有考虑添加像di这样的东西.您可以提交一个提案,将tbody和optgroup称为先例(即作为特定元素中的特殊用途分组元素),但这将是一个漫长的过程.

一个简短的方法是使用div在dl内进行分组.当然它是“无效的”,但这只是一个正式的位置,浏览器并不真正关心.他们似乎消化了这个罚款：

<dl>
    <div>
        <dt>defenestrate</dt>
        <dd>throw through or out of the window; "XHTML2 was defenestrated"</dd>
        <dd>what I will do if web standards keep going they way they are</dd>
    </div>
    <div>
        <dt>pragmatic HTML</dt>
        <dd>using markup according to how things actually work in browsers
            and other relevant software</dd>
    </div>
</dl>

浏览器解析这个,以便div元素是dl元素的子元素,而dt和dd元素仍然对默认格式有正常的影响.

现在你可以设置单位的样式,例如

<style>
dl > div { border: solid red 1px; margin-bottom: 0.6em; }
</style>

你可能会因此受到抨击.更安全,更无聊的方法是使每个单元成为单独的dl元素(如果需要将所有单元作为单个元素处理,则将dl元素包装在div容器中).

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!