时间戳

首页 > 解决方案 > 我可以将标签放在部分标签之外吗？

html - 我可以将标签放在部分标签之外吗？

问题描述

我这样组织我的代码：

<body>
  <section> section1 </section>
  <aside> aside (no relation with section 1 or 2)</aside>
  <section> section 2 </section>
</body>

但是我的老师说如果我不把aside放到section，我应该把div放在一边。

有人可以解释我为什么吗？

谢谢你。

标签： html

解决方案

欢迎来到社区。

是的你可以。让我们从您指出的有关语义 HTML 标记<section>及其<aside>正式定义的文档中开始查找原因。

部分

section 元素表示文档或应用程序的通用部分。在这种情况下，部分是内容的主题分组，通常带有标题。

章节的示例包括章节、选项卡式对话框中的各种选项卡式页面或论文的编号章节。Web 站点的主页可以分为介绍、新闻项目和联系信息的部分。

在旁边

Aside 元素表示页面的一部分，该部分由与 Aside 元素周围的内容相切相关的内容组成，并且可以被认为与该内容分开。这些部分通常在印刷排版中表示为侧边栏。

该元素可用于印刷效果，如拉引号或侧边栏、广告、导航元素组以及被视为与页面主要内容分开的其他内容。

如果我们检查谁是 和 的允许父级section，aside我们会发现任何接受流内容的元素都是允许的。

属于流内容类别的元素通常包含文本或嵌入内容。

几个例子是：<a>, <div>, <p>, <h1>, <h2>, <h3>and, 惊喜也<section>和<aside>。

这意味着两者都<section>接受<aside>对方作为父元素。

<!-- valid html -->
<body>
 <div>
  <section>
    <h1>Aside element with section parent</h1>
    <aside>
      <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
    </aside>
  </section>
 </div>
</body>

<!-- valid html -->
<body>
  <div>
    <aside>
      <section>
        <h1>Section element with aside parent</h1>
        <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
      </section>
    </aside>
  </div>
</body>

但最重要的是，这也意味着它们可以有不同的父元素。

在这里，我们已经证明了最初的陈述。

这里举几个例子：

<!-- valid HTML -->

<body>
  <div>
    <a href="#">
      This is anchor
      <aside>This is aside inside anchor</aside>
    </a>
  </div>
</body>

<!-- valid HTML -->

<body>
  <div>
    <blockquote>
      This is a paragraph
      <aside>This is aside inside blockquote</aside>
      <section>This is a section inside blockquote</section>
    </blockquote>
  </div>
</body>

aside {
  width: 40%;
  padding-left: .5rem;
  margin-left: .5rem;
  float: right;
  box-shadow: inset 5px 0 5px -5px #29627e;
  font-style: italic;
  color: #29627e;
}

aside>p {
  margin: .5rem;
}
<!-- valid HTML -->
<body>
  <div>
    <p>Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.</p>

    <aside>
      <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
    </aside>

    <p>Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal and hunt for insects, worms and other small creatures.</p>
  </div>
  </body

推荐阅读