天天看點

HTML5權威指南--标簽新變化,檔案API,拖放API(簡要學習筆記一)

1.标簽元素更加語義化

2.内容類型仍然為“text/html”

   擴充符仍然為html或者htm.

   <1>doctype 聲明<!doctype html>就可以。不需要使用版本聲明。

   <2>制定字元編碼<meta charset="utf-8">,不需要使用html4中的<meta http-equiv="content-type" content="text/html;charset=utf-8">。

3.省略引号

html5中,當屬性值不包括空字元串,<,>,=,單引号,雙引号等字元時,屬性值兩邊的引号可以省略。

如:

4.新增的全局屬性

<1>contenteditable:主要功能是允許使用者編輯元素中的内容。該屬性是一個布爾值屬性,可以被指定為true或false。

例子:

<2>designmode:用來指定整個頁面是否可編輯,當頁面可編輯時,頁面中任何支援上下文所述的contenteditable屬性的元素都變成了可編輯狀态。該屬性有兩個值;on與off.并且該屬性隻能在腳本中進行編輯修改。

<3>spellcheck:功能為對使用者輸入的文本内容進行拼寫和文法檢查。這個屬性是一個布爾值。

<4>tabindex:當不斷敲擊tab鍵讓視窗或頁面中的空間獲得焦點。對視窗會哦頁面中的所有控件進行便利的時候,每一個控件的tabindex表示該控件是第幾個被通路到到的。

4.有變化的元素

a:新增的結構元素

  section,article,aside,header,hgroup,footer,nav,figure

b:其他元素

  video,audio,embed,mark,progress,time,ruby,rt,rp,wbr

c.新增的功能

  canvas,command,details,datakist,datagrid,keygen,output,source,menu

d:新增的input元素的類型

  email,url,number,range,date pickers

5.很多浏覽器對html5的支援上不完全。

6.新增屬性

a:form

    在html5中,可以把它們書寫在頁面上任何地方,然後給該元素指定一個屬性,屬性值為該表單的id。

b:formaction

可以給所有的送出按鈕增加該屬性。使得點選不同的按鈕,可以将表單送出到

不同的頁面。

c:formmethod

可以對面哥表單元素分别指定不同的送出方法:post,get

d:placeholder

指的是當文本框處于未輸入的狀态時顯示的輸入提示

e:autofocus

當頁面打開的時候,加上該屬性的文本框等控件自動獲得光标焦點。一個頁面上隻能有一個控件具有該屬性。

f:list

g:autocomplete

輔助輸入的自動完成功能

7.變化較大的input種類

  url,email,date,time,datetime,datetime-local,month,week,number,range,search,tel,color

8.元素内容輸入校驗

<1>required:如果元素内容為空白,則不允許送出,同時在浏覽器中顯示資訊提示文字,提示使用者這個元素中必須輸入内容。

<2>pattern:将屬性值設為某個格式的正規表達式,檢查輸入内容的格式。

<3>min與max:這兩個屬性是數值類型與日期類型的input元素的專用屬性,限制了在input元素中輸入的數值與日期範圍。

<4>step:控制input元素中的值增加或減少時的步幅。

9.改良的ol清單

添加了start與reversed屬性star屬性可以自定義編号的初始值。reversed屬性對清單進行反向排序。

10.改良的dl清單

11.檔案api

html5中提供了一個關于檔案操作的檔案api。

<1>filelist對象和file對象

HTML5權威指南--标簽新變化,檔案API,拖放API(簡要學習筆記一)
HTML5權威指南--标簽新變化,檔案API,拖放API(簡要學習筆記一)

<2>blob對象

blob表示二進制原始資料,上面的file對象也繼承了這個blob對象。

blob對象有兩個屬性,size屬性表示一個blob對象的位元組長度。

type屬性表示blob的mime類型,如果是未知類型,則傳回一個空字元串。

<3>filereader接口

該接口主要用來把檔案讀入記憶體,并且讀取檔案中的資料。filereader接口提供了一個異步api。

使用該api可以再浏覽器主線程中異步通路檔案系統,讀取檔案中的資料。

a:該接口的下面三個方法:

HTML5權威指南--标簽新變化,檔案API,拖放API(簡要學習筆記一)

b:該接口的事件:

HTML5權威指南--标簽新變化,檔案API,拖放API(簡要學習筆記一)

html:

HTML5權威指南--标簽新變化,檔案API,拖放API(簡要學習筆記一)
HTML5權威指南--标簽新變化,檔案API,拖放API(簡要學習筆記一)

js:

HTML5權威指南--标簽新變化,檔案API,拖放API(簡要學習筆記一)
HTML5權威指南--标簽新變化,檔案API,拖放API(簡要學習筆記一)

12.拖放api

<1>拖放事件:

HTML5權威指南--标簽新變化,檔案API,拖放API(簡要學習筆記一)

js:

HTML5權威指南--标簽新變化,檔案API,拖放API(簡要學習筆記一)
HTML5權威指南--标簽新變化,檔案API,拖放API(簡要學習筆記一)
HTML5權威指南--标簽新變化,檔案API,拖放API(簡要學習筆記一)

具體分析:

HTML5權威指南--标簽新變化,檔案API,拖放API(簡要學習筆記一)

<2>datatransfer對象的屬性與方法

<3>設定拖放時的視覺效果

轉載:<b>http://www.cnblogs.com/zqzjs/p/4855874.html</b>