HTML5結構元素和HTML5頁面的交互體驗

2020-03-24 18:24:48

字體：大中小

來源：轉載

供稿：網友

對于HTML的渲染，瀏覽器一直停留在1999年的水平。為此，HTML 5是一個實用主義方案，這樣不僅可以繼續處理這么多年來散落在世界各個角落的HTML，也可以讓瀏覽器廠商更容易添加新特性。這就叫degrade gracefully（優雅降級）。讓我們來看看HTML 5增加的一些新元素。HTML 5結構元素這真是大快人心。目前，我們定義結構只能通過一個萬能的div, 試圖通過設置它的特性id的值如header, footer, sidebar等來分別表達頭部，底部或者側欄等。有了它們，代碼編寫者不再需要為id的命名費盡心思，對于手機、閱讀器等設備更有語義的好處。HTML 5增加了新的結構元素來表達這些最常用的結構：◆section: 這可以表達書本的一部分或一章，或者一章內的一節◆header: 頁面主體上的頭部。并非head元素◆footer: 頁面的底部（頁腳），可以是一封郵件簽名的所在◆nav: 到其他頁面的鏈接集合◆article: 諸如blog, 雜志，綱要等之中的一條獨立記錄。舉個例子，一個blog的首頁，用HTML 5寫的話，可以是這樣（有省略）： !DOCTYPE HTML HTML head title realazy /title /head body header h1 Realazy /h1 /header section article h2 a href= http://realazy.org/blog mce_href= http://realazy.org/blog 標題 /a /h2 p 內容在此...（省略n字） /p /article article h2 a href= http://realazy.org/blog mce_href= http://realazy.org/blog 標題2 /a /h2 p 內容2在此...（省略n字） /p /article ... /section footer nav ul li a href= http://realazy/blog mce_href= http://realazy/blog 導航1 /a /li li a href= http://realazy/blog mce_href= http://realazy/blog 導航2 /a /li ... /ul /nav p 2007 realazy /p /footer /body /HTML 塊級block的語義元素 HTML還增加以下三個塊級元素：◆aside◆figure/code ◆dialogaside可以用以表達注記、貼士、側欄、摘要、插入的引用等諸如作為補充主體的內容。比如這樣表達blog的側欄： aside h3 最新文章 /h3 ul li a href= http://realazy.org/blog/ mce_href= http://realazy.org/blog/ 文章標題 /a /li ... /ul /aside figure元素表示一個有說明的塊級圖片。比如： figure legend 這是圖片的說明 /legend img alt= 圖片可替換文本 src= /path/to/img.png mce_src= /path/to/img.png / /figure dialog元素用于表達人們之間的對話。在HTML 5中，dt用于表示說話者，而dd則用來表示說話者的內容。如： dialog dt 佛 /dt dd 色即是空 /dd dt 悟空 /dt dd 我現在需要點空行內（inline）的語義元素，m元素用來標記一些不是那么需要著重強調的文本。現在尚有爭議，可能最終會改為mark.time元素如其名，用來表達時間。它需要一個datetime的特性來標明機器能夠認識的時間，如： time datetime= 2008-08-08T20:08:08 2008年8月8日晚上8時8分8秒 /tiem meter元素表達特定范圍內的數值。可用于薪水、百分比、分數等。比如：很遺憾地告訴你，我只有 meter 150cm /meter 它還有6個特性來表達各方面的含義，比如： p 您的分數是： meter html' target='_blank'>value= 88.7 min= 0 max= 100 low= 65 high= 96 optimum= 100 B+ /meter . /p 還有一個progress，也是義如其名，用以表達進度：目標完成度： progress value= 40 max= 100 40% /progress 嵌入多媒體新增video和audio元素。顧名思義，分別是用來插入視頻和聲音的。至于格式，交由瀏覽器實現，HTML再也不需要特別的代碼去播放特定的格式。就像img一樣，不管是png, jpg還是gif都可以顯示。值得注意的是，它們可以包含內容。比如，可以把歌詞放到某段歌曲中去： audio src= 誰人伴你睡.mp3 mce_src= 誰人伴你睡.mp3 p 淚枯干 /p p 難忍怎么委屈自已 /p p 曾經有一刻悲與喜 /p ... /audio 交互性HTML 5同時也叫Web Applications 1.0, 因此也進一步發展交互能力。這些標簽就是為提高頁面的交互體驗而生：detailsdatagridmenucommanddetails用來表示一段具體的內容，但是內容默認可能不顯示，通過某種手段（如點擊）與legend交互才顯示出來。這跟現在各種通過JavaScript隱藏一段內容，在點擊后才顯示出來的做法有些類似。比如：一句話記錄生活中的點點滴滴， details legend 更多 /legend p 交流與分享，拉近你和朋友，支持 MSN/GTalk/QQ、短信、手機 WAP /p /details 它可以有一個open的特性，用來顯示細節與否。datagrid用來控制數據，可以由用戶或者腳本來更新。menuHTML 2就存在了，不過HTML 4把它廢棄了。HTML 5廢物利用，并在期內加上command元素。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html pre標簽使用詳解

下一篇：HTML5實現拖拽功能步驟詳解