整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、定義
<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
章先介紹一些HTML最基礎的考點，很多大長面試官喜歡由淺入深地考察知識。而對于一些基礎問題的回答，很多同學反而因組織不好語言而給面試官留下不好的印象。本章節我們就帶大家一一整理和回顧。
面試官：我們現在寫HTML代碼第一行通常是
!<DOCTYPE HTML>，請介紹一下DOCTYPE的作用（基礎題）
DOCTYPE標簽是一種標準通用標記語言的文檔類型聲明，且必須聲明在文檔的第一行，來告知瀏覽器用何種文檔標準來解析這個網頁，不同的渲染模式會影響瀏覽器對CSS和JavaScript的解析標準。
面試官：瀏覽器解析文檔有哪幾種解析模式呢？（拓展題）
文檔的解析模式目前主要有 *兩種（注意：還有一種“準標準模式”只在IE8瀏覽器里，目前主流瀏覽器已無需考慮）：
面試官：如何快速檢查頁面的解析模式？（發散題）
HTML文檔對象有個 compatMode 屬性，用于記錄頁面的解析模式：
BackCompatCSS1Compatconst mode = document.compatMode; // 頁面的解析模式
if (mode === "BackCompat") {
// 渲染模式為混雜模式
}面試官：什么是HTML語義化，語義化的作用是什么？（基礎題）
語義化是指使用恰當語義的html標簽，讓頁面具有良好的結構與含義；比如<p>標簽就代表段落，<article>代表正文內容等等。語義化的作用有兩點：
面試官：你平時有哪些語義化的建議或最佳實踐？（發散題）
根據語義化的優點，對于富文本內容類的網站（如門戶、新聞網站），語義化利于SEO，對網站內容的傳播有很大幫助，此類網站應該重視和實踐語義化標準。而對于一些系統類網站的搭建，語義化就沒有那沒重要了，甚至刻意做語義化反而會影響開發者的效率，此類網站可以對頁面骨架做語義化，至于模塊的交互組件和表單等則無需刻意做語義化。
面試官：你知道HTML5有哪些新增的東西嗎？（基礎題）
HTML5新增的內容確實不少，面試官不會要求你全部記下來，我們可以挑重要的東西來回答：
<header>、<mainer>、<footer>、<section>、<nav>等<font>、<big>、<center> 等<input>的新類型（date、email、url等）、新屬性（autocomplete、autofocus等）<video>（視頻）、<audio>（音頻）等面試官：介紹一下
<meta>標簽的用途 （基礎題）
meta標簽由name和content兩個屬性來定義，來描述一個HTML網頁文檔的元信息，例如作者、日期和時間、網頁描述、關鍵詞、頁面刷新等，除了一些http標準規定了一些name作為大家使用的共識，開發者也可以自定義name
面試官：移動端適配的viewpoint，能否手寫一下？（拓展題）
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">面試官：介紹一下
src和href的區別（基礎題）
src是指向外部資源的位置，指向的內容會嵌入到文檔中當前標簽所在的位置，在請求src資源時會將其指向的資源下載并應用到文檔內，如JS腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，所以一般JS腳本會放在底部而不是頭部。
href是指向網絡資源所在位置（的超鏈接），用來建立和當前元素或文檔之間的連接，當瀏覽器識別到它他指向的文件時，就會并行下載資源，不會停止對當前文檔的處理
面試官：介紹一下
<img>標簽的srcset和sizes屬性的作用（基礎題）
可以設計響應式圖片，我們可以使用兩個新的屬性srcset 和 sizes來提供更多額外的資源圖像和提示，幫助瀏覽器選擇正確的一個資源
srcset 定義了我們允許瀏覽器選擇的圖像集，以及每個圖像的大小
sizes 定義了一組媒體條件（例如屏幕寬度）并且指明當某些媒體條件為真時，什么樣的圖片尺寸是最佳選擇
所以，有了這些屬性，瀏覽器會：
sizes 列表中哪個媒體條件是第一個為真srcset 列表中引用的最接近所選的槽大小的圖像<img src="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 50vw"
/>面試官：介紹一下
<script>標簽的defer和async的作用（基礎題）
defer：瀏覽器指示腳本在文檔被解析后執行，<script>被異步加載后并不會立刻執行，而是等待文檔被解析完畢后執行
async：同樣是異步加載腳本，區別是腳本加載完畢后立即執行，這導致async屬性下的腳本是亂序的，對于<script>有先后依賴關系的情況，并不適用
如下圖：藍色線代表網絡讀取，紅色線代表執行時間，這倆都是針對腳本的；綠色線代表 HTML 解析
面試官：前端有哪幾種數據存儲方式？（基礎題）
主要的存儲方式有Cookie、LocalStorage、SessionStorage、IndexedDB、WebSQL，它們的優缺點如下：
transaction操作sql，火狐瀏覽器不支持// WebSql操作實例
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
// 建表 => 插入 => 刪除
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鳥教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
tx.executeSql('DELETE FROM LOGS WHERE id=1');
msg = '<p>數據表已創建，且插入了兩條數據，然后又刪除了第一條。</p>';
document.querySelector('#status').innerHTML = msg;
});面試官：介紹一下webSocket的特點和作用（基礎題）
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。它允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向數據傳輸。
在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送
本文由博客一文多發平臺 OpenWrite 發布！
者 | 陳峻
審校 | 孫淑娟
通常，測試JavaScript的過程對于新手測試人員來說，可能會比較痛苦。對此，業界已經開發出了許多現成的工具、技術和框架，盡量讓該過程變得輕松一些。其中，諸如：Mocha、Jasmine和Jest之類的工具，提供了測試結構，而Istanbul和Blanket之類的工具則能夠生成代碼覆蓋率的相關報告。可以說，在瀏覽器中，使用不同的方法去測試JavaScript代碼，往往會產生滿足不同需求目標的結果。我們很難僅靠一種工具、技術或解決方案，達到放之四海皆準的效果。本文將向您介紹如何在瀏覽器中測試JavaScript代碼的6種流行測試方法，它們分別是：
下面，讓我們逐漸進行討論：
無論您是使用JavaScript，還是使用React或Vue等框架，JSFiddle都是一款可以在瀏覽器中編寫和測試JavaScript代碼的在線工具。2009年，它是以“Mooshell”的形式被推出的。如果您正在開發Web應用程序，并用到了某種類型的JavaScript庫，那么JSFiddle便是一款比較合適的測試工具。它的界面非常簡單，您只需要輸入一些JavaScript腳本，甚至添加一些HTML和CSS，即可立即查看到結果。因此，您可以在將JavaScript代碼片段添加到自己的項目之前，使用JSFiddle進行全面測試。
JSBin是JSFiddle的簡潔純凈版的替代產品。如果您想使用一個更易于理解、且界面更加簡潔的工具，那么JSBin會比JSFiddle更適合您。由于該平臺提供免費和專業訪問權限，因此只要您成為專業（pro）用戶，就能夠享受其針對私人垃圾箱、以及無限制的dropbox同步等高級功能。當然，您也可以使用JSBin的通用訪問權限，去輕松地測試HTML、CSS和JavaScript的任何組合。
CodePen是一種能夠測試HTML、CSS和JavaScript代碼的最佳在線工具。其開發者社區擁有豐富的資源。目前，它作為一個開源學習環境，不但擁有高達330000名已注冊的開發者用戶，而且正致力于開發滿足各類應用需求的前端應用程序。可以說，它是構建和部署網站，并向全網推廣您的產品，以及構建測試用例的最佳平臺之一。
雖然您可以輕松地使用JSFiddle和CodePen等工具，來測試您的JavaScript代碼，但這些工具不會向您展示目標代碼在不同瀏覽器或移動瀏覽器中的不同輸出方式。如果您想測試代碼的跨瀏覽器兼容性，那么您需要使用諸如LambdaTest之類，能夠橫跨多種瀏覽器的在線測試工具。目前，跨瀏覽器測試工具支持實時的交互式瀏覽器測試、自動屏幕截圖測試、響應式布局測試、以及智能可視化UI測試等。該工具能夠大幅加快您的測試周期，并協助您解決代碼中的特定瀏覽器問題。
Karma是一種能夠讓您根據多種實現意圖，在瀏覽器中測試JavaScript代碼的工具。不過，它無法單獨測試代碼的本身，而需要依賴諸如Jasmine和Mocha等第三方庫，去執行代碼，以開展測試。此外，它在交付形式上還需要一個真正的瀏覽器。也就是說，您必須在本地計算機上安裝Google Chrome，才能使用這種JavaScript測試方法。當然，它是以無頭模式(headless mode)，來啟動Google Chrome，以執行各項操作。
作為另一種可用于測試JavaScript代碼的在線工具，Liveweave具有實時的預覽功能，并配備了參考標準來幫助您進行響應式設計。它的HTML、CSS和JavaScript代碼提示功能，會使得初學者可以輕松地輸入基本代碼。此外，您也可以使用Liveweave將被測項目下載成為一個.zip文件，以便在代碼中輕松地添加和使用包括jQuery、AngularJS、以及Bootstrap在內的外部庫。
除了上述介紹的6種可以在瀏覽器中測試JavaScript代碼的流行方式，您還可以使用CSSDeck和Dabblet等工具。它們同樣便捷且易用。當然，Firebug和Chrome等由大廠提供的開發者工具，通常還會提供Javascript控制臺，以方便您直接輸入JavaScript代碼，并執行之。它們不但可以適合原生的瀏覽器，還適用于Internet Explorer 8以上、Opera、Safari、以及各種新出現的瀏覽器。
原文鏈接：https://dzone.com/articles/how-to-test-javascript-code-in-a-browser
陳峻 （Julian Chen），51CTO社區編輯，具有十多年的IT項目實施經驗，善于對內外部資源與風險實施管控，專注傳播網絡與信息安全知識與經驗；持續以博文、專題和譯文等形式，分享前沿技術與新知；經常以線上、線下等方式，開展信息安全類培訓與授課。
來源： 51CTO技術棧
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
