移動前端不得不瞭解的HTML5 head 頭標籤（2016最新版）

html5-head

HTML的頭部內容特別多，有針對SEO的頭部資訊，也有針對移動裝置的頭部資訊。而且各個瀏覽器核心以及各個國內瀏覽器廠商都有些自己的標籤元素,有很多差異性。移動端的工作已經越來越成為前端工作的重要內容，除了平常的專案開發，HTML 頭部標籤功能，特別是meta，link等標籤的功能屬性顯得非常重要。這裡整理了一份 <head> 部分的清單，讓大家瞭解每個標籤及相應屬性的意義，寫出滿足自己需求的 <head> 頭部標籤，可以很有效的增強頁面的可用性。

注：去年整理過移動前端不得不瞭解的html5 head 頭標籤，隨著時間和瀏覽器廠商的升級，現在看起來似乎有些過時了。所以重新整理了一下。增加了新的內容，及過時的一些提示，同時增加了部分桌面端瀏覽器的一些說明。

HTML基本的頭部標籤

下面是HTML基本的頭部元素:

<!doctype html>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="x-ua-compatible"content="ie=edge">
<!--移動端的頁面這個可以忽略，具體可以檢視本文Internet Explorer瀏覽器部分-->
<metaname="viewport"content="width=device-width, initial-scale=1">
<!--具體可以檢視本文 為移動裝置新增 viewport 部分--> 
<!-- 以上 3 個 meta 標籤 *必須* 放在 head 的最前面；其他任何的 head 內容必須在這些標籤的 *後面* -->
<title>頁面標題</title>
    ...
</head>

其中

<metahttp-equiv="x-ua-compatible"content="ie=edge">

在桌面開發的時候可以讓IE瀏覽器以最新的模式渲染頁面，具體可以檢視本文Internet Explorer瀏覽器部分。
如果你的頁面確定只在桌面瀏覽器中執行，那麼

<metaname="viewport"content 
="width=device-width, initial-scale=1">

也可以省略。

DOCTYPE

DOCTYPE(Document Type)，該宣告位於文件中最前面的位置，處於 html 標籤之前，此標籤告知瀏覽器文件使用哪種 HTML 或者 XHTML 規範。

使用 HTML5 doctype，不區分大小寫。

<!DOCTYPE html><!-- 使用 HTML5 doctype，不區分大小寫 -->

charset

宣告文件使用的字元編碼，

<metacharset="utf-8">

html5 之前網頁中會這樣寫：

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">

lang屬性

簡體中文

<htmllang="zh-cmn-Hans"><!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->

繁體中文

<htmllang="zh-cmn-Hant"><!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->

很少情況才需要加地區程式碼，通常是為了強調不同地區漢語使用差異，例如：

<plang="zh-cmn-Hans">
<stronglang="zh-cmn-Hans-CN">菠蘿</strong>和<stronglang="zh-cmn-Hant-TW">鳳梨</strong>其實是同一種水果。只是大陸和臺灣稱謂不同，且新加坡、馬來西亞一帶的稱謂也是不同的，稱之為<stronglang="zh-cmn-Hans-SG">黃梨</strong>。
</p>

為什麼 lang="zh-cmn-Hans" 而不是我們通常寫的 lang="zh-CN" 呢，請移步閱讀: 頁頭部的宣告應該是用 lang=”zh” 還是 lang=”zh-cn”。

Meta 標籤

meta標籤是HTML中head頭部的一個輔助性標籤，它位於HTML文件頭部的 <head> 和 <title> 標記之間，它提供使用者不可見的資訊。雖然這部分資訊使用者不可見，但是其作用非常強大，特別是當今的前端開發工作中，設定合適的meta標籤可以大大提升網站頁面的可用性。

桌面端開發中，meta標籤通常用來為搜尋引擎優化（SEO）及 robots定義頁面主題，或者是定義使用者瀏覽器上的cookie；它可以用於鑑別作者，設定頁面格式，標註內容提要和關鍵字；還可以設定頁面使其可以根據你定義的時間間隔重新整理自己，以及設定RASC內容等級，等等。

移動端開發中，meta標籤除了桌面端中的功能設定外，還包括，比如viewport設定，新增到主螢幕圖示，標籤頁顏色等等實用設定。具體可以看後面詳細的介紹。

meta標籤分類

meta標籤根據屬性的不同，可分為兩大部分：http-equiv 和 name 屬性。

http-equiv：相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以幫助瀏覽器正確地顯示網頁內容。
name屬性：主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於瀏覽器，搜尋引擎等機器人識別，等等。

推薦使用的meta標籤

<!-- 設定文件的字元編碼 -->
<metacharset="utf-8">
<metahttp-equiv="x-ua-compatible"content="ie=edge">
<metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 以上 3 個 meta 標籤 *必須* 放在 head 的最前面；其他任何的 head 內容必須在這些標籤的 *後面* -->
<!-- 允許控制資源的過度載入 -->
<metahttp-equiv="Content-Security-Policy"content="default-src 'self'">
<!-- 儘早地放置在文件中 -->
<!-- 僅應用於該標籤下的內容 -->
<!-- Web 應用的名稱（僅當網站被用作為一個應用時才使用）-->
<metaname="application-name"content="應用名稱">
<!-- 針對頁面的簡短描述（限制 150 字元）-->
<!-- 在*某些*情況下，該描述是被用作搜尋結果展示片段的一部分 -->
<metaname="description"content="一個頁面描述">
<!-- 控制搜尋引擎的抓取和索引行為 -->
<metaname="robots"content="index,follow,noodp"><!-- 所有的搜尋引擎 -->
<metaname="googlebot"content="index,follow"><!-- 僅對 Google 有效 -->
<!-- 告訴 Google 不顯示網站連結的搜尋框 -->
<metaname="google"content="nositelinkssearchbox">
<!-- 告訴 Google 不提供此頁面的翻譯 -->
<metaname="google"content="notranslate">
<!-- 驗證 Google 搜尋控制檯的所有權 -->
<metaname="google-site-verification"content="verification_token">
<!-- 用來命名軟體或用於構建網頁（如 - WordPress、Dreamweaver）-->
<meta
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    移動前端不得不瞭解的HTML5 head 頭標籤（2016最新版）
      



HTML的頭部內容特別多，有針對SEO的頭部資訊，也有針對移動裝置的頭部資訊。而且各個瀏覽器核心以及各個國內瀏覽器廠商都有些自己的標籤元素,有很多差異性。移動端的工作已經越來越成為前端工作的重要內容，除了平常的專案開發，HTML 頭部標籤功能，特別是meta，link等標籤的功能屬性顯得非常重 

  
 

    

    
    移動前端不得不瞭解的html5 head 頭標籤
      
                


移動端的工作已經越來越成為前端工作的重要內容，除了平常的專案開發，HTML 頭部標籤功能，特別是meta標籤顯得非常重要。




DOCTYPE

DOCTYPE(Document Type)，該宣告位於文件中最前面的位置，處於 html 標籤之前 

  
 

    

    
    移動前端不得不了解的HTML5 head 頭標簽 —— Meta 標簽
      target   bing   sea   sign   以及   網址   應用   ots   頁面加載   Meta 標簽
meta標簽是HTML中head頭部的一個輔助性標簽，它位於HTML文檔頭部的 <head> 和 <title> 標記之間，它提供用戶不可見的信息。雖然這部 

  
 

    

    
    移動前端不得不了解的HTML5 head 頭標簽 —— HTML基本的頭部標簽
      AR   con   模式   har   tro   -h   intern   標簽   標準   HTML的頭部內容特別多，有針對SEO的頭部信息，也有針對移動設備的頭部信息。而且各個瀏覽器內核以及各個國內瀏覽器廠商都有些自己的標簽元素,有很多差異性。移動端的工作已經越來越成為前端工作的重要內容，除了平 

  
 

    

    
    前端不得不瞭解的盒子模型---border-box
      
								
								            
							
							
							盒子模型設定

box-sizing: border-box;  
  box-sizing的預設值是content-box



什麼是盒子模型？

預設情況下，假如我們定義了一個div，設定它的寬度 

  
 

    

    
    好程式設計師web前端分享常見html5語義化標籤
      
                                        
                                                好程式設計師web前端分享常見html5語義化標籤，我們知道，建立結構清晰的頁面可以建立良好的語義化基礎，也降低了使用css的難度 

  
 

    

    
    ASP.NET Core2.1 你不得不瞭解的GDPR(Cookie處理) - （轉載）
      前言 
 
時間一晃 ASP.NET Core已經迭代到2.1版本了. 
迫不及待的的下載了最新的版本,然後生成了一個模版專案來試試水. 
...然後就碰到問題了... 我發現..cookie竟然存不進去了..(怨念+100) 
找了各種資料,無果 最後無奈只得麻煩善友老師..老師回了一句GDPR 
雖然一頭 

  
 

    

    
    HTML5用audio標籤做一個最簡單的音訊播放器
      
                
在做系統的時候，要求做一個音訊播放器，就在網上查找了一些資料，發現這樣的資料還是很千篇一律的，EasyUI框架並沒有給我們一個音訊播放器的功能，在bootstrap上有，但是也是結合html5來寫的，因此，我們在這裡就用純的html5血一個音訊播放器，如何播放本地的音訊。
 

  
 

    

    
    Python機器學習筆記：不得不瞭解的機器學習知識點（2）
      　　　　　　之前一篇筆記： Python機器學習筆記：不得不瞭解的機器學習知識點（1）
1，什麼樣的資料集不適合用深度學習？



資料集太小，資料樣本不足時，深度學習相對其它機器學習演算法，沒有明顯優勢。
資料集沒有區域性相關特性，目前深度學習表現比較好的領域主要是影象／語音／自然語言處理等領域， 

  
 

    

    
    2018最新傳智黑馬前端從基礎班到就業班（視頻+資料）
      .com   技術   分享圖片   tro   前端   ebe   百度網   ima   alt   
百度網盤下載2018最新傳智黑馬前端從基礎班到就業班（視頻+資料） 

  
 

    

    
    HTTP學習記錄：四、頭資訊（請求和響應）
      學習資源主要為：@小坦克HTTP相關部落格 
一、請求頭資訊（Request Header） 
請求頭資訊包含比較多，如下： 
1、Cache頭域 
　　if-modified-Since 
　　作用：把瀏覽器端快取頁面的最後修改時間傳送到伺服器去，伺服器會把這個時間與伺服器上的實際檔案的最後修改時間進行對比 

  
 

    

    
    淺析微信支付：公眾平臺卡券功能開通、HTML5線上發券（JS-SDK介面）、檢視卡券詳情
       
 本文是【淺析微信支付】系列文章的第十六篇，主要講解如何使用微信公眾平臺的卡券功能、如何使用HTML5在網頁展示使用者領券以及微信卡券和商戶平臺代金券的關係。 
 
 
淺析微信支付系列已經更新十六篇了喲～，沒有看過的朋友們可以看一下哦。 
淺析微信支付：開通免充值產品功能及如何進行介面升級指引 
淺析微 

  
 

    

    
    ThinkPHP中的volist標籤（限制迴圈次數）
      
                <volist name="list" id="vo" offset="5" length='10'>
{$vo.name}
</volist>

1.Volist標籤的name屬性表示模板賦值的變數名稱，因此不可隨意在模板檔案中改變。id表示當前的迴 

  
 

    

    
    HTML自學筆記_新增div標籤 （容器、區塊）
       
  
  
 <div> 標籤的加入，將所有內容元素歸併到一個區塊中，使頁面結構性更強 為了後續進一步控制這個區塊的顯示，可以賦予這個 div 一個名字，以直接對應這個區塊 
  
  <div id=“container”> 
  
 <!DOCTYPE html>
 

  
 

    

    
    Android移動端與伺服器api介面加密示例（AES,MD5,Token）
      
                
移動端介面安全流程：

獲取token步驟：
    * 1.拿到從後臺返回的AES加密後的token
    * 2.根據約定祕鑰進行解密，並把token儲存下來
AES祕鑰由移動端和後臺商議決定
後臺驗證步驟：
    * 1.取出timestamp 驗證是否是過期請求 

  
 

    

    
    Android三種方式載入Image標籤（商品長圖）
      
                        最近做商城專案，商品詳情頁是一張長圖，後臺返回的商品圖片資料是一個image標籤，剛開始想h5實現比較方便，由於專案很趕，大家都有各自的任務，於是自己研究，實現了載入長圖，剛開始使用的是textview載入html的方式，發現圖片載入好後沒有顯示出來，回頭一想 

  
 

    

    
    html5本地資料庫儲存（database storage方式）
      
                
通過openDatabase方法建立一個訪問資料庫的物件
var db = openDatabase(databasename,version,description,size) ;
該方法有四個引數，作用分別為：
databasename:資料庫名；
version：資料 

  
 

    

    
    WAVE檔案的頭格式（例如PCM檔案）
      
                
wav檔案包括頭和資料兩部分，其結構如下：（從檔案頭開始依次排列） 
1）首先是字串“RIFF” ，佔4個位元組。 
2）波形塊的大小：DWORD，佔4位元組。波形塊的大小=(檔案大小-8) 
3）字串"WAVE"，佔4個位元組。 
4）字串“fmt ”，佔4個位元組，注意 

  
 

    

    
    如何讓一款HTML5應用上架AppStore（2016-12-2最新更新）
      
							
							
							


列表內容 
      AppStore的稽核之嚴，都是我們所瞭解的。因為各種原因被拒的不在少數，例如APP廣告太多、裡面引用的webview中沒有原始的痕跡、甚至因為icon太醜的，在這裡就不一一列舉了。需要知道AppStore上架規範可以跳轉URL。
 

  
 

    

    
    多分類標籤（one-hot向量）
       
 
 參考：https://blog.csdn.net/huangbo1221/article/details/79671797 
 最近學習TensorFlow，例子裡面全是mnist這種，鬼知道你裡面資料格式是個什麼鬼？想用自己的資料訓練，於是，第一步先開始製作資料集，開始用one-hot向量打標籤；