HTML5經常使用元素與屬性

HTML5規範保持了對現有HTML的最大兼容,並保留了絕大部分元素和屬性,HTML推薦使用CSS來控制HTML文檔樣式

1、HTML5保留的經常使用元素

一、基本元素

    HTML保留的基本元素有以下幾個: html

  • <!--  -->: 定義HTML註釋 前端

  • <html>:HTML5文檔的根元素 java

  • <head>:定義HTML5文檔的頁面頭部分 android

  • <title>:定義HTML5文檔的標題 程序員

  • <body>:定義HTML5文檔的主體部分 web

  • <style>:用於引入樣式定義 編程

  • <h1>到<h6>:定義標題一到標題六 瀏覽器

  • <p>:定義段落 緩存

提示:幾乎全部的HTML元素均可指定id、style和class屬性,其中id屬性用於爲HTML元素指定一個惟一標識,該標識是經過DOM訪問HTML元素的重要途徑,class和style屬性是CSS樣式相關屬性。
  • <br>:插入一個換行 服務器

  • <hr>:定義水平線

  • <div>:定義文檔中的節,也就是咱們說的區塊,會佔滿一行

  • <span>:與<div>基本類似,定義的是一個行內標籤樣式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>基本標籤</title>
</head>
<body>
    <!-- 採用標題一到標題六來輸出文本 -->
    <h1>瘋狂Java講義</h1>
    <h2>瘋狂Android講義</h2>
    <h3>輕量級Java EE企業應用實戰</h3>
    <h4>瘋狂XML講義</h4>
    <h5>瘋狂Ajax講義</h5>
    <h6>經典Java EE企業應用實戰</h6>
    <!-- 輸出一條水平線 -->
    <hr />
    <!-- 使用三個span定義三節 -->
    <span>TOmcat</span><span>Jetty</span><span>Resin</span>
    <!-- 輸出換行 -->
    <br />
    <!-- 使用三個div定義三節 -->
    <div>Tomcat</div><div>Jetty</div><div>Resin</div>
    <!-- 使用三個p定義三個段落-->
    <p>Tomcat</p><p>Jetty</p><p>Resin</p>
</body>
</html>

二、文本格式化元素

  • <b>:定義粗體文本

  • <i>:定義斜體文本

  • <em>:定義強調文本,實際效果與斜體文本差很少

  • <strong>:定義粗體文本

  • <small>:定義小號字體文本,一般用來標註免責聲明、注意事項、法律規定和版權

  • <sup>: 定義上標文本

  • <sub>: 定義下標文本

  • <bdo>:定義文本顯示方向,該標籤可指定dir屬性,屬性值只能是ltr或rtl

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>格式化標籤</title>
</head>
<body>
<span><b>加粗文本</b></span><br />
<span><i>斜體文本</i></span><br />
<span><b><i>粗斜體文本</i></b></span><br />
<span><em>被強調的文本</em></span><br />
<p><strong>加粗文本</strong></p>
<small><span>小號字體文本</span></small><br />
<div>普通文本<sup>上標文本</sup></div>
<span>普通文本<strong><sub>下標加粗文本</sub></strong></span><br />
<!-- 指定文本從左到右(正常狀況)排列 -->
<bdo dir="ltr">從左到右排列的文本</bdo><br />
<!-- 指定文本從右向左排列 -->
<bdo dir="rtl">從右向左排列的文本</bdo><br />
</body>
</html>

三、語義相關元素

  • <abbr>:用於表示一個縮寫,可指定title屬性,該屬性指定該縮寫所表明的全稱

  • <address>:用於表示一個地址,斜體顯示文本。

  • <blockquote>:用於定義一段長的引用文本,瀏覽器會使用縮進的方式顯示,該標籤可指定cite屬性,該屬性指定該引用文本所引用的網址URL

  • <q>:用於定義一段短的引用文本,瀏覽器會爲這段被引用的文本添加引號

  • <cite>:用於表示做品的標題,斜體顯示

  • <code>:表示一段計算機代碼

  • <dfn>:用於定義一個專業術語,瀏覽器會使用粗體或斜體顯示

  • <del>:定義文檔中被刪除的文本。

  • <ins>:定義文檔中插入的文本,瀏覽器一般會使用下劃線顯示

  • <pre>:表示該元素所包含的文本已進行了「預格式化」

  • <samp>:用於定義示範文本內容

  • <kdb>:用於定義鍵盤文本

  • <var>:用於表示一個變量。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>語義相關元素</title>
	</head>
	<body>
		<!-- 使用q表示一段短的引用文本 -->
		<p>瘋狂Java的精神是<q cite="http://www.fkjava.org">瘋狂源自夢想,技術成就輝煌。</q>這也是全部Java程序員的夢想</p>
		<div>
			<!-- 使用blockquote表示一段長的引用文本 -->
			<blockquote>
				景色無故五十鉉,一炫一柱思年華。<br />
				莊生曉夢迷蝴蝶,望帝春心託杜鵑。<br />
				滄海月明珠有淚,藍田日暖玉生煙。<br />
				此情可待成追憶,只是當時已惘然。
			</blockquote>
			是唐朝詩人李商隱的表明做,詩中影藏着一種淡淡的憂傷,讓人沒法言說,但又沒法釋懷。
		</div>
		<p>
			<cite>《芙蓉鎮》</cite>、<cite>《藍風箏》</cite>是國內導演拍攝的最有思考深度的兩部電影。
		</p>
		<p>
			下面定義了一個Java類:<br />
			<code>
				public class Cat<br />
				{<br />
					private int name = "garfield";<br />
				}<br />
			</code>
		</p>
		<!-- pre元素包含的內容是"預格式化"文本 -->
		<pre>
			public class Cat
			{
				private int name = "garfield";
			}
		</pre>
		<p>
			<!-- 使用abbr定義縮寫 -->
			瘋狂Java教育中心的縮寫是:<abbr title="瘋狂Java教育">fkjava</abbr>
			<!-- 使用address定義地址 -->
			瘋狂軟件地址是:<address>廣州市天河區車坡大綱路4號馮弘大廈306-3011</address>
			<!-- 使用dfn定義專業術語 -->
			<p>
				<dfn>HTML</dfn>是一種廣爲人知的標記語言。
			</p>
			<p>
				可經過輸入以下命令:<br />
				<kbd>list -l</kbd><br />
				在Linux的Shell窗口查看當前目錄下全部文件、目錄的詳細信息。
			</p>
			<p>
				若是您在閱讀瘋狂Java體系圖書時,遇到有任何沒法理解的技術問題,<br />
				請登錄www.fkjava.org發帖提問,可按以下示例內容發帖:<br />
				<!-- 使用samp定義示範文本內容 -->
				<samp>
					我在閱讀XXX圖書的第X章、第X節時,遇到一個XXX問題,<br />
					錯誤提示信息是:XXX。
				</samp>
			</p>
			<!-- 使用var定義變量 -->
			<var>i</var>、<var>j</var>、<var>k</var>一般用於做爲循環計數器變量。
			<!-- 使用del和ins表示修訂 -->
			<p>Android是一個<del>開發</del><ins>開放</ins>式的手機、平板電腦操做系統</p>
			
		</p>
	
	</body>
</html>

四、超連接和錨點

HTML5保留了定義超連接的<a.../>元素,它有以下3個重要的屬性:

  • href:指定超連接所關聯的另外一個資源

  • target:指定使用哪一種框架來裝載資源,有_self、_blank、_top、 _parent四個值

  • media:指定目標URL所引用的媒體類型,默認爲all,它是HTML5新 增的屬性

五、列表相關元素

  • <ul>:定義無序列表

  • <ol>:定義有序列表,該元素還能夠指定如下三個屬性:

                start:指定列表項的起始數字

             type:指定使用哪一種類型的編號

            reversed:該屬性指定是否將排序反轉

  • <li>:定義列表項目

  • <dl>:也用於定義列表,只能包含<dt>和<dd>兩個子元素

  • <dt>:用於定義列表,只能包含<dd>子元素

  • <dd>:定義普通列表項

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表相關標籤</title>
	</head>
	<body>
		<!-- 定義無序列表 -->
		<ul>
			<li>瘋狂Java講義</li>
			<li>輕量級Java EE 企業應用實戰</li>
			<li>瘋狂Android講義</li>
		</ul>
		<!-- 定義有序列表 -->
		<ol start="2" type="I">
			<li>瘋狂Java講義</li>
			<li>輕量級Java EE 企業應用實戰</li>
			<li>瘋狂Android講義</li>
		</ol>
		<!-- 定義列表 -->
		<dl>
			<!-- 定義標題列表項 -->
			<dt>瘋狂Java體系</dt>
			<dd>瘋狂Java講義</dd>
			<dd>輕量級Java EE企業應用實戰</dd>
			<dd>瘋狂Android講義</dd>
			<!-- 定義標題列表項 -->
			<dt>做者其餘圖書</dt>
			<dd>Struts 2.1 權威指南</dd>
			<dd>基於J2EE的Ajax寶典</dd>
		</dl>
	</body>
</html>

六、圖像相關元素

HTML5保留了<img.../>元素在頁面中定義圖像,它是一個空元素,它必須制定如下兩個屬性:

  • src:指定圖片文件所在的位置,能夠是相對或絕對路徑

  • alt:指定一段文本,做爲圖片的提示信息

<img>的兩個可選屬性:

  • height:圖片高度

  • width:圖片寬度

與<img>相關的標籤:

  • <map>:定義圖片映射

  • <area>:定義圖片映射的內部區域

七、表格相關元素

<table>:用於定義表格,它能夠指定以下屬性:

  • cellpadding:指定單元格內容和單元格邊框之間的間距

  • cellspacing:指定單元格時間的間距

  • width:指定表格的寬度

注意:HTML5建議將表格的全部屬性都放到CSS中定義
  • <caption>:用於定義表格標題

  • <tr>:定義表格行

  • <td>:定義單元格,它能夠指定以下幾個屬性:

  • colspan:指定該單元格跨多少列

  • rowspan:指定單元格可橫跨的行數

  • height:指定該單元格的高度

  • width:指定該單元格的寬度

  • <th>:定義表格頁眉的單元格

  • <tbody>:定義表格的主體

  • <thead>:定義表格頭

  • <tfoot>:定義表格腳

注意:若是使用<thead.../>和<tfoot.../>標籤,建議使用以下次序使用它們: <thead.../>、<tfoot.../>、<tbody.../>,瀏覽器會自動將<tfoot.../>呈如今最下面
  • <col>:該元素爲表格中的一個或多個列指定屬性值

  • <colgroup>:該元素用於爲表格中的一個或多個列指定屬性值

八、框架相關元素

    HTML5再也不推薦在頁面中使用框架集,但保留了<iframe.../>元素,它有 一個屬性src,

    該屬性指定一個URL,指定該iframe將裝載那個頁面

2、HTML5新增的通用屬性

一、contentEditable屬性

    HTML5爲大部分HTML元素增長了contentEditable屬性,若是將該屬性的值設爲true,那麼瀏覽器容許開發者直接編輯該HTML元素裏的內容,而且它具備可繼承性

    HTML5爲容許設置contentEditable屬性的元素提供了isContentEditable屬性,當元素可編輯則返回true,不然false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>contentEditable屬性</title>
	</head>
	<body>
		<!-- 直接指定contentEditable=「true」代表該元素是可編輯的 -->
		<div contenteditable="true" style="width: 500px; border:1px solid black">
			瘋狂Java講義
			<!-- 該元素的父元素有contentEditable=「true」,所以該表格也是能夠編輯的 -->
			<table style="width: 420px; border-collapse: collapse;" border="1">
				<tr>
					<td>瘋狂Java講義</td>
					<td>瘋狂Android講義</td>
				</tr>
				<tr>
					<td>輕量級Java EE企業應用實戰</td>
					<td>經典Java EE企業應用實戰</td>
				</tr>
			</table>
		</div>
		<hr />
		<!-- 這個表格默認是不可編輯的,雙擊以後該表格變爲 -->
		<table id="target" ondblclick="this.contentEditable=true" style="width: 420px; border-collapse: collapse;" border="1">
			<tr>
				<td>Java</td>
				<td>Ruby</td>
			</tr>
			<tr>
				<td>C/C++</td>
				<td>Python</td>
			</tr>
		</table>
	
	</body>
</html>

二、designMode屬性

designMode屬性至關於一個全局的contentEditable屬性,若是把整個頁面的designMode屬性設置爲on,則該頁面上全部可支持contentEditable屬性的元素都編程可編輯狀態

document.designMode = "on";

三、hidden屬性

HTML5爲全部元素提供一個hidden屬性,若是某元素的hidden設爲true 則瀏覽器不顯示該組件,且不保留該組件所佔空間

<div id="target" hidden="true" style="height: 80px;">文字內容</div>
		<button onclick="var target=document.getElementById('target');
			target.hidden=!target.hidden;">顯示/隱藏</button>

四、spellcheck屬性

HTML5<input.../><textarea.../>等元素增長了spellcheck 性,該屬性支持 truefalse兩個值,若是爲true,則瀏覽器會對用戶 的輸入進行語法檢

<!-- 指定執行拼寫檢查 -->
<textarea spellcheck="true" rows="3" cols="40"></textarea>

3、HTML新增的經常使用元素

一、文檔結構元素

  • <article>:該元素定義頁面上一篇獨立、完整的「文章」.

      <article.../>能夠包含<header.../>做爲頭部

      <article.../>能夠包含<footer.../>做爲尾部

      <article.../>能夠包含<section.../>做爲文章的分段

      <article.../>能夠包含<article.../>做爲文章的附屬文章

  • <section>:該元素用於對頁面上的內容進行分塊

      建議使用<h1>-<h6>做爲<section.../>的標題

      <section.../>能夠包含<article.../>

      <section.../>也能夠包含<section.../>

注意:<article.../>和<section.../>很容易混淆,它們能夠包含不少子元素,也能夠相互嵌套。通常    使用<article.../>表達一篇獨立、完整的文章,而使用<section.../>對頁面內容進行分塊。
  • <nav>:該屬性用於定義頁面上的「導航條」

  • <aside>:該屬性用於定義頁面內容的附屬信息,推薦此屬性配合CSS渲染成側邊欄

  • <header>:該屬性主要爲<article.../>定義頭部信息

  • <hgroup>:該元素組織多個<h1>~<h6>這樣的標題元素

  • <footer>:該元素主要爲<article>定義腳註信息

  • <figure>:該元素用於表示一塊獨立的「圖片區域」,它能夠包含一個或多個由<img>元素組成的圖片,除此以外,它還能夠包含一個<figcaption>元素,用於表示該圖片區域的標題

  • <figcaption>:一般放在<figure>元素裏,用於表示圖片區域的標題

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5新增元素 - article</title>
    </head>
    <body>
        <article>
            <!-- 帖子的「頭部」 -->
            <header>
                <h1>學習Android,必須先學習Java嗎?</h1>
                <div>做者:crazystu</div>
            </header>
            <p>
                學習Android,必須先學習Java嗎?
                Android上的應用程序只能用Java編寫嗎?能夠用C++嗎?
            </p>
            <!-- 帖子的「回覆」部分,用section元素表示 -->
            <section>
                <article>
                    <!-- 回覆的頭部 -->
                    <header>
                        <h2>仍是得學習Java</h2>
                        <div>做者:kongyeeku</div>
                    </header>
                    <p>
                        雖然Android不必定要使用Java開發,還能夠選擇JavaScript<br />
                        或NDK開發,但Java畢竟是Android主要的開發語言,<br />
                        所以建議學習Android以前仍是學習Java
                    </p>
                </article>
                <!-- 每個article表明一個回覆 -->
                <article>
                    <!-- 回覆的頭部 -->
                    <header>
                        <h2>Java是基礎</h2>
                        <div>做者:kuan008</div>
                    </header>
                    <p>
                        Java是基礎,學好Java再去學習Android事半功倍。
                    </p>
                </article>
            </section>
            <!-- 帖子的」腳註「 -->
            <footer>
                以上帖子和回覆只表明我的觀點,不表明瘋狂Java聯盟的觀點或立場
            </footer>
        </article>
    </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5新增元素 - aside</title>
  </head>

  <body>
      <article>
        <!-- 帖子的頭部 -->
        <header>
            <h1>學習Android,必須先學習Java嗎?</h1>
            <div>做者:crazystu</div>
        </header>
        <p>
            學習Android,必須先學習Java嗎?
            Android上的應用程序只能用Java編寫嗎?能夠用C++嗎?
        </p>
        <!-- 帖子的「回覆」部分,用section元素表示 -->
        <section>
            <!-- 回覆的頭部 -->
            <header>
                <h2>仍是得學習Java</h2>
                <div>做者:kongyeeku</div>
            </header>
            <p>
                雖然Android不必定要使用Java開發,還能夠選擇JavaScript<br />
                或NDK開發,但Java畢竟是Android主要的開發語言,<br />
                所以建議學習Android以前仍是學習Java            
            </p>
        </section>
      </article>
  </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5新增結構元素 - figure</title>
    </head>
    
    <body>
        <figure style="border:2px solid black; padding:5px; width:500px;">
            <figcaption><b>瘋狂Java體系圖書</b></figcaption>
            <img src="images/java.png" alt="瘋狂Java">
            <img src="images/android.png" alt="瘋狂Android">
            <img src="images/ee.png" alt="輕量級Java EE">            
        </figure>
    </body>
</html>

二、語義相關元素

HTML5提供瞭如下兩個語義相關的元素:

  • <mark>:用於顯示頁面中須要重點關注的內容,瀏覽器一般會使用黃色來標註,好比搜索結果中用戶輸入的關鍵字

  • <time>:用於顯示被標註的內容是日期、時間或日期時間,該元素有一個datatime屬性,用於向機器提供時間

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>新增的語義相關元素 - mark和time</title>
    </head>
    <body>
        <article>
            <header>
                <h2>瘋狂軟件即將引入<mark>HTML5</mark>相關課程</h2>
            </header>
            <p>
                <mark>HTML5</mark>是下一代的HTML規範。<br />
                <mark>HTML5</mark>即將把前端開發者從繁重的開發中解放出來<br />
                爲了把握技術潮流的脈搏,瘋狂軟件教育計劃在
                <time datetime="2012-04-21">2012年4月</time>引入<mark>HTML5</mark>相關課程
            </p>
        </article>
    </body>
</html>
  • <details>:用於顯示一段詳細信息或某個主題的細節,一般它會跟<summary>元素結合使用,把<summary>放在<details>中,爲其定義摘要信息,當用戶點擊摘要信息時,瀏覽器會顯示出詳細內容。目前只有Chrome瀏覽器支持這兩個屬性

<details>
    <summary>芙蓉鎮</summary>
    《芙蓉鎮》是一部極好的電影,每一箇中國人都不該該錯過。
</details>
  • <meter>:用於表示一個已知最大值和最小值的計數儀表,它能夠指定以下屬性:

    value:指定計數儀表的當前值,默認爲0

    min:指定計數儀表的最小值,默認爲0

    max:指定計數儀表的最大值,默認爲1

    low:指定計數儀表制定範圍的最小值,它必須大於min

    high:指定計數儀表指定範圍的最大值,它必須小於max

    optimum:指定計數儀表有效範圍的最佳值

  • <progress>:用於表示一個進度條,它能夠指定以下屬性:

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

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

4、HTML5頭部和元信息

HTML5使用<head.../>元素定義文檔頭,該元素能夠包含以下子元素:

  1. <script>:該元素用於包含JavaScript腳本

  2. <style>:該元素用於定義內部CSS樣式

  3. <link>:該元素用於連接外部CSS樣式資源

  4. <title>:該元素定義文檔標題

  5. <base>:該元素用於指定該頁面中全部連接的基準連接

  6. <meta>:該元素用於定義HTML頁面的元數據,也就是一些name-value對,它能夠指定以下屬性

  • http-equiv:指定元信息的名稱

  • name:指定元信息的名稱,能夠隨意指定

  • content:指定元信息的值

<head>
    <title>我是標題</title>
    <meta name="author" content="Yeeku.H.Lee">
    <meta name="websit" content="http://www.xxx.org">
    <meta name="copyright" content="2001-2008 xxx.org">
    <meta name="Keywords" content="Java論壇, Java技術論壇">
</head>

http-equiv屬性能夠指定以下值:

  • Expires:指定頁面的過時時間,一旦過時必須從服務器下載

<meta http-equiv="Expires" content="Sat Sep 27 16:12:36 CST 2008">
  • Progma:指定禁止瀏覽器從本地磁盤緩存中調閱頁面內容

<meta http-equiv="Progma" content="no-cache">
  • Refresh:指定瀏覽器多長時間後自動刷新指定頁面

<!-- 設置2秒後自動刷新本頁面 -->
<meta http-equiv="Refresh" content="2" />
<!-- 設置2秒後自動刷新http://www.xxx.org -->
<meta http-equiv="Refresh" content="2;URL= / >
  • Set-Cookie:設置Cookie,若是網頁過時,那麼Cookie也將被刪除

<meta http-equiv="Set-Cookie" content="name=value expires=Sat Sep 27 16:12:36 CST 2008, path=" />
  • content-Type:設置該頁面的內容類型和所用的字符集

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

5、HTML5新增的拖放API

HTML5新增的拖放API,可讓HTML頁面的任意元素變得能夠被拖放,經過它能夠開發出更友好的人機交互界面

一、啓動拖動

在HTML5中,把須要拖動的元素的draggable屬性設置爲true,就表示它能夠被拖動了,但此時它未攜帶數據,因此用戶是看不到效果的,爲了讓拖動操做能攜帶數據,應該爲被拖動元素的ondragstart事件指定監聽器。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>可拖動的DIV</title>
</head>
<body>
<div id="source" style="width:80px;height:80px;border:1px solid black;background-color:#bbb;" draggable="true">可拖動的Div</div>

<script>
  var source = document.getElementById('source');
  source.ondragstart = function (evt) {
    evt.dataTransfer.setData('text/plain', 'www.xxx.org');
  } 
</script>
</body>
</html>

二、接受「放」操做

爲了讓document接受「放」操做,應該爲document的ondragover事件指定監聽器,在監聽器中取消document對拖動事件的默認行爲

document.ondragover = function (evt) {
  //取消事件的默認行爲
  return false;
}
但Firefox和Chrome對此操做有不一樣的反應,因此須要對document的ondrop事件設置監聽器

document.ondrop = function (evt) {
  //取消事件的默認行爲
  return false;
}
下表是用戶在拖放HTML元素時可能會觸發的事件

事件 事件源 描述
ondragstart 被拖動的HTML元素 開始拖動操做時觸發該事件
ondrag 被拖動的HTML元素 拖動過程當中會不斷的觸發該事件
ondragend 被拖動的HTML元素 拖動結束時觸發該事件
ondragenter 拖動時鼠標通過的元素 被拖動的元素進入本元素的範圍內時候
ondragover 拖動時鼠標通過的元素 被拖動的元素進入本元素的範圍內拖動時會不斷觸發該事件
ondragleave 拖動時鼠標通過的元素 被拖動的元素離開本元素時觸發該事件
ondrop 拖動時鼠標通過的元素
其餘元素被放到了本元素中時觸發該事件

下面的代碼實現了一個能夠自由拖動的<div>元素


<!DOCTYPE html>
<html>
<head>
  <meat charset="utf-8">
  <title></title>
  <style>
    div#source {
      width: 80px;
      height: 80px;
      background-color: #bbb;
    }
  </style>
</head>
<body>
  <div id="source" draggable="true">可拖動Div</div>

  <script>
    var source = document.getElementById('source');
    source.ondragstart = function (evt) {
      evt.dataTransfer.setData('text/plain', 'www.baidu.com');
    }
    document.ondragover = function (evt) {
      return false;   //取消事件默認行爲
    }
    document.ondrop = function (evt) {
      source.style.position = 'absolute';
      source.style.left = evt.pageX + 'px';
      source.style.top = evt.pageY + 'px';
      return false;      //取消事件默認行爲
    }
  </script>
</body>
</html>



三、DataTransfer對象

四、拖放行爲

五、改變拖放圖標

相關文章
相關標籤/搜索