Question

我正在尝试构建一个Wordpress主题，使用媒体查询进行响应式布局。我在获得正确的布局时遇到了一些问题，同时保持了一些语义标记。

基本上，对于小于764像素宽的页面的发布日期，我希望将日期，项目符号和帖子类别显示为内联;如果页面大于此大小，则发布日期应显示为列（条目日期），以及主帖子列（主列）。

我想我已经设法到达那里，但只是想知道这个HTML代码是否有效，因为我试图在帖子中保留页眉和页脚部分以使其在语义上有意义。

有没有人有任何反馈？

谢谢，约翰

<article class="post">
    <div class="entry-date">
        <span><span>30<sup>th</sup></span> Sep 2013</span>
    </div>              
    <div class="main-column">
        <span class="bullet">&#x25CF;</span>
        <header class="entry-header">
            <span class="entry-category"><a href="#">Cars</span>                    
            <h1 class="entry-title"><a href="#" title="" rel="bookmark">A new car from Ferrari</a></h1>
            <span class="entry-authors vcard">by <a href="#" title="" rel="me">John Smith</a> </span>   
            <div class="featured-img"><img src="img/ferrari.jpg" class="" alt=""></div> 
        </header><!-- .entry-header -->
        <div class="entry-content">
            <p>Ferrari have released a great new car, which is very fast.</p>
            <span class="continue-reading"><a href="#">Continue reading</a></span>
        </div><!-- .entry-content -->
        <footer class="entry-meta">
            <span class="entry-tags"><a href='#'>Sports cars</a></span>
        </footer><!-- .entry-meta -->
    </div>
</article><!-- #post-1234 -->

Answer 1

评论是完全关闭的，验证与语义无关，这是一个完全不同的主题。语义是为你的代码赋予意义。

目前你有这个

<div class="entry-date">
    <span><span>30<sup>th</sup></span> Sep 2013</span>
</div>

这将更加语义化，避免使用不必要的标签（不要仅为样式添加标签，寻找css解决方案）。

<div class="entry-date">
    30<sup>th</sup>Sep 2013
</div>

HTML5语义与样式问题

1 个答案: