如何使用 HTML5 在列表（OL、UL）中使用 href 属性？答案

【问题标题】：How to use href attribute in lists (OL, UL) using HTML5?如何使用 HTML5 在列表（OL、UL）中使用 href 属性？
【发布时间】：2013-07-27 21:46:33
【问题描述】：

我正在尝试使用 HTML5 和 Bootstrap 验证一些表单，并且我尝试了一个小部件：

<div class="control-group">
    <label class="control-label required-field">Person Type:</label> 
    <div class="controls">
        <ul class="person-field person-field-select">
            <li class="person-type-one" href="/ff/pf/add/" title="People with type one."><label for="id_person_0"><input class="person-field person-field-select" id="id_person_0" name="person" type="radio" value="F" /> Person One</label></li>
            <li class="person-type-two" href="/ff/pj/add/" title="People with type two."><label for="id_person_1"><input class="person-field person-field-select" id="id_person_1" name="person" type="radio" value="J" /> Person Two</label></li>
        </ul>
        <br class='clear' />
    </div>
</div>

验证http://validator.w3.org/check 中的 HTML 后，我得到了错误：

此时不允许在元素 li 上使用属性 href。 元素 li 的属性：全局属性如果元素是ol元素的子元素：value

我也试过了，同样的错误：

<!doctype html>
<html lang="en">
<div class="control-group">
    <label class="control-label required-field">Person Type:</label> 
    <div class="controls">
        <ol class="person-field person-field-select">
            <li class="person-type-one" href="/fornecedores/pf/add/" title="People with type one."><label for="id_person_0"><input class="person-field person-field-select" id="id_person_0" name="person" type="radio" value="F" /> Person One</label></li>
            <li class="person-type-two" href="/fornecedores/pj/add/" title="People with type two."><label for="id_person_1"><input class="person-field person-field-select" id="id_person_1" name="person" type="radio" value="J" /> Person Two</label></li>
        </ol>
        <br class='clear' />
    </div>
</div>
</html>

这里有href元素的正确方法是什么？

【问题讨论】：

如果用户点击文本“Person One”，你预计会发生什么？

标签： html widget html-lists

【解决方案1】：

HTML 语法根本不允许 li 元素使用 href 属性，只允许特定元素集（例如 link 和 a）。如果您尝试使用它，浏览器会忽略它，除非它们确实将属性添加到 DOM 中（但只能通过 getAttribute 访问，而不是映射到元素节点的属性），以便您可以在客户端使用它侧脚本，但这是不可取的（使用data-* 属性代替此类事情）。

所以无法做到。你期望href 属性做什么？将元素转换为链接？最接近的等价物是在 li 元素内使用 <a href=...> 元素，以便它包含您现在拥有的所有内容，例如

<li class="person-type-one" title="People with type one.">
<a href="/ff/pf/add/">
<label for="id_person_0">
<input class="person-field person-field-select" id="id_person_0" name="person" 
type="radio" value="F" /> Person One</label>
</a></li>

但是，这会导致问题：如果用户单击单选按钮，会发生什么情况？这是否会切换按钮设置，或激活链接，或两者兼而有之？根据 HTML5 CR，该结构甚至无效：a 元素不得包含像 input 或 label 这样的交互式内容。（label 元素也被归类为交互式元素，因为单击它可能与单击与之关联的控件具有相同的效果。）

因此，如果您想在这样的上下文中创建链接，它应该有自己的链接文本，即使这可能意味着复制一些文本。例如，

<li class="person-type-one" title="People with type one.">
<label for="id_person_0">
<input class="person-field person-field-select" id="id_person_0" name="person" 
type="radio" value="F" /> Person One</label>
(info on <a href="/ff/pf/add/">Person One</a>)</li>

（我不会在这样的上下文中使用li，因为当项目以单选按钮开头时，默认呈现（开头带有项目符号或数字）是不可接受的。项目符号和单选按钮想要双项目符号，黑色项目符号和白色项目符号。当您绝对不想要项目符号或数字时，最好使用例如div元素或table元素而不是ul或@987654341 @.)

【讨论】：

预期的行为是，如果您单击小部件的任何部分，即使您单击切换开关，您也会被重定向到 href 中的 url。这个字段到底是一个完整的按钮。也许使用
- 不是最好的选择...您可以在图像中看到它的外观和感觉：img29.imageshack.us/img29/9016/0nxp.png