整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
鍵詞好像現已被SEO人遺棄HTML代碼中關鍵詞代表著頁面中的關鍵詞，是對頁面內容的概括性的詞語。好像關鍵詞無效現已經變成了一個不爭的現實。
正常來講，這個寫上也沒有錯，可是不寫一點也不影響關鍵詞排名。主頁關鍵詞的一般的幾種寫法盡管，我們都知道這個好像這個沒啥作用了，可是仍然仍是在寫。
多網站關鍵詞欄都有個/,這個斜杠就代表著沒寫關鍵詞。只寫品牌詞許多網站只寫上自己的品牌詞，如本站能夠只寫一個詞-文匯建站中心關鍵詞還有一部分網站便是寫上自己的中心關鍵詞，方便在站長或愛站隨時查詢自己網站中心關鍵詞的排名狀況。
description是什么意思當然是頁面描繪的頁面，用簡略的一段話來描繪頁面的內容。在百度和Google的查找引擎官方平臺上，都明確指出以下兩種狀況。
description包括用戶查找詞這種狀況下，description中的內容會被查找引擎作為頁面內容摘要顯現在查找成果中。description不包括用戶查找詞這種清下，查找引擎會去主動抓取頁面中包括查找詞的一段話并作為摘要顯現在查找成果中。
可是，就算頁面描繪中不包括用戶查找詞，description中的內容仍是或許會被展現出來的。
者｜Austin Tackaberry
譯者｜無明
出處丨前端之巔
這篇文章通過簡單的術語和一個真實的例子解釋了 this 是什么以及為什么說它很有用。
我發現，很多教程在解釋 JavaScript 的 this 時，通常會假設你擁有 Java、C++ 或 Python 等面向對象編程語言的背景。這篇文章主要面向那些對 this 沒有先入之見的人。我將嘗試解釋什么是 this 以及為什么它很有用。
或許你遲遲不肯深入探究 this，因為它看起來很奇怪，讓你心生畏懼。你之所以使用它，有可能僅僅是因為 StackOverflow 說你需要在 React 用它來完成一些事情。
在我們深入了解它的真正含義以及為什么要使用它之前，我們首先需要了解函數式編程和面向對象編程之間的區別。
你可能知道也可能不知道，JavaScript 具有函數和面向對象的構造，你可以選擇關注其中一個或兩者兼而有之。
在我的 JavaScript 之旅的早期，我一方面擁抱函數式編程，一方面像避免瘟疫一樣排斥面向對象編程。我對面向對象關鍵字 this 不甚了解。其中的一個原因是我不明白它存在的必要性。在我看來，完全可以不依賴 this 就可以完成所有的事情。
在某種程度上，我的看法是對的。
你可能只關注其中一種范式而從來不去了解另外一種，作為一名 JavaScript 開發者，你的局限性就體現在這里。為了說明函數式編程和面向對象編程之間的差別，我將使用一組 Facebook 好友數據作為示例。
假設你正在構建一個用戶登錄 Facebook 的 Web 應用，在登錄后顯示一些 Facebook 好友的數據。你需要訪問 Facebook 端點來獲取好友的數據，可能包含一些信息，例如 firstName、lastName、username、numFriends、friendData、birthday 和 lastTenPosts。
const data=[
{
firstName: 'Bob',
lastName: 'Ross',
username: 'bob.ross',
numFriends: 125,
birthday: '2/23/1985',
lastTenPosts: ['What a nice day', 'I love Kanye West', ...],
},
...
]
你從（臆造的）Facebook API 獲得上面的數據。現在，你需要轉換它們，讓它們符合項目需要的格式。假設你要為每個用戶的朋友顯示以下內容：
如果使用函數式方法，就是將整個數組或數組的每個元素傳給一個返回所需操作數據的函數：
const fullNames=getFullNames(data) // ['Ross, Bob', 'Smith, Joanna', ...]
你從原始數據開始（來自 Facebook API），為了將它們轉換為對你有用的數據，你將數據傳給一個函數，這個函數將輸出你可以在應用程序中顯示給用戶的數據。
你也可以通過類似的方式獲取三個隨機帖子并計算朋友生日至今的天數。
函數式方法就是指接受原始數據，將數據傳給一個或多個函數，并輸出對你有用的數據。
對于那些剛接觸編程和學習 JavaScript 的人來說，面向對象方法可能會更難掌握。面向對象是指你將每個朋友轉換為對象，對象包含了用于生成你所需內容的一切。
你可以創建包含 fullName 屬性的對象，以及 getThreeRandomPosts 和 getDaysUntilBirthday 函數。
function initializeFriend(data) {
return {
fullName: `${data.firstName} ${data.lastName}`,
getThreeRandomPosts: function() {
// get three random posts from data.lastTenPosts
},
getDaysUntilBirthday: function() {
// use data.birthday to get the num days until birthday
}
};
}
const objectFriends=data.map(initializeFriend)
objectFriends[0].getThreeRandomPosts()
// Gets three of Bob Ross's posts
面向對象方法是為你的數據創建對象，這些對象包含了狀態和用于生成對你和你的項目有用的數據的信息。
你可能沒有想過會寫出類似 initializeFriend 這樣的東西，你可能會認為它很有用。你可能還會注意到，它其實并非真正的面向對象。
getThreeRandomPosts 或 getDaysUntilBirthday 方法之所以有用，主要是因為閉包。因為使用了閉包，所以在 initializeFriend 返回之后，它們仍然可以訪問 data。
假設你寫了另一個方法，叫 greeting。請注意，在 JavaScript 中，方法只是對象的一個屬性，這個屬性的值是一個函數。我們希望 greeting 可以做這些事情：
function initializeFriend(data) {
return {
fullName: `${data.firstName} ${data.lastName}`,
getThreeRandomPosts: function() {
// get three random posts from data.lastTenPosts
},
getDaysUntilBirthday: function() {
// use data.birthday to get the num days until birthday
},
greeting: function() {
return `Hello, this is ${fullName}'s data!`
}
};
}
這樣可以嗎？
不行！
新創建對象的所有東西都可以訪問 initializeFriend 的變量，但對象本身的屬性或方法不行。當然，你可能會問：
難道你不能用 data.firstName 和 data.lastName 來返回 greeting 嗎？
當然可以。但如果我們還想在 greeting 中包含朋友生日至今的天數，該怎么辦？我們必須以某種方式從 greeting 中調用 getDaysUntilBirthday 方法。
是時候讓 this 上場了！
在不同的情況下，this 代表的東西也不一樣。默認情況下，this 指向全局對象（在瀏覽器中，就是 window 對象）。但光知道這點對我們并沒有太大幫助，對我來說有用的是 this 的這條規則：
如果 this 被用在一個對象的方法中，并且這個方法在對象的上下文中調用，那么 this 就指向這個對象本身。
你會問：“在對象的上下文中調用……這又是什么意思”？
別擔心，稍后我們會解釋這個。
因此，如果我們想在 greeting 中調用 getDaysUntilBirthday，可以直接調用 this.getDaysUntilBirthday，因為在這種情況下，this 指向對象本身。
注意：不要在全局作用域或在另一個函數作用域內的常規 ole 函數中使用 this！this 是一個面向對象的構造。因此，它只在對象（或類）的上下文中有意義！
讓我們重構 initializeFriend，讓它使用 this：
function initializeFriend(data) {
return {
lastTenPosts: data.lastTenPosts,
birthday: data.birthday,
fullName: `${data.firstName} ${data.lastName}`,
getThreeRandomPosts: function() {
// get three random posts from this.lastTenPosts
},
getDaysUntilBirthday: function() {
// use this.birthday to get the num days until birthday
},
greeting: function() {
const numDays=this.getDaysUntilBirthday()
return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
}
};
}
現在，在執行完 intializeFriend 后，這個對象的所有東西都限定在對象本身。我們的方法不再依賴于閉包，它們將使用對象本身包含的信息。
這是 this 的一種使用方式，現在回到之前的問題：為什么說 this 因上下文不同而不同？
有時候，你希望 this 可以指向不一樣的東西，比如事件處理程序就是一個很好的例子。假設我們想在用戶點擊鏈接時打開朋友的 Facebook 頁面。我們可能會在對象中添加一個 onClick 方法：
function initializeFriend(data) {
return {
lastTenPosts: data.lastTenPosts,
birthday: data.birthday,
username: data.username,
fullName: `${data.firstName} ${data.lastName}`,
getThreeRandomPosts: function() {
// get three random posts from this.lastTenPosts
},
getDaysUntilBirthday: function() {
// use this.birthday to get the num days until birthday
},
greeting: function() {
const numDays=this.getDaysUntilBirthday()
return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
},
onFriendClick: function() {
window.open(`https://facebook.com/${this.username}`)
}
};
}
請注意，我們向對象添加了 username，讓 onFriendClick 可以訪問它，這樣我們就可以在新窗口中打開朋友的 Facebook 頁面。現在編寫 HTML：
<button id="Bob_Ross"> <!-- A bunch of info associated with Bob Ross --> </button>
然后是 JavaScript：
const bobRossObj=initializeFriend(data[0])
const bobRossDOMEl=document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)
在上面的代碼中，我們為 Bob Ross 創建了一個對象。我們獲得與 Bob Ross 相關的 DOM 元素。現在我們想要調用 onFriendClick 方法來打開 Bob 的 Facebook 頁面。應該沒問題吧？
不行！
什么地方出了問題？
請注意，我們為 onclick 處理程序選擇的函數是 bobRossObj.onFriendClick。看到問題所在了嗎？如果我們像這樣重寫它：
bobRossDOMEl.addEventListener("onclick", function() {
window.open(`https://facebook.com/${this.username}`)
})
現在你看到問題所在了嗎？當我們將 onclick 處理程序指定為 bobRossObj.onFriendClick 時，我們實際上是將 bobRossObj.onFriendClick 的函數作為參數傳給了處理程序。它不再“屬于”bobRossObj，也就是說 this 不再指向 bobRossObj。這個時候 this 實際上指向的是全局對象，所以 this.username 是 undefined 的。
是時候讓 bind 上場了！
我們需要做的是將 this 顯式綁定到 bobRossObj。我們可以使用 bind 來實現：
const bobRossObj=initializeFriend(data[0])
const bobRossDOMEl=document.getElementById('Bob_Ross')
bobRossObj.onFriendClick=bobRossObj.onFriendClick.bind(bobRossObj)
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)
之前，this 是基于默認規則設置的。通過使用 bind，我們在 bobRossObj.onFriendClick 中將 this 的值顯式設置為對象本身，也就是 bobRossObj。
到目前為止，我們已經知道為什么 this 很有用以及為什么有時候需要顯式綁定 this。接下來我們要討論的最后一個主題是箭頭函數。
你可能已經注意到，箭頭函數像是一個時髦的新事物。人們似乎很喜歡它們，因為它們簡潔而優雅。你可能已經知道它們與一般函數略有不同，但不一定非常清楚這些區別究竟是什么。
或許箭頭函數的不同之處在于：
在箭頭函數內部，無論 this 處于什么位置，它指的都是相同的東西。
讓我們用 initializeFriend 示例解釋一下。假設我們想在 greeting 中添加一個輔助函數：
function initializeFriend(data) {
return {
lastTenPosts: data.lastTenPosts,
birthday: data.birthday,
username: data.username,
fullName: `${data.firstName} ${data.lastName}`,
getThreeRandomPosts: function() {
// get three random posts from this.lastTenPosts
},
getDaysUntilBirthday: function() {
// use this.birthday to get the num days until birthday
},
greeting: function() {
function getLastPost() {
return this.lastTenPosts[0]
}
const lastPost=getLastPost()
return `Hello, this is ${this.fullName}'s data!
${this.fullName}'s last post was ${lastPost}.`
},
onFriendClick: function() {
window.open(`https://facebook.com/${this.username}`)
}
};
}
這樣可以嗎？如果不行，要怎樣修改才行？
這樣當然是不行的。因為 getLastPost 不是在對象的上下文中調用的，所以 getLastPost 中的 this 會回退到默認規則，即指向全局對象。
“在對象的上下文中調用”可能是一個比較含糊的概念。要確定一個函數是否是在“對象的上下文中”被調用，最好的辦法是看一下函數是如何被調用的，以及是否有對象“附加”在函數上。
讓我們來看看執行 bobRossObj.onFriendClick() 時會發生什么：“找到 bobRossObj 對象的 onFriendClick 屬性，調用分配給這個屬性的函數”。
再讓我們來看看執行 getLastPost() 時會發生什么：”調用一個叫作 getLastPost 的函數”。有沒有注意到，這里并沒有提及任何對象？
現在來測試一下。假設有一個叫作 functionCaller 的函數，它所做的事情就是調用其他函數：
functionCaller(fn) {
fn()
}
如果我們這樣做會怎樣：functionCaller(bobRossObj.onFriendClick)？可不可以說 onFriendClick 是“在對象的上下文中”被調用的？this.username 的定義存在嗎？
讓我們來看一下：“找到 bobRossObj 對象的 onFriendClick 屬性。找到這個屬性的值（恰好是一個函數），將它傳給 functionCaller，并命名為 fn。現在，執行名為 fn 的函數”。請注意，函數在被調用之前已經從 bobRossObj 對象中“分離”，因此不是“在對象 bobRossObj 的上下文中”調用，所以 this.username 是 undefined 的。
讓箭頭函數來救場：
function initializeFriend(data) {
return {
lastTenPosts: data.lastTenPosts,
birthday: data.birthday,
username: data.username,
fullName: `${data.firstName} ${data.lastName}`,
getThreeRandomPosts: function() {
// get three random posts from this.lastTenPosts
},
getDaysUntilBirthday: function() {
// use this.birthday to get the num days until birthday
},
greeting: function() {
const getLastPost=()=> {
return this.lastTenPosts[0]
}
const lastPost=getLastPost()
return `Hello, this is ${this.fullName}'s data!
${this.fullName}'s last post was ${lastPost}.`
},
onFriendClick: function() {
window.open(`https://facebook.com/${this.username}`)
}
};
}
箭頭函數是在 greeting 中聲明的。我們知道，當我們在 greeting 中使用 this 時，它指向對象本身。因此，箭頭函數中的 this 指向的對象就是我們想要的。
英文原文：
https://medium.freecodecamp.org/a-deep-dive-into-this-in-javascript-why-its-critical-to-writing-good-code-7dca7eb489e7
、定義
<meta> 標簽提供關于 HTML 文檔的元數據。它不會顯示在頁面上，但是對于機器是可讀的。可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。
2、作用
meta里的數據是供機器解讀的，告訴機器該如何解析這個頁面，還有一個用途是可以添加服務器發送到瀏覽器的http頭部內容，例如我們為頁面中添加如下meta標簽：
瀏覽器的頭部就會包括這些:
只有瀏覽器可以接受這些附加的頭部字段，并能以適當的方式使用它們時，這些字段才有意義。
3、meta的必需屬性和可選屬性
meta的必需屬性是content，當然并不是說meta標簽里一定要有content，而是當有http-equiv或name屬性的時候，一定要有content屬性對其進行說明。例如：
必需屬性
<meta name="keywords" content="HTML,ASP,PHP,SQL">
這里面content里的屬性就是對keywords進行的說明，所以呢也可以理解成一個鍵值對吧，就是{keywords:"HTML,ASP,PHP,SQL"}。
可選屬性
在W3school中，對于meta的可選屬性說到了三個，分別是http-equiv、name和scheme。考慮到scheme不是很常用，所以就只說下前兩個屬性吧。
http-equiv
http-equiv屬性是添加http頭部內容，對一些自定義的，或者需要額外添加的http頭部內容，需要發送到瀏覽器中，我們就可以是使用這個屬性。在上面的meta作用中也有簡單的說明，那么現在再舉個例子。例如我們不想使用js來重定向，用http頭部內容控制，那么就可以這樣控制：
<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
在頁面中加入這個后，5秒鐘后就會跳轉到指定頁面啦，效果可看W3school的例子
name
第二個可選屬性是name，這個屬性是供瀏覽器進行解析，對于一些瀏覽器兼容性問題，name屬性是最常用的，當然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以，不然就是沒有意義的。還是舉個例子吧:
<meta name="renderer" content="webkit">
這個meta標簽的意思就是告訴瀏覽器，用webkit內核進行解析，當然前提是瀏覽器有webkit內核才可以，不然就是沒有意義的啦。當然看到這個你可能會有疑問，這個renderer是從哪里冒出來的，我要怎么知道呢？這個就是在對應的瀏覽器的開發文檔里就會有表明的，例如這個renderer是在360瀏覽器里說明的。360瀏覽器內核控制Meta標簽說明文檔
常用meta標簽大總結
接下來就是常用的meta標簽大總結啦，我會盡可能的做到全
charset
charset是聲明文檔使用的字符編碼，解決亂碼問題主要用的就是它，值得一提的是，這個charset一定要寫第一行，不然就可能會產生亂碼了。
charset有兩種寫法
兩個都是等效的。
百度禁止轉碼
百度會自動對網頁進行轉碼，這個標簽是禁止百度的自動轉碼
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 優化部分
viewport
viewport主要是影響移動端頁面布局的，例如：
content 參數：
各瀏覽器平臺
Microsoft Internet Explorer
Google Chrome
360瀏覽器
UC手機瀏覽器
UCBrowser_U3_API
QQ手機瀏覽器
Apple iOS
Google Android
App Links
最后——移動端常用的meta
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
