新聞中心
對(duì)于HTML的渲染,瀏覽器一直停留在1999年的水平。為此,HTML 5是一個(gè)實(shí)用主義方案,這樣不僅可以繼續(xù)處理這么多年來(lái)散落在世界各個(gè)角落的HTML,也可以讓瀏覽器廠商更容易添加新特性。這就叫degrade gracefully(優(yōu)雅降級(jí))。讓我們來(lái)看看HTML 5增加的一些新元素。

創(chuàng)新互聯(lián)建站擁有10年成都網(wǎng)站建設(shè)工作經(jīng)驗(yàn),為各大企業(yè)提供網(wǎng)站制作、成都網(wǎng)站制作服務(wù),對(duì)于網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)(電腦版網(wǎng)站建設(shè))、重慶App定制開(kāi)發(fā)、wap網(wǎng)站建設(shè)(手機(jī)版網(wǎng)站建設(shè))、程序開(kāi)發(fā)、網(wǎng)站優(yōu)化(SEO優(yōu)化)、微網(wǎng)站、域名注冊(cè)等,憑借多年來(lái)在互聯(lián)網(wǎng)的打拼,我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷經(jīng)驗(yàn),集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷、管理等網(wǎng)站化運(yùn)作于一體,具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項(xiàng)目的能力。
HTML 5結(jié)構(gòu)元素
這真是大快人心。目前,我們定義結(jié)構(gòu)只能通過(guò)一個(gè)“***”的div, 試圖通過(guò)設(shè)置它的特性id的值如header, footer, sidebar等來(lái)分別表達(dá)頭部,底部或者側(cè)欄等。有了它們,代碼編寫者不再需要為id的命名費(fèi)盡心思,對(duì)于手機(jī)、閱讀器等設(shè)備更有語(yǔ)義的好處。HTML 5增加了新的結(jié)構(gòu)元素來(lái)表達(dá)這些最常用的結(jié)構(gòu):
◆section: 這可以表達(dá)書本的一部分或一章,或者一章內(nèi)的一節(jié)
◆header: 頁(yè)面主體上的頭部。并非head元素
◆footer: 頁(yè)面的底部(頁(yè)腳),可以是一封郵件簽名的所在
◆nav: 到其他頁(yè)面的鏈接集合
◆article: 諸如blog, 雜志,綱要等之中的一條獨(dú)立記錄。
舉個(gè)例子,一個(gè)blog的首頁(yè),用HTML 5寫的話,可以是這樣(有省略):
- <>
realazy - Realazy
href="http://realazy.org/blog" mce_href="http://realazy.org/blog">標(biāo)題
- 內(nèi)容在此...(省略n字)
href="http://realazy.org/blog" mce_href="http://realazy.org/blog">標(biāo)題2
內(nèi)容2在此...(省略n字) ...- nav>
- href="http://realazy/blog" mce_href="http://realazy/blog">導(dǎo)航1
- href="http://realazy/blog" mce_href="http://realazy/blog">導(dǎo)航2
...- ? 2007 realazy
- 塊級(jí)block的語(yǔ)義元素
HTML還增加以下三個(gè)塊級(jí)元素:
◆aside
◆figure/code>
◆dialog
aside可以用以表達(dá)注記、貼士、側(cè)欄、摘要、插入的引用等諸如作為補(bǔ)充主體的內(nèi)容。比如這樣表達(dá)blog的側(cè)欄:
- ***文章
- >文章標(biāo)題
...
figure元素表示一個(gè)有說(shuō)明的塊級(jí)圖片。比如:
我現(xiàn)在需要點(diǎn)空……行內(nèi)(inline)的語(yǔ)義元素,m元素用來(lái)標(biāo)記一些不是那么需要著重強(qiáng)調(diào)的文本?,F(xiàn)在尚有爭(zhēng)議,可能最終會(huì)改為mark.
time元素如其名,用來(lái)表達(dá)時(shí)間。它需要一個(gè)datetime的特性來(lái)標(biāo)明機(jī)器能夠認(rèn)識(shí)的時(shí)間,如:
很遺憾地告訴你,我只有
- 您的分?jǐn)?shù)是:
value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+ .
還有一個(gè)progress,也是義如其名,用以表達(dá)進(jìn)度:
目標(biāo)完成度:嵌入多媒體
新增video和audio元素。顧名思義,分別是用來(lái)插入視頻和聲音的。至于格式,交由瀏覽器實(shí)現(xiàn),HTML再也不需要特別的代碼去播放特定的格式。就像img一樣,不管是png, jpg還是gif都可以顯示。值得注意的是,它們可以包含內(nèi)容。比如,可以把歌詞放到某段歌曲中去:
交互性
HTML 5同時(shí)也叫Web Applications 1.0, 因此也進(jìn)一步發(fā)展交互能力。這些標(biāo)簽就是為提高頁(yè)面的交互體驗(yàn)而生:
details
datagrid
menu
command
details用來(lái)表示一段具體的內(nèi)容,但是內(nèi)容默認(rèn)可能不顯示,通過(guò)某種手段(如點(diǎn)擊)與legend交互才顯示出來(lái)。這跟現(xiàn)在各種通過(guò)JavaScript隱藏一段內(nèi)容,在點(diǎn)擊后才顯示出來(lái)的做法有些類似。比如:
一句話記錄生活中的點(diǎn)點(diǎn)滴滴, 交流與分享,拉近你和朋友,支持 MSN/GTalk/QQ、短信、手機(jī) WAP
datagrid用來(lái)控制數(shù)據(jù),可以由用戶或者腳本來(lái)更新。
menuHTML 2就存在了,不過(guò)HTML 4把它廢棄了。HTML 5廢物利用,并在期內(nèi)加上command元素。
【編輯推薦】
- HTML 5下一代Web開(kāi)發(fā)標(biāo)準(zhǔn)詳解
- HTML 5與Flash,不得不談的話題
- Google宣布Web已經(jīng)勝利 HTML 5將Web大大推進(jìn)
- IBM演示下一代網(wǎng)絡(luò)技術(shù) 初試HTML5
- HTML 5 正式標(biāo)準(zhǔn)恐將2022年才能正式發(fā)布
分享標(biāo)題:細(xì)談HTML 5新增的元素
文章鏈接:http://fisionsoft.com.cn/article/dpdoeec.html


咨詢
建站咨詢
