主頁 > 知識庫 > 實例講解HTML5的meta標(biāo)簽的一些應(yīng)用

實例講解HTML5的meta標(biāo)簽的一些應(yīng)用

熱門標(biāo)簽:外呼線穩(wěn)定線路 邢臺縣地圖標(biāo)注app 阜陽企業(yè)外呼系統(tǒng) 呼和浩特外呼電銷系統(tǒng)排名 外呼系統(tǒng)電話怎么投訴 申請400電話流程簡介 地圖標(biāo)注位置能賺錢嗎 南通數(shù)據(jù)外呼系統(tǒng)推廣 pageadm實現(xiàn)地圖標(biāo)注

HTML 4.01 與 HTML 5 之間meta標(biāo)簽用法的主要差異:

在 HTML 5 中,不再支持 scheme 屬性。

在 HTML 5 中,有一個新的 charset 屬性,它使字符集的定義更加容易。

在 HTML 4.01 中,不得不這么寫:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  

在 HTML 5 中,這樣就夠了:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <meta charset="ISO-8859-1">  

例子

定義針對搜索引擎的關(guān)鍵詞:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />  

定義對頁面的描述:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <meta name="description" content="免費的 web 技術(shù)教程。" />  

定義頁面的最新版本:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <meta name="revised" content="David, 2008/8/8/" />  

每 5 秒刷新一次頁面:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <meta http-equiv="refresh" content="5" />  

屬性

標(biāo)準(zhǔn)屬性

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title如需完整的描述,請訪問 HTML 5 中標(biāo)準(zhǔn)屬性。

事件屬性

onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload如需完整的描述,請訪問 HTML 5 中事件屬性。

 實例

文檔描述

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <meta name="author" content="w3school.com.cn">  
  5. <meta name="revised" content="David Yang,8/1/07">  
  6. <meta name="generator" content="Dreamweaver 8.0en">  
  7. </head>  
  8. <body>  
  9. <p>本文檔的 meta 屬性標(biāo)識了創(chuàng)作者和編輯軟件。</p>  
  10. </body>  
  11. </html>  

Meta 元素中的信息可以描述 HTML 文檔。

文檔關(guān)鍵字

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <meta name="description" content="HTML examples">  
  5. <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">  
  6. </head>  
  7. <body>  
  8. <p>本文檔的 meta 屬性描述了該文檔和它的關(guān)鍵詞。</p>  
  9. </body>  
  10. </html>  

Meta 元素中的信息可以描述文檔的關(guān)鍵詞。

重定向

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  4. <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn">  
  5. </head>  
  6. <body>  
  7. <p>  
  8. 對不起。我們已經(jīng)搬家了。您的 URL 是 <a href="http://www.w3school.com.cn"> http://www.w3school.com.cn </a>  
  9. </p>  
  10. <p>您將在 5 秒內(nèi)被重定向到新的地址。</p>  
  11. <p>如果超過 5 秒后您仍然看到本消息,請點擊上面的的鏈接。</p>  
  12. </body>  
  13. </html>  

這個例子演示:在網(wǎng)址已經(jīng)變更的情況下,將用戶重定向到另外一個地址。

移動前端開發(fā)中添加一些webkit專屬的HTML5頭部標(biāo)簽,幫助瀏覽器更好解析html代碼,更好地將移動web前端頁面表現(xiàn)出來。本文整理一些常用的meta標(biāo)簽。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html> <!-- 使用 HTML5 doctype,不區(qū)分大小寫 -->  
  2. <html lang="zh-cmn-Hans"> <!-- 更加標(biāo)準(zhǔn)的 lang 屬性寫法 http://zhi.hu/XyIa -->  
  3. <head>  
  4.     <!-- 聲明文檔使用的字符編碼 -->  
  5.     <meta charset='utf-8'>  
  6.     <!-- 優(yōu)先使用 IE 最新版本和 Chrome -->  
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>  
  8.     <!-- 頁面描述 -->  
  9.     <meta name="description" content="不超過150個字符"/>  
  10.     <!-- 頁面關(guān)鍵詞 -->  
  11.     <meta name="keywords" content=""/>  
  12.     <!-- 網(wǎng)頁作者 -->  
  13.     <meta name="author" content="name, email@gmail.com"/>  
  14.     <!-- 搜索引擎抓取 -->  
  15.     <meta name="robots" content="index,follow"/>  
  16.     <!-- 為移動設(shè)備添加 viewport -->  
  17.     <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">  
  18.     <!-- `width=device-width` 會導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時出現(xiàn)黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->  
  19.     
  20.     <!-- iOS 設(shè)備 begin -->  
  21.     <meta name="apple-mobile-web-app-title" content="標(biāo)題">  
  22.     <!-- 添加到主屏后的標(biāo)題(iOS 6 新增) -->  
  23.     <meta name="apple-mobile-web-app-capable" content="yes"/>  
  24.     <!-- 是否啟用 WebApp 全屏模式,刪除蘋果默認(rèn)的工具欄和菜單欄 -->  
  25.     
  26.     <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">  
  27.     <!-- 添加智能 App 廣告條 Smart App Banner(iOS 6+ Safari) -->  
  28.     <meta name="apple-mobile-web-app-status-bar-style" content="black"/>  
  29.     <!-- 設(shè)置蘋果工具欄顏色 -->  
  30.     <meta name="format-detection" content="telphone=no, email=no"/>  
  31.     <!-- 忽略頁面中的數(shù)字識別為電話,忽略email識別 -->  
  32.     <!-- 啟用360瀏覽器的極速模式(webkit) -->  
  33.     <meta name="renderer" content="webkit">  
  34.     <!-- 避免IE使用兼容模式 -->  
  35.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  36.     <!-- 不讓百度轉(zhuǎn)碼 -->  
  37.     <meta http-equiv="Cache-Control" content="no-siteapp" />  
  38.     <!-- 針對手持設(shè)備優(yōu)化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓 -->  
  39.     <meta name="HandheldFriendly" content="true">  
  40.     <!-- 微軟的老式瀏覽器 -->  
  41.     <meta name="MobileOptimized" content="320">  
  42.     <!-- uc強制豎屏 -->  
  43.     <meta name="screen-orientation" content="portrait">  
  44.     <!-- QQ強制豎屏 -->  
  45.     <meta name="x5-orientation" content="portrait">  
  46.     <!-- UC強制全屏 -->  
  47.     <meta name="full-screen" content="yes">  
  48.     <!-- QQ強制全屏 -->  
  49.     <meta name="x5-fullscreen" content="true">  
  50.     <!-- UC應(yīng)用模式 -->  
  51.     <meta name="browsermode" content="application">  
  52.     <!-- QQ應(yīng)用模式 -->  
  53.     <meta name="x5-page-mode" content="app">  
  54.     <!-- windows phone 點擊無高光 -->  
  55.     <meta name="msapplication-tap-highlight" content="no">  
  56.     <!-- iOS 圖標(biāo) begin -->  
  57.     <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>  
  58.     <!-- iPhone 和 iTouch,默認(rèn) 57x57 像素,必須有 -->  
  59.     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>  
  60.     <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以沒有,但推薦有 -->  
  61.     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>  
  62.     <!-- Retina iPad,144x144 像素,可以沒有,但推薦有 -->  
  63.     <!-- iOS 圖標(biāo) end -->  
  64.     
  65.     <!-- iOS 啟動畫面 begin -->  
  66.     <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>  
  67.     <!-- iPad 豎屏 768 x 1004(標(biāo)準(zhǔn)分辨率) -->  
  68.     <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>  
  69.     <!-- iPad 豎屏 1536x2008(Retina) -->  
  70.     <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>  
  71.     <!-- iPad 橫屏 1024x748(標(biāo)準(zhǔn)分辨率) -->  
  72.     <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>  
  73.     <!-- iPad 橫屏 2048x1496(Retina) -->  
  74.     
  75.     <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>  
  76.     <!-- iPhone/iPod Touch 豎屏 320x480 (標(biāo)準(zhǔn)分辨率) -->  
  77.     <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>  
  78.     <!-- iPhone/iPod Touch 豎屏 640x960 (Retina) -->  
  79.     <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>  
  80.     <!-- iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina) -->  
  81.     <!-- iOS 啟動畫面 end -->  
  82.     
  83.     <!-- iOS 設(shè)備 end -->  
  84.     <meta name="msapplication-TileColor" content="#000"/>  
  85.     <!-- Windows 8 磁貼顏色 -->  
  86.     <meta name="msapplication-TileImage" content="icon.png"/>  
  87.     <!-- Windows 8 磁貼圖標(biāo) -->  
  88.     
  89.     <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>  
  90.     <!-- 添加 RSS 訂閱 -->  
  91.     <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>  
  92.     <!-- 添加 favicon icon -->  
  93.   
  94.     <!-- sns 社交標(biāo)簽 begin -->  
  95.     <!-- 參考微博API -->  
  96.     <meta property="og:type" content="類型" />  
  97.     <meta property="og:url" content="URL地址" />  
  98.     <meta property="og:title" content="標(biāo)題" />  
  99.     <meta property="og:image" content="圖片" />  
  100.     <meta property="og:description" content="描述" />  
  101.     <!-- sns 社交標(biāo)簽 end -->  
  102.     
  103.     <title>標(biāo)題</title>  
  104. </head>  

標(biāo)簽:蚌埠 黃山 鶴崗 德州 楊凌 撫順 辛集 內(nèi)蒙古

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《實例講解HTML5的meta標(biāo)簽的一些應(yīng)用》,本文關(guān)鍵詞  實例,講解,HTML5,的,meta,標(biāo)簽,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《實例講解HTML5的meta標(biāo)簽的一些應(yīng)用》相關(guān)的同類信息!
  • 本頁收集關(guān)于實例講解HTML5的meta標(biāo)簽的一些應(yīng)用的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章