HTML5新增的語義化布局標簽是什么意思

這篇文章主要講解了“HTML5新增的語義化布局標簽是什么意思”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“HTML5新增的語義化布局標簽是什么意思”吧！

　　在HTML5出現之前，我們一般采用DIV+CSS布局我們的頁面。但是這樣的布局方式不僅使我們的文檔結構不夠清晰，而且不利于搜索引擎爬蟲對我們頁面的爬取。為了解決上述缺點，HTML5新增了很多新的語義化標簽

　　HTML5布局

　　< header>...< /header> 頭部

　　< nav>...< /nav> 導航

　　< section>...< /section> 定義文檔中的節。比如章節、頁眉、頁腳或文檔中的其它部分

　　< aside>...< /aside> 側邊欄

　　< footer>...< /footer> 頁腳

　　< article>...< /article> 代表一個獨立的、完整的相關內容塊，可獨立于頁面其它內容使用。例如一篇完整的論壇帖子，一篇博客文章，一個用戶評論等

　　使用HTML5的新的結構標簽，做出上面的布局，代碼如下：

　　< header>定義一個頁面或是區域的頭部< /header>

　　< div>

　　< section>定義一個區域< /section>

　　< aside>定義頁面內容的側邊框部分< /aside>

　　< /div>

　　< footer>定義一個頁面或是區域的底部< /footer>

　　/*頁面頂部 header*/

　　header{

　　height:150px;

　　background-color:#abcdef;

　　}

　　/*頁面中間 div*/

　　div{

　　margin-top:10px;

　　height:300px;

　　}

　　section{

　　height:300px;

　　background-color:#abcdef;

　　width:70%;

　　float:left;

　　}

　　article{

　　background-color:#F33;

　　width:500px;

　　text-align:center;

　　margin:0px auto;

　　}

　　aside{

　　height:300px;

　　background-color:#abcdef;

　　width:28%;

　　float:right;

　　}

　　/*頁面底部*/

　　footer{

　　height:100px;

　　background-color:#abcdef;

　　clear:both;

　　margin-top:10px;

　　}

感謝各位的閱讀，以上就是“HTML5新增的語義化布局標簽是什么意思”的內容了，經過本文的學習后，相信大家對HTML5新增的語義化布局標簽是什么意思這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！