【網站開發】移動前端不得不了解的HTML5 head 頭標簽

2017-02-15 1186 3 編輯:深色多郎 來源:互聯網

下面是HTML基本的頭部元素

html 代碼:

<!doctype html>

<html>

<head>

    < charset="utf-8">

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

    <!--移動端的頁面這個可以忽略,具體可以查看本文Internet Explorer瀏覽器部分-->

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

    <!--具體可以查看本文 為移動設備添加 viewport 部分-->

    <!-- 以上 3 個 標簽 *必須* 放在 head 的最前面;其他任何的 head 內容必須在這些標簽的 *后面* -->

    < >頁面標題</ >

    ...

</head>

html 代碼:

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

在桌面開發的時候可以讓IE瀏覽器以最新的模式渲染頁面,具體可以查看本文Internet Explorer瀏覽器部分。

如果你的頁面確定只在桌面瀏覽器中運行,那么

html 代碼:

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

也可以省略。

DOCTYPE

DOCTYPE(Document Type),該聲明位于文檔中最前面的位置,處于 html 標簽之前,此標簽告知瀏覽器文檔使用哪種 HTML 或者 XHTML 規范。

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

html 代碼:

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

charset

聲明文檔使用的字符編碼,

html 代碼:

< charset="utf-8">

html5 之前網頁中會這樣寫:

html 代碼:

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

這兩個是等效的,具體可移步閱讀:< charset='utf-8'> vs < http-equiv='Content-Type'>,所以建議使用較短的,易于記憶。

lang屬性

簡體中文

html 代碼:

<html> <!-- 更加標準的 lang 屬性寫法 -->

繁體中文

html 代碼:

<html> <!-- 更加標準的 lang 屬性寫法 -->

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

html 代碼:

<p>

<strong>菠蘿</strong>和<strong>鳳梨</strong>其實是同一種水果。只是大陸和臺灣稱謂不同,且新加坡、馬來西亞一帶的稱謂也是不同的,稱之為<strong>黃梨</strong>。

</p>

為什么 而不是我們通常寫的 呢,請移步閱讀: 頁頭部的聲明應該是用 lang=”zh” 還是 lang=”zh-cn”。

標簽 標簽是HTML中head頭部的一個輔助性標簽,它位于HTML文檔頭部的 <head> 和 < > 標記之間,它提供用戶不可見的信息。雖然這部分信息用戶不可見,但是其作用非常強大,特別是當今的前端開發工作中,設置合適的 標簽可以大大提升網站頁面的可用性。

桌面端開發中, 標簽通常用來為搜索引擎優化(SEO)及 robots定義頁面主題,或者是定義用戶瀏覽器上的cookie;它可以用于鑒別作者,設定頁面格式,標注內容提要和關鍵字;還可以設置頁面使其可以根據你定義的時間間隔刷新自己,以及設置RASC內容等級,等等。

移動端開發中, 標簽除了桌面端中的功能設置外,還包括,比如viewport設置,添加到主屏幕圖標,標簽頁顏色等等實用設置。具體可以看后面詳細的介紹。

標簽分類 標簽根據屬性的不同,可分為兩大部分:http-equiv 和 name 屬性。

http-equiv:相當于http的文件頭作用,它可以向瀏覽器傳回一些有用的信息,以幫助瀏覽器正確地顯示網頁內容。

name屬性:主要用于描述網頁,與之對應的屬性值為content,content中的內容主要是便于瀏覽器,搜索引擎等機器人識別,等等。

推薦使用的 標簽 html 代碼:

<!-- 設置文檔的字符編碼 -->

< charset="utf-8">

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

< name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- 以上 3 個 標簽 *必須* 放在 head 的最前面;其他任何的 head 內容必須在這些標簽的 *后面* -->

 

<!-- 允許控制資源的過度加載 -->

< http-equiv="Content-Security-Policy" content="default-src 'self'">

<!-- 盡早地放置在文檔中 -->

<!-- 僅應用于該標簽下的內容 -->

 

<!-- Web 應用的名稱(僅當網站被用作為一個應用時才使用)-->

< name="application-name" content="應用名稱">

 

<!-- 針對頁面的簡短描述(限制 150 字符)-->

<!-- 在*某些*情況下,該描述是被用作搜索結果展示片段的一部分 -->

< name="de ion" content="一個頁面描述">

 

<!-- 控制搜索引擎的抓取和索引行為 -->

< name="robots" content="index,follow,noodp"><!-- 所有的搜索引擎 -->

< name="googlebot" content="index,follow"><!-- 僅對 Google 有效 -->

 

<!-- 告訴 Google 不顯示網站鏈接的搜索框 -->

< name="google" content="nosite ssearchbox">

 

<!-- 告訴 Google 不提供此頁面的翻譯 -->

< name="google" content="notranslate">

 

<!-- 驗證 Google 搜索控制臺的所有權 -->

< name="google-site-verification" content="verification_token">

 

<!-- 用來命名軟件或用于構建網頁(如 - WordPress、Dreamweaver)-->

< name="generator" content="program">

 

<!-- 關于你的網站主題的簡短描述 -->

< name="subject" content="你的網站主題">

 

<!-- 非常簡短(少于 10 個字)的描述。主要用于學術論文。-->

< name="abstract" content="">

 

<!-- 完整的域名或網址 -->

< name="url" content="https://example.com/">

 

< name="directory" content="submission">

 

<!-- 基于網站內容給出一般的年齡分級 -->

< name="rating" content="General">

 

<!-- 允許控制 referrer 信息如何傳遞 -->

< name="referrer" content="never">

 

<!-- 禁用自動檢測和格式化可能的電話號碼 -->

< name="format-detection" content="telephone=no">

 

<!-- 通過設置為 “off” 完全退出 DNS 預取 -->

< http-equiv="x-dns-prefetch-control" content="off">

 

<!-- 在客戶端存儲 cookie,web 瀏覽器的客戶端識別 -->

< http-equiv="set-cookie" content="name=value; expires=date; path=url">

 

<!-- 指定要顯示在一個特定框架中的頁面 -->

< http-equiv="Window-Target" content="_value">

 

<!-- 地理標簽 -->

< name="ICBM" content="latitude, longitude">

< name="geo.position" content="latitude;longitude">

<!-- 國家代碼 (ISO 3166-1): 強制性, 州代碼 (ISO 3166-2): 可選; 如 content="US" / content="US-NY" -->

< name="geo.region" content="country[-state]">

<!-- 如 content="New York City" -->

< name="geo.placename" content="city/town">

如果對你有幫助,麻煩點一下贊,并關注一下深正互聯,也可以推薦身邊愛前端的伙伴關注本部落,大家一起學習和成長!!!

深正互聯做網站

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾