Question

我们可以使用<ul>中的任何其他TAG以及<li>吗？

像

<ul>
Some text here or <p>Some text here<p> etc
<li>item 1</li>
Some text here or <p>Some text here<p> etc
<li>item 1</li>
</ul>

Answer 1

为了让您的代码有效，您不能在<ul>以外的<li>内添加任何标记。

但是，您可以将任何块级元素放在<li>中，如下所示：

<ul>
        <li>
            <h2>...</h2>
            <p>...</p>
            <p>...</p>
        </li>
</ul>

Answer 2

根据W3C Recommendation，列表的基本结构必须是：

<UL>
   <LI> ... first list item...
   <LI> ... second list item...
   ...
</UL>

您只能将p标记放在li标记内，而不是ul的直接子标记。 W3C建议书明确指出：

列表由LI元素
定义的列表项序列组成

Answer 3

虽然你可以在里面有其他标签（并且它可能工作得很好），你不应该因为它不符合w3c。它的语义也很少。

只需创建一个简单的页面并通过验证器（http://validator.w3.org/）运行它，您就会亲眼看到：）

Answer 4

您可以使用模板标签，这是完全合法的。例如：

<ul>
**<template>**Some text here or <p>Some text here<p> etc**</template>**
<li>item 1</li>
**<template>**Some text here or <p>Some text here<p> etc**</template>**
<li>item 1</li>
</ul>

Answer 5

不，这将是无效的标记。但是，如果您尝试为某些行创建不同的外观，则可以通过向任何li标记添加特定的类名来实现此目的。见下文：

<ul>
    <li class="foobar">Label</li>
    <li>Some text here</li>
    <li>Some text here</li>
    <li class="foobar">Label</li>
    <li>Some text here</li>
    <li>Some text here</li>
</ul>

Answer 6

你可以写下这样的标记，但不应该，因为它不合规，你可能会在不同的浏览器中得到奇怪和意想不到的结果。

Answer 7

没有。如果是列表，则其中包含列表项。我看不到包含非列表项的列表的任何用途;它不是清单......

Answer 8

如果你这样做来设置list-element的一部分，你可以这样做

<ul>
  <li>normal text <span>bold text</span></li>
  <li>normal text <span>bold text</span></li>
</ul>

然后使用CSS

ul li {font-size: 12px; font-weight: normal;}
ul li span {font-size: 12px; font-weight: bold;}

希望这会有所帮助

Answer 9

Knockout.js具体答案，您可以使用以下注释语法。

<ul>
    <li class="header">Header item</li>
    <!-- ko foreach: myItems -->
        <li>Item <span data-bind="text: $data"></span></li>
    <!-- /ko -->
</ul>

<script type="text/javascript">
    ko.applyBindings({
        myItems: [ 'A', 'B', 'C' ]
    });
</script>

Answer 10

HTML5报价

https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element说ul具有：

内容模型：零个或多个li和脚本支持元素。

“内容模型”是指我们可以放入元素中的内容。

因此，据此我们可以理解，仅允许li之类的script之类的东西。

将其与类似https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element的div这样的元素进行比较：

如果该元素不是dl元素的子元素，则为流内容。

然后，“流内容”的定义是一个包含大多数标签的巨大列表：

a，缩写，地址，...，文本

还请注意text是如何存在的。然后，我们看到其定义https://html.spec.whatwg.org/multipage/dom.html#text-content

在内容模型的上下文中，文本不表示任何内容，也不表示文本节点。文本有时有时被单独用作内容模型，但也表示内容，并且可以是元素间的空格（如果Text节点为空或仅包含ASCII空格）。

“然后将元素间空格定义为：

元素之间始终允许使用ASCII空格。用户代理将源标记中元素之间的这些字符表示为DOM中的“文本”节点。空文本节点和仅由这些字符序列组成的文本节点被视为元素间空格。

和“ ASCII空格”为https://html.spec.whatwg.org/multipage/dom.html#text-content

ASCII空格为U + 0009 TAB，U + 000A LF，U + 000C FF，U + 000D CR或U + 0020空格。

从所有这些来看，除了前面提到的li和script标签之外，我认为ul中仅允许上述空白。

HTML5验证器同意以下理论：https://validator.w3.org/nu/#textarea

Answer 11

除了li之外，我们不能在ul内放置任何标签。但是，我们可以在li内放置其他标签，如下所示：:

<ul>
<li>
  <div>
    <h2>Some Dummmy text</h2>
    <p> some content </p>
    --- 
    ---
  </div>
<li/>
<li><li/>
<li><li/>
----
----
</ul>

我们可以使用<ul>中的任何其他TAG以及<li>？</li> </ul>

11 个答案: