HTML5新的標簽和屬性


<article>標簽定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章,或者來自 blog 的文本,或者是來自論壇的文本。亦或是來自其他外部源內容。
HTML5:<article></article>
HTML4:<div></div>

<aside>標簽定義 article 以外的內容。aside 的內容應該與 article 的內容相關。
HTML5:<aside>Aside 的內容是獨立的內容,但應與文檔內容相關。</aside>
HTML4:<div>Aside 的內容是獨立的內容,但應與文檔內容相關。</div>

<audio> 標簽定義聲音,比如音樂或其他音頻流。
HTML5:<audio src="someaudio.wav">您的瀏覽器不支持 audio 標簽。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

<canvas> 標簽定義圖形,比如圖表和其他圖像。這個 HTML 元素是為了客戶端矢量圖形而設計的。它自己沒有行為,但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。
HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

<command> 標簽定義命令按鈕,比如單選按鈕、復選框或按鈕。
HTML5: <command onclick=cut()" label="cut">
HTML4: none

<datalist> 標簽定義可選數據的列表。與 input 元素配合使用,就可以制作出輸入值的下拉列表。
HTML5: <datalist></datalist>
HTML4: see combobox.

<details> 標簽定義元素的細節,用戶可進行查看,或通過點擊進行隱藏。與 <legend> 一起使用,來制作 detail 的標題。該標題對用戶是可見的,當在其上點擊時可打開或關閉 detail。
HTML5: <details></details>
HTML4: <dl style="display:hidden"></dl>

<embed> 標簽定義嵌入的內容,比如插件。
HTML5: <embed src="horse.wav" />
HTML4: <object data="flash.swf"  type="application/x-shockwave-flash"></object>

<figcaption> 標簽定義 figure 元素的標題。”figcaption” 元素應該被置於 “figure” 元素的第一個或最后一個子元素的位置。
HTML5: <figure><figcaption>PRC</figcaption></figure>
HTML4: none

<figure> 標簽用於對元素進行組合。使用 <figcaption> 元素為元素組添加標題。
HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>
HTML4: <dl><h1>PRC</h1><p>The People's Republic of China was born in 1949...</p></dl>

<footer> 標簽定義 section 或 document 的頁腳。典型地,它會包含創作者的姓名、文檔的創作日期以及/或者聯系信息。
HTML5: <footer></footer>
HTML4: <div></div>

<header> 標簽定義 section 或 document 的頁眉。
HTML5: <header></header>
HTML4: <div></div>

<hgroup> 標簽用於對網頁或區段(section)的標題進行組合。
HTML5: <hgroup></hgroup>
HTML4: <div></div>

<keygen> 標簽定義生成密鑰。
HTML5: <keygen>
HTML4: none

<mark>主要用來在視覺上向用戶呈現那些需要突出的文字。<mark>標簽的一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。
HTML5: <mark></mark>
HTML4: <span></span>

<meter> 標簽定義度量衡。僅用於已知最大和最小值的度量。必須定義度量的范圍,既可以在元素的文本中,也可以在 min/max 屬性中定義。
HTML5: <meter></meter>
HTML4: none

<nav> 標簽定義導航鏈接的部分。
HTML5: <nav></nav>
HTML4:<ul></ul>

<output> 標簽定義不同類型的輸出,比如腳本的輸出。
HTML5: <output></output>
HTML4: <span></span>

<progress> 標簽運行中的進程。可以使用 <progress> 標簽來顯示 JavaScript 中耗費時間的函數的進程。
HTML5: <progress></progress>
HTML4: none

<rp> 標簽在 ruby 注釋中使用,以定義不支持 ruby 元素的瀏覽器所顯示的內容。
HTML5: <ruby><rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

<rt> 標簽定義字符(中文注音或字符)的解釋或發音。
HTML5: <ruby><rt> ㄏㄢˋ </rt></ruby>
HTML4: none

<ruby> 標簽定義 ruby 注釋(中文注音或字符)。
HTML5: <ruby><rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

<section> 標簽定義文檔中的節(section、區段)。比如章節、頁眉、頁腳或文檔中的其他部分。
HTML5: <section></section>
HTML4: <div></div>

<source> 標簽為媒介元素(比如 <video><audio>)定義媒介資源。
HTML5: <source>
HTML4: <param>

<summary> 標簽包含 details 元素的標題,”details” 元素用於描述有關文檔或文檔片段的詳細信息。”summary” 元素應該是 “details” 元素的第一個子元素。
HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4: none

<time> 標簽定義日期或時間,或者兩者。
HTML5: <time></time>
HTML4: <span></span>

<video> 標簽定義視頻,比如電影片段或其他視頻流。
HTML5: <video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標簽。</video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

HTML5新的input屬性

新增加的屬性描述如下:

autocomplete :是否顯示與現在輸入內容相匹配的歷史輸入記錄。

autofocus :當頁面加載完成后,此元素獲得焦點。

form :設置元素歸屬表單的ID。

formaction :設置表單action屬性的值。

formenctype :設置表單enctype屬性的值。

formmethod :設置表單method屬性的值。

formnovalidate :關閉表單的驗證。

formtarget :設置表單target屬性的值。

max :設置<input>元素中數字或日期控件的最大值。

min :設置<input>元素中數字或日期控件的最小值。

minlength :設置文本輸入控件的內容最小長度。

pattern :設置元素文本內容需匹配的正則表達式。

placeholder :設置文本控件的預先顯示內容。

readonly :設置元素是否只讀。

required :設置控件是否為必填項。

 

HTML5新的input控件

<input>元素type屬性的值:

color :顏色控件。

date :日期控件。

email :電子郵件地址輸入框。

month :年月日歷控件。

number :數值輸入框。

range :滑動條。

search :搜索框。

tel :電話號碼輸入框。

time :時間控件。

url :網址輸入框。

week :周數控件。

 

手機端html5觸屏事件(touch事件)

touchstart:觸摸開始的時候觸發

touchmove:手指在屏幕上滑動的時候觸發

touchend:觸摸結束的時候觸發

而每個觸摸事件都包括了三個觸摸列表,每個列表里包含了對應的一系列觸摸點(用來實現多點觸控):

touches:當前位於屏幕上的所有手指的列表。

targetTouches:位於當前DOM元素上手指的列表。

changedTouches:涉及當前事件手指的列表。

每個觸摸點由包含了如下觸摸信息(常用):

identifier:一個數值,唯一標識觸摸會話(touch session)中的當前手指。一般為從0開始的流水號(android4.1,uc)

target:DOM元素,是動作所針對的目標。

pageX/pageX/clientX/clientY/screenX/screenY:一個數值,動作在屏幕上發生的位置(page包含滾動距離,client不包含滾動距離,screen則以屏幕為基准)。 

radiusX/radiusY/rotationAngle:畫出大約相當於手指形狀的橢圓形,分別為橢圓形的兩個半徑和旋轉角度。


var obj = document.getElementByIdx_x('id');

obj.addEventListener( 'touchmove' function (event) {

 

      // 如果這個元素的位置內只有一個手指的話

 

     if  (event.targetTouches.length == 1) {

 

     event.preventDefault(); // 阻止瀏覽器默認事件,重要 

 

         var  touch = event.targetTouches[0];

 

         // 把元素放在手指所在的位置

 

         obj.style.left = touch.pageX-50 +  'px' ;

 

         obj.style.top = touch.pageY-50 +  'px' ;

 

         }

 

},  false );

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM