HTML5常用元素和屬性

兼容性:HTML5在老版本的瀏覽器上也可以正常運行

實用性:HTML5內部并沒有特別復雜的功能,它只封裝了那些常用的簡單功能。

非革命性的發展:HTML5并不是革命性的發展,它只是"妥協式"的規范。

W3C(萬維網聯盟)為HTML和XHTML制訂了嚴格的語義約束,W3C組織使用DTD(文本類型定義)來定義HTML和XHTML的語義約束,包括HTML文檔中可以出現哪些元素,各元素支持哪些屬性等。

HTML5的基本機構:

對于一份基礎的HTML5文檔而言,它總有如下結構:
<!DOCTYPE html>

<html>

????<head>

????????<title> 頁面標題</title>

? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=gb2312">#utf-8

????</head>

????<body>

? ? ? ? 頁面內容

????</body>

</html>

這里我們主要說一下meta:

meta是用來在HTML文檔中模擬HTTP協議的響應頭報文。(標簽)

meta的格式:告訴瀏瀏覽器我的頁面要怎么解碼

1、<meta http-equiv="Content-Type" content="text/html; charset=gb2312">#utf-8:

http-equiv(屬性):類似于HTTP的頭部協議,回應給瀏覽器一些有用的信息,以幫助正確的顯示網頁內容。它的作用和name屬性差不多,就是用來指定meta標簽的作用,但是不同的是它會關聯到HTTP頭部的一些作用,也影響就是瀏覽器發送http請求和瀏覽器引擎的行為。

content(屬性):聲明網頁模式,將網頁代碼作為HTML來執行,也可以定義網頁長和寬

charset(屬性):這個屬性是HTML5新增的屬性,主要的作用是用來定義文檔的字符編碼,就是告訴瀏覽器在從服務器獲取這個html文檔后采用什么樣的解碼格式去正確的解碼該文檔。一般值都是UTF-8,同樣的沒有特殊要求的話也推薦使用UTF-8。

2、<meta name = "viewport" content=" width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

name:參數解釋

content:

width:viewport寬度(數值/device-width)

initial-scale:viewport高度(數值/device-height)

maximum-scale:最大縮放比例

minimum-scale:最小縮放比例

user-scalable:是否允許用戶縮放(yes/no)

minimal-ui:IOS 7.1 beta 2 中新增屬性,可以在頁面加載時最小化上下狀態欄。這是一個布爾值,可以直接這樣寫。

name屬性的值有:

????application-name:用于定義應用的名稱,名字定義在content屬性的值中,通過搜索引擎能搜到該應用的名字,但是只有當頁面為一個webapp時才能使用。

????author:作者名稱,給搜索引擎提供作者的信息

????description:網頁描述,具體內容定義在content屬性的值中

????generator:這個具體不太清楚是啥用,一般用于顯示網頁的制作工具,比如以前的dreamwave等

????keywords:這個比較重要,搜索引擎根據關鍵詞來歸類網頁,好的關鍵詞描述能夠使網頁更加容易的被用戶搜索到

????referrer:這個屬性值比較復雜主要是用來控制頁面與服務器交互時發送的請求,作為頁面信息安全的保障措施。
style:用于引用樣式定義,用法參考CSS3(元素)

h1~h6:定義標題一到標題六(元素)

p:定義段落,指定id,class,style等核心屬性,還可以指定onclick等各種事件屬性(元素)

br:插入一個換行,該標簽可以指定id,class,style等核心屬性。(元素)

hr:定義水平線,該標簽可以指定id,class,style等核心屬性,還可以指定onclick等各種事件屬性。(元素)

span:與div基本相似,區別是該定義的節默認不會換行,可以指定和div相同的標簽(元素)

文本格式化元素:

b:定義粗體文本。該標簽可以指定id,class,style等核心屬性,還可以指定onclick等各種事件屬性。

i:定義斜體文本。該標簽可以指定id,class,style等核心屬性,還可以指定onclick等各種事件屬性。

em:定義強調文本,實際效果與斜體文本差不多。該標簽可以指定id,class,style等核心屬性,還可以指定onclick等各種事件屬性。

strong:定義粗體文本。與b標簽的作用和用法基本相同。

small:定義小號字體文本。該標簽可以指定id,class,style等核心屬性,還可以指定onclick等各種事件屬性。

sup:定義上標文本。該標簽可以指定id,class,style等核心屬性,還可以指定onclick等各種事件屬性。

sub:定義下標文本。該標簽可以指定id,class,style等核心屬性,還可以指定onclick等各種事件屬性。

bdo:定義文本顯示方向。該標簽可以指定id,class,style等核心屬性,還可以指定onclick等各種事件屬性。除此之外,該標簽也可以指定dir屬性,該屬性值只能是ltr或者rtl。

語義相關元素

abbr:用于表示一個縮寫。使用該元素時可指定如下屬性。

? ? title,該屬性用于指定該縮寫所代表的全稱。

address:用于表示一個地址。瀏覽器通常會用斜體字顯示<address.../>所包含的文本。

blockquote:用于定義一段長的引用文本。瀏覽器會使用縮進的方式顯示這段被引用文本。使用<blockquote.../>元素時可指定如下屬性。

? ? cite:該屬性指定該引用文本所引用的地址URL。

q:用于定義一段短的引用文本。瀏覽器會為這段被引用文本添加引號。

cite:用于表示作品(一本書、一部電影、一首歌曲)的標題。常常瀏覽器會用斜體字顯示<cite.../>所包含的文本。

code:用于表示一段計算代碼。

dfn:用于定義一個專業術語。瀏覽器通常會用粗體或斜體字顯示<dfn.../>所包含的文本。

del:定義文檔中被刪除的文本。瀏覽器通常會以中畫線形式顯示del包含文本。

ins:定義文檔中插入文本。瀏覽器通常會以下劃線形式顯示ins包含的文本。

????cite:該屬性值為一個URL,該URL對應的文本解釋了文本被刪除或插入的原因。

????datetime:定義文本被刪除或插入的日期、時間。

pre:用于表示該元素所包含的文本已經進行了"預格式化"。也就是說,

samp:用于定義示范文本內容

kbd:用于定義鍵盤文本。該元素用于表示文本是通過鍵盤輸入的。通常在計算機使用文檔、使用說明中經常使用該元素。

var:用于表示一個變量。瀏覽器通常會用斜體字顯示<var.../>所包含的文本。

超鏈接和錨點:

href:指定超鏈接所關聯的另一個資源。

target:指定使用框架集中的哪個框架來裝載另一個資源。該屬性的屬性值可以是_self,_blank,_top,_parent是個值,分別代表使用自身、新窗口、頂層框架、父框架來裝載新資源。

media:指定目標URL所引用的媒體類型。默認值為all。只有當指定了href屬性時該屬性才有效。

a...:元素主要可以包含文本、圖像、各種文本格式化和表單元素等內容。

<a ><b>Test</b></a><br />

粗體字超鏈接

<a target="_blank"><em>Test</em></a><br />

斜體字超鏈接

<a ><img src="images/logo.ipg" alt="Test"/></a><br />

圖像超鏈接

<a href="text.html">Test</a><br />

普通超鏈接

關于這個URL地址的解釋如下:

scheme:指定因特網服務的類型。最流行的類型是HTTP

domain:指定因特網域名。

host:指定此域中的主機。如果被省略,HTTP的,默認主機是WWW。

port:指定主機的端口號。端口號通常可以被省略,HTTP服務的默認端口是80.

path:指定遠程服務器上的路徑,該路徑也可被省略,省略該路徑則默認被定位到網站的根目錄

filename:指定遠程文檔的名稱。如果省略該文件名,通常會定位到index.html、index.htm等文件,或定位到web服務器設置的其他文件。

URL最流行的scheme以及對應資源:

file? ? 訪問本地磁盤上的文件

ftp? ? 訪問遠程FTP服務器上的文件

http? ? 訪問WWW服務器上的文件

news? ? 訪問新聞組上的文件

telnet? ? 訪問Telnet鏈接

gopher? ? 訪問遠程Gopher服務器上的文件

列表相關元素:

ul:定義無序列表。該元素可以指定id、style、class等屬性,還可以指定onclick等事件屬性。該元素只能包含<li.../>子元素。

ol:定義有序列表。該元素可以指定id、style、class等屬性,還可以指定onclick等事件屬性。該元素只能包含<li.../>子元素。除此之外,在HTML5規范中,該元素還可以指定如下三個屬性。

? ? start:指定列表項的起始數字。默認是第一個,如1,A等。

? ? type:指定使用哪種類型的編號,不推薦使用建議使用CSS來定義。

? ? reversed:該屬性指定是否將排序反轉。很遺憾,目前沒有任何瀏覽器支持該屬性。

li:定義列表項目。該元素可以指定id、style、class等屬性,還可以指定onclick等事件屬性。該元素里可以包含與<div.../>完全類似的內容,因此可以包含較多類型的子元素。

dl:也用于定義列表,該元素只能包含<dt.../>和<dd.../>兩種子元素。該元素可以指定id、style、class等屬性,還可以指定onclick等事件屬性。

dt:定義標題列表項。該元素可以指定id、style、class等屬性,還可以指定onclick等事件屬性。該元素只能包含文本、圖像、超鏈接、文本格式化元素和表單控件元素等。

dd:定義普通列表項。該元素可以指定id、style、class等屬性,還可以指定onclick等事件屬性。該元素里可以包含與<div.../>完全類似的內容,因此可以包含較多類型的子元素。

圖像相關元素:

src:該屬性指定圖片文件所在的位置,該屬性值既可以是相對路徑,也可以是絕對路徑。

alt:該屬性指定一段文本,該文本將作為圖片的提示信息。

除此之外,該元素還可以指定如下兩個可選屬性。

height:指定該圖片的高度,該屬性值可以是百分比,也可以是像素值。

width:指定該圖片的高度,該屬性值可以是百分比,也可以是像素值。

除此之外,與圖片

map:用于定義圖片映射。該元素主要可以包含一個或多個<area.../>子元素,每個<area.../>子元素定義一個區域,不同

area:用于定義圖片映射的內部區域。該元素只能是一個空元素,該元素除了可以指定id、style、class等核心屬性外,也可以指定如下幾個屬性。

????shape:指定該內部區域是哪種區域,該屬性的默認值是"rect",即矩形區域;除此之外,還可以是circle和ploy,分別代表圓形區域和多邊形區域。

????coords:指定多個坐標值,用于確定區域位置。

????href:用于確定該區域所鏈接的資源。

????alt:該屬性指定一段文本,該文本將作為該圖片的提示信息。

????target:指定使用框架集中的哪個框架來裝載另一個資源。該屬性的屬性值可以是_self、_blank、_top、_parent四個值,分別代表使用自身、新窗口、頂層框架、父框架來裝載新資源。

????media:指定目標URL所引用的媒體類型。默認值為all。只有當指定了href屬性時該屬性才有效。

表格相關元素:

table:用于定義表格,<table.../>元素只能包含0個或1個<caption.../>子元素(定義表格標題),0個或1個<thead.../>子元素(定義表格頭),0個或1個<tfoot.../>子元素(定義表格腳),多個<tr.../>子元素(定義表格行),多個<tbody.../>子元素(定義表格體)。該元素可以指定id、style和class等普通屬性,也可以指定onclick等事件屬性。除此之外,該元素還可以指定如下幾個屬性。

? ? cellpadding:指定單元格內容和單元格邊框之間的間距。該屬性值即可是像素值,也可是百分比。

? ? cellspacing:指定單元格之間的間距。該屬性值即可是像素值,也可是百分比。

? ? width:指定表格的寬度,該屬性值即可是像素值,也可是百分比。

caption:用于定義表格標題,該元素只能包含文本、圖片、超鏈接、文本格式化元素和表單

tr:定義表格行,該元素只能包含<td.../>或者<th.../>兩種元素,該元素可以指定id、style、class等核心屬性,還可以指定onclick等事件屬性。

td:定義單元格,該元素和<div.../>元素一樣,可以包含各種類型的子元素,包括在<td.../>元素里包含<table.../>子元素再次插入一個表格。該元素可以指定id、style和class等普通屬性,也可以指定onclick等事件屬性,除此之外,該元素還可以指定如下幾個屬性。

????colspan:指定該單元格跨多少列,該屬性值就是一個簡單數字。

????rowspan:指定此單元格可橫跨的行數。

????height:指定該單元格的高度,該屬性值即可是像數值,也可是百分比。

????width:指定該單元格的寬度,該屬性值即可是像素值,也可是百分比。

th:定義表格頁眉的單元格,和<td>標簽的用法幾乎完全一樣,只是瀏覽器呈現<th.../>元素時有一定差別。

tbody:定義表格的主體,該元素只能包含<tr.../>子元素,該元素可以指定id、style和class等普通屬性,也可以指定onclick等事件屬性。

thead:定義表格頭,用法與<tbody.../>基本相似,指定功能稍有差別。

tfoot:定義表格腳,用法與<tbody.../>基本相似,指定功能稍有差別

col:該元素用于為表格中的一個或多個列指定屬性值。該元素只能出現在<table.../>元素或<colgroup.../>元素內。該元素可指定id、style、class等核心屬性,還可指定onclick等事件屬性。除此之外,該元素還可指定如下屬性:

????span:指定該列可橫跨多少列。

????colgroup:該元素用于為表格中的一個或多個列指定屬性值。該元素只能出現在<tables.../>元素或<colgroup.../>元素內。該元素可指定id、style、class等核心屬性,還可指定onclick等事件屬性。

框架相關元素:

src:該屬性指定一個URL,指定該iframe將裝載哪個頁面。


HTML5新增通用屬性

ContentEditable屬性:具有"可繼承"的特點,如果一個HTML元素的父元素是"可編輯"的,那么它默認也是可編輯的,除非顯式指定contentEditable="false"。

designMode屬性:相當于一個全局的contentEditable屬性,如果把整個頁面的designMode屬性設置為no時,該頁面上所有可支持contentEditable屬性的元素都變成可編輯狀態;designMode屬性默認為off。

hidden屬性:hidden屬性支持true、false兩個屬性值,一旦把某個HTML元素的hidden設為true,就意味著通知瀏覽器不顯示該組件,瀏覽器也不會保留該組件所占用的空間。

spellcheck屬性:該屬性可支持true、false兩個屬性值,如果設置spellcheck="true",瀏覽器將會負責對用戶輸入的文本內容執行輸入檢查,如果檢查不通過,瀏覽器會對拼錯的單詞進行提示。

HTML5新增的常用元素

文檔結構元素:

article:該元素用于代表頁面上獨立、完整的一篇"文章",該元素表示的內容可以是一個帖子、一篇Blog文章、一篇短文、一條完整的回復等。總之,只要是一篇獨立的文檔內容,就應該使用<article.../>元素來表示。關于<article.../>的簡單規則如下:

? ? article元素內部可使用<header.../>定義文章"標題"部分。

? ? article元素內部可使用<footer.../>定義文章"腳注"部分。

? ? article元素內部可使用多個<section.../>把文章內容分成幾個"段落"。

? ? article:元素內部可嵌套多個<article.../>作為它的附屬"文章",比如一篇Blog文章后面可以有多篇回復文章。

section:該元素用于對頁面的內容進行分塊。<section.../>元素通過也可由標題和內容組成。關于<section.../>元素的簡單規則如下:

? ? 通常建議<section.../>元素包含一個標題(也就是<h1.../>~<h6.../>元素定義的標題)。

? ? <section.../>元素可以包含多個<article.../>元素,表示該"分塊"內部包含多篇文章。

? ? <section.../>元素可以嵌套<section.../>元素,用于表示該"分塊"包含多個"子分塊"。

nav:該元素專門用于定義頁面上的"主導航條"、側邊的"邊欄導航"、頁面內部的"頁面導航"、頁面下方的"底部導航"等,HTML5推薦將這些導航鏈接分別放在相應的<nav.../>元素中進行管理

aside:該元素專門用于定義當前頁面或當前文章的附屬信息,通常來說,推薦<aside.../>元素使用CSS渲染成側邊欄。

header:該元素主要用于為<article.../>元素定義文章"頭部"信息。該元素內部即可包含多個<h1.../>~<h6.../>這樣的標題元素,也可包含<hgroup.../>元素,還可包含普通的<p.../>、<span.../>等元素。

hgroup:該元素主要用于組織多個<h1.../>~<h6.../>這樣的標題元素。當<header.../>需要包含多個標題元素時,可以考慮使用<hgroup.../>把它們組成一組。

footer:該元素主要用于為<article.../>元素定義"腳注"部分,包括該文章的版權信息、作者授權信息等

figure:該元素用于表示一塊獨立的"圖片區域",該元素內部可包含一個或多個<img.../>元素所代表的圖片。除此之外,該元素內部還可包含一個<figcaption.../>元素,用于定義該"圖片區域"的標題

figcaption:該元素通常放在<figure.../>內部,用于定義"圖片區域"的標題。

將<aside.../>元素放在<body.../>內部,表明為整個頁面添加"邊欄"。

將<aside.../>元素放在其他父元素內部,表明為父元素添加"邊欄"。

語義相關元素:

mark:用于顯示HTML頁面中需要重點"關注"的內容,就像我們看書時喜歡用熒光筆把某些重點內容標注出來一樣。該元素可以指定id、style、class和hidden等通用屬性。瀏覽器通常會用黃色顯示<mark.../>標注的內容。

time:用來顯示標注內容是日期、時間或者日期時間。使用該元素時除了可以指定id、style、class和hidden等通用屬性之外,還可以指定如下屬性。

? ? datetime:該屬性主要用于向機器提供時間(向瀏覽者呈現的時間放在<time>和</time>之間),datetime屬性的屬性值應該是符合yyyy-MM-ddTHH:mm格式的日期時間。當然,也可以指定日期,或只指定時間。

兩個特殊功能的元素

meter:用于表示一個已知最大值和最小值的計算儀表。比如電池的剩余電量、速度表等。使用該元素時除了可指定id、style、class、hidden等通用屬性之外,還可指定如下屬性。

? ? value:指定計數儀表的當前值。默認為0,可以為該屬性指定一個浮點小數值。

? ? min:指定計數儀表的最小值。默認為0,可以為該屬性指定一個浮點小數值。

? ? max:指定計數儀表的最大值。默認為1,可以為該屬性指定一個浮點小數值。

? ? low:指定計數儀表指定范圍的最小值。該屬性值必須大于等于min屬性指定的值

? ? high:指定計數儀表指定范圍的最大值。該屬性值必須小于等于max屬性指定的值。

? ? optimum:指定計數儀表有效范圍的最佳值。如果該值大于high屬性指定的值,則意味著值越大越好;如果該值小于low屬性指定的值,則意味著值越小越好。

progress:用于表示一個進度條。使用該元素時除了可指定id、style、class、hidden等通用屬性之外,這可指定如下屬性。

? ? max:指定進度條完成時的值。

? ? value:指定進度條當前完成的進度值。

HTML5頭部和元信息:

script:該元素用于包含JavaScript腳本。關于JavaScript的介紹,請參考本身中關于JavaScript的相關章節。

style:該元素用于定義內部CSS樣式。關于內部CSS樣式的介紹,請參考本書中介紹CSS的相關章節。

link:該元素用于鏈接外部CSS樣式等資源。關于外部CSS樣式的介紹,請參考本書中介紹CSS的相關章節。

title:該元素用于定義文檔標題。該元素較為常用的屬性時id,作為其唯一標識。該元素只能包含文本內容,該文本內容就是該文本的標題。

base:該元素用于指定該頁面中所有鏈接的基準鏈接。

meta:該元素用于定義HTML頁面的元數據。

href:指定所有鏈接的基準鏈接。

target:指定超鏈接默認在哪個窗口打開鏈接。該屬性值只能是_blank、_parent、_self和_top其中之一。

http-equiv:指定元信息的名稱,該屬性指定的名稱具有特殊意義,它可以向瀏覽器傳回一些有用的信息,幫助瀏覽器正確地處理網頁內容。

name:指定元信息的名稱,該名稱值可以隨意指定。

content:指定元信息的值。

Expires:指定網頁的過期時間。一旦網頁過期,必須重新從服務器上下載。

Pragma:指定禁止瀏覽器從本地磁盤緩存中調閱頁面內容,瀏覽器一旦離開該網頁就無法脫機訪問該頁面。

Refresh:指定瀏覽器多長時間后自動刷新指定頁面。

Set-Cookie:設置Cookie。如果網頁過期,那么客戶端上的Cookie也將被刪除。

content-Type:設置該頁面的內容類型和所有的字符集。

HTML5新增的拖放API

啟動拖動:

對于普通元素而言,如果希望把它變成可拖動的,開發者只要把該元素draggable屬性設置為true即可。但僅僅設置該元素的draggable屬性還不夠,因為僅僅設置了draggable="true"只表示該元素可拖動,但拖動時并未攜帶數據,因此用戶看不到拖動效果。為了讓拖動操作能攜帶數據,應該為被拖動元素的ondragstart事件指定監聽器,在該監聽器中讓拖動操作可以攜帶數據。

接受"放":

不管是拖動圖片還是拖動div元素,拖動時都顯示一個"禁止"標志,這表明拖動圖片、拖動div時被拖動到"目的地"并不接受被拖動的元素,這是因為當被拖動元素被"拖過"document對象時,document對象默認阻止了拖動事件,而其他HTML組件也是位于document對象內的,因為他們不接受"放"。為了讓document可以接受"放",應該為document的ondragover事件指定監聽器,在監聽器中取消document對拖動事件的默認行為。

拖動操作相關事件:

事件? ? ? ????? ????????事件源? ? ? ? ? ? ? ? ? ????????????? ? ? 描述

ondragstart? ? ? ? ? ? ?被拖動的HTML元素? ? ? ? ? ? ?開始拖動操作時觸發該事件

ondrag? ? ? ? ? ? ? ? ? ? 被拖動的HTML元素? ? ? ? ? ? 拖動過程中會不斷地觸發該事件

ondragend? ? ? ? ? ? ? 被拖動的HTML元素? ? ? ? ? ? ?拖動結束時觸發該事件

ondragenter? ? ? ? ? ? 拖動時鼠標經過的元素? ? ? ? ?被拖動的元素進入本元素的范圍內時觸發該事件

ondragover? ? ? ? ? ? ? ?拖動時鼠標經過的元素? ? ? ? ?被拖動的元素進入本元素的范圍內拖動時會不斷地觸發該事件

ondragleave? ? ? ? ? ? ? ? 拖動時鼠標經過的元素? ? ? ? 被拖動的元素離開本元素時觸發該事件

ondrop? ? ? ? ? ? ? ? ? ? ? ? 拖動時鼠標經過的元素? ? ? ? ? 其他元素被放到了本元素中時觸發該事件

DataTransfer對象

dataTransfer.dropEffect:設置或返回拖放目標上允許發生的拖放行為。如果此處設置的拖放行為不在effectAllowed屬性設置的多種拖放行為之內,拖放操作將會失敗。該屬性值只允許為"none"、"copy"、"link"和"move"四個值之一。

dataTransfer.effectAllowed:設置或返回被拖動元素允許發生的拖動行為。該屬性值可設置"none"、"copy"、"copyLink"、"copyMove"、"link"、"linkMove"、"move"、"all"和"uninitialized"。

dataTransfer.items:該屬性返回DataTransferItems對象,該對象代表了拖動數據。

dataTransfer.setDraglmage(element, x , y):設置拖放操作的自定義圖標。其中element設置自定義圖表,x設置圖表與鼠標在水平方向的距離;y設置圖表與鼠標在垂直方向的距離。

dataTransfer.addElement(element):添加自定義圖標。

dataTransfer.types:該屬性返回一個DOMStringList對象,該對象包括了存入dataTransfer中數據的所有類型。

dataTransfer.getData(format):獲取DataTransfer對象中format格式的數據。

dataTransfer.setData(format,data):向DataTransfer對象中format格式的數據。format代表數據格式,data代表數據。

dataTransfer.clearData([format]):清除DataTransfer對象中format格式的數據。如果省略format格式,則意味著清除DataTransfer對象中的全部數據。

"拖"開始時(通過ondragstert事件監聽器來實現),程序把需要攜帶的數據放入DataTransfer對象中。

"放"下元素時(通過ondrop事件監聽器來實現),程序從DataTransfer對象中取出數據,并利用該數據進行相應的處理。

拖放行為:

通過設置DataTransfer對象effectAllowed、dropEffect兩個屬性可以控制拖放行為。effectAllowed用于控制被拖動元素的拖動行為,因此通常建議在ondragstart事件監聽器中設置DataTransfer用于控制被拖動元素的拖動行為,因此通常建議在ondragstart事件監聽器中設置DataTransfer對象的effectAllowed屬性;而dropEffect則控制被"放"入的目標組件的行為,因此通常建議在ondragover事件監聽器中設置DataTransfer對象的dropEffect屬性。

如果dropEffect設置的拖放行為不在effectAllowed屬性設置的多個拖放行為之內,拖放操作將會失敗。

? ??如果effectAllowed設為none,則不允許拖放該元素

? ? 如果dropEffect設置為none,則被拖動的元素不能"放"到本元素中。

? ? 如果effectAllowed設置為all或不設置,則dropEffect可設置為任何屬性值(因為都在all范圍之內),而且將會遵守dropEffect指定的拖放行為

? ? 如果effectAllowed指定了特定的拖放行為,例如:move、copy等,那么dropEffect指定的屬性值必須是effectAllowed指定的多個屬性值的子集。

改變拖放圖標:

通過調用DataTransfer對象的setDragImage還可以改變拖放圖標。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • HTML 5 HTML5概述 因特網上的信息是以網頁的形式展示給用戶的,因此網頁是網絡信息傳遞的載體。網頁文件是用...
    阿啊阿吖丁閱讀 4,030評論 0 0
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,784評論 1 92
  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網絡請求組件 FMDB本地數據庫組件 SD...
    陽明AGI閱讀 16,003評論 3 119
  • ??HTML5 規范了很多新 HTML 標記。為了配合這些標記的變化,HTML5 規范也用顯著篇幅定義了很多 Ja...
    霜天曉閱讀 719評論 0 1
  • 在高山租車時,照了兩張像,上車后,又來了一張。 車如外語,出行的工具,可惜我不會。 不管。 車上一路,看山川風光。...
    魯長安閱讀 165評論 0 0