1. 程式人生 > >移動前端不得不了解的HTML5 head 頭標簽 —— HTML基本的頭部標簽

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

AR con 模式 har tro -h intern 標簽 標準

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>

其中

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

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

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

也可以省略。

DOCTYPE

DOCTYPE(Document Type),該聲明位於文檔中最前面的位置,處於 html 標簽之前,此標簽告知瀏覽器文檔使用哪種 HTML 或者 XHTML 規範。
使用 HTML5 doctype,不區分大小寫。

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

charset

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

    <meta charset="utf-8">

html5 之前網頁中會這樣寫:

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

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

lang屬性

更加標準的 lang 屬性寫法 http://zhi.hu/XyIa
簡體中文

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

繁體中文

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

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

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

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

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