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