千亿国际网站行者无疆

千亿国际网站|首页-正版登录 >成功案例

HTMLhead頭標簽

作者: 千亿国际网站   点击次数:    发布时间: 2019-10-25 17:59

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

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

DTD(DocumentTypeDefinition)聲明以<!DOCTYPE開始,不區分大小寫,前面沒有任何內容,如果有其他內容(空格除外)會使瀏覽器在IE下開啟怪異模式(quirksmode)渲染網頁。公共DTD,名稱格式為注冊//組織//類型標簽//語言,注冊指組織是否由國際標準化組織(ISO)注冊,+表示是,-表示不是。組織即組織名稱,如:W3C。類型一般是DTD。標簽是指定公開文本描述,即對所引用的公開文本的唯一描述性名稱,后面可附帶版本號。最后語言是DTD語言的ISO639語言標識符,如:EN表示英文,ZH表示中文。XHTML1.0可聲明三種DTD類型。分別表示嚴格版本,過渡版本,以及基于框架的HTML文檔。

最新HTML5推出更加簡潔的書寫,它向前向后兼容,推薦使用。

它告訴用戶代理和校驗器這個文檔是按照什么DTD寫的。這個動作是被動的,每次頁面加載時,瀏覽器并不會下載DTD并檢查合法性,只有當手動校驗頁面時才啟用。

對于實際操作,通知瀏覽器讀取文檔時用哪種解析算法。如果沒有寫,則瀏覽器則根據自身的規則對代碼進行解析,可能會嚴重影響html排版布局。瀏覽器有三種方式解析HTML文檔。*非怪異(標準)模式*怪異模式*部分怪異(近乎標準)模式關于IE瀏覽器的文檔模式,瀏覽器模式,嚴格模式,怪異模式,DOCTYPE標簽,可詳細閱讀模式?標準!的內容。

<metacharset="utf-8"

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

<metaname="renderer"content="webkit"

360瀏覽器就會在讀取到這個標簽后,立即切換對應的極速核。另外為了保險起見再加入

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

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

<metaname="keywords"content="yourkeywords"

<metaname="description"content="yourdescription"

<metaname="author"content="author,emailaddress"

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

<metaname="robots"content="index,follow"

viewport可以讓布局在移動瀏覽器上顯示的更好。通常會寫

<metaname="viewport"content="width=device-width,initial-scale=1.0"

widthviewport寬度(數值/device-width)

heightviewport高度(數值/device-height)

minimal-uiiOS7.1beta2中新增屬性,可以在頁面加載時最小化上下狀態欄。這是一個布爾值,可以直接這樣寫:

<metaname="viewport"content="width=device-width,initial-scale=1,minimal-ui"

而如果你的網站不是響應式的,請不要使用initial-scale或者禁用縮放。

<metaname="viewport"content="width=device-width,user-scalable=yes"

<metaname="viewport"content="width=375"

<metaname="viewport"content="width=414"

大部分4.7~5寸的安卓設備的viewport寬設為360px,iPhone6上卻是375px,大部分5.5寸安卓機器(比如說三星Note)的viewport寬為400,iPhone6plus上是414px。

<metaname="apple-mobile-web-app-title"content="標題"<!–添加到主屏后的標題(iOS6新增)–

<metaname="apple-mobile-web-app-capable"content="yes"/<!–是否啟用WebApp全屏模式–

<metaname="apple-mobile-web-app-status-bar-style"content="black-translucent"/<!–設置狀態欄的背景顏色,只有在`"apple-mobile-web-app-capable"content="yes"`時生效–

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

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

<metaname="format-detection"content="telephone=no"/<!–禁止數字識自動別為電話號碼–

rel參數:apple-touch-icon圖片自動處理成圓角和高光等效果。apple-touch-icon-precomposed禁止系統自動添加效果,直接顯示設計原圖。iPhone和iTouch,默認57×57像素,必須有

<linkrel="apple-touch-icon-precomposed"href="/apple-touch-icon-57×57-precomposed.png"/<!–iPhone和iTouch,默認57×57像素,必須有–

<linkrel="apple-touch-icon-precomposed"sizes="72×72"href="/apple-touch-icon-72×72-precomposed.png"/<!–iPad,72×72像素,可以沒有,但推薦有–

RetinaiPhone和RetinaiTouch,114×114像素,可以沒有,但推薦有

<linkrel="apple-touch-icon-precomposed"sizes="114×114"href="/apple-touch-icon-114×114-precomposed.png"/<!–RetinaiPhone和RetinaiTouch,114×114像素,可以沒有,但推薦有–

RetinaiPad,144×144像素,可以沒有,但推薦有

<linkrel="apple-touch-icon-precomposed"sizes="144×144"href="/apple-touch-icon-144×144-precomposed.png"/<!–RetinaiPad,144×144像素,可以沒有,但推薦有–

IOS圖標大小在iPhone6plus上是180×180,iPhone6是120×120。適配iPhone6plus,則需要在<head中加上這段

<linkrel="apple-touch-icon-precomposed"sizes="180×180"href="retinahd_icon.png"

<linkrel="apple-touch-startup-image"sizes="768×1004"href="/splash-screen-768×1004.png"/<!–iPad豎屏768x1004(標準分辨率)–

<linkrel="apple-touch-startup-image"sizes="1536×2008"href="/splash-screen-1536×2008.png"/<!–iPad豎屏1536×2008(Retina)–

<linkrel="apple-touch-startup-image"sizes="1024×748"href="/Default-Portrait-1024×748.png"/<!–iPad橫屏1024×748(標準分辨率)–

<linkrel="apple-touch-startup-image"sizes="2048×1496"href="/splash-screen-2048×1496.png"/<!–iPad橫屏2048×1496(Retina)–

iPhone和iPodtouch的啟動畫面是包含狀態欄區域的。

iPhone/iPodTouch豎屏320×480(標準分辨率)

<linkrel="apple-touch-startup-image"href="/splash-screen-320×480.png"/<!–iPhone/iPodTouch豎屏320×480(標準分辨率)–

iPhone/iPodTouch豎屏640×960(Retina)

<linkrel="apple-touch-startup-image"sizes="640×960"href="/splash-screen-640×960.png"/<!–iPhone/iPodTouch豎屏640×960(Retina)–

iPhone5/iPodTouch5豎屏640×1136(Retina)

<linkrel="apple-touch-startup-image"sizes="640×1136"href="/splash-screen-640×1136.png"/<!–iPhone5/iPodTouch5豎屏640×1136(Retina)–

添加智能App廣告條SmartAppBanner(iOS6+Safari

<metaname="apple-itunes-app"content="app-id=myAppStoreID,affiliate-data=myAffiliateData,app-argument=myURL"<!–添加智能App廣告條SmartAppBanner(iOS6+Safari)–

iPhone6對應的圖片大小是750×1294,iPhone6Plus對應的是1242×2148。

<linkrel="apple-touch-startup-image"href="launch6.png"media="(device-width:375px)"

<linkrel="apple-touch-startup-image"href="launch6plus.png"media="(device-width:414px)"

<metaname="msapplication-TileColor"content="#000"/<!–Windows8磁貼顏色–

<metaname="msapplication-TileImage"content="icon.png"/<!–Windows8磁貼圖標–

<linkrel="alternate"type="application/rss+xml"title="RSS"href="/rss.xml"/<!–添加RSS訂閱–

<linkrel="shortcuticon"type="image/ico"href="/favicon.ico"/<!–添加faviconicon–

<metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=no"/

<metaname="apple-mobile-web-app-capable"content="yes"/

<metaname="apple-mobile-web-app-status-bar-style"content="black"/

<metaname="format-detection"content="telephone=no,email=no"/

<metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=no"/

<metaname="apple-mobile-web-app-capable"content="yes"/<!–刪除蘋果默認的工具欄和菜單欄–

<metaname="apple-mobile-web-app-status-bar-style"content="black"/<!–設置蘋果工具欄顏色–

<metaname="format-detection"content="telphone=no,email=no"/<!–忽略頁面中的數字識別為電話,忽略email識別–

<!–啟用360瀏覽器的極速模式(webkit)–

<metaname="renderer"content="webkit"

<!–針對手持設備優化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓–

<metaname="HandheldFriendly"content="true"

<metaname="MobileOptimized"content="320"

<metaname="screen-orientation"content="portrait"

<metaname="x5-orientation"content="portrait"

<metaname="full-screen"content="yes"

<metaname="x5-fullscreen"content="true"

<metaname="browsermode"content="application"

<metaname="x5-page-mode"content="app"

<!–windowsphone點擊無高光–

<metaname="msapplication-tap-highlight"content="no"

18MetaTagsEveryWebpageShouldHavein2013