天天看點

移動前端不得不了解的HTML5 head 頭标簽 —— HTML基本的頭部标簽HTML基本的頭部标簽

HTML的頭部内容特别多,有針對SEO的頭部資訊,也有針對移動裝置的頭部資訊。而且各個浏覽器核心以及各個國内浏覽器廠商都有些自己的标簽元素,有很多差異性。移動端的工作已經越來越成為前端工作的重要内容,除了平常的項目開發,HTML 頭部标簽功能,特别是meta,link等标簽的功能屬性顯得非常重要。這裡整理了一份

部分的清單,讓大家了解每個标簽及相應屬性的意義,寫出滿足自己需求的 頭部标簽,可以很有效的增強頁面的可用性。

HTML基本的頭部标簽

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <!--移動端的頁面這個可以忽略,具體可以檢視本文Internet Explorer浏覽器部分-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--具體可以檢視本文 為移動裝置添加 viewport 部分-->
        <!-- 以上 3 個 meta 标簽 *必須* 放在 head 的最前面;其他任何的 head 内容必須在這些标簽的 *後面* -->
        <title>頁面标題</title>
        ...
    </head>                

其中

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

如果你的頁面确定隻在桌面浏覽器中運作,那麼

也可以省略。

DOCTYPE

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

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

charset

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

html5 之前網頁中會這樣寫:

這兩個是等效的,具體可移步閱讀:vs ,是以建議使用較短的,易于記憶。

lang屬性

更加标準的 lang 屬性寫法 http://zhi.hu/XyIa

簡體中文

繁體中文

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

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

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

轉載于:https://www.cnblogs.com/qiqi715/p/9125864.html