build網(wǎng)站制作 |
關(guān)于HTML5的一些東西當前位置:首頁>主要服務(wù)>網(wǎng)站制作>html![]() 1.HTML5的結(jié)構(gòu) section:這可以是書中的一章或一節(jié),實際上可以是在 HTML 4 中有自己的標題的任何東西 header:頁面上顯示的頁眉;與 head 元素不一樣 footer:頁腳;可以顯示電子郵件中的簽名 nav:指向其他頁面的一組鏈接 article:blog、雜志、文章匯編等中的一篇文章 必須分析標題的級別,才能看出各個部分的劃分方式。邊欄、頁腳、頁眉、導(dǎo)航條、主內(nèi)容區(qū)和各篇文章都由通用的 div 元素來表示 2.HTML 5 增加的塊級元素 除了結(jié)構(gòu)性元素之外,HTML 5 還增加了一些純語義性的塊級元素: aside figure dialog aside 元素代表說明、提示、邊欄、引用、附加注釋等,也就是敘述主線之外的內(nèi)容。 figure 元素代表一個塊級圖像,還可以包含說明。figure 元素不只可以顯示圖片。還可以使用它給 audio、video、iframe、object 和 embed 元素加說明。 dialog 元素表示幾個人之間的對話。HTML 5 dt 元素可以表示講話者,HTML 5 dd 元素可以表示講話內(nèi)容。所以,在老式瀏覽器中也可以以合理的方式顯示對話。 3.HTML 5 增加的語義性內(nèi)聯(lián)元素 HTML 4 用 5 個不同的內(nèi)聯(lián)元素表示略有差異的計算機代碼:var、code、kbd、tt 和 samp。但是,它無法表示時間、數(shù)字等基本數(shù)值。HTML 5 提供了幾個新的內(nèi)聯(lián)元素來滿足非技術(shù)作者的需求。 m m 元素表示文本被 "加上標志",但是不一定要強調(diào)??梢园阉胂癯蓵型怀鲲@示的一節(jié)。Google 的緩存頁面就是典型的用例。如果鏈接到一個緩存的副本,搜索詞就被加上標志。例如,如果搜索 "Egret",那么緩存的 Google 頁面可能像下面這樣: HTMl源代碼 <bThe Great <m>Egret</m> (also known as the American <m>Egret</m>) is a large white wading bird found worldwide. The Great <m>Egret</m> flies with slow wing beats. The scientific name of the Great <m>Egret</m> is <i>Casmerodius albus</i>. time time 元素表示一個時間值,比如 5:35 P.M., EST, April 23, 2007。例如: HTMl源代碼 <p>I am writing this example at <time>5:35 P.M. on April 23rd</time>. </p> time 元素可以幫助瀏覽器和其他程序識別出 HTML 頁面中的時間。它不要求對元素內(nèi)容應(yīng)用任何特定的格式。但是,每個 time 元素都應(yīng)該有一個 datetime 屬性,其中包含更適合機器識別的時間值,比如: HTMl源代碼 <p>I am writing this example at <time datetime="2007-04-23T17:35:00-05:00">5:35 P.M. on April 23rd</time>. </p> meter meter 元素表示指定范圍內(nèi)的數(shù)字值。例如,可以用它表示薪水、投票給 Le Pen 的法國選民的百分比或考試分數(shù)。在這里,我使用 meter 標出 Software Development 2007 上一位 Google 程序員提供的數(shù)據(jù): HTMl源代碼 <p>An entry level programmer in Silicon Valley can expect to start around <meter>$90,000</meter> per year. </p> meter 元素幫助瀏覽器和其他客戶機識別 HTML 頁面中的數(shù)量。它不要求對元素內(nèi)容應(yīng)用任何特定的格式。但是,每個 meter 元素可以有最多 6 個屬性,它們按照更適合機器識別的形式表示這個數(shù)量: value min low high max optimum 這些屬性都應(yīng)該包含一個十進制數(shù)字。例如,期末考試的分數(shù)可以寫成下面這樣: HTMl源代碼 <p>Your score was <meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>. </p> progress progress 元素表示一個正在進行的過程的狀態(tài),就像圖形用戶界面(GUI)應(yīng)用程序中的進度條。例如,可以用它表示一個文件已經(jīng)下載的百分比或者播放電影時的當前位置。下面這個進度控件表示下載已經(jīng)完成了 33%: HTMl源代碼 <p>Downloaded: <progress value="1534602" max="4603807">33%</progress> </p> 4.HTML5新增的內(nèi)嵌的媒體 引入一個新的 video 元素,用來嵌入任意視頻格式.例如,可以用以下代碼嵌入QuickTime 電影 "a Sora in Prospect Park": HTMl源代碼 <video src="http://www.cafeaulait.org/birds/sora.mov" /> 引入 audio 元素。例如,可以使用以下代碼給 Web 頁面加上背景音樂: HTMl源代碼 <audio src="spacemusic.mp3" autoplay="autoplay" loop="20000" /> autoplay 屬性指示瀏覽器在裝載頁面后立即開始播放,而不等待明確的用戶請求 引入了img元素,用來支持所有圖片格式。 5.HTML5新增加的交互元素 HTML 5 也被稱為 Web Applications 1.0。為了實現(xiàn)這個目標,增加了幾個為 Web 頁面提供交互體驗的新元素: details datagrid menu command 這些元素都可以根據(jù)用戶的操作和選擇改變顯示的內(nèi)容,而不需要從服務(wù)器裝載新頁面。 details details 元素表示在默認情況下可能不顯示的詳細信息。可選的 legend 元素可以提供詳細信息的摘要。details 元素的用途之一是提供腳注和尾注。例如: HTMl源代碼 The bill of a Craveri's Murrelet is about 10% thinner than the bill of a Xantus's Murrelet. <details> <legend>[Sibley, 2000]</legend> <p>Sibley, David Allen, The Sibley Guide to Birds, (New York: Chanticleer Press, 2000) p. 247 </p> </details> 沒有指定具體的顯示方式。瀏覽器可以選用腳注、尾注和工具提示等方式。 每個 details 元素可以有一個 open 屬性。如果設(shè)置了這個屬性,那么詳細信息在最初就顯示出來。如果沒有設(shè)置這個屬性,那么會隱藏它們,直到用戶要求顯示它們。無論是哪種情況,用戶都可以通過單擊一個圖標或其他控件來顯示或隱藏詳細信息。 datagrid datagrid 元素提供一個網(wǎng)格控件??梢杂盟@示樹、列表和表格,用戶和腳本可以更新這些界面元素。與之相反,傳統(tǒng)的表格主要用來顯示靜態(tài)數(shù)據(jù)。 datagrid 從它的內(nèi)容(一個 table、select 或其他 HTML 元素)獲得初始數(shù)據(jù)。 這個元素與常規(guī)表格的區(qū)別在于,用戶可以選擇行、列和單元格;把行、列和單元格折疊起來;編輯單元格;刪除行、列和單元格;對網(wǎng)格排序;以及在客戶機瀏覽器中直接進行其他數(shù)據(jù)操作??梢杂?nbsp;JavaScript 代碼監(jiān)視更新。Document Object Model(DOM)中增加了 HTMLDataGridElement 接口以支持這個元素(清單 10)。 menu和command menu 元素實際上在 HTML 2 中就出現(xiàn)了。在 HTML 4 中廢棄了它,但是 HTML 5 又恢復(fù)了它并指定了新的意義。在 HTML 5 中,menu 包含 command 元素,每個 command 元素引發(fā)一個操作。例如一個彈出警告框的菜單。 HTMl源代碼 <menu> <command onclick="alert('first command')" label="Do 1st Command"/> <command onclick="alert('second command')" label="Do 2nd Command"/> <command onclick="alert('third command')" label="Do 3rd Command"/> </menu> 還可以用 checked="checked" 屬性將命令轉(zhuǎn)換為復(fù)選框。通過指定 radiogroup 屬性,可以將復(fù)選框轉(zhuǎn)換為單選按鈕,這個屬性的值是互相排斥的按鈕的組名。 除了簡單的命令列表之外,還可以使用 menu 元素創(chuàng)建工具欄或彈出式上下文菜單,這需要將 type 屬性設(shè)置為 toolbar 或 popup。 label 屬性提供菜單的標題。例如,清單 14 顯示一個 Edit 菜單。 6.HTML5中增加的標簽元素 <article> …… 定義外部的內(nèi)容,一般是文章類 <aside> ……… 定義 article 以外的內(nèi)容,應(yīng)該與 article 的內(nèi)容相關(guān)。 <audio> ……… 定義聲音,比如音樂或其他音頻流。 <canvas> …… 定義圖形,比如圖表和其他圖像。 <command> … 命令按鈕,比如單選按鈕、復(fù)選框或按鈕。 <datalist> …… 定義可選數(shù)據(jù)的列表。與 input 元素配合使用,就可以制作出輸入值的下拉列表。 <details> …… 定義元素的細節(jié),用戶可進行查看,或通過點擊進行隱藏。 <embed> …… 定義嵌入的內(nèi)容,比如插件。 <figcaption> ……表示圖表的字幕 <figure> ……… 表示圖表的時候使用 <footer> …… 定義 section 或 document 的頁腳 <header> ……定義 section 或 document 的頁眉。 <hgroup> …… 歸結(jié)表示項的標題 <keygen> …… 定義生成密鑰 <mark> ……… 用高光突出文檔里相符合的文本 <menu> ……… 定義菜單列表。當希望列出表單控件時使用該標簽。 <meter> …… 定義度量(單位)。僅用于已知最大和最小值的度量。 <nav> ………… 定義導(dǎo)航鏈接的部分。 <output> …… 定義不同類型的輸出,比如腳本的輸出。 <progress> … 運行中的進程??梢允褂?nbsp;<progress> 標簽來顯示 JavaScript 中耗費時間的函數(shù)的進程。 <section> …… 定義文檔中的節(jié)(section)。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。 <source> …… 為媒介元素(比如 <video> 和 <audio>)定義媒介資源。 <summary> …… 在<details>指定相關(guān)內(nèi)容的文本 <time> ……… 定義日期或時間,或者兩者。 <video> …… 定義視頻,比如電影片段或其他視頻流。 7.HTML5中將會禁止使用的標簽元素 <acronym> …… <applet> ……… <basefont> …… <bgsound> …… <big> ………… <blink> ……… <center> …… <dir> ………… <font> ……… <frame> …… <frameset> … <isindex> …… <listing> ……… <marquee> …… <nobr> ……… <noembed> … <noframes> … <plaintext> … <s> ………… <spacer> …… <strike> …… <tt> ………… <u> ………… <wbr> ……… <xmp> ……… 1
|
易勢網(wǎng)站制作,以DIV+CSS為主,js/jQuery為輔,制作利于優(yōu)化,頁面美觀的優(yōu)質(zhì)網(wǎng)站!
網(wǎng)絡(luò)策劃公司|新浪官方微博|大連網(wǎng)站建設(shè)
沈陽易勢科技有限公司 網(wǎng)站制作網(wǎng)絡(luò)營銷公司 © 2011 , All rights reserved. 公司地址:沈陽市鐵西區(qū)貴和街道建設(shè)中路15號淺草綠閣商務(wù)樓402室沈陽網(wǎng)站制作易勢最專業(yè)
遼B2-20150173-8號