Question

我为高级液体滑块编写了一些代码。但是我的标题滑块包含一些主要内容，如h-tags p-tags和一些图像。我问自己＆＃34;我可以将每张幻灯片视为一篇文章＆＃34;。因为我无法找到正确的答案，也许有人可以帮助我。问题是，我的代码是否正确嵌套并正确使用了语义元素。代码是：

 <header id="masthead" class="site-header" role="banner">
    <div id="main-slider" class="liquid-slider">    
            <article id="slider-1" class="liquid-slide-wrapper" style="background: url(images/back-99.jpg) 50% 50% /cover; repeat:no-repeat; min-height:450px;">
                <section class="section-text-left">
                    <header>
                        <h1 class="title" style=" color:#f7740a; display:none;">Professionele, betaalbare website nodig?</h2>
                        <h2 style=" color:#fff; display:none;">Zelf uw website aanpassen?</h3>
                    </header>
                    <p style="display:none; color:#fff;">Onze unieke websites worden afgeleverd met een wordpress CMS systeem.<br>
                        Hiermee kan u zelf uw website aanpassen!<br> Vat de kudu bij de horens en contacteer ons voor meer info!
                    </p>
                    <p style="display:none;"><button type="button" class="btn btn-primary btn-lg">Mail Ons</button>&nbsp;<button type="button" class="btn btn-transparent btn-lg">0494 / 77 22 61</button></p>
                </section>
                <section class="section-img-right clearfix">
                    <img class="slider-img-right fadeInRight animated" style="display:none; width:100%; max-width:692px; height:auto;" src="images/imac.png" />
                    <img class="slider-img-right fadeIn animated-slow" style="display:none; width:100%; max-width:692px; height:auto;" src="images/straf-webdesign.png" />
                    <img class="slider-img-right fadeIn animated-slow" style="display:none; width:100%; max-width:692px; height:auto;" src="images/responsive-webdesign.png" />
                </section>      
            </article>
            <article id="slider-2" style="background: url(images/background-7.png) 50% 50% /cover; repeat:no-repeat; min-height:450px;">
                <section class="section-text-left">
                    <header>
                        <h1 class="title" style=" color:#f7740a; display:none;">JustOnWeb wordt Kudu Concepts!</h2>
                        <h2 style="display:none; color:#000;">Een nieuwe naam, met een professionelere aanpak!</h3>
                    <header>
                    <p style="display:none; color:#fff;">Een website bestaat uit meer dan een lay-out. <br>Met kudu Concepts gaan we verder daar waar anderen stoppen!<br>
                        We bedenken een volledige filosofie voor uw website en <br> combineren dit met onze kennis van Online Marketing!
                    </p>
                </section>
            </article>
          </div>
</header>

Answer 1

根据W3School语义：http://www.w3schools.com/html/html5_semantic_elements.asp

＆LT;部分＆gt;包含＆lt;文章＆gt; 不推荐使用＆lt;部分＆gt;里面＆lt;文章＆gt;和里面＆lt;标题＆gt; 根据W3C，一节是“内容的主题分组，通常带有标题。”

＆LT;标题＆gt;在父元素的顶部，所以在body（标题）的顶部，但也在部分或文章的顶部或任何其他div

在你的代码中：＆LT; h1＆gt;应该与＆lt; / h1＆gt;而不是h2，同样的＆lt; h2＆gt;

正确使用章节文章和标题

1 个答案: