整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
好程序員web前端詳解HTML5中download屬性的應(yīng)用，在傳統(tǒng)的html中，某個(gè)文件的下載，是這樣的：
XML/HTML Code復(fù)制內(nèi)容到剪貼板 <a href="=/files/abc1234564545.pdf">report</a>
而在HTML 5瀏覽器中，可以支持download屬性了，如下：
XML/HTML Code復(fù)制內(nèi)容到剪貼板 <a href="=/files/abc1234564545.pdf" download="abc">report</a>
download屬性的好處在于，在用戶下載文件的時(shí)候，顯示在用戶瀏覽器
中的“另存”為的文件顯示框中，顯示的是這個(gè)downloader屬性中顯示的
東西了，比較友好
HTML5里，download屬性為下載的文件取一個(gè)合適的名字，而不是使用原生的服務(wù)器文件名。
XML/HTML Code復(fù)制內(nèi)容到剪貼板 <!-- 將會(huì)下載 "test.txt"文件 --
然后當(dāng)用戶點(diǎn)擊這個(gè)鏈接，這個(gè)download屬性值就出現(xiàn)在下載對(duì)話框中，代替原來(lái)凌亂的文件名。在這個(gè)例子中，文件將被下載為test.txt。download屬性同時(shí)開(kāi)啟了一個(gè)強(qiáng)制下載。
這個(gè)屬性在存在文件交互的地方非常有用，在服務(wù)器端的文件名需要是及其獨(dú)特的（上例中的文件名就很獨(dú)特不是嗎？），但是一堆亂碼對(duì)用戶來(lái)說(shuō)沒(méi)有任何作用，download屬性定義文件名對(duì)用戶更有意義。download屬性只是增強(qiáng)性的，它不是非?？幔撬軐?shí)用，而且非常易于添加。
多時(shí)候?qū)τ星岸斯こ處焷?lái)講，頁(yè)面效果直接會(huì)轉(zhuǎn)嫁個(gè)CSS或JS，對(duì)HTML的一些屬性了解的并不充分，接下來(lái)介紹一些有意思的HTML屬性。
1）Multiple
顧名思義就是在一個(gè)輸入標(biāo)簽或選擇標(biāo)簽中可以輸入多個(gè)值
<input type="file" multiple>2）Accept
在<input>包含接受屬性，允許用戶傷上傳指定的文件類型。我們?cè)谠O(shè)置的過(guò)程中，需要設(shè)置指定的文件格式。并用逗號(hào)分開(kāi)即可。傳遞文件類型包含圖片、音頻、視頻、文檔，等自定義文件類型。
<input type="file" accept=".png, .jpg">3）Contenteditable
這個(gè)屬性比較有意思，允許用戶在前端HTML頁(yè)面進(jìn)行對(duì)文本的編輯，只對(duì)DOM的可見(jiàn)部分進(jìn)行編輯。
<div contenteditable="true">我可以隨意編輯！</div>4）Spellcheck
進(jìn)行拼寫檢查的可編輯段落：
<p contenteditable="true" spellcheck="true">這是一個(gè)段落。</p>5) Translate
Translate告訴瀏覽器是否應(yīng)該翻譯內(nèi)容。例如，您可以使用它來(lái)防止Google Translate自動(dòng)嘗試翻譯您的公司或品牌名稱。
<footer><p translate="no">Mark</p></footer>6) Poster
帶有預(yù)覽圖（海報(bào)圖片）的視頻播放器：
注釋：Internet Explorer 8 以及更早的版本不支持 <video> 標(biāo)簽。
<video controls poster="/images/mark.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> 7) Download
download 屬性規(guī)定被下載的超鏈接目標(biāo)。
在 <a> 標(biāo)簽中必須設(shè)置 href 屬性。
該屬性也可以設(shè)置一個(gè)值來(lái)規(guī)定下載文件的名稱。所允許的值沒(méi)有限制，瀏覽器將自動(dòng)檢測(cè)正確的文件擴(kuò)展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。
么是JS延遲加載？
JS延遲加載，也就是等頁(yè)面加載完成之后再加載JavaScript文件
為什么讓JS實(shí)現(xiàn)延遲加載？
js的延遲加載有助于提高頁(yè)面的加載速度。
Js延遲加載的方式有哪些？一般有以下幾種方式：
·defer屬性
·async屬性
·動(dòng)態(tài)創(chuàng)建DOM方式
·使用jQuery的getScript方法
·使用setTimeout延遲方法
·讓JS最后加載
HTML 4.01為<script>標(biāo)簽定義了defer屬性。標(biāo)簽定義了defer屬性元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行標(biāo)簽定義了defer屬性。
用途：表明腳本在執(zhí)行時(shí)不會(huì)影響頁(yè)面的構(gòu)造。也就是說(shuō)，腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢之后再執(zhí)行在<script>元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行
<!DOCTYPE html>
<html>
<head>
<script src="test1.js" defer="defer"></script>
<script src="test2.js" defer="defer"></script>
</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>說(shuō)明：雖然<script>元素放在了<head>元素中，但包含的腳本將延遲瀏覽器遇到</html>標(biāo)簽后再執(zhí)行HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行。在現(xiàn)實(shí)當(dāng)中，延遲腳本并不一定會(huì)按照順序執(zhí)行defer屬性只適用于外部腳本文件。支持HTML5的實(shí)現(xiàn)會(huì)忽略嵌入腳本設(shè)置的defer屬性
HTML5 為<script>標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。
目的：不讓頁(yè)面等待腳本下載和執(zhí)行，從而異步加載頁(yè)面其他內(nèi)容。異步腳本一定會(huì)在頁(yè)面 load 事件前執(zhí)行。不能保證腳本會(huì)按順序執(zhí)行
<!DOCTYPE html>
<html>
<head>
<script src="test1.js" async></script>
<script src="test2.js" async></script>
</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>async和defer一樣，都不會(huì)阻塞其他資源下載，所以不會(huì)影響頁(yè)面的加載。
缺點(diǎn)：不能控制加載的順序
//這些代碼應(yīng)被放置在</ body>標(biāo)簽前(接近HTML文件底部)
<script type="text/javascript">
function downloadJSAtOnload() {
varelement=document .createElement("script");
element.src="defer.js";
document.body.appendChild(element);
}
if (window. addEventListener)
window.addEventListener("load" ,downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload) ;
else
window. onload=downloadJSAtOnload;
</script>$.getScript("outer.js" , function(){ //回調(diào)函數(shù)，成功獲取文件后執(zhí)行的函數(shù)
console.log(“腳本加載完成")
});<script type="text/javascript" >
function A(){
$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
alert("Hello");
});
}
$(function (){
setTimeout('A()', 1000); //延遲1秒
})
</script>把js外部引入的文件放到頁(yè)面底部，來(lái)讓js最后引入，從而加快頁(yè)面加載速度例如引入外部js腳本文件時(shí)，如果放入html的head中,則頁(yè)面加載前該js腳本就會(huì)被加載入頁(yè)面，而放入body中，則會(huì)按照頁(yè)面從上倒下的加載順序來(lái)運(yùn)行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁(yè)面底部，來(lái)讓js最后引入，從而加快頁(yè)面加載速度。
上述方法2也會(huì)偶爾讓你收到Google頁(yè)面速度測(cè)試工具的“延遲加載javascript”警告。所以這里的解決方案將是來(lái)自Google幫助頁(yè)面的推薦方案。
//這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近HTML文件底部)
<script type="text/javascript">
function downloadJSAtonload() {
var element=document.createElement("script");
element.src="defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent )
window.attachEvent("onload", downloadJSAtonload);
else window.onload=downloadJSAtOnload;
</script>這段代碼意思等到整個(gè)文檔加載完后，再加載外部文件“defer.js”。
使用此段代碼的步驟：
6.1）復(fù)制上面代碼
6.2）粘貼代碼到HTML的標(biāo)簽前 (靠近HTML文件底部)
6.3）修改“defer.js”為你的外部JS文件名
6.4）確保文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。
注意：
這段代碼直到文檔加載完才會(huì)加載指定的外部js文件。因此，不應(yīng)該把那些頁(yè)面正常加載需要依賴的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁(yè)面需要而立即加載的javascript代碼，另外一組是在頁(yè)面加載后進(jìn)行操作的javascript代碼(例如添加click事件。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
