社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > html教學 > 主體

HTML head 頭標籤詳細介紹_HTML/Xhtml_網頁製作

WBOY
發布： 2016-05-16 16:36:35
原創
2263 人瀏覽過

HTML head 頭部分的標籤、元素有很多，涉及到瀏覽器對網頁的渲染，SEO 等等，而各個瀏覽器內核以及各個國內瀏覽器廠商都有些自己的標籤元素,這就造成了很多差異性。在行動網路時代，head 頭部結構，行動裝置的 meta 元素，顯得更為重要。了解每個標籤的意義，寫出滿足自己需求的 head 頭標籤，是本文的目的。本篇以一絲的文章為基礎，進行擴展總結介紹常用的 head 中各個標籤、元素的意義以及使用場景。

DOCTYPE

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

DTD(Document Type Definition) 聲明以 開始，不區分大小寫，前面沒有任何內容，如果有其他內容(空格除外)會使瀏覽器在IE 下開啟怪異模式(quirks mode)渲染網頁。公共 DTD，名稱格式為註冊//組織//類型 標籤//語言,註冊指組織是否由國際標準化組織(ISO)註冊， 表示是，-表示不是。組織即組織名稱，如：W3C。類型一般是 DTD。標籤是指定公開文字描述，即所引用的公開文字的唯一描述性名稱，後面可附帶版本號。最後語言是 DTD 語言的 ISO 639 語言標識符，如：EN 表示英文，ZH 表示中文。 XHTML 1.0 可宣告三種 DTD 類型。分別表示嚴格版本，過渡版本，以及基於框架的 HTML 文件。

●HTML 4.01 strict

XML/HTML Code複製內容到剪貼簿
  1. HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >  
●HTML 4.01 Transitional

XML/HTML Code複製內容到剪貼簿
  1. HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
●HTML 4.01 Frameset

XML/HTML Code複製內容到剪貼簿
  1. HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/ameset.dtd">  
●最新 HTML5 推出更簡潔的書寫，它向前向後相容，推薦使用。


XML/HTML Code複製內容到剪貼簿
  1. html>  
在 HTML中 doctype 有兩個主要目的。

●對文件進行有效性驗證。

它告訴使用者代理程式和校驗器這個文件是按照什麼 DTD 寫的。這個動作是被動的，每次頁面載入時，瀏覽器並不會下載 DTD 並檢查合法性，只有當手動校驗頁面時才啟用。

●決定瀏覽器的呈現模式

對於實際操作，通知瀏覽器讀取文件時用哪一種解析演算法。如果沒有寫，則瀏覽器則會根據自身的規則對程式碼進行解析，可能會嚴重影響 html 排版佈局。瀏覽器有三種方式解析 HTML 文件。

●非怪異（標準）模式

●怪異模式
●部分怪異（近乎標準）模式關於IE瀏覽器的文檔模式，瀏覽器模式，嚴格模式，怪異模式，DOCTYPE 標籤，可詳細閱讀模式？標準！的內容。

charset

聲明文件使用的字元編碼，

XML/HTML Code複製內容到剪貼簿
  1. meta charset=charset >>  

html5 之前網頁會這樣寫：
XML/HTML Code複製內容到剪貼簿
  1. meta http-equiv= content="text/html; charset=utf-8">>

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

lang屬性

　　簡體中文 

XML/HTML Code複製內容到剪貼簿
  1. html lang=lang=lang=
"
>

  
　　繁體中文
  1. XML/HTML Code複製內容到剪貼簿 html lang=
lang
=

lang
=

"h
>    
  1. 　　為什麼lang="zh-cmn-Hans" 而不是我們通常寫的lang="zh-CN" 呢，請移步閱讀: 頁頭部的聲明應該是用lang="zh" 還是lang="zh-cn"。 優先使用 IE 最新版本和 Chrome XML/HTML Code複製內容到剪貼簿 meta http-equiv= Compatible"
 
content

=
"IE=edge,chrome=1" 
  
  1. 　　360 使用Google Chrome Frame XML/HTML Code複製內容到剪貼簿 meta name=
    2. "renderer"
 

content

=
"webkit">
 >   　　360 瀏覽器就會在讀取到這個標籤後，立即切換對應的極速核。 另外為了保險起見再加入 XML/HTML Code複製內容到剪貼簿
  1. meta http-equiv= Compatible" content="IE=Edge,chrome=1">

　　這樣寫可以達到的效果是如果安裝了 Google Chrome Frame，則使用 GCF 來渲染頁面，如果沒有安裝 GCF，則使用最高版本的 IE 核心進行渲染。

　　相關連結：瀏覽器核心控制Meta 標籤說明文件


百度禁止轉碼

　　透過百度手機開啟時，百度可能會對你的網頁百度進行轉碼，脫下你的衣服，往你的身上貼狗皮膏藥的廣告，為此可在head 內添加 

XML/HTML Code複製內容到剪貼簿
  1. meta http-equiv= content="no-siteapp"  >  
　　相關連結：
SiteApp 轉碼聲明



SEO 最佳化部分

頁標題頁標題必須) <br>

XML/HTML Code
複製內容到剪貼簿
  1. title>your titleyour title>  
頁面關鍵字 keywords



XML/HTML Code複製內容到剪貼簿
  1. meta name=name=name=name=名 content
=
"your keywords"


>

  >
頁面描述內容 description
  1. XML/HTML Code複製內容到剪貼簿 meta name=name=name=
    2. name
=

名
 

content
="your description"
>
     🎜>
  1. >  定義網頁作者 author XML/HTML Code複製內容到剪貼簿 meta name
=
"author" content="author,email address">

定義網頁搜尋引擎索引方式，robotterms 是一組使用英文逗號“,”分割的值，通常有以下幾種取值：none，noindex，nofollow，all，index和follow。

XML/HTML Code複製內容到剪貼簿

  1. meta name=name=name=name=名稱 
    2. content
=

"index,follow">
 
>

相關連結：
WEB1038 - 標記包含無效的值 viewport
    　　viewport 可以讓佈局在行動瀏覽器上顯示的更好。 通常會寫
  1. XML/HTML Code複製內容到剪貼簿 meta name=name=name
=
name

 content

=

"width=device-width, initial-scale=1.0"

>



width=device-width 會導致iPhone 5 加入主畫面後以WebApp 全螢幕模式開啟頁面時出現黑邊(
http://bigc.at/ios-webapp-viewport-meta.orz ) content 參數：
width viewport 寬度(數值/device-width)
height viewport 高度(數值/device-height)
    initial-scale 初始縮放比例
  1. maximum-scale 最大縮放比例minimum-scale-scale-scale最小縮放比例user-scalable 是否允許使用者縮放(yes/no)minimal-ui iOS 7.1 beta 2 中新增屬性，可以在頁面載入時最小化上下狀態列。這是一個布林值，可以直接這樣寫： XML/HTML Code複製內容到剪貼簿 meta name=name
=
name

=
name content
=
    "width=device-width, initial-scale=1, malmal-ui"
  1.    而如果你的網站不是響應式的，請不要使用 initial-scale 或停用縮放。 XML/HTML Code複製內容到剪貼簿 meta 
name
=name=name=name content="width=device-width,user-scalable=yes">> >

相關連結：非響應式設計的viewport

　　適配iPhone 6 和iPhone 6plus 則需要寫：

XML/HTML CodeXML/HTML Code

XML/HTML Code
  1. 複製內容到剪貼簿 meta name=name=name=name
    2.  
  2. content="width=375"> 🎜>>  meta name=name=
 
content


=
"width=414"

>

>
大部分4.7~5 寸的安卓設備的viewport 寬設為360px，iPhone 6 上卻是375px，大部分5.5 寸機器（比如說三星Note）的viewport 寬為400，iPhone 6 plus 上是414px 。
  1. 　　ios 裝置 　　加入主畫面後的標題（iOS 6 新增） XML/HTML Code複製內容到剪貼簿 meta name=oname=pile
    2. name
=問

name

=pile
"app-mobile app-title" content
=
  1. "標題">"標題">"標題">"標題">"名> 🎜>   是否啟用 WebApp 全螢幕模式 XML/HTML Code複製內容到剪貼簿

meta 
name
    =o
  1. name=pilename=問name=pile"app-mobile app-capable" content="yes"  
    2.    
設定狀態列的背景顏色 XML/HTML Code複製內容到剪貼簿 meta name=oname=pilename=問name=pile"app-mobile app-status-bar-style" content="black-translucent""black-translucent"  >/>       

只有在 "apple-mobile-web-app-capable" content="yes" 時生效

　　content 參數：

default 預設值。
black 狀態列背景是黑色。
black-translucent 狀態列背景是黑色半透明。 如果設定為 default 或 black ,網頁內容從狀態列底部開始。 如果設定為 black-translucent ,網頁內容充滿整個螢幕，頂部會被狀態列遮擋。

禁止數字識自動別為電話號碼

XML/HTML Code複製內容到剪貼簿
  1. meta name=name=name=名稱 content="telephone=no" />
    2.  
/>

  

iOS 圖示
　　rel 參數： apple-touch-icon 圖片自動處理成圓角和高光等效果。 apple-touch-icon-precomposed 禁止系統自動加入效果，直接顯示設計原圖。 iPhone 和 iTouch，預設 57x57 像素，必須有


複製代碼


代碼如下:
　　iPad，72x72 像素，可以沒有，但推薦有


複製代碼


代碼如下:
　　Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有


複製代碼


代碼如下:
　　Retina iPad，144x144 像素，可以沒有，但建議有


複製代碼


代碼如下:
　　IOS 圖示大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。 適配iPhone 6 plus，則需要在中加上這段


複製代碼

代碼如下:


iOS 啟動畫面

官方文件：
https://developer.apple.com/library/ios/qa/qa1686/_index.html

參考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/ iPad 的啟動畫面是不包含狀態列區域的。
　　iPad 垂直螢幕 768 x 1004（標準解析度）


複製代碼代碼如下:

　　iPad 垂直螢幕 1536x2008（Retina）


複製代碼
代碼如下:


　　iPad 橫屏 1024x748（標準解析度）


複製代碼
代碼如下:


　　iPad 橫屏 2048x1496（Retina）


複製代碼
代碼如下:


　　iPhone 和 iPod touch 的啟動畫面是包含狀態列區域的。

　　iPhone/iPod Touch 垂直螢幕320x480 (標準解析度)

複製程式碼
複製程式碼


複製程式碼

複製程式碼

複製碼
　　iPhone 5/iPod Touch 5 垂直螢幕 640x1136 (Retina)

複製代碼

代碼如下:
　　新增智慧 App 廣告條 Smart App Banner（iOS 6 Safari）

複製程式碼

程式碼如下:
　　iPhone 6對應的圖片大小是750×1294，iPhone 6 Plus 對應的是1242×2148 。


複製代碼

代碼如下:


Windows 8
　　Windows 8 磁貼顏色

複製程式碼

程式碼如下:
　　Windows 8 磁貼圖示

複製程式碼

程式碼如下:
　　rss訂閱 複製程式碼程式碼如下:


　　favicon icon


複製程式碼
程式碼如下:


比較詳細的favicon 介紹可參考https://github.com/audreyr/favicon-cheat-sheet

行動端的meta

XML/HTML Code複製內容到剪貼簿

  1. 元 名稱=名稱=名稱 內容="width=device-width, initial-scale=1, -scalable=nouser-scalable> >/>  
  2. 元 名稱=名稱=名稱=名稱=名稱=
    3. 名稱
  3. =名稱=名稱=「蘋果支持行動網路應用程式」 內容=「是」    
  4. 元 名字=名稱=名稱=名稱=名稱=名稱 -web-app-status-bar-style" 內容=
    5. 「黑色」
  5. />   元 名稱="格式偵測"名稱="格式偵測"內容="
    6. 電話
  6. =否，電子郵件，電子郵件，電子郵件，電子郵件，電子郵件，電子郵件 >=
    7. 無
  7. " />   元 名稱="視口"  內容=「寬度=裝置寬度，初始規模=1，使用者可擴充=否」
    8.  
  8. />   元 名稱=名稱=名稱=名稱=
    9. 名稱
  9. =名稱=
    10. 名稱
  10. =名稱=「蘋果支持行動網路應用程式」 內容=「是」    
  11. 元 
    12. 名稱=名稱=名稱=名稱=名稱=名稱=名稱 -web-app-status-bar-style" 內容=「黑色」 />   元 名稱="格式-檢測" 內容="電話=否，電子郵件=否"        元 名稱=名稱=名稱=名稱=名稱=名稱  內容物="webkit">    
  12. meta http-equiv= -UA-Compatible" content="IE=edge">
  13.   
  14. meta name=name=name 🎜> content="true">
    15.  
  15.   
  16. meta name=name=name= content="320"
    17. >
  17.  🎜> 
    18.   
  18. meta name=name=name=名 "
    19.  
  19. content="portrait"
    20. >
  20.  >    meta name＝ " content=
  21. "portrait"> >
  22.    meta name=name= content=
  23. "yes"> >
  24.    meta name="x5-fullscreen " content="true"
  25. > 
  26.    meta namename=name 🎜> content=
    27. "application"
  27. > >
  28.    meta name﹀ -mode" content="app">
    29. "app"> >
  29.   
  30. meta name=name=name -highlight" content="no"
  31. >"no"> >

  

    18 Meta Tags Every Webpage Should Have in 2013
    • 　　參考文章：
    • 常用的 HTML 頭部標籤
    • html5_header
    • amazeui css
    • DOCTYPE
WEB 工程師和設計師必學的 10 個 IOS 8 新鮮改變
相關標籤：
head html
來源：php.cn
上一篇：HTML標籤巢狀規則詳細歸納適合新手朋友_HTML/Xhtml_網頁製作 下一篇：input輸入框中的遊標大小顯示不一致的解決方法_HTML/Xhtml_網頁製作
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
PX自動轉換為REM錯誤 <style>html {   字體大小：calc(100vw / 3.75); }body {    字體大小：0.16rem； }</style><...
來自於 2024-04-16 09:34:16
0
0
4687
頁面突然無法拉動 css 或 bootstrap 所以我正在開發一個頁面，我昨天做了一部分，效果很好，今天我繼續做剩下的部分，一切都很好。當我嘗試將其作為普通html頁面打開時，CSS或BOOTSTRAP不起作用，僅顯示頁面文本，...
來自於 2024-04-06 21:58:04
0
1
800
解決CSS中頁面底部神秘空白的方法 我正在嘗試使用Bootstrap和D3建立一個簡單的網頁，但我不知道如何消除底部的所有空白。我想擺脫它。我嘗試將body和html的min-height設定為100%，但沒有任何作...
來自於 2024-04-06 20:22:15
0
1
454
如何在 livewire 惰性佔位符中使用 laravel 元件 我想在livewire3佔位符內添加我的laravel組件的骨架到目前為止我已經嘗試過：通過包含Laravel組件來實現Livewire類：publicfunctionplaceh...
來自於 2024-04-06 20:02:10
0
2
543
用 HTML 程式碼（從陣列產生）取代字串的頂級方法 給定一個像這樣的字串...$htmlPattern="Usernameis:#name#andusercompanyis#company#";如何將子字串#na...
來自於 2024-04-06 17:40:41
0
2
410
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板