整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
內容是《Web前端開發之Javascript視頻》的課件，請配合大師哥《Javascript》視頻課程學習。
BOM（Browser Object Model）瀏覽器對象模型；其提供了獨立于內容而與瀏覽器窗口進行交互的對象；
沒有BOM標準：不同的瀏覽器按照各自的想法實現及擴展BOM，于是，它們之間共有的對象成為了事實上的標準；近年來，W3C為了把瀏覽器中Javascript最基本的部分標準化，已經將BOM的主要方面納入了HTML5的規范中。
BOM由一系列相關的對象構成；DOM中各對象之間是層次關系；window對象是整個BOM的核心，所有對象和集合都以某種方式回接到window對象；
window對象
window對象：
其是BOM的核心對象，也是頂級對象，表示瀏覽器的一個實例；
瀏覽器窗口對文檔提供一個顯示的容器，是每一個加載文檔的父對象；window對象表示整個瀏覽器窗口，但不表示其中所包含的內容；可以用于移動或調整瀏覽器的大小，或者產生其他的影響；
全局作用域：
在瀏覽器中，window對象具有雙重角色，即是通過Javascript訪問瀏覽器的一個接口，又是ES中的Global對象；
既然window是Global對象，所以window對象是所有其他對象的頂級對象，在網頁中定義的任何對象、變量和函數，window對象都有權訪問；即所有在全局作用域中聲明的變量、函數都會變成window對象的屬性和方法；因此window前綴可以省略；
var age = 18;
function sayAge(){
alert(this.age);
}
alert(window.age);
sayAge();
window.sayAge();定義全局變量與在window對象上直接定義屬性還是有一點差別：全局變量不能通過delete操作符刪除，而直接在window對象上的定義的屬性可以，如：
var age = 18;
window.color = "green";
console.log(delete window.age); // false
console.log(delete window.color); // true
console.log(window.age); // 18
console.log(window.color); // undefinedage屬性的特性中的[[Configurable]]，值為false，因此其不能通過delete刪除；
console.log(Object.getOwnPropertyDescriptor(window,"age"));
console.log(Object.getOwnPropertyDescriptor(window,"color"));嘗試訪問未聲明的變量會拋出錯誤，但通過查詢window對象，可以知道某個可能未聲明的變量是否存在，如：
var age = oldAge; // 拋出錯誤
var age = window.oldAge; // 不會拋出錯誤，因為這是一次屬性查詢文檔元素：
如果在HTML文檔中用id屬性來元素命名，并且如果window對象沒有此名字的屬性，window對象會賦予一個屬性，它的名字是id屬性的值，而它們的值指向表示文檔元素的HTMLElement對象，這稱為全局變量的隱式應用；
在實際場景中，很少使用這種方式來訪問HTML元素，它是Web瀏覽器發展過程中遺留的一個現象，是現代瀏覽器向后兼容性的考慮，如：
<button id="okay">按鈕</button>
<input id="myinput" value="input" />
<div id="mydiv">mydiv</div>
<script>
var ui = ["okay","myinput"];
ui.forEach(function(id){
ui[id] = document.getElementById(id);
});
console.log(ui.okay);
console.log(ui.myinput);
// 定義一個更簡單的方法
var $ = function(id){
return document.getElementById(id);
};
$("mydiv").innerHTML = "零點網絡";
console.log($("mydiv"));
</script>窗口位置：
獲取窗口(視口)的位置(即相對于屏幕左邊和上邊的位置)；各瀏覽器都實現了screenLeft和screenTop屬性表示窗口的位置；但是之前的firefox并不支持，現代firefox返回-8；只有IE是文檔區相對于主顯示器屏幕的位置；
Firefox使用了screenX和screenY屬性獲取窗口位置信息；各瀏覽器也實現了這兩個屬性，但并不統一：
chrome與Opera實現了screenLeft、screenTop與screenX、screenY的統一；且最大化時，值為0；Firefox與IE實現了統一，但最大化時，值為-8；且Firefox中的screenLeft、screenTop與這兩個屬性實現了對應；但IE的screenLeft、screenTop與這兩個屬性并不對應；screenLeft、screenTop是文檔區域的左上角的坐標，screenX、screenY是窗口的左上角坐標；
console.log(window.screenLeft);
console.log(window.screenTop);
console.log(window.screenX);
console.log(window.screenY);
// 為了兼容老的Firefox
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
console.log("leftPos:",leftPos, ",topPos:",topPos);pageXOffset及pageXOffset：設置或返回當前頁面相對于可視區域的左及上的位置；但貌似只有Chrome支持，同時，如果是設置的話，沒有效果；
注：目前，無法在跨瀏覽器的條件下取得窗口左邊和上邊的精確坐標值；如果在框架中使用，除了IE，其他瀏覽器的值都與以上統一；
移動瀏覽器窗口：
window.moveTo(50,100);
window.moveBy(100,200);
window.moveBy(-50,0);注：一般很少用；這兩個方法有可能會被瀏覽器禁用；這兩個方法都不適用框架，只能對最外層的window對象使用；
窗口大小：
如果要獲取瀏覽器窗口大小信息，各瀏覽器并不統一；但各瀏覽器都已實現了以下四個方法，但返回值并不一定相同：
console.log(window.innerWidth);
console.log(window.innerHeight);
console.log(window.outerWidth);
console.log(window.outerHeight);在各瀏覽器的實現中，可以通過使用DOM提供的頁面視口的相關信息：
document.documentElement.clientWidth和document.documentElement.clientHeight中保存了頁面視口的信息；其返回值與innerWidth和innerHeight一致；
在低版本的IE中，必須通過document.body.clientWidth和document.body.clientHeight屬性獲取視口信息（實際上是實際內容的尺寸，但不包括border值），但不標準；
同時，document.body.offsetWidth和document.body.offsetHeight也能獲取視口相關信息，同clientWidth和clientHeight類似，只不過其包括border的寬度；
跨瀏覽器取得頁面視口的大小：
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){
// 判斷頁面是否處于標準模式
if(document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
console.log(pageWidth);
console.log(pageHeight);調整瀏覽器窗口的大小：
注：一般很少用；也有可能被禁用，同移動窗口類似
window.resizeTo(400,300);
window.resizeBy(200,100);滾動窗口（如果有滾動條）：
對話框：
window對象通過alert()、confirm()和prompt()三個方法可以調用系統對話框向用戶顯示消息；
系統對話框與在瀏覽器中顯示的網頁沒有關系，也不包括HTML；它們的外觀由操作系統或瀏覽器設置決定的，而不是由CSS決定的；此外，通過這幾個方法打開的對話框都是同步和模態的，也就是說，顯示這些對話框的時候代碼會停止執行，而關掉這些對話框后代碼又會恢復執行；
一般來說，不會使用，都是自己實現一個效果；
警告對話框window.alert(string)：
警告對話框是一個帶感嘆圖標的小窗口，通常用來輸出一些簡單的文本信息；該方法接受一個字符串并將其顯示給用戶，并包含一個OK或確定的按鈕等待用戶關閉對話框；
通過alert()生成的警告對話框，用戶是無法控制的，比如，顯示的消息內容，用戶只能看完消息后關閉對話框；
確認對話框window.confirm(string)：
確認對話框也是向用戶顯示消息的對話框，但與警告對話框不同的是，其具有OK與Cancle按鈕，根據用戶的選擇，該方法返回不同的值(true或false)；程序可以根據不同的值予以不同的響應，實現互動的效果；通常放在網頁中，對用戶進行詢問并根據其選擇而做不同的控制；
if(window.confirm("確定刪除嗎？")){
alert("已經刪除");
}else{
alert("未刪除");
}輸入對話框window.prompt()：
用于提示用戶輸入的對話框；
語法: window.prompt(提示信息，默認值)；// 要顯示的文本提示和文本輸入域的默認值，該默認值可以是一個空字符串；
prompt("請輸入你的名字","王唯");如果用戶單擊了OK，則prompt()返回文本域中的值，如果單擊了Cancel或使用其他方式關閉對話框，則該方法返回null，如：
var result = prompt("請輸入密碼：","");
if(result == "8888"){
alert("登錄成功");
}
var result = prompt("請輸入你的名字","王唯");
if(result !== null){
document.write("歡迎你：" + result);
}else{
alert("你沒有輸入任何內容");
}綜上所述，這些系統對話框很適合向用戶顯示消息并由用戶作出決定；由于不涉及HTML、CSS或JS，因此它們是增強Web應用程序的一種便捷方式；
do{
var name = prompt("輸入你的名字：");
var correct = confirm("你輸入的是：" + name + ".\n" + "你可以單擊確定或取消");
}while(!correct)
alert("你好，" + name);在彈出對話框時，還有一個特性：如果當前腳本在執行過程中會打開兩個或多個對話框，那么從第二個對話框開始，每個對話框中都會顯示一個復選框，以便用戶阻止后續的對話框顯示，除非用戶刷新頁面；后續被阻止的對話框包括警告框、確認框和顯示輸入框；
該特性最初是由Chrome實現了，后續其他瀏覽器也實現該特性；其工作原理就是使用了一個叫對話框計數器，可以跟蹤對話框；但是瀏覽器沒有就對話框是否顯示向開發人員提供任何信息；
在實際的場景中，這三個方法是很少用的，因為它們顯示的文本是純文本，不是HTML格式的文本，只能使用空格、換行符和各種標點符號，所以往往滿足不了頁面設計需要，并且有可能會破壞用戶的瀏覽體驗；常見的就是使用alert()方法進行調試，用來查看某個變量的輸出結果；
這三個方法都會產生阻塞，也就是說，在用戶關掉它們之前，它們不會返回，后面的代碼不會執行；如果當前載入文檔，也會停止載入，直到用戶要求的輸入進行響應為止；
可以自定義一個對話框：
<style>
#alert_box{
position: absolute; display: none; width: 400px; height:300px; border-radius: 3px;
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}
#alert_box h1{
margin:0; padding: 0; font-size: 1.5em; line-height: 60px;
height: 60px;
text-align: center; background-color: rgba(255,255,255,1);
}
#alert_box div{
height: 240px;
padding: 1em; line-height: 1.8em; background-color: rgba(255,255,255,.8);
}
#alert_box span{
position: absolute; width: 30px; height: 30px;
top:-15px; right:-15px; background-color:#000; border-radius: 50%;;
}
</style>
<script>
window.alert = function(title,info){
var box = document.createElement("div");
box.id = "alert_box";
box.style.left = ((window.innerWidth - 400) / 2) + "px";
box.style.top = ((window.innerHeight - 300) / 2) + "px";
var h1 = document.createElement("h1");
h1.innerText = title;
box.appendChild(h1);
var innerBox = document.createElement("div");
innerBox.innerHTML = info;
box.appendChild(innerBox);
var closeSpan = document.createElement('span');
box.appendChild(closeSpan);
closeSpan.addEventListener("click",function(e){
document.body.removeChild(box);
},false);
box.style.display = "block";
document.body.appendChild(box);
};
window.alert("零點網絡","哪些是這樣的？");
</script>Javascript還有兩個工具性的對話框，即查找window.find()和打印window.print()；
這兩個對話框都是異步顯示的，能夠將控制權立即交還給腳本；其與瀏覽器菜單中的查找和打印命令是相同的；
這兩個方法同樣不會就用戶對對話框中的操作給出任何信息，因此它們的用處有限；另外，既然這兩個對話框是異步顯示的，對話框計數器就不會將它們計算在內，所以它們也不會受用戶禁用后續對話框顯示的影響；
狀態欄：
瀏覽器的狀態欄通常位于窗口的底部，用于顯示一些任務狀態信息等。在通常情況下，狀態顯示當前瀏覽器的工作狀態或用戶交互提示信息; 具有status和defaultStatus屬性;
默認狀態欄信息：
defaultStatus屬性可以用來設置在狀態欄中的默認文本，是一個可讀寫的字符串；
狀態欄瞬間信息：
status屬性，在默認情況下，將鼠標放在一個超鏈接上時，狀態欄會顯示該超鏈接的URL，此時的狀態欄信息就是瞬間信息；當鼠標離開超鏈接時，狀態欄就會顯示默認的狀態欄信息，瞬間信息消失 。
瀏覽器已經關閉了狀態欄的功能；這是出于安全的考慮，防止隱藏了超鏈接真正目的的釣魚攻擊；
Web前端開發之Javascript-零點程序員-王唯
篇文章給大家帶來的內容是關于HTML5 Web Worker的介紹（附示例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
瀏覽器中的Web Worker
背景介紹
我們都知道JavaScript這個語言在執行的時候是采用單線程進行執行的，也就是說在同一時間只能做一件事，這也和這門語言有很大的關系，采用同步執行的方式進行運行，如果出現阻塞，那么后面的代碼將不會執行，HTML5則提出了web Worker標準，表示JavaScript允許有多個線程，但是子線程完全受主線程的控制，子線程不能操作DOM，只有主線程可以操作DOM，所以以主線程為主的單線程執行原理成了JavaScript這門語言的核心。
進程與線程的區別
根本區別：進程是操作系統資源分配的基本單位，而線程是任務調度和執行的基本單位。
在操作系統中能同時運行多個進程（程序）；而在同一個進程（程序）中有多個線程同時執行。
兼容性
web worker是什么？
簡單來說，其實就是在Javascript單線程執行的基礎上，開啟一個子線程，進行程序處理，而不影響主線程的執行，當子線程執行完畢之后再回到主線程上，在這個過程中并不影響主線程的執行過程。
舉個栗子
傳統情況下，執行下面的代碼后，整個頁面都會被凍結，由于javascript是單線程處理，如下代碼已經完全組塞了后續的執行
while(1){}
如果換一種方式，我們通過開啟一個新的線程來執行這段代碼，將他放在一個單獨的worker.js文件中,在主線程執行以下代碼，則可以避免這種情況。
var worker=new Worker("worker.js")
Web Worker的用法
判斷當前瀏覽器是否支持web worker
if (typeof (Worker) !="undefined") { //瀏覽器支持web worker
if (typeof (w)=="undefined") { //w是未定義的,還沒有開始計數
w=new Worker("webworker.js"); //創建一個Worker對象,利用Worker的構造函數
}
//onmessage是Worker對象的properties
w.onmessage=function (event) { //事件處理函數,用來處理后端的web worker傳遞過來的消息
// do something
};
}
else { // 瀏覽器不支持web worker
// do something
}
API
①創建新的Worker
var worker=new Worker("worker.js")
②傳遞參數
worker.postMessage()
③接收消息
worker.onMessage=function(msg){}
④異常處理
worker.onerror=function(err){}
⑤結束worker
worker.terminate()
⑥載入工具類函數
importScripts()
Worker作用域
當我們創建一個新的worker時，該代碼會運行在一個全新的javascript的環境中（WorkerGlobalScope）運行,是完全和創建worker的腳本隔離，這時我們可以吧創建新worker的腳本叫做主線程，而被創建的新的worker叫做子線程。
WorkerGlobalScope是worker的全局對象，所以它包含所有核心javascript全局對象擁有的屬性如JSON等，window的一些屬性，也擁有類似于XMLHttpRequest()等。
但是我們所開啟的新的worker也就是子線程，并不支持操作頁面的DOM。
線程間的通訊是傳值而不是傳地址
主線程與子線程數據通信方式有多種，通信內容，可以是文本，也可以是對象。需要注意的是，這種通信是拷貝關系，即是傳值而不是地址，子線程對通信內容的修改，不會影響到主線程。事實上，瀏覽器內部的運行機制是，先將通信內容串行化，然后把串行化后的字符串發給子線程，后者再將它還原。
JavaScript中的數據類型存放原理以及傳遞規則
共享線程（SharedWorker）
共享線程是為了避免線程的重復創建和銷毀過程，降低了系統性能的消耗，
共享線程SharedWorker可以同時有多個頁面的線程鏈接。
使用SharedWorker創建共享線程，也需要提供一個javascript腳本文件的URL地址或Blob,該腳本文件中包含了我們在線程中需要執行的代碼，如下：
var worker=new SharedWorker("sharedworker.js");
共享線程也使用了message事件監聽線程消息，但使用SharedWorker對象的port屬性與線程通信如下:
worker.port.onmessage=function(msg){};
同時我們也可以使用SharedWorker對象的port屬性向共享線程發送消息如下：
worker.port.postMessage(msg);
運行原理
生命周期
①當一個web worker的文檔列表不為空的時候，這個web worker會被稱之為許可線程。
②當一個web worker的文檔列表中的任何一個對象都是處于完全活動狀態的時候，這個web worker會被稱之為需要激活線程。
③當一個web worker是許可線程并且擁有計數器或者擁有數據庫事務或者擁有網絡連接或者它的web worker列表不為空的時候，這個web worker會被稱之為受保護的線程。
④當一個web worker是一個非需要激活線程同時又是一個許可線程的時候，這個web worker會被稱之為可掛起線程。
以webKit為例加載并執行worker的過程
應用
可以做什么：
1.可以加載一個JS進行大量的復雜計算而不掛起主進程，并通過postMessage，onmessage進行通信
2.可以在worker中通過importScripts(url)加載另外的腳本文件
3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4.可以使用XMLHttpRequest來發送請求
5.可以訪問navigator的部分屬性
不可以做什么：
1.不能跨域加載JS
2.worker內代碼不能訪問DOM
3.各個瀏覽器對Worker的實現不大一致，例如FF里允許worker中創建新的worker,而Chrome中就不行
4.不是每個瀏覽器都支持這個新特性
以上就是HTML5 Web Worker的介紹（附示例）的詳細內容，更多請關注其它相關文章！
更多技巧請《轉發 + 關注》哦！
起HTML標簽，前端工程師會非常的有發言權，因為在平時開發中一定會用到，可以說是前端的入門必備知識。但往往在意更多的是頁面的渲染效果及交互方式，也就是頁面可見的部分，比如導航欄，菜單欄，列表，圖文等。
其實還有一些頁面上沒有呈現出來卻非常重要的標簽，這些標簽大部分在頁面的頭部head標簽內，雖然在頁面上看不見摸不著，但如果在特定的場景下，會產生意想不到的效果。下面我將從交互優化，性能優化，搜索優化三個方面并結合場景來聊聊被“忽視”的HTML標簽。
交互優化
meta 標簽：自動跳轉/刷新
假設要實現一個類似自動播放的頁面，首先我們第一反應會想到用js定時器控制頁面跳轉來完成。但是其實有更加簡便的方法，通過meta標簽的refresh功能來實現。
<meta http-equiv="refresh" content="10; url=view2.html">上面的代碼會在 10s 之后自動跳轉到同域下的 view2.html 頁面。我們要實現自動播放的功能，只需要在每個頁面的 meta 標簽內設置好下一個頁面的地址即可。
如果要實現定時刷新的功能，只要去除后面url即可：
<meta http-equiv="refresh" content="10">注意，用meta標簽實現刷新/跳轉的過程是不可取消的，所以需要手動取消的還是得老老實實使用js的定時器，但是對于簡單的定時刷新或跳轉，還是可以去親自實踐meta的用法。
title 標簽：消息提醒
消息提醒功能實現在HTML5標準發布之前，瀏覽器還沒有開放圖標閃爍、音頻播放，彈出系統消息之類的api，只能借助其他非常規的手段，比如修改title 標簽來達到類似的效果。
下面的代碼通過定時修改title標簽的內容，實現了消息提醒的功能，可以讓用戶在瀏覽其他頁面時候，及時發現服務端返回的消息。
let messageNum=1; // 消息條數
let count=0; // 計數器
const msgInterval=setInterval(()=> {
count=(count + 1) % 2;
if(messageNum===0) {
// 通過DOM修改title
document.title +=`當前頁面`;
clearInterval(msgInterval);
return;
}
const pre=count % 2 ? `新消息(${msgNum})` : '';
document.title=`${pre}當前頁面`;
}, 1000);當然，動態修改title標簽的用途不僅僅是消息提醒，還可以顯示一些異步進行的任務，比如下載進度，上傳進度等。
性能優化
script 標簽：調整加載順序提升渲染速度
不知道你們有沒有過這樣的體驗：當在瀏覽器打開某個頁面時，發現頁面一直在loading轉圈，或者等了好長的時間頁面才有響應。這一現象，除了網絡網速的原因外，大多數都是由于頁面結構設計不合理導致加載時間過長。因此，如果想要提升頁面的渲染速度，就需要了解瀏覽器頁面的渲染過程是怎樣的，從根本上來解決問題。
瀏覽器在加載頁面的時候會用到 GUI 渲染線程和 JavaScript 引擎線程。其中，GUI 渲染線程負責渲染瀏覽器界面 HTML 元素，JavaScript 引擎線程主要負責處理 JavaScript 腳本程序。由于 JavaScript 在執行過程中還可能會改動界面結構和樣式，因此它們之間被設計為互斥的關系。也就是說，當 JavaScript 引擎執行時，GUI 線程會被掛起，等執行完 JavaScript 的腳本程序后又會切換 GUI 線程繼續渲染頁面。
所以我們可以知道頁面渲染過程中包含了請求腳本文件以及執行腳本文件的時間，但頁面的首次渲染可能并不需要執行完全部的文件，這些請求和執行文件的動作反而延長了用戶看到頁面的時間，從而降低了用戶體驗。
為了快速將內容呈現給用戶，減少用戶等待時間，可以借助script標簽的3個屬性來實現：
async：表示立即請求腳本文件，但不阻塞 GUI 渲染引擎，而是文件加載完畢后阻塞 GUI 渲染引擎并立即執行文件內容。
defer。立即請求腳本腳本，但不阻塞 GUI 渲染引擎，等到解析完 HTML 之后再執行文件內容。
HTML5 標準 type，對應值為“module”。讓瀏覽器按照 ECMA Script 6 標準將文件當作模塊進行解析，默認阻塞效果同 defer，也可以配合 async 在請求完成后立即執行。
所以可以得知，采用defer 屬性以及 type="module" 情況下能保證渲染引擎的優先執行，從而減少執行文件內容消耗的時間，讓用戶更快地看見頁面（即使這些頁面內容可能并沒有完全地顯示）。除此外還要知道，當渲染引擎解析 HTML 遇到 script 標簽引入文件時，會立即進行一次渲染，這就是為什么會把引用JavaScript 代碼的 script 標簽放入到 body 標簽底部。
link 標簽：通過預處理提升渲染速度
在我們對中大型項目進行性能優化時，往往會對資源做減法（gzip壓縮，緩存等）或除法（按需打包，按需加載），可是如果能想到 link 標簽的 rel 屬性值來進行預加載，也能加快頁面的渲染速度。
dns-prefetch。當 link 標簽的 rel 屬性值為“dns-prefetch”時，瀏覽器會對某個域名預先進行 DNS 解析并緩存。這樣，當瀏覽器在請求同域名資源的時候，能省去從域名查詢 IP 的過程（DNS查詢），從而減少時間損耗。（注意：這個屬性還在實驗階段，部分瀏覽器的部分版本支持）
preconnect。讓瀏覽器在一個 HTTP 請求正式發給服務器前預先執行一些操作，這包括 DNS 解析、TLS 協商、TCP 握手，通過消除往返延遲來為用戶節省時間。（注意：這個屬性還在實驗階段，部分瀏覽器的部分版本支持）
prefetch/preload。兩個值都是讓瀏覽器預先下載并緩存某個資源，但不同的是，prefetch 可能會在瀏覽器忙時被忽略，而 preload 則是一定會被預先下載。
prerender。瀏覽器不僅會加載資源，還會解析執行頁面，進行預渲染。（注意：這個屬性還在實驗階段，部分瀏覽器的部分版本支持）
搜索優化
你所寫的前端代碼，除了要讓瀏覽器更好執行，有時候也要考慮更方便其他程序（如搜索引擎）理解。合理地使用 meta 標簽和 link 標簽，恰好能讓搜索引擎更好地理解和收錄我們的頁面。
meta 標簽：提取關鍵信息
通過 meta 標簽可以設置頁面的描述信息，從而讓搜索引擎更好地展示搜索結果。
例如，在百度中搜索“淘寶”，就會發現網站的描述信息，這些描述信息就是通過 meta 標簽專門為搜索引擎設置的，目的是方便用戶預覽搜索到的結果。
為了讓搜索引擎更好地識別頁面，除了描述信息description之外還可以使用關鍵字，這樣即使頁面其他地方沒有包含搜索內容，也可以被搜索到（當然搜索引擎有自己的權重和算法，如果濫用關鍵字是會被降權的，比如 Google 引擎就會對堆砌大量相同關鍵詞的網頁進行懲罰，降低它被搜索到的權重）。
當我們搜索關鍵字“安全購物”的時候搜索結果會顯示淘寶網的信息，雖然顯示的搜索內容上并沒有看到“安全購物”字樣，這就是因為淘寶網頁面中設置了這個關鍵字。
對應代碼如下：
<meta content="淘寶,掏寶,網上購物,C2C,在線交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣信息,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪" name="keywords">在實際工作中，推薦使用一些關鍵字工具來挑選，比如
Google Trends
https://trends.google.com/trends
站長工具
https://data.chinaz.com/keyword/
link 標簽：減少重復
有時候為了用戶訪問方便或者出于歷史原因，對于同一個頁面會有多個網址，又或者存在某些重定向頁面，比如：
- https://baidu.com/a.html
- https://baidu.com/detail?id=abcd
那么在這些頁面中可以這樣設置：
<link href="https://baidu.com/a.html" rel="canonical">這樣可以讓搜索引擎避免花費時間抓取重復網頁。不過需要注意的是，它還有個限制條件，那就是指向的網站不允許跨域。
當然，要合并網址還有其他的方式，比如使用站點地圖，或者在 HTTP 請求響應頭部添加 rel="canonical"。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
