整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
學(xué)習(xí)網(wǎng)頁(yè)的概念和分類，了解靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)的不同；了解網(wǎng)頁(yè)瀏覽器的工作原理。了解HTML,XHTML,HTML5的概念，制作簡(jiǎn)單的HTML頁(yè)面的開發(fā)。
可以在internet上通過(guò)網(wǎng)頁(yè)瀏覽信息，如新聞，圖片等，還可發(fā)布信息，如招聘信息等，網(wǎng)頁(yè)是在某個(gè)地方某一臺(tái)計(jì)算機(jī)上的一個(gè)文件。
網(wǎng)頁(yè)主要由3部分組成：結(jié)構(gòu)，表現(xiàn)，行為。
靜態(tài)網(wǎng)頁(yè)的特點(diǎn)是不論在何時(shí)何地瀏覽這個(gè)網(wǎng)頁(yè)，看到的形式和內(nèi)容都相同，且只能瀏覽，用戶無(wú)法與網(wǎng)站進(jìn)行互動(dòng)。靜態(tài)頁(yè)面由HTML編寫，擴(kuò)展名一般為.htm, .html, .shtml, .xml等。與動(dòng)態(tài)頁(yè)面相比，動(dòng)態(tài)網(wǎng)頁(yè)是以.asp, .jsp, .php, .perl, .cgi等形式為后綴。
動(dòng)態(tài)網(wǎng)頁(yè)指網(wǎng)頁(yè)的內(nèi)容可以根據(jù)某種條件而自動(dòng)改變。
采用B/S結(jié)構(gòu)，即瀏覽器/服務(wù)器結(jié)構(gòu)，用戶工作界面是通過(guò)www瀏覽器來(lái)實(shí)現(xiàn)的：
瀏覽器的工作原理：
www的基礎(chǔ)是HTTP協(xié)議，web瀏覽器就是用于通過(guò)url來(lái)獲取并顯示web網(wǎng)頁(yè)的一種軟件工具，url用于指定要取得的Internet上資源的位置與方式。
HTML是一種用來(lái)制作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言，用其編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)。
可擴(kuò)展超文本標(biāo)記語(yǔ)言XHTML：
XHTML是不需要編譯，可以直接由瀏覽器執(zhí)行，是一種增強(qiáng)了的HTML。它的可擴(kuò)展性和靈活性將適應(yīng)未來(lái)網(wǎng)絡(luò)應(yīng)用的更多需求，是基于XML的應(yīng)用。開發(fā)者在HTML4.0的基礎(chǔ)上，用XML的規(guī)則對(duì)其進(jìn)行一些擴(kuò)展，由此得到了XHTML，所以，建立XHTML的目的是為了實(shí)現(xiàn)HTML向xml的過(guò)渡。
HTML5簡(jiǎn)化了：<!DOCTYPE html>，簡(jiǎn)化了DOCTYPE,簡(jiǎn)化了字符集聲明，以瀏覽器的原生能力替代腳本代碼的實(shí)現(xiàn)，簡(jiǎn)單而強(qiáng)大的HTML5API。
文件擴(kuò)展名是操作系統(tǒng)用來(lái)標(biāo)志文件格式的一種機(jī)制。擴(kuò)展名如同文件的身份說(shuō)明，區(qū)別了文件的類別和作用。
HTML網(wǎng)頁(yè)的文件后綴名是.html或者.htm.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"xxx">
聲明的作用，告訴瀏覽器所書寫的HTML代碼的版本。
復(fù)制代碼<meta>標(biāo)簽，是HTML文檔<head>標(biāo)簽內(nèi)的一個(gè)輔助性標(biāo)簽，meta標(biāo)簽分為2個(gè)重要的屬性：name和http-equiv，通常用于能夠優(yōu)化頁(yè)面被搜索的可能性。
meta標(biāo)簽下name屬性的使用：
<head>
<meta name="keywords" content="nine, twenty-three">
<meta name="description" content="...">
<meta name="generator" content="Dreamweaver">
<meta name="author" content="depp">
<meta name="robots" content="all">
</head>
復(fù)制代碼meta標(biāo)簽下的另一個(gè)屬性http-equiv,其作用是反饋給瀏覽器一些明確的信息，幫助瀏覽器更精確地展示頁(yè)面。
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
</head>
復(fù)制代碼link標(biāo)簽，定義了一個(gè)外部文件的鏈接，經(jīng)常被用于鏈接外部css樣式。
base標(biāo)簽為整個(gè)頁(yè)面定義了所有鏈接的基礎(chǔ)定位，其主要的作用是確保文檔中所有的相對(duì)url都可以被分解成確定的文檔地址。
style標(biāo)簽用于定義css的樣式。表明了在頁(yè)面中引入一個(gè).style的樣式表。
script標(biāo)簽用于定義頁(yè)面內(nèi)的腳本。
titl標(biāo)題標(biāo)簽，body體標(biāo)簽.
一個(gè)好的HTML文檔應(yīng)具備以下3個(gè)方面：
<br>..</br>
<p>...</p>
復(fù)制代碼<p align=left>...</p>
<p align=center>...</p>
<p align=right>...</p>
復(fù)制代碼給文本加標(biāo)注：<acronym title="">...</acronym>注釋的內(nèi)容放在title屬性后的引號(hào)中，被注釋的內(nèi)容放在標(biāo)簽內(nèi)。
無(wú)序列表：ul,li，有序列表：ol li
定義列表：
<dl>
<dt>...</dt>
<dd>...</dd>
<dt>...</dt>
<dd>...</dd>
</dl>
復(fù)制代碼所以總的來(lái)說(shuō)：jepg可以壓縮圖像的容量，png的質(zhì)量較好，gif可以做動(dòng)畫。
矢量圖
說(shuō)說(shuō)矢量圖和位圖最大的區(qū)別：
無(wú)論是否對(duì)圖像進(jìn)行縮放，都不會(huì)影響矢量圖的效果，但會(huì)影響圖的質(zhì)量。
設(shè)計(jì)者一般只愿意將logo,ui圖標(biāo)，標(biāo)識(shí)符號(hào)等簡(jiǎn)單圖像存為矢量圖。
圖像的分辨率
分辨率的單位是dpi即每英寸顯示的線數(shù)。通常所指的分辨率有兩種，屏幕分辨率和圖片分辨率，屏幕分辨率即計(jì)算機(jī)顯示器默認(rèn)的分辨率。
一般目前大部分顯示器的分辨率是1024px x 768px，圖片分辨率定義是用于量度位圖圖像內(nèi)數(shù)據(jù)量多少的一個(gè)參數(shù)。
分辨率越高的圖像，包含的數(shù)據(jù)越多，圖像的容量就越大，會(huì)消耗更多的計(jì)算機(jī)資源，需要更大的存儲(chǔ)空間。
分辨率指的是每英寸的像素值，通過(guò)像素和分辨率的換算可以測(cè)算圖片的長(zhǎng)度。
頁(yè)面中的圖像
<img src=... alt=.../>
復(fù)制代碼<img style="vertial-align:text-top"/>
復(fù)制代碼<img style="vertical-align:middle"/>
復(fù)制代碼<img style="vertical-align:text-bottom"/>
復(fù)制代碼<img style="vertical-alignbaseline"/>
復(fù)制代碼hspace=30px表示圖像左，右兩邊與頁(yè)面其他內(nèi)容隔30px的距離。vspace=30px表示圖像上，下兩邊與頁(yè)面的其他內(nèi)容的間隔距離是30px。
<img src="" widht="" height="">
<img src="..." border=>
<hr align=".." width="..." size="...">
<a href="鏈接對(duì)象的路徑">鏈接錨點(diǎn)對(duì)象</a>
復(fù)制代碼把郵箱留給需要聯(lián)系你的人
<a href="mailto:郵箱地址">鏈接錨點(diǎn)對(duì)象</a>
復(fù)制代碼dashed 虛線
double 雙線
groove 槽線
inset 內(nèi)陷
outset 外陷
復(fù)制代碼熱點(diǎn)圖像區(qū)域的鏈接
map標(biāo)簽：
<map id=...>
<area shape="..." coords="..." href="...">
</map>
復(fù)制代碼shape屬性，用于確定選區(qū)的形狀，rect矩形，circle圓形，poly多邊形。href屬性，就是超鏈接。coords屬性，用于控制形狀的位置，通過(guò)坐標(biāo)來(lái)找到這個(gè)位置。
計(jì)算矩形的面積
<html>
<head>
<title>計(jì)算矩形的面積</title>
<style type="text/css">
.result {font-weight:bold;}
</style>
<script language="JavaScript">
function calculate() {
var length = document.data.length.value;
var width = document.data.width.value;
var height = document.data.height.value;
var area = document.getElementById('area');
area.innerHTML = length*widht;
volume.innerHTML = length*widht*height;
}
</script>
復(fù)制代碼<form action="my.php"></form>
復(fù)制代碼它表明了這是一個(gè)表單，其作用是提交my.php頁(yè)面中的數(shù)據(jù)。
<form name="data">
復(fù)制代碼原理：在客戶端接收用戶的信息，然后將數(shù)據(jù)遞交給后臺(tái)的程序來(lái)操控這些數(shù)據(jù)。
<script language="JavaScript">
復(fù)制代碼如果通過(guò)引用外部javascript程序，就像鏈接外聯(lián)樣式：
<script type="text/javascript" src="dada.js"></script>
復(fù)制代碼<form action="da.php"></form>
復(fù)制代碼提交方式用get，表單域中輸入的內(nèi)容會(huì)添加在action指定的url中，當(dāng)表單提交之后，用戶會(huì)獲取一個(gè)明確的url。get在安全性上較差，所有表單域的值直接呈現(xiàn)。post除了有可見(jiàn)的處理腳本程序，別的東西都可以隱藏。
<form name="dada">
復(fù)制代碼<form action="mailto:da@qq.com" method="post" name="dada"
enctype="text/plain" target="_blank"></form>
復(fù)制代碼是指用戶輸入數(shù)據(jù)的地方，表單域可分為3個(gè)對(duì)象，input, textarea, select。
input對(duì)象下的多種表單的表現(xiàn)形式。
<input name="" type="" value="" size="" maxlength="">
復(fù)制代碼<form action="" method="post">
<input name="name" type="text" size="20" maxlength="12">
</form>
<input name="secret" type="password" size="20" maxlength="20">
<input name="one" type="radio" value="one" checked="checked">
<input name="one" type="radio" value="two">
<input type="submit" value="確定">
<input type="reset" value="恢復(fù)">
復(fù)制代碼創(chuàng)建submit按鈕或reset按鈕時(shí)，name屬性不是必需的。
使用hidden來(lái)記錄頁(yè)面的數(shù)據(jù)并將它隱藏起來(lái)，用戶對(duì)這些數(shù)據(jù)通常并不關(guān)心，但是必須提交數(shù)據(jù)。
<form action=da.asp>
<input type=hidden name=somehidden value=dada>
<input type=submit value=下一頁(yè)>
</form>
復(fù)制代碼image樣式的表單
<input type="image" src="圖片/小圖標(biāo).jpg" alt="確定">
復(fù)制代碼file上傳文件的樣式表單
file樣式表單允許用戶上傳自己的文件
<html>
<head>
<title>file樣式的表單</title>
<style type="text/css">
body {font:120% 微軟雅黑;}
input {font:100% 微軟雅黑;}
</style>
</head>
上傳我的文件：
<form action="..." method="post" enctype="multipart/form-data">
<input type="file" name="uploadfile" id="uploadfile"/>
</form>
</body>
</html>
復(fù)制代碼textarea對(duì)象的表單
textarea對(duì)象的表單
<html>
<head>
<title>file樣式的表單</title>
<style type="text/css">
body{font:120% 微軟雅黑;}
textarea{font:80% 微軟雅黑;color:navy;}
</style>
</head>
<body>
留言板
<form action="..." method="post" enctype="multipart/form-data">
<textarea name="dada" rows="10" cols="50" value="dada">請(qǐng)說(shuō)：</textarea>
</form>
</body>
</html>
復(fù)制代碼select對(duì)象的表單
select對(duì)象的表單
<form action="">
地址:
<select name="da1">
<option>1</option>
</select>
</form>
復(fù)制代碼使用optgroup標(biāo)簽配合label屬性來(lái)給選項(xiàng)分類：
<select name="上海">
<optgroup label="da1">
<option>1</option>
</optgroup>
<optgroup label="da2">
<option>2</option>
</optgroup>
</select>
復(fù)制代碼在select標(biāo)簽中加入size屬性即可，如size=6表示是一個(gè)能容納6行文字的文本框，超出設(shè)置的行數(shù)時(shí)，將出現(xiàn)滾動(dòng)條。
<select name="上海" size="6">
復(fù)制代碼表單域集合：表單域的代碼由fieldset標(biāo)簽和legend標(biāo)簽組合而成。
<form action="..." method="post">
<fieldset>
<legend>注冊(cè)信息：</legend>
輸入用戶名：<input name="name" type="text" size="20" maxlength="12">
</fieldset>
</form>
復(fù)制代碼表單輸入類型
<input type="url" name="webUrl" id="webUrl" value="http://wwwxxx"/>
復(fù)制代碼<input type="email" name="dada" id="dada" value="23@qq.com"/>
復(fù)制代碼<input type="range" name="volume" id="volume" min="0" max="1" step="0.2"/>
復(fù)制代碼<input type="number" name="score" id="score" min="0" max="10" step="0.5"/>
復(fù)制代碼增加表單的特性以及元素
<input name="name" type="text" form="form1" required/>
<form id="form1">
<input type="submit" value="提交"/>
</form>
復(fù)制代碼<form id="form1" method="post">
<input name="name" type="text" form="form1"/>
<input type="submit" value="提交到page1" formaction="?page=1”/>
<input type="submit" value="提交到page2" formaction="?page=2"/>
<input type="submit" value="提交"/>
</form>
復(fù)制代碼placeholder特性
<input name="name" type="text" placeholder="請(qǐng)輸入關(guān)鍵詞"/>
復(fù)制代碼autofocus特性：用于當(dāng)頁(yè)面加載完成時(shí)，可自動(dòng)獲取焦點(diǎn)，每個(gè)頁(yè)面只允許出現(xiàn)一個(gè)有autofocus特性的input元素。
<input name="key" type="text" autofocus/>
復(fù)制代碼autocomplete特性用于form元素和輸入型的Input元素，用于表單的自動(dòng)完成。
input name="key" type="text" autocommplete="on"/>
復(fù)制代碼autocomplete特性有三個(gè)值，可以指定"on","off"和""不指定，不指定就將使用瀏覽器的默認(rèn)設(shè)置。
<input name="email" type="email" list="emaillist"/>
<datalist id="emaillist">
<option value="23#qq.com">xxxx</option>
</datalist>
復(fù)制代碼keygen元素提供一個(gè)安全的方式來(lái)驗(yàn)證用戶。
<form action="">
<input type="text" name="name"/><br>
<keygen name="security"/>
<br><input type="submit"/>
</form>
復(fù)制代碼<form oninput="x.value=dada.value">
<input type="range" name="volume" value="50"/>
<output name="x"></output>
</form>
復(fù)制代碼為某個(gè)表單內(nèi)部的元素設(shè)置了required特性，那么這項(xiàng)的值不能為空，否則無(wú)法提交表單。
<input name="name" type="text" placeholder="dada" required/>
復(fù)制代碼<input name="code" type="text" value="" pattern="[0-9]{6}" placeholder="da"/>
復(fù)制代碼<input type="range" name="dada" id="dada" min="0" max="1" step="0.2"/>
復(fù)制代碼<form action="dada.asp" novalidate="novalidate">
<input type="email" name="user_email"/>
<input type="submit"/>
</form>
復(fù)制代碼var validityState=document.getElementById("username").validity;
復(fù)制代碼var willValidate = document.getElementById("username").willValidate;
復(fù)制代碼var validationMessage=document.getElementById("username").validationMessage;
復(fù)制代碼好了各位，以上就是這篇文章的全部?jī)?nèi)容，能看到這里的人都是人才。我后面會(huì)不斷更新技術(shù)相關(guān)的文章，如果覺(jué)得文章對(duì)你有用，歡迎給個(gè)“贊”，也歡迎分享，感謝大家 ！！
簡(jiǎn)介】
拖放是一種常見(jiàn)的特性, 屬于html5標(biāo)準(zhǔn)的一部分, 即抓取對(duì)象以后拖動(dòng)到另一個(gè)位置, 在html5中, 任何元素都可被設(shè)置拖放。首先, 我們要給需要拖動(dòng)的HTML元素啟用拖動(dòng)功能, 設(shè)置屬性draggable="true",
<div draggable="true"></div>提示：a標(biāo)簽和img標(biāo)簽?zāi)J(rèn)是啟用該屬性的, 可不需要設(shè)置draggable屬性。
draggable有三個(gè)值, 如下所示：
draggable = true(元素可以被拖動(dòng))
draggable = false(元素不能被拖動(dòng))
draggable = auto(瀏覽器可以自主決定某個(gè)元素是否可以被拖動(dòng))
【用法】
當(dāng)我們用鼠標(biāo)拖拽目標(biāo)元素過(guò)程中會(huì)觸發(fā)的事件：
ondragstart：用戶按下鼠標(biāo)開始拖動(dòng)時(shí)觸發(fā)
ondrag：用戶正在拖動(dòng)時(shí)反復(fù)觸發(fā)
ondragend：用戶結(jié)束拖動(dòng)后觸發(fā)
<img id="imgs" ondragstart="startFun()" ondrag="ondragFun()" ondragend="ondragendFun()" src="../img/a.png"/>當(dāng)拖動(dòng)元素進(jìn)入目標(biāo)容器內(nèi)觸發(fā)的事件：
ondragenter：鼠標(biāo)拖動(dòng)對(duì)象進(jìn)入釋放區(qū)時(shí)觸發(fā)
ondragover：被拖動(dòng)物體進(jìn)入目標(biāo)容器內(nèi)移動(dòng)時(shí)反復(fù)觸發(fā)
ondragleave：拖動(dòng)對(duì)象在釋放區(qū)沒(méi)有釋放就離開容器時(shí)觸發(fā)
ondrop：被拖動(dòng)物體在目標(biāo)容器內(nèi)釋放時(shí)觸發(fā)
<div id="container" ondragenter="ondragenterFun(event)" ondragover="ondragoverFun(event)" ondragleave="ondragleaveFun()" ondrop="drop()"></div>
ondragenter和ondragover事件的默認(rèn)行為是拒絕接受任何被拖放的項(xiàng)目, 所以我們必須要做的最重要的事情就是防止這種默認(rèn)行為的發(fā)生。
因此, 我們只需要在這兩個(gè)事件調(diào)用的函數(shù)中傳入event對(duì)象, 使用event.preventDefault()就可取消這種默認(rèn)行為；舉個(gè)例子, 在drop事件時(shí), Firefox瀏覽器會(huì)關(guān)閉網(wǎng)頁(yè), 轉(zhuǎn)而顯示被拖動(dòng)圖片img元素src所引用的地址。
取消元素默認(rèn)行為：
function ondragenterFun(e){
e.preventDefault();
}
function ondragoverFun(e){
e.preventDefault();
}在event對(duì)象中, 我們會(huì)使用dataTransfer屬性來(lái)獲取DataTransfer對(duì)象, 在DataTransfer對(duì)象中有我們操作數(shù)據(jù)的屬性和方法, 具體如下：
datatransfer：轉(zhuǎn)移釋放元素的數(shù)據(jù)到釋放區(qū), 返回Datatransfer對(duì)象
event.dataTransfer //返回DataTransfer對(duì)象
DataTransfer對(duì)象的屬性：
files：處理從操作系統(tǒng)拖動(dòng)并釋放到釋放區(qū)的文件；
types：返回一個(gè)字符串?dāng)?shù)組, 該對(duì)象包含了dataTransfer對(duì)象中數(shù)據(jù)的所有類型；
items：返回DataTransferItems對(duì)象, 該對(duì)象代表了拖動(dòng)數(shù)據(jù)；
dropEffect：設(shè)置拖放目標(biāo)允許發(fā)生的拖放行為, 如果此處設(shè)置的拖放行為不在effectAllowed屬性設(shè)置的可拖放行為內(nèi), 拖放操作將會(huì)失敗。該屬性值只允許為"null"、"copy"、"link"或"move"；
effectAllowed：設(shè)置拖動(dòng)元素允許發(fā)生的拖動(dòng)行為, 該屬性值可為"none"、"copy"、"copyLink"、"copyMove"、"link"、"linkMove"、"move"、"all"或"uninitialized"；
DataTransfer對(duì)象的方法：
setData( format , data )：將指定格式的數(shù)據(jù)賦值給dataTransfer對(duì)象，參數(shù)format定義數(shù)據(jù)的格式也就是數(shù)據(jù)的類型，data為待賦值的數(shù)據(jù)。
getData( format )：從dataTransfer對(duì)象中獲取指定格式的數(shù)據(jù)，format代表數(shù)據(jù)格式，data為數(shù)據(jù)。
clearData( [format] )：從dataTransfer對(duì)象中刪除指定格式的數(shù)據(jù)，參數(shù)可選，若不給參數(shù)，將刪除對(duì)象中所有的數(shù)據(jù)。
setDragImage(el, x, y)：設(shè)置拖放操作的圖標(biāo)，其中el代表自定義圖標(biāo)，x代表圖標(biāo)與鼠標(biāo)在水平方向上的距離，y代表圖標(biāo)與鼠標(biāo)在垂直方向上的距離。
了解了H5拖動(dòng)使用的api以后我們接下來(lái)看一個(gè)綜合的案例, 功能如下：
1)、實(shí)現(xiàn)圖片拖動(dòng)功能；
2)、實(shí)現(xiàn)圖片復(fù)制功能；
3)、過(guò)濾不能拖動(dòng)的元素；
4)、實(shí)現(xiàn)拖動(dòng)本地圖片到瀏覽器指定位置；
公共css部分：
<style>
#dropIn{
border:1px solid #AAAAAA;
height:100px;
margin-bottom: 10px;
padding: 10px;
}
#dropIn>img{
margin-right: 10px;
border:2px solid deepskyblue;
}
img{
width:100px;
border-radius: 10px;
border:2px solid red;
}
</style>html部分：
<body>
<div id="dropIn"></div> <!--釋放區(qū)-->
<img id="drop1" src="img/a.png" alt="" />
<!--拖動(dòng)的圖片元素-->
</body>js部分：
<script type="text/javascript">
var darggID;
function getId(el){
return document.getElementById(el)
}
var dropId1 = getId("drop1");
var dropInId = getId("dropIn");
//取消事件默認(rèn)行為
dropInId.ondragenter = cancelDefault;
dropInId.ondragover = cancelDefault; //綁定拖動(dòng)元素釋放時(shí)觸發(fā)的事件
dropInId.ondrop = drop; //綁定
dropId1.ondragstart = startFun;
function cancelDefault(ev){ //取消默認(rèn)行為
ev.preventDefault();
}
function startFun(ev){
darggID = ev.target.id;
//獲取被拖動(dòng)元素的id
//從源對(duì)象上的事件處理中保存數(shù)據(jù)，數(shù)據(jù)類型為"Text"
ev.dataTransfer.setData("Text",darggID);
}
function drop(ev){
ev.preventDefault();
// 從目標(biāo)對(duì)象上的事件處理中讀取"Text"類型數(shù)據(jù)
var data=ev.dataTransfer.getData("Text");
// 插入到目標(biāo)對(duì)象中
ev.target.appendChild(document.getElementById(data));
}
</script>接下來(lái)我們添加兩張圖, "drop2"是實(shí)現(xiàn)復(fù)制的圖片, "drop3"是既不能復(fù)制也不能拖動(dòng)的圖片；
<img id="drop2" src="img/b.png" alt="" /><img id="drop3" src="img/c.png" alt="" />添加js代碼：
//獲取頁(yè)面元素
var dropId2 = getId("drop2");
var dropId3 = getId("drop3");
//綁定事件
dropId2.ondragstart = startFun;dropId3.ondragstart = startFun;
//修改drop函數(shù)為
function drop(ev){
ev.preventDefault();
// 從目標(biāo)對(duì)象上的事件處理中讀取"Text"類型數(shù)據(jù)
var data=ev.dataTransfer.getData("Text");
if(data=='drop1'){
//移動(dòng)
ev.target.appendChild(document.getElementById(data));
}
if(data=='drop2'){//復(fù)制
var nreEl=document.getElementById(darggID).cloneNode(false);
getId("dropIn").appendChild(nreEl);
}
if(data=='drop3'){//過(guò)濾drop3，drop3不做任何操作
alert('過(guò)濾drop3')
}
}接下來(lái)我們實(shí)現(xiàn)拖動(dòng)本地圖片到瀏覽器, 我們就將圖片拖動(dòng)到id為"dropIn"的這個(gè)div中；添加js:
/*document 監(jiān)聽(tīng)drop 并阻止瀏覽器打開客戶端的圖片*/
document.ondragover = function (e) {
//只有在ondragover中阻止默認(rèn)行為
e.preventDefault();
};
document.ondrop = function (e) {
//阻止 document.ondrop的默認(rèn)行為
e.preventDefault();
};
//dropIn是div的id
dropIn.ondrop = function (e) {
var list = e.dataTransfer.files;
for (var i = 0; i < list.length; i++) {
var f = list[i];
reader(f);
}
};
function reader(f) {
var reader = new FileReader();
//讀取數(shù)據(jù)
reader.readAsDataURL(f);
reader.onload = function () {
var img = new Image();
img.src = reader.result;
dropIn.appendChild(img);
}
}【瀏覽器支持】
目前只有Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari5支持拖放，在 Safari5.1.2 中不支持拖放。
最后再和大家分享一個(gè)技巧, 這種拖動(dòng)行為還能跨瀏覽器工作, 這里說(shuō)的跨瀏覽器不是瀏覽器之間的跨窗口, 而是可以從Chrome瀏覽器拖動(dòng)到Firefox瀏覽器, 因?yàn)橥戏殴δ艿闹С质羌稍诓僮飨到y(tǒng)里面的, 有著相同的特性。
端開發(fā)的入門門檻其實(shí)非常低，與服務(wù)器端語(yǔ)言先慢后快的學(xué)習(xí)曲線相比，前端開發(fā)的學(xué)習(xí)曲線是先快后慢。
所以，對(duì)于想從事IT工作的人來(lái)說(shuō)，前端開發(fā)是個(gè)不錯(cuò)的切入點(diǎn)。
對(duì)于零基礎(chǔ)的HTML5學(xué)習(xí)者，首先需要的是一條思路清晰的HTML5學(xué)習(xí)路線，學(xué)習(xí)路線如同一本書的目錄，有了它就可以對(duì)一門語(yǔ)言有宏觀概念，學(xué)習(xí)起來(lái)更有針對(duì)性，這一點(diǎn)對(duì)零基礎(chǔ)小白尤其重要。
下面，小編就為大家揭曉HTML5入門路線是什么樣的？
基本概念
HTML(Hypertext Markup Language，超文本標(biāo)記語(yǔ)言)，是用來(lái)創(chuàng)建網(wǎng)頁(yè)和網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言，可用來(lái)定義和描述網(wǎng)頁(yè)的內(nèi)容和結(jié)構(gòu)。和CSS、JavaScript一起組成互聯(lián)網(wǎng)的基礎(chǔ)技術(shù)。
1、HTML5介紹
內(nèi)容包括：互聯(lián)網(wǎng)發(fā)展趨勢(shì)、H5語(yǔ)言的優(yōu)勢(shì)、簡(jiǎn)單易學(xué)人人都能編程、H5就業(yè)和薪資情況、H5常見(jiàn)的項(xiàng)目與產(chǎn)品、H5的未來(lái)與方向
2、HTML基礎(chǔ)
內(nèi)容包括：HTML簡(jiǎn)介與歷史版本、常用開發(fā)軟件、常見(jiàn)標(biāo)簽與屬性、表格與表單、標(biāo)簽規(guī)范與標(biāo)簽語(yǔ)義化、實(shí)戰(zhàn)：網(wǎng)頁(yè)結(jié)構(gòu)布局
3、CSS基礎(chǔ)
內(nèi)容包括：css簡(jiǎn)介與基本語(yǔ)法、常見(jiàn)的各種樣式屬性、CSS選擇器與標(biāo)簽類型、理解盒子模型與CSS重置、浮動(dòng)與定位、利用photoshop工具測(cè)量樣式、HTML+CSS開發(fā)網(wǎng)頁(yè)、實(shí)戰(zhàn)：高仿電商首頁(yè)效果
4、CSS3基礎(chǔ)
內(nèi)容包括：css3常見(jiàn)樣式、css3選擇器、變形與動(dòng)畫、3D效果與關(guān)鍵幀、彈性盒模型
5、移動(dòng)端布局
內(nèi)容包括：移動(dòng)端基本概念、viewport窗口設(shè)置、移動(dòng)端布局方案、rem、vh、vw等單位、響應(yīng)式布局、bootstrap框架
6.、JavaScript基礎(chǔ)
內(nèi)容包括：JS簡(jiǎn)介、JS變量、數(shù)據(jù)類型與類型轉(zhuǎn)換、運(yùn)算符與優(yōu)先級(jí)、流程控制-if..else流程控制-switch...case、流程控制-while、do..while、for循環(huán)、break、continue語(yǔ)法、函數(shù)定義與調(diào)用、全局變量與局部變量。
還有函數(shù)傳參與返回值、函數(shù)作用域與變量作用域、DOM的基本操作、定時(shí)器使用、this指向與修改指向、數(shù)組、字符串等方法操作、時(shí)間對(duì)象與正則對(duì)象、掌握常見(jiàn)BOM操作、常見(jiàn)事件與事件細(xì)節(jié)、JSON與AJAX、JSONP跨域操作、前端cookie的使用、實(shí)戰(zhàn)：JS配合HTML與CSS完成電商項(xiàng)目
7、jquery框架
內(nèi)容包括：jquery框架介紹及優(yōu)勢(shì)介紹、jquery核心思想、jquery常見(jiàn)方法、jquery動(dòng)畫操作、jqueryAJAX操作、jquery工具方法、利用jquery快速開發(fā)網(wǎng)頁(yè)
8、PHP基礎(chǔ)
內(nèi)容包括：PHP簡(jiǎn)介與基本語(yǔ)法、mysql數(shù)據(jù)庫(kù)及sql語(yǔ)法、apache服務(wù)器與集成開發(fā)工具、PHP鏈接數(shù)據(jù)庫(kù)、PHP與AJAX交互、實(shí)戰(zhàn)：留言板、登錄、注冊(cè)等
9、H5基礎(chǔ)項(xiàng)目
內(nèi)容包括：項(xiàng)目簡(jiǎn)介、項(xiàng)目功能演示、項(xiàng)目劃分及框架、編寫HTML頁(yè)面結(jié)構(gòu)、設(shè)置CSS樣式、添加JS交互、可選框架：bootstrap、jquery、PHP等、項(xiàng)目調(diào)試及兼容、項(xiàng)目驗(yàn)收
雖然HTML5前端薪資高入門門檻低， 但是俗話說(shuō)得好：入門容易，精通難。
HTML5前端開發(fā)的知識(shí)點(diǎn)繁多，要想真正掌握HTML5前端工程師開發(fā)技能，并非易事。
踩樓、私信小編，軟件資源免費(fèi)送！
如果你想學(xué)習(xí)HTML5前端，想高薪就業(yè)，就來(lái)樂(lè)購(gòu)IT教育學(xué)院，我們有優(yōu)質(zhì)的師資，完備的建站流程和一流的開發(fā)、設(shè)計(jì)人員。是學(xué)編程與設(shè)計(jì)錯(cuò)不了的選擇！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
