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

這次帶給大家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中文網其它相關文章！

相關閱讀：

H5中​​視訊與音訊標籤和進度條如何使用

##H5與C3的新交互特性有哪些

H5的區塊層級標籤總和

以上是html5的頁面結構需要注意那些方面的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：

h5 html5 注意

來源：php.cn

上一篇：h5的組織內容如何使用 下一篇：HTML5單頁手勢滑幕切換如何實現

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

• 最新php程式設計師工具箱 v1.0版本介紹
  2018-06-11 11:57:34
• vue.js路由失效如何處理
  2018-06-15 15:55:18
• 怎樣使用js解析資料庫（附程式碼）
  2018-06-15 15:49:00
• 如何在專案中使用js綁定DOM事件
  2018-06-15 15:46:15
• 怎樣操作JS字串與特殊字符
  2018-06-15 15:42:38
• 如何在專案中使用jQuery內each方法
  2018-06-15 15:40:34
• 如何利用jquery做出文件上傳加載
  2018-06-15 15:39:32
• 怎樣對JS原型與原型鏈進行使用
  2018-06-15 15:37:14
• Angular CLI+Angular 5實戰專案演示
  2018-06-15 15:34:21
• 使用jQuery替換節點元素（附程式碼）
  2018-06-15 15:22:51

最新問題

如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...

來自於 2024-04-06 15:33:12

0

1

433

PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...

來自於 2024-04-05 12:57:00

0

1

456

HTML5中的enctype和formenctype有什麼差別？ 我只是想知道HTMLLivingStandard（又稱新的HTML5規範）中的屬性enctype和formenctype之間有什麼區別？我一直在閱讀《開發人員的HTML標準》，但似...

來自於 2024-04-02 11:47:56

0

1

275

使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...

來自於 2024-04-01 20:42:38

0

1

259

相關專題

更多>

• h5是什麼
• html5動畫製作有哪些製作方法
• HTML與HTML5的差別
• h5實作web端向上滑動載入下一頁的方法
• 元搜尋引擎
• java測試工具有哪些
• 什麼是oa系統
• 如何開啟mdf文件

熱門推薦

• h5是什麼
• 不懂程式碼怎麼製作h5頁？ H5頁面製作平台推薦
• html5的新特性有哪些
• 什麼是h5頁面製作
• h5和小程式有什麼差別

熱門教學

更多>

相關教學

熱門推薦

最新課程

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1415771
• 
  php入門教程之一週學會PHP

  4254804
• 
  JAVA 初級入門影片教學

  2465155
• 
  小甲魚零基礎入門學習Python影片教學

  502849
• 
  PHP 零基礎入門教學

  843193

• 
  最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

  1415771次學習
• 
  JAVA 初級入門影片教學

  2465155次學習
• 
  小甲魚零基礎入門學習Python影片教學

  502849次學習
• 
  Web前端開發極速入門

  215191次學習
• 
  零基礎精通 PS 影片教學

  874437次學習

• 
  【web前端】Node.js快速入門

  6164次學習
• 
  國外Web開發全端課程全集

  4722次學習
• 
  Go語言實戰之 GraphQL

  4057次學習
• 
  550W粉絲大佬手把手從零學JavaScript

  605次學習
• 
  python大神Mosh，零基礎小白6小時完全入門

  20641次學習

最新下載

更多>

網站特效

網站源碼

網站素材

前端模板

• [表單按鈕] jQuery企業留言表單聯絡程式碼
• [播放器特效] HTML5 MP3音樂盒播放特效
• [選單導航] HTML5酷炫粒子動畫導覽選單特效
• [表單按鈕] jQuery可視化表單拖曳編輯程式碼
• [播放器特效] VUE.JS仿酷狗音樂播放器代碼
• [html5特效] 經典html5推箱子小遊戲
• [圖片特效] jQuery滾動添加或減少圖片特效
• [相簿特效] CSS3個人相簿封面懸停放大特效

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板

• [PNG素材] 可愛的夏天元素向量素材(EPS+PNG)
• [PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)
• [banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)
• [PNG素材] 金色的畢業帽向量素材(EPS+PNG)
• [PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG)
• [PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)
• [banner圖] 扁平風格的植樹節banner向量素材(AI+EPS)
• [PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)

• [前端模板] 家居裝潢清潔維修服務公司網站模板
• [前端模板] 清新配色個人求職履歷引導頁模板
• [前端模板] 設計師創意求職履歷網頁模板
• [前端模板] 現代工程建築公司網站模板
• [前端模板] 教育服務機構響應式HTML5模板
• [前端模板] 網上電子書店商城網站模板
• [前端模板] IT技術解決互聯網公司網站模板
• [前端模板] 紫色風格外匯交易服務網站模板

關於我們 免責聲明 Sitemap

PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！