這是一個有效的html5標記方法嗎？

-1

我正在設計一個視頻網站，只是想問一些建議，想法和我目前的html5基本佈局的改進。這是一個有效的html5標記方法嗎？

我讀了很多谷歌的文章，但它很混亂。我需要一些直接的建議。我是新來的CSS所以請溫柔:)

body { 
 
    background: #2b2b2b; 
 
    font: normal 12px Arial, Helvetica, sans-serif; 
 
    color: #777; 
 
    overflow-x: hidden 
 
} 
 
a { 
 
    color: #888; 
 
} 
 
a:active { 
 
    color: #444; 
 
} 
 
header .wrap, 
 
nav, 
 
.contentwrapper, 
 
footer .wrap { 
 
    width: 1000px; 
 
    margin: 0 auto 
 
} 
 
header, 
 
nav, 
 
section, 
 
aside .wrap, 
 
footer { 
 
    background: #333; 
 
    margin-bottom: 10px; 
 
    padding: 10px; 
 
    border: 1px solid #222 
 
} 
 
section { 
 
    border: 1px solid #222 
 
} 
 
header { 
 
    width: 100%; 
 
    line-height: 30px 
 
} 
 
nav li { 
 
    display: inline-block; 
 
} 
 
main { 
 
    float: right; 
 
    width: 820px; 
 
} 
 
aside { 
 
    float: left; 
 
    width: 170px 
 
} 
 
footer { 
 
    line-height: 30px; 
 
} 
 
footer ul { 
 
    font-size: 14px; 
 
} 
 
footer li { 
 
    float: right; 
 
    display: inline-block; 
 
} 
 
footer li.cr { 
 
    float: left 
 
} 
 
.group:before, 
 
.group:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 
.group:after { 
 
    clear: both; 
 
} 
 
.group { 
 
    *zoom: 1; 
 
}

<header> 
 
    <div class="wrap"> 
 
    <h1>Site title</h1> 
 
    </div> 
 
</header> 
 
<nav> 
 
    <ul class="menu"> 
 
    <li><a href="javascript:void(0);" href="#">menu1</a> 
 
    </li> 
 
    <li><a href="javascript:void(0);" href="#">menu2</a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 
<div class="contentwrapper group"> 
 
    <main> 
 
    <section> 
 
     <div class="head"> 
 
     <h1>Featured Videos</h1> 
 
     </div> 
 
    </section> 
 
    <section> 
 
     <h1>Latest Videos</h1> 
 
    </section> 
 
    </main> 
 
    <aside> 
 
    <div class="wrap"> 
 
     category list here 
 
    </div> 
 
    <div class="wrap"> 
 
     ads here 
 
    </div> 
 
    </aside> 
 
</div> 
 
<footer> 
 
    <div class="wrap group"> 
 
    <ul> 
 
     <li class="cr">website.com &copy; 2014</li> 
 
     <li><a href="./contact">Contact</a> 
 
     </li> 
 
     <li><a href="./rss.xml">Rss</a> 
 
     </li> 
 
     <li><a href="./sitemap.xml">Sitemap</a> 
 
     </li> 
 
     <li><a href="#">Webmaster$</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</footer>

來源

2014-10-18 user3892090

嘗試[validator.nu]（http://validator.nu/）來驗證html代碼和[csslint.net]（http://csslint.net/）來驗證css代碼。 – 2014-10-18 05:03:22

對不起，如果它出現在你的話題。我沒有關於CSS的專業知識，我只是自己學習基礎知識，當然也是從谷歌學習。我不確定正確使用我正在使用的語義，儘管我已經閱讀了他們的描述。另外它也有點難以理解，因爲英語不是我的第一語言：P感謝驗證器鏈接。 – user3892090 2014-10-18 05:09:44

不要對不起。我在上面的評論中給出答案後投票結束。沒有惡意。歡呼:) – 2014-10-18 05:12:15

你所有的語法是有效的，和你的CSS看起來很好。只要確保在整個項目中保持代碼乾淨和簡單，那麼您就沒有50個樣式表供誰知道 - 什麼（從XD體驗中講）。

祝您的項目好運。

來源

2014-10-18 05:03:52 zwork

否。

從HTML5規範:: DIV

作者強烈建議查看div元素作爲最後一個元素，在沒有其他因素是合適的。使用更合適的元素而不是div元素可以爲讀者提供更好的可訪問性，並使作者更易於維護。

你不應該使用DIV元素，其中有沒有必要的，尤其是<div class="wrap">內HEADER，<div class="contentwrapper group">作爲MAIN父母，和<div class="wrap group">底部FOOTER內從您的代碼，是多餘的。

來源

2014-10-18 05:40:15 Benio

感謝您的意見。我添加了換行，因爲我讀到了在語義上添加類是無效的。也許我可以使用.group並刪除.wrap。我也使用組來清除浮動。你能告訴我你的改進版嗎？謝謝 – user3892090 2014-10-18 06:31:30

如果你不在語義上添加'class'？ ['class']（http://www.w3.org/html/wg/drafts/html/master/dom.html#classes）是[global attribute]（http://www.w3.org/html/） wg/drafts/html/master/dom.html＃global-attributes），並可用於任何元素。 – Benio 2014-10-18 07:15:27

這是一個有效的html5標記方法嗎？

回答

相關問題