我的博客帖子标题

Question

我正在重建一个个人网站，以便更多地了解HTML 5.在此过程中，我正在移动我的博客文章，以使用一些新的HTML 5元素，例如header / article / section / aside。举个例子，博客帖子有以下格式：

我的博客帖子标题

[博客发布日期在这里]

提供内容概述的单个段落。

[我的第一个字幕]

与第一个字幕相关联的内容

[我的第二个副标题]

与第二个字幕相关联的内容

[评论转到此处]

除此之外，我还会有一些内容，可能是帖子右侧的引文或图形。我有两个挑战：1）我不确定如何使用HTML 5元素相互关联，特别是文章和部分让我感到困惑。 2）如何让我的旁边元素在我的其他内容的右边。目前，我有以下内容：

<header>
  <h1>My Blog Post Title</h1>
  <p>Published <time datetime='18-06-2013'>June 6, 2013</time></p>
</header>

<div>
  <article>
    <p>A single paragraph that provides an overview of the content.</p>
    <section>
      <header>My first subtitle</header>
      The content associated witht he first subtitle.
    </section>

    <section>
      <header>My second subtitle</header>
      The content associated with the second subtitle.
    </section>
  </article>

  <aside>
    My right side content. This area should take up 33% of the entire width.
  </aside>
</div>

我是在正确的道路上吗？我看到关于文章和部分的各种各样的东西？无论哪种方式，目前，我的aside内容都会显示在我的文章内容之下。实际上，我希望它旁边。有没有人知道用CSS提供这种布局的合适方式？

谢谢

Answer 1

我建议使用flexbox这是布局页面组件的现代方法。在http://html5doctor.com/中，您应该搜索标题/旁边/页脚/部分和其他元素以了解有关它们的更多信息。 And here是关于避免最常见的html5结构错误的好文章。

Answer 2

1）Html5纯粹用于语义学的<Section>和<article>标签。这意味着您将使用什么来为您的代码提供有意义的描述。当你在浏览器中看到它们时，它们看起来都是一样的。

For e.g. Articles make more sense when you show forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

在向用户显示某些信息时使用“部分”，例如“常见问题解答”，“产品信息”。

如果您的数据无法在语义上定义，只需使用<div>

这是解释差异的一个很好的例子

http://html5doctor.com/the-article-element/

我还注意到您正在使用<header>并嵌套<h1>。这不是必需的。使用<header>或<h1>，因为它们都具有相同的含义。根据Web可访问性标准创建页面时，这将更有意义。

Answer 3

我想这还没有“完美”的答案。但我试一试。

<article class="post">
    <div class="left-side">
        <header>
            <h1>My Blog Post Title</h1>
            <p>Published <time datetime='18-06-2013'>June 6, 2013</time></p>
        </header>

        <section>
            A single paragraph that provides an overview of the content.
        </section>

        <section>
            <header>
                <h1>My first subtitle</h1>
            </header>
            <p>The content associated witht he first subtitle.</p>
        </section>

        <section>
            <header>
                <h1>My second subtitle</h1>
            </header>
            <p>The content associated with the second subtitle.</p>
        </section>
    </div>

    <div class="right-side">
        <aside>
            My right side content. This area should take up 33% of the entire width.
        </aside>
    </div>
</article>

我会在一篇文章中整理整篇博文，并将其各部分分成几部分。

浮动aside的部分：

.right-side, .left-side {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.right-side {
    width: 33%;        
    float: right;
}

.left-side {
    width: 67%;
    float: left;
}

floats的明确修正：

.post:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

使用CSS布置html 5页面

我的博客帖子标题

[我的第一个字幕]

[我的第二个副标题]

3 个答案: