細說HTML頭部標籤

時間 2019-11-26

標籤細說 html 頭部標籤欄目 HTML 简体版

原文原文鏈接

原文

　　簡書原文：https://www.jianshu.com/p/4270b1d1037dhtml

大綱

　　一、頭部標籤列表
　　二、頭部標籤詳解html5

一、頭部標籤列表

<!DOCTYPE html> 
<!-- 使用 HTML5 doctype，不區分大小寫 -->
<html lang="zh-cmn-Hans">
 <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->
<head>
    <meta charset='utf-8'>
    <!-- 聲明文檔使用的字符編碼 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
    <!-- 優先使用 IE 最新版本和 Chrome -->
    <meta name="description" content="不超過150個字符" /> 
    <!-- 頁面描述 -->
    <meta name="keywords" content=""/> 
    <!-- 頁面關鍵詞 -->
    <meta name="author" content="name, email@gmail.com" /> 
    <!-- 網頁做者 -->
    <meta name="robots" content="index,follow" /> 
    <!-- 搜索引擎抓取 -->

    <!-- 爲移動設備添加 viewport -->
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 
    <!-- `width=device-width` 會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊 
    http://bigc.at/ios-webapp-viewport-meta.orz -->

    <!-- iOS 設備 begin -->
    <meta name="apple-mobile-web-app-title" content="標題">
    <!-- 添加到主屏後的標題（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <!-- 是否啓用 WebApp 全屏模式 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
    <!-- 設置狀態欄的背景顏色，只有在 `"apple-mobile-web-app-capable" content="yes"` 時生效 -->
    <meta name="format-detection" content="telephone=no" /> 
    <!-- 禁止數字識自動別爲電話號碼 -->
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> 
    <!-- 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） -->

    <!-- iOS 圖標 begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> 
    <!-- iPhone 和 iTouch，默認 57x57 像素，必須有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> 
    <!-- Retina iPhone 和 Retina iTouch，114x114 像素，能夠沒有，但推薦有 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> 
    <!-- Retina iPad，144x144 像素，能夠沒有，但推薦有 -->
    <!-- iOS 圖標 end -->

    <!-- iOS 啓動畫面 begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> 
    <!-- iPad 豎屏 768 x 1004（標準分辨率） -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> 
    <!-- iPad 豎屏 1536x2008（Retina） -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> 
    <!-- iPad 橫屏 1024x748（標準分辨率） -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> 
    <!-- iPad 橫屏 2048x1496（Retina） -->

    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> 
    <!-- iPhone/iPod Touch 豎屏 320x480 (標準分辨率) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> 
    <!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> 
    <!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->
    <!-- iOS 啓動畫面 end -->

    <!-- iOS 設備 end -->
    <meta name="msapplication-TileColor" content="#000"/> 
    <!-- Windows 8 磁貼顏色 -->
    <meta name="msapplication-TileImage" content="icon.png"/> 
    <!-- Windows 8 磁貼圖標 -->

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> 
    <!-- 添加 RSS 訂閱 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> 
    <!-- 添加 favicon icon -->

    <title>標題</title>
</head>

二、頭部標籤詳解

2.一、聲明文檔規範：<!DOCTYPE>

　　DOCTYPE(Document Type)，該聲明位於文檔中最前面的位置，處於 html 標籤以前，此標籤告知瀏覽器文檔使用哪一種 HTML 或者 XHTML 規範。
　　HTML有多個不一樣的版本，只有徹底明白頁面中使用的確切的HTML版本，瀏覽器才能徹底正確的顯示出HTML頁面。
　　DTD(Document Type Definition) 聲明以 <!DOCTYPE> 開始，不區分大小寫，前面沒有任何內容，若是有其餘內容(空格除外)會使瀏覽器在 IE 下開啓怪異模式(quirks mode)渲染網頁。ios

在 HTML中 doctype 有兩個主要做用

　　一、對文檔進行有效性驗證：它告訴用戶代理和校驗器這個文檔是按照什麼 DTD 寫的。這個動做是被動的，每次頁面加載時，瀏覽器並不會下載 DTD 並檢查合法性，只有當手動校驗頁面時才啓用。
　　二、決定瀏覽器的呈現模式：對於實際操做，通知瀏覽器讀取文檔時用哪一種解析算法。若是沒有寫，則瀏覽器則根據自身的規則對代碼進行解析，可能會嚴重影響 html 排版佈局。瀏覽器有三種方式解析 HTML 文檔。(1) 非怪異（標準）模式(2) 怪異模式(3) 部分怪異（近乎標準）模式(關於IE瀏覽器的文檔模式，瀏覽器模式，嚴格模式，怪異模式)web

<!--HTML5-->
<!DOCTYPE  html>
<!--HTML4.01-->
<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<!--XHTML 1.0-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">

2.二、聲明文檔使用的字符編碼

<!-- 聲明文檔使用的字符編碼 -->
<meta charset='utf-8'> 
<!-- 在 html5 以前網頁中會這樣寫 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

2.三、 lang 屬性

<head lang="en"></head>
<!--簡體中文-->
<html lang="zh-cmn-Hans"></html>
<!--繁體中文-->
<html lang="zh-cmn-Hant"></html>
<!--不多狀況才須要加地區代碼，一般是爲了強調不一樣地區漢語使用差別-->
<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>

2.四、設置瀏覽器渲染模式

<!-- 優先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--
  這樣寫能夠達到的效果是若是安裝了 Google Chrome Frame，則使用 GCF 來渲染頁面，如
果沒有安裝 GCF，則使用最高版本的 IE 內核進行渲染。
-->
<!--
    設置 360 瀏覽器渲染模式，webkit 爲極速內核，ie-comp 爲 IE 兼容內核，
ie-stand 爲 IE 標準內核。360 瀏覽器就會在讀取到這個標籤後，當即切換到對應的內核
-->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

2.五、SEO（搜索引擎）優化

　　name是描述網頁的，對應於Content（網頁內容），以便於搜索引擎機器人查找、分類（目前幾乎全部的搜索引擎都使用網上機器人自動查找meta值來給網頁分類）。（即：經過設置這些來優化搜索引擎對當前網頁的分類，檢索）算法

2.5.一、頁面描述

<!--
    每一個網頁都應有一個不超過 150 個字符且能準確反映網頁內容的描述標籤
-->
<meta name="description" content="不超過150個字符" /> <!-- 頁面描述 -->

2.5.二、頁面關鍵詞

<meta name="keywords" content=""/> <!-- 頁面關鍵詞 -->
<!--一個網頁的關鍵字最好是3-4個。 seo(搜索引擎優化) --!>

2.5.三、定義頁面標題

<title>標題</title>
<!--
  title標籤是一個封閉標籤，在head中是成對出現的，在打開一個網頁時，網頁上方的文字就是title部分。
  title是對整個頁面的核心思想的總結，也是seo很是重要的設置部分。
-->

2.5.四、Copyright (版權)

<meta name="Copyright" Content="本頁版權歸Zerospace全部。All Rights Reserved"> 
<!--
說明：標註版權 
用法：<Meta name="Copyright" Content="本頁版權歸Zerospace全部。All Rights Reserved"> 
-->

2.5.五、Author (做者)

<meta name="Author" Content="張三,abc@sina.com"> 
<!--
說明：標註網頁的做者或製做組 
用法：<Meta name="Author" Content="張三，abc@sina.com"> 
注意：Content能夠是：你或你的製做組的名字,或Email 
-->

2.六、添加 RSS 訂閱

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 訂閱 -->

2.七、添加 favicon icon

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->

2.八、viewport

<!--爲移動設備添加 viewport-->
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 
<!--
content 參數：
width viewport 寬度(數值/device-width)
height viewport 高度(數值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否容許用戶縮放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經刪除），能夠在頁面加載時最小化上下狀態欄。
這是一個布爾值，能夠直接這樣寫：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
-->

參考網址

http://www.runoob.com/w3cnote/html-meta-intro.html
https://www.cnblogs.com/avilang/p/6741811.html
http://blog.csdn.net/xiongchao2011/article/details/7038627
https://www.cnblogs.com/menyiin/p/6527339.html