HTML5相對于HTML4新增了一些布局元素

新增布局標簽的優點：

⒈更加注重文檔的結構內容而不是以什么形式展現出來

⒉對人的友好，更加語義化，增加代碼的可讀性

⒊對計算機友好，瀏覽器更容易解析

新增布局標簽的內容：

新增的布局標簽可概括為兩類：一是控制主體結構的標簽(頭部，尾部，)

二是輔助主體內容的標簽(嵌在主體里面的標簽)

header元素：

▲主要用于設置一個頁面的標題部分，可能還包括LOGO，導航欄等。

▲放在body中的第一個標簽，即文檔的頂端

▲是塊元素

footer元素：

▲放在網頁的底部區域，會包含友情鏈接，版權聲明，文檔建立日期，聯系方式等。

▲是塊元素

代碼演示：

Document

body { height: 708px; }

header{ width: 100%; height:10%; background-color: green }

footer{ width: 100%; height:10%; background-color: blue }

#div0 { width: 100%; height:80%; background-color:red;}

#div1 { width: 20%; height:100%;background-color:pink;float: left }

#div2 { width: 80%; height:100%;background-color:gray;float: left }

我是頭部

我是側邊欄

總結

以上是生活随笔為你收集整理的HTML5新布局元素布局,HTML5新的布局元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。