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

實(shí)例講解HTML5的meta標(biāo)簽的一些應(yīng)用
熱門(mén)標(biāo)簽：外呼線穩(wěn)定線路 邢臺(tái)縣地圖標(biāo)注app 阜陽(yáng)企業(yè)外呼系統(tǒng) 呼和浩特外呼電銷(xiāo)系統(tǒng)排名 外呼系統(tǒng)電話(huà)怎么投訴 申請(qǐng)400電話(huà)流程簡(jiǎn)介 地圖標(biāo)注位置能賺錢(qián)嗎 南通數(shù)據(jù)外呼系統(tǒng)推廣 pageadm實(shí)現(xiàn)地圖標(biāo)注

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

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

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

在 HTML 4.01 中，不得不這么寫(xiě)：

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">  

例子

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

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

定義對(duì)頁(yè)面的描述：

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

定義頁(yè)面的最新版本：

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

每 5 秒刷新一次頁(yè)面：

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如需完整的描述，請(qǐng)?jiān)L問(wèn) 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如需完整的描述，請(qǐng)?jiān)L問(wèn) HTML 5 中事件屬性。

 實(shí)例

文檔描述

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)識(shí)了創(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. 對(duì)不起。我們已經(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>如果超過(guò) 5 秒后您仍然看到本消息，請(qǐng)點(diǎn)擊上面的的鏈接。</p>  
  12. </body>  
  13. </html>  

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html> <!-- 使用 HTML5 doctype，不區(qū)分大小寫(xiě) -->  
  2. <html lang="zh-cmn-Hans"> <!-- 更加標(biāo)準(zhǔn)的 lang 屬性寫(xiě)法 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.     <!-- 頁(yè)面描述 -->  
  9.     <meta name="description" content="不超過(guò)150個(gè)字符"/>  
  10.     <!-- 頁(yè)面關(guān)鍵詞 -->  
  11.     <meta name="keywords" content=""/>  
  12.     <!-- 網(wǎng)頁(yè)作者 -->  
  13.     <meta name="author" content="name, email@gmail.com"/>  
  14.     <!-- 搜索引擎抓取 -->  
  15.     <meta name="robots" content="index,follow"/>  
  16.     <!-- 為移動(dòng)設(shè)備添加 viewport -->  
  17.     <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">  
  18.     <!-- `width=device-width` 會(huì)導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開(kāi)頁(yè)面時(shí)出現(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 全屏模式，刪除蘋(píng)果默認(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è)置蘋(píng)果工具欄顏色 -->  
  30.     <meta name="format-detection" content="telphone=no, email=no"/>  
  31.     <!-- 忽略頁(yè)面中的數(shù)字識(shí)別為電話(huà)，忽略email識(shí)別 -->  
  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.     <!-- 針對(duì)手持設(shè)備優(yōu)化，主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器，比如黑莓 -->  
  39.     <meta name="HandheldFriendly" content="true">  
  40.     <!-- 微軟的老式瀏覽器 -->  
  41.     <meta name="MobileOptimized" content="320">  
  42.     <!-- uc強(qiáng)制豎屏 -->  
  43.     <meta name="screen-orientation" content="portrait">  
  44.     <!-- QQ強(qiáng)制豎屏 -->  
  45.     <meta name="x5-orientation" content="portrait">  
  46.     <!-- UC強(qiáng)制全屏 -->  
  47.     <meta name="full-screen" content="yes">  
  48.     <!-- QQ強(qiáng)制全屏 -->  
  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 點(diǎn)擊無(wú)高光 -->  
  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 像素，可以沒(méi)有，但推薦有 -->  
  61.     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>  
  62.     <!-- Retina iPad，144x144 像素，可以沒(méi)有，但推薦有 -->  
  63.     <!-- iOS 圖標(biāo) end -->  
  64.     
  65.     <!-- iOS 啟動(dòng)畫(huà)面 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 啟動(dòng)畫(huà)面 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="類(lèi)型" />  
  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)題《實(shí)例講解HTML5的meta標(biāo)簽的一些應(yīng)用》，本文關(guān)鍵詞  實(shí)例,講解,HTML5,的,meta,標(biāo)簽,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《實(shí)例講解HTML5的meta標(biāo)簽的一些應(yīng)用》相關(guān)的同類(lèi)信息！
  • 本頁(yè)收集關(guān)于實(shí)例講解HTML5的meta標(biāo)簽的一些應(yīng)用的相關(guān)信息資訊供網(wǎng)民參考！
    • 推薦文章