目錄
是我標籤
蘋果
桔子
中國人物
三國
兩晉
馬雲是誰
參考資料
我是脖子
我是劉備
我是關羽
我是張飛
首頁 web前端 H5教程 HTML5中新標籤與常用標籤詳解_html5教學技巧

HTML5中新標籤與常用標籤詳解_html5教學技巧

May 16, 2016 pm 03:48 PM

今天先介紹下html5 新增的結構元素,有的經常使用到,有的用不上,雖然說它們的出現是更促進頁面更有語義,更好的seo,但其實當頁面禁用樣式後,它們的展現跟div 是沒撒差別,有同學可能會說,既然一樣,又不影響頁面的最終展現,不管是article 還是section 能用就好了。如果考慮實際項目的針對用戶,我也是這麼認為的,但作為一個重構仔,我們還是得專業點,再考慮到無障礙這塊,那麼 html5 標籤的作用就更明顯了。於是複習下內容並記錄在部落格上,順便分享給大家,也方便自己以後找。

HTML5 新增結構元素分為主體結構元素與非主體結構元素

1.主體結構元素包括article、section、nav、aside、time
2.非主體結構元素包括header、hgroup、footer、address
一、主體結構元素
article
article 標籤,從語意化上看為文件、頁面,其用法如下:

通常是一篇文章、一個頁面、一個獨立完整的內容模組
一般會帶個標題,並放在header 標籤中
article 元素可以互相嵌套
使用頻率極高,強調獨立性,多注意下與header 標籤的使用。


複製代碼
代碼如下:

是我標籤



我是段落



我的內容 div>




section
section 標籤,從語意化來看為部分,其用法如下:
用於頁面內容的獨立分塊,往往是文章的一段

通常由內容和標題組成,沒有標題的內容不推薦使用 section
使用頻率低,強調分段分塊。

註:《HTML5與CSS3權威指南》這本書中說明:一個容器需要被定義樣式或腳本定義行為時,建議用div而非section,不要將section用作設定樣式的容器。


複製程式碼程式碼如下:


水果

蘋果


蘋果是撒?



桔子


桔子是撒?





中國人物


三國、兩晉、南北朝



三國

猛將猛將猛將




兩晉

猛將猛將猛將猛將





nav
nav 標籤,從語義化來看為導航,其用法如下:

通常作為頁面導航的連結群組
側邊欄導航
使用頻率高。


複製程式碼
程式碼如下:

aside
aside 標籤,從語義化上看為在旁邊、側邊,其用法如下:

在 article 標籤中使用時,作為主要內容的附屬資訊部分,如有關的參考資料、名詞解釋等。
在 article 標籤外使用時,作為頁面或網站全域的附屬資訊部分,如側邊欄、部落格的友情連結部分、廣告區域等。
使用頻率低。


複製程式碼
程式碼如下:



馬雲是誰


馬雲,男,1964年10月15日出生於浙江省杭州市,中國著名企業家,阿里巴巴集團、淘寶網、支付寶創辦人..........






time
time標籤,從語意化來看為時間,其用法如下:

代表 24 小時中的某個時刻或某個日期
表示時刻時允許帶時間差
可定義很多格式的日期和時間
使用頻率低。

複製程式碼
程式碼如下:






二、非主體結構元素
header
header 標籤,從語意化上看為文件的頁眉,其用法如下:

一種具有引導和導航作用的結構元素
通常放置在整個頁面或頁面內的一個內容區塊的標題
一個網頁內並沒有限制header 標籤的個數
使用頻率極高,比較容易理解。


複製程式碼
程式碼如下:






我是脖子



我是身體


hgroup
hgroup 標籤,從語義化上看為標題組,其用法如下:

作為 header 標籤的子元素
一個內容模組中包括了主標題和至少一個子標題才使用 hgroup
通常會將 h1~h6 元素進行分組
使用頻率高。


複製代碼
代碼如下:


我是劉備


我是關羽


我是張飛




呂布驚呆了





footer
footer 標籤,從語義化上看為文檔的腳註,其用法如下:

一個內容區塊區的註腳
通常內容為聯絡資訊、相關閱讀、版權資訊等
使用頻率高,比較容易理解。


複製程式碼
程式碼如下:




  • 關於三國

  • 地圖資訊

  • 遊戲攻略






address
address 標籤,從語意化上看為地址,其用法如下:
用於文件中呈現的聯絡資訊

通常內容為作者、網站連結、電子郵件信箱、地址、電話號碼等
使用頻率低。


複製程式碼程式碼如下:

希望本文對大家在 html5 結構標籤上的運用有一定的指導,如果發現內容有錯誤的地方,歡迎大家指正~
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用視口元標記來控制移動設備上的頁面縮放? 如何使用視口元標記來控制移動設備上的頁面縮放? Mar 13, 2025 pm 08:00 PM

本文討論了使用視口元標記來控制移動設備上的頁面縮放,重點是寬度和初始尺度之類的設置,以獲得最佳響應和性能。

如何使用地理位置API處理用戶位置隱私和權限? 如何使用地理位置API處理用戶位置隱私和權限? Mar 18, 2025 pm 02:16 PM

本文討論了使用GeOlocation API管理用戶位置隱私和權限,並強調要求權限,確保數據安全性並遵守隱私法律的最佳實踐。

如何將HTML5拖放API用於交互式用戶界面? 如何將HTML5拖放API用於交互式用戶界面? Mar 18, 2025 pm 02:17 PM

本文介紹瞭如何使用HTML5拖放API來創建交互式用戶界面,詳細介紹了使元素可拖動的步驟,處理關鍵事件並通過自定義反饋來增強用戶體驗。它還討論了一個常見的陷阱

如何使用HTML5頁面可見性API檢測頁面何時可見? 如何使用HTML5頁面可見性API檢測頁面何時可見? Mar 13, 2025 pm 07:51 PM

本文討論了使用HTML5頁面可見性API來檢測頁面可見性,提高用戶體驗並優化資源使用情況。關鍵方麵包括暫停媒體,減少CPU負載以及基於可見性變化管理分析。

h5項目怎麼運行 h5項目怎麼運行 Apr 06, 2025 pm 12:21 PM

運行 H5 項目需要以下步驟:安裝 Web 服務器、Node.js、開發工具等必要工具。搭建開發環境,創建項目文件夾、初始化項目、編寫代碼。啟動開發服務器,使用命令行運行命令。在瀏覽器中預覽項目,輸入開發服務器 URL。發布項目,優化代碼、部署項目、設置 Web 服務器配置。

如何使用HTML5 Websockets API進行客戶端和服務器之間的雙向通信? 如何使用HTML5 Websockets API進行客戶端和服務器之間的雙向通信? Mar 12, 2025 pm 03:20 PM

本文解釋了HTML5 Websockets API,用於實時雙向客戶服務器通信。 它詳細詳細介紹了客戶端(JavaScript)和服務器端(Python/Flask)的實現,以應對可伸縮性,狀態管理,一個挑戰

如何使用HTML5通知API顯示桌面通知? 如何使用HTML5通知API顯示桌面通知? Mar 13, 2025 pm 07:57 PM

本文介紹瞭如何使用HTML5通知API顯示桌面通知,重點關注許可要求,自定義和瀏覽器支持。

H5頁面製作是否需要持續維護 H5頁面製作是否需要持續維護 Apr 05, 2025 pm 11:27 PM

H5頁面需要持續維護,這是因為代碼漏洞、瀏覽器兼容性、性能優化、安全更新和用戶體驗提升等因素。有效維護的方法包括建立完善的測試體系、使用版本控制工具、定期監控頁面性能、收集用戶反饋和製定維護計劃。

See all articles