如何编写响应式语义 HTML5 页面？（有框架？）

Question

所以我正在尝试为博客构建一个漂亮的页面，但挑战是我希望它最符合 HTML5 标准并且 mobile/seo 友好。

我制作了一个我认为合适的 HTML5 页面，如下所示：

<!-- Header -->
<header>
    <h1>Title of the page</h1>
    <h2>Subtitle of the page</h2>
    <!-- nav -->
    <nav>
        <ul>
            <li><a href="#">Page one</a></li>
            <li><a href="#">Page two 2</a></li>
            <li><a href="#">Page three 3</a></li>
            <li><a href="#">Page four 4</a></li>
        </ul>
    </nav>
</header>

<!-- last articles -->
<section>

    <article>
        <header>
            <h2>Article title</h2>
        </header>

        Content of the article.

        <aside>
            Related post or other links.
        </aside>

        <footer>
            <a href="#">Read the full article.</a>
            <ul>
                <li><a href="#">Share on Facebook</a></li>
                <li><a href="#">Tweet it</a></li>
            </ul>
        </footer>
    </article>

    <article>
        <header>
            <h2>Article title</h2>
        </header>

        Content of the article.

        <aside>
            Related post or other links.
        </aside>

        <footer>
            <a href="#">Read the full article.</a>
            <ul>
                <li><a href="#">Share on Facebook</a></li>
                <li><a href="#">Tweet it</a></li>
            </ul>
        </footer>
    </article>

</section>


<!-- sidebar -->

<aside>

    <h2>Sidebar</h2>

    <h3>Social media</h3>
    <ul>
        <li><a href="#">Facebook account</a></li>
        <li><a href="#">Twitter account</a></li>
        <li><a href="#">Github account</a></li>
    </ul>

    <h3>Last comments</h3>
    <nav>
        <ul>
            <li><a href="#">Comment 1</a></li>
            <li><a href="#">Comment 2</a></li>
            <li><a href="#">Comment 3</a></li>
        </ul>
    </nav>

</aside>

<!-- footer -->
<footer>
    © 1264-2016 - Handsome coder (me) industry
</footer>

我不了解你，但我认为它看起来像是对 HTML5 标签的正确语义使用。

现在我希望它能够响应并提供了两个选项。

我自己做了所有 css（可能使用 normalize.css 来防止在某些浏览器上发生奇怪的事情。）
我用的是轻量级框架，比如Skeleton。

两者都意味着使用类，但也可能使用 div 标签来包裹页面的某些部分，我不确定我应该怎么做。 ..

我正在努力避免过度使用 div 标签，尤其是嵌套的 div 看起来像十年前的 ol'。

我尝试使用 HTML5 样板，但我只是查看了他们主页的源代码，外观非常简单，我在 div 中找到了 div div 在 div 在 div。我的意思是，到底是什么？

那么您认为我应该如何构建适当的响应式语义 HTML5 页面？你有什么例子吗？

感谢您阅读我。

祝你有愉快的一天。

Answer 1

据我了解，您想要一种构建简单、语义化、轻量级页面的方法（这应该是我们所有人的目标）。

添加/嵌套 divs 不是犯罪。 div 本身只是一个空白容器，与整个 HTML 文档结构的相关性很小，您可以根据需要使用任意多的 div。专注于学习 HTML/5 Semantics 并学习如何组合新标签，以便您的页面易于阅读和描述（由机器人）。

结构良好的简单页面示例。（Google 张图片）

关于网格系统——我的建议是学习SASS and combine it with Bourbon.io's grid system called Neat。 understand/implement 非常简单易行。网格对齐方式以一种超级简单的方式排序，使您的代码简化为：

如何编写响应式语义 HTML5 页面？（有框架？）

How to write a responsive semantic HTML5 page ? (With a framework ?)

html

css

frameworks

html5boilerplate

如何编写响应式语义 HTML5 页面？ （有框架？）

How to write a responsive semantic HTML5 page ? (With a framework ?)

html

css

frameworks

html5boilerplate

如何编写响应式语义 HTML5 页面？（有框架？）