html5的頁面結構需要注意那些方面-H5教程-PHP中文網

這次帶給大家html5的頁面結構需要注意那些方面，html5頁面結構的 注意事項 有哪些，下面就是實戰案例，一起來看一下。

語意元素介紹

HTML5標準增加很多新的語意元素，若以種類來區分，有頁面結構上的、文字內容上的、表單裡的等等。

而這裡主要介紹頁面結構上的新元素。

何謂語意元素

簡單來講，語意元素就是為元素(標籤)賦予某種意義，元素的名稱就是元素要表達的意思。

如 表示頁首、 表示頁尾。

特點

①易於維護：使用語義元素將會有更清晰的頁面結構訊息，易於頁面的後續維護。不需要再查看程式碼：找到div再找到具體的ClassName。

②無障礙性：有助於螢幕閱讀器和其他輔助工具的讀取。

③利於搜尋引擎最佳化：搜尋機器人在檢查一些HTML5的語意元素後，可以收集其索引頁面的資訊。

原先介面佈局

在頁面的佈局中， 是一個非常多見的元素，配上一定的樣式就可套用於特定場景，如頁眉、側側邊欄、 導覽 欄等等。

為了方便維護，設計人員常常給這些 賦值具有特殊名稱的ClassName(樣式類別名稱)或ID。

例如一個表示頁眉的 元素，其ClassName或ID可以為page-header、header等。

頁面結構語意元素

說明

頁面結構的語意元素多用於頁面的整體佈局，大多數為區塊級元素，只是代替 使用，如：頁首、頁尾等等。

而本身沒有特別的樣式，還是需要搭配Css使用。

詳細介紹

：定義網頁或文章的頭部區域。可包含logo、導航、搜尋條等內容。

瀏覽器最低版本：IE 9、Chrome 5

使用說明：

①當用於標註網頁的頁眉時，可包含logo、導航、搜尋條等資訊。

②當用於標註內容的標題時，只有當標題還附帶其他資訊時才考慮用 ，一般情況下用 標註標題即可。

： 定義網頁中的主體內容。

瀏覽器最低版本：IE 不支援、Chrome 35

：定義網頁或文章的尾部區域。可包含版權、備案等內容。

瀏覽器最低版本：IE 9、Chrome 5

使用說明：

①作為網頁的頁腳時，通常包含網站版權、法律限制及連結等內容。

②作為文章的頁腳時，通常包含作者相關資訊。

：標註 頁面導覽 連結。包含多個 超連結 的區域。

瀏覽器最低版本：IE 9、Chrome 5

使用說明：

①一個頁面可包含多個 元素，如頁面的導航和相關文章推薦等。

② 區域裡的聯絡資訊、認證資訊可不必包含在 元素裡。

：通常標註為網頁中的一個獨立區域。

瀏覽器最低版本：IE 9、Chrome 5

使用說明：

①可作為網頁中的獨立區域，如文章中的一小節。

：完整、獨立的內容區塊；裡面可包含獨立的 、 等結構元素。如新聞、部落格文章等獨立的內容快(不包括評論或作者簡介)。

瀏覽器最低版本：IE 9、Chrome 5

：定義周圍主內容以外的內容區塊。如：註解。

瀏覽器最低版本：IE 9、Chrome 5

：代表一段獨立的內容, 經常與 (表示標題)配合使用, 可用於文章中的圖片、插圖、表格、程式碼片段等等。

瀏覽器最低版本：IE 9、Chrome 8 ：定義 元素的標題。

瀏覽器最低版本：IE 9、Chrome 8

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

html5的頁面結構需要注意那些方面

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版