您現在的位置是:電腦技術吧?>? 故障問題 ??>??標簽head,標簽head的概念??>??正文詳情

標簽head,標簽head的概念

葷建白2019-11-24 12:41:02 人圍觀
簡介head什么HTML頭部部分包含了大量的標記和元素,包括瀏覽器對網頁的渲染、SEO等。每個瀏覽器內核和國內每個瀏覽器廠商都有自己的標簽元素,這就造成了很大的差異。在移動互聯thead

HTML head 頭部分的標簽、元素有很多,涉及到瀏覽器對網頁的渲染,SEO 等等,而各個瀏覽器內核以及各個國內瀏覽器廠商都有些自己的標簽元素,這就造成了很多差異性。

移動互聯網時代,head 頭部結構,移動端的 meta 元素,顯得更為重要。

了解每個標簽的意義,寫出滿足自己需求的 head 頭標簽,是本文的目的。

本篇以一絲的文章為基礎,進行擴展總結介紹常用的 head 中各個標簽、元素的意義以及使用場景。

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

DTD(Document Type Definition) 聲明以 !DOCTYPE 開始,不區分大小寫,前面沒有任何內容,如果有其他內容(空格除外)會使瀏覽器在 IE 下開啟怪異模式(quirks mode)渲染網頁。

公共 DTD,名稱格式為注冊//組織//類型 標簽//語言,注冊指組織是否由國際標準化組織(ISO)注冊, 表示是,-表示不是。

組織即組織名稱,如:W3C。

類型一般是 DTD。

標簽是指定公開文本描述,即對所引用的公開文本的唯一描述性名稱,后面可附帶版本號。

最后語言是 DTD 語言的 ISO 639 語言標識符,如:EN 表示英文,ZH 表示中文。

XHTML 1.0 可聲明三種 DTD 類型。

分別表示嚴格版本,過渡版本,以及基于框架的 HTML 文檔。

●HTML 4.01 strict XML/HTML Code復制內容到剪貼板

    !DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01//ENhttp://www.w3.org/TR/html4/strict.dtd
●HTML 4.01 TransitionalXML/HTML Code復制內容到剪貼板
    !DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//ENhttp://www.w3.org/TR/html4/loose.dtd
●HTML 4.01 FramesetXML/HTML Code復制內容到剪貼板
    !DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Frameset//ENhttp://www.w3.org/TR/html4/frameset.dtd
●最新 HTML5 推出更加簡潔的書寫,它向前向后兼容,推薦使用。

XML/HTML Code復制內容到剪貼板

    !doctypehtml
在 HTML中 doctype 有兩個主要目的。

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

它告訴用戶代理和校驗器這個文檔是按照什么 DTD 寫的。

這個動作是被動的,每次頁面加載時,瀏覽器并不會下載 DTD 并檢查合法性,只有當手動校驗頁面時才啟用。

●決定瀏覽器的呈現模式對于實際操作,通知瀏覽器讀取文檔時用哪種解析算法。

如果沒有寫,則瀏覽器則根據自身的規則對代碼進行解析,可能會嚴重影響 html 排版布局。

瀏覽器有三種方式解析 HTML 文檔。

●非怪異(標準)模式●怪異模式●部分怪異(近乎標準)模式 關于IE瀏覽器的文檔模式,瀏覽器模式,嚴格模式,怪異模式,DOCTYPE 標簽,可詳細閱讀模式?

標準!的內容。

charset聲明文檔使用的字符編碼,XML/HTML Code復制內容到剪貼板

    metacharset=utf-8
html5 之前網頁中會這樣寫:XML/HTML Code復制內容到剪貼板
    metahttp-equiv=Content-Typecontent=text/html;charset=utf-8 lang屬性 簡體中文
XML/HTML Code復制內容到剪貼板
    htmllang=zh-cmn-Hans
  繁體中文XML/HTML Code復制內容到剪貼板
    htmllang=zh-cmn-Hant
  為什么 lang=zh-cmn-Hans 而不是我們通常寫的 lang=zh-CN 呢優先使用 IE 最新版本和 ChromeXML/HTML Code復制內容到剪貼板
    metahttp-equiv=X-UA-Compatiblecontent=IE=edge,chrome=1/
  360 使用Google Chrome FrameXML/HTML Code復制內容到剪貼板
    metaname=renderercontent=webkit
  360 瀏覽器就會在讀取到這個標簽后,立即切換對應的極速核。

另外為了保險起見再加入XML/HTML Code復制內容到剪貼板

    metahttp-equiv=X-UA-Compatiblecontent=IE=Edge,chrome=1
  這樣寫可以達到的效果是如果安裝了 Google Chrome Frame,則使用 GCF 來渲染頁面,如果沒有安裝 GCF,則使用最高版本的 IE 內核進行渲染。

  百度禁止轉碼 通過百度手機打開網頁時,百度可能會對你的網頁進行轉碼,脫下你的衣服,往你的身上貼狗皮膏藥的廣告,為此可在 head 內添加XML/HTML Code復制內容到剪貼板

    metahttp-equiv=Cache-Controlcontent=no-siteapp/
 SEO 優化部分 頁面標題title標簽(head 頭部必須) XML/HTML Code復制內容到剪貼板
    titleyourtitle/title
頁面關鍵詞 keywords XML/HTML Code復制內容到剪貼板
    metaname=keywordscontent=yourkeywords
頁面描述內容 description XML/HTML Code復制內容到剪貼板
    metaname=descriptioncontent=yourdescription
定義網頁作者 author XML/HTML Code復制內容到剪貼板
    metaname=authorcontent=author,emailaddress
定義網頁搜索引擎索引方式,robotterms 是一組使用英文逗號「,」分割的值,通常有如下幾種取值:none,noindex,nofollow,all,index和follow。

XML/HTML Code復制內容到剪貼板

    metaname=robotscontent=index,follow
viewport  viewport 可以讓布局在移動瀏覽器上顯示的更好。

通常會寫XML/HTML Code復制內容到剪貼板

    metaname=viewportcontent=width=device-width,initial-scale=1.0
width=device-width 會導致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現黑邊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 中新增屬性,可以在頁面加載時最小化上下狀態欄。

這是一個布爾值,可以直接這樣寫:XML/HTML Code復制內容到剪貼板

    metaname=viewportcontent=width=device-width,initial-scale=1,minimal-ui
而如果你的網站不是響應式的,請不要使用 initial-scale 或者禁用縮放。

XML/HTML Code復制內容到剪貼板

    metaname=viewportcontent=width=device-width,user-scalable=yes
適配 iPhone 6 和 iPhone 6plus 則需要寫: XML/HTML Code復制內容到剪貼板
    metaname=viewportcontent=width=375 metaname=viewportcontent=width=414
大部分 4.7~5 寸的安卓設備的 viewport 寬設為 360px,iPhone 6 上卻是 375px,大部分 5.5 寸安卓機器(比如說三星 Note)的 viewport 寬為 400,iPhone 6 plus 上是 414px。

ios 設備 添加到主屏后的標題(iOS 6 新增)XML/HTML Code復制內容到剪貼板

    metaname=apple-mobile-web-app-titlecontent=標題!--添加到主屏后的標題(iOS6新增)--
是否啟用 WebApp 全屏模式XML/HTML Code復制內容到剪貼板
    metaname=apple-mobile-web-app-capablecontent=yes/!--是否啟用WebApp全屏模式--
設置狀態欄的背景顏色XML/HTML Code復制內容到剪貼板
    metaname=apple-mobile-web-app-status-bar-stylecontent=black-translucent/ !--設置狀態欄的背景顏色,只有在`apple-mobile-web-app-capablecontent=yes`時生效--
只有在 apple-mobile-web-app-capable content=yes 時生效 content 參數: default 默認值。

black 狀態欄背景是黑色。

black-translucent 狀態欄背景是黑色半透明。

如果設置為 default 或 black ,網頁內容從狀態欄底部開始。

如果設置為 black-translucent ,網頁內容充滿整個屏幕,頂部會被狀態欄遮擋。

禁止數字識自動別為電話號碼XML/HTML Code復制內容到剪貼板

    metaname=format-detectioncontent=telephone=no/!--禁止數字識自動別為電話號碼--
iOS 圖標  rel 參數: apple-touch-icon 圖片自動處理成圓角和高光等效果。

apple-touch-icon-precomposed 禁止系統自動添加效果,直接顯示設計原圖。

iPhone 和 iTouch,默認 57x57 像素,必須有代碼如下:link rel=apple-touch-icon-precomposed href=/apple-touch-icon-57x57-precomposed.png / !-- iPhone 和 iTouch,默認 57x57 像素,必須有 --  iPad,72x72 像素,可以沒有,但推薦有代碼如下:link rel=apple-touch-icon-precomposed sizes=72x72 href=/apple-touch-icon-72x72-precomposed.png / !-- iPad,72x72 像素,可以沒有,但推薦有 --  Retina iPhone 和 Retina iTouch,114x114 像素,可以沒有,但推薦有代碼如下:link rel=apple-touch-icon-precomposed sizes=114x114 href=/apple-touch-icon-114x114-precomposed.png / !-- Retina iPhone 和 Retina iTouch,114x114 像素,可以沒有,但推薦有 --  Retina iPad,144x144 像素,可以沒有,但推薦有代碼如下:link rel=apple-touch-icon-precomposed sizes=144x144 href=/apple-touch-icon-144x144-precomposed.png / !-- Retina iPad,144x144 像素,可以沒有,但推薦有 --  IOS 圖標大小在iPhone 6 plus上是180180,iPhone 6 是120x120。

適配iPhone 6 plus,則需要在中加上這段代碼如下:link rel=apple-touch-icon-precomposed sizes=180x180 href=retinahd_icon.pngiOS 啟動畫面iPad 的啟動畫面是不包括狀態欄區域的。

  iPad 豎屏 768 x 1004(標準分辨率)代碼如下:link rel=apple-touch-startup-image sizes=768x1004 href=/splash-screen-768x1004.png / !-- iPad 豎屏 768 x 1004(標準分辨率) --  iPad 豎屏 1536x2008(Retina)代碼如下:link rel=apple-touch-startup-image sizes=1536x2008 href=/splash-screen-1536x2008.png / !-- iPad 豎屏 1536x2008(Retina) --  iPad 橫屏 1024x748(標準分辨率)代碼如下:link rel=apple-touch-startup-image sizes=1024x748 href=/Default-Portrait-1024x748.png / !-- iPad 橫屏 1024x748(標準分辨率) --  iPad 橫屏 2048x1496(Retina)代碼如下:link rel=apple-touch-startup-image sizes=2048x1496 href=/splash-screen-2048x1496.png / !-- iPad 橫屏 2048x1496(Retina) --  iPhone 和 iPod touch 的啟動畫面是包含狀態欄區域的。

  iPhone/iPod Touch 豎屏 320x480 (標準分辨率)代碼如下:link rel=apple-touch-startup-image href=/splash-screen-320x480.png / !-- iPhone/iPod Touch 豎屏 320x480 (標準分辨率) --  iPhone/iPod Touch 豎屏 640x960 (Retina)代碼如下:link rel=apple-touch-startup-image sizes=640x960 href=/splash-screen-640x960.png / !-- iPhone/iPod Touch 豎屏 640x960 (Retina) --  iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina)代碼如下:link rel=apple-touch-startup-image sizes=640x1136 href=/splash-screen-640x1136.png / !-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) --  添加智能 App 廣告條 Smart App Banner(iOS 6 Safari)代碼如下:meta name=apple-itunes-app content=app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL !-- 添加智能 App 廣告條 Smart App Banner(iOS 6 Safari) --  iPhone 6對應的圖片大小是7501294,iPhone 6 Plus 對應的是12422148 。

代碼如下:link rel=apple-touch-startup-image href=launch6.png media=(device-width: 375px)link rel=apple-touch-startup-image href=launch6plus.png media=(device-width: 414px)Windows 8Windows 8 磁貼顏色代碼如下:meta name=msapplication-TileColor content=#000/ !-- Windows 8 磁貼顏色 --  Windows 8 磁貼圖標代碼如下:meta name=msapplication-TileImage content=icon.png/ !-- Windows 8 磁貼圖標 --  rss訂閱代碼如下:link rel=alternate type=application/rss xml title=RSS href=/rss.xml / !-- 添加 RSS 訂閱 --  favicon icon代碼如下:link rel=shortcut icon type=image/ico href=/favicon.ico / !-- 添加 favicon icon --移動端的meta XML/HTML Code復制內容到剪貼板

    metaname=viewportcontent=width=device-width,initial-scale=1,user-scalable=no/ metaname=apple-mobile-web-app-capablecontent=yes/ metaname=apple-mobile-web-app-status-bar-stylecontent=black/ metaname=format-detectioncontent=telephone=no,email=no/ metaname=viewportcontent=width=device-width,initial-scale=1,user-scalable=no/ metaname=apple-mobile-web-app-capablecontent=yes/!--刪除蘋果默認的工具欄和菜單欄-- metaname=apple-mobile-web-app-status-bar-stylecontent=black/!--設置蘋果工具欄顏色-- metaname=format-detectioncontent=telphone=no,email=no/!--忽略頁面中的數字識別為電話,忽略email識別-- !--啟用360瀏覽器的極速模式(webkit)-- metaname=renderercontent=webkit !--避免IE使用兼容模式-- metahttp-equiv=X-UA-Compatiblecontent=IE=edge !--針對手持設備優化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓-- metaname=HandheldFriendlycontent=true !--微軟的老式瀏覽器-- metaname=MobileOptimizedcontent=320 !--uc強制豎屏-- metaname=screen-orientationcontent=portrait !--QQ強制豎屏-- metaname=x5-orientationcontent=portrait !--UC強制全屏-- metaname=full-screencontent=yes !--QQ強制全屏-- metaname=x5-fullscreencontent=true !--UC應用模式-- metaname=browsermodecontent=application !--QQ應用模式-- metaname=x5-page-modecontent=app !--windowsphone點擊無高光-- metaname=msapplication-tap-highlightcontent=no !--適應移動端end--

版權聲明:本文由 葷建白 整理編輯。

原標題:header標簽與head標簽,head標簽中必不可少的

轉載注明出處:http://www.dn9ww09s.icu/fault/14180.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 關于效率的PPT,效率提升ppt

    關于效率的PPT,效率提升ppt 相關圖片生產效率提升ppt可能沒有注意到PowerPoint模板的應用。如果能熟練使用PowerPoint模板,它將給我們帶來極大的便利,提高PowerPoint提供的靈活調用模板的工作如何提升生產效率ppt...

  • PPT怎么做,ppt怎么變成豎版

    PPT怎么做,ppt怎么變成豎版 相關圖片PPT字體對于很多人來說,PPT不能再在線發布確實是一個非常嚴重的問題。下一步,超人軟件將教你如何把ppt變成SWF。那么ppt如何成為SWF呢?接下來,跟著超人軟件做一ppt4:3怎么設置...

  • 超鏈接的種類有哪些,超鏈接的種類怎么弄

    超鏈接的種類有哪些,超鏈接的種類怎么弄 相關圖片超鏈接有幾種超鏈接本質上是網頁的一部分。它們是允許我們與其他網頁或網站連接的元素。每一個網頁鏈接在一起后,就可以真正形成一個網站。所謂超鏈接是指從一個網頁到一個目...

  • 酷狗怎么制作廣告音樂,酷狗音樂怎么跳過廣告

    酷狗怎么制作廣告音樂,酷狗音樂怎么跳過廣告 相關圖片酷狗音樂每次打開廣告如今,越來越多的人喜歡用酷狗音樂來聽音樂,但我相信這部熱播劇在聽到一半的時候就遇到了彈出式廣告。那么如何宣傳酷狗音樂呢?接下來,超人軟件編輯將...

  • HTML的簡介,css簡介

    HTML的簡介,css簡介 相關圖片HTML常用標簽一。什么是HTMLHTML?它是英語超文本標記語言的縮寫。它定義了自己的語法規則,用于表達比文本更多的含義,如圖片、表格、鏈接等。瀏覽器(ie、Firefox等HTML是一種...

  • WiFi那邊有的e,wifie

    WiFi那邊有的e,wifie 相關圖片網絡e接口怎么接WiFi路由器E-road網絡是一個非常實用的在線工件。在這里,您不僅可以獲得免費的WiFi,而且可以非常便宜地為流量收費。那么,E-road網絡真的是免費WiFi嗎?現在,隨e行...

  • office2016激活工具,office2013永久激活工具

    office2016激活工具,office2013永久激活工具 相關圖片激活office工具Office 2013激活工具專門用于Office 2013激活。Office 2013是常用的Office版本之一。與上一代相比,office 2013完全采office激活工具怎么用...

  • H5 案例,H5經典案例

    H5 案例,H5經典案例 相關圖片h5活動案例圣誕節,西方的節日相當于中國的春節,人氣激增。各大品牌自然會利用這個節日發揮作用,有所作為!通過這些h5s,您不僅可以感受到品牌的獨特創意,還可以了解他們的新...

  • 網易云音樂vip充值,網易云音樂怎么開通會員

    網易云音樂vip充值,網易云音樂怎么開通會員 相關圖片網易云音樂包充值網易云音樂以其游蕩的點評受到很多小伙伴的喜愛,但在這個軟件中,很多歌曲只對會員開放。網易云音樂會員如何充值?接下來,跟隨超人軟件了解網易云音樂會員...

  • 瀏覽器分享按鈕在哪兒,瀏覽器分享按鈕在哪里

    瀏覽器分享按鈕在哪兒,瀏覽器分享按鈕在哪里 相關圖片QQ瀏覽器視頻沒有下載按鈕在本教程中,我們將學習如何使用焰火mx2004來模擬MSN瀏覽器制作啞鈴按鈕的過程。制作的紐扣很有質感,方法也很簡單。我推薦。希望劇本之家的朋友喜歡!讓...

熱評文章

  • win7運行在哪,win7運行

    win7運行在哪,win7運行 相關圖片win7打開程序馬上閃退你想知道如何查看win7的秘密運行程序嗎?接下來,超人軟件將為您介紹如何關閉win7的秘密運行程序。如果你需要了解Windows,不要錯過win7自啟動...

  • 怎么讓一個網頁記住密碼,怎么讓網頁不記住密碼

    怎么讓一個網頁記住密碼,怎么讓網頁不記住密碼 相關圖片做好的網頁怎樣讓別人訪問我要在前言中寫卡片的類型。這是客戶在上一期與我討論需求時說的第一個需求點。毫無疑問,這張卡在個人電腦和手機上都非常出色。從網上購物中心到社...

  • win7旗艦版開機超級慢,win7開機突然非常慢

    win7旗艦版開機超級慢,win7開機突然非常慢 相關圖片win7電腦慢的快速解決辦法同樣是win7系統。為什么有些人啟動得很快?除了硬件,可能還有一些設置因素。Win7啟動加速設置方法~只要簡單設置,就能快速提高Win7系統的啟動時間最有效解...

  • 小程序制作實例,案例制作

    小程序制作實例,案例制作 相關圖片php制作網站實例設置電影屬性;使用文本工具編寫文本;使用幀操作設置操作;使用幀屬性設置屬性;創建新組件。本文以flash教程為例:如何制作不同的綠色閱讀[步驟](1)啟動fla怎么...

  • 天天動聽 停止服務,天天動聽停止服務原因

    天天動聽 停止服務,天天動聽停止服務原因 相關圖片天天動聽什么時候出的對許多人來說,每天停止這項服務是一個巨大的炸彈。對于許多喜歡每天停止服務的用戶來說,這一定是他們最想知道的。接下來,超人軟件將向您介紹如何停止...

  • 模擬器,模擬器哪個好

    模擬器,模擬器哪個好 相關圖片天天模擬器這都是CSS3的基本用法,并不復雜。如果你感興趣,你可以試著寫一個。唯一復雜的是你可以看到瀏覽器標簽的模擬,chrome標簽的基本特征如下:梯形有圓角寬度,自適mumu模擬...

  • 網上訂票取消訂單,網上訂票取消訂單三次

    網上訂票取消訂單,網上訂票取消訂單三次 相關圖片12306多次取消訂單12306年以來,廣大上班族在網上訂票十分方便。他們終于可以工作和訂票了。但有時我們需要取消網上預訂的訂單,因為一些事情或錯誤的訂單。我們該怎么辦?12306 取...

  • win7綠屏,win7開機綠屏

    win7綠屏,win7開機綠屏 相關圖片win10出現綠屏相信很多小伙伴在使用win7時都有先例,比如使用win7播放視頻時,就出現了綠屏故障。視頻播放是在flash插件下播放的,視頻播放對flash版本和電腦配置有一win7電腦開機就綠...

  • 什么是菜單欄,菜單欄在哪

    什么是菜單欄,菜單欄在哪 相關圖片如何顯示菜單欄核心提示:在使用Dreamweaver之前,讓我們先看看Dreamweaver中的菜單欄,然后再使用Dreamweaver,讓我們先看看Dreamweaver中菜單欄跑到上面去了...

  • 什么是芝士,芝士

    什么是芝士,芝士 相關圖片奶酪和芝士的區別奶酪網是一個非常實用的網站。在這個網站上,用戶可以學到很多奶酪并進行測試。那么錯誤呢?奶酪網能收集錯誤嗎?接下來,超人軟件編輯將引入cheese net來檢查錯...

關注微信

变脸官网查询