HTML5的meta標(biāo)簽的應(yīng)用方法

本篇內(nèi)容主要講解“HTML5的meta標(biāo)簽的應(yīng)用方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“HTML5的meta標(biāo)簽的應(yīng)用方法”吧!

創(chuàng)新互聯(lián)專注于桑珠孜網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供桑珠孜營銷型網(wǎng)站建設(shè)，桑珠孜網(wǎng)站制作、桑珠孜網(wǎng)頁設(shè)計(jì)、桑珠孜網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)服務(wù)，打造桑珠孜網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供桑珠孜網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

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

在 HTML 5 中，有一個(gè)新的 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">  

例子

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />  

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <meta name="description" content="免費(fèi)的 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" />  

屬性
HTML5的meta標(biāo)簽的應(yīng)用方法

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

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title如需完整的描述，請(qǐng)?jiān)L問 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問 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>如果超過 5 秒后您仍然看到本消息，請(qǐng)點(diǎn)擊上面的的鏈接。</p>  

  12. </body>  

  13. </html>  

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

移動(dòng)前端開發(fā)中添加一些webkit專屬的HTML5頭部標(biāo)簽，幫助瀏覽器更好解析html代碼，更好地將移動(dòng)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個(gè)字符"/>  

  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.     <!-- 為移動(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 全屏模式打開頁面時(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 全屏模式，刪除蘋果默認(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ù)字識(shí)別為電話，忽略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)擊無高光 -->  

  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 啟動(dòng)畫面 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)畫面 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>  

到此，相信大家對(duì)“HTML5的meta標(biāo)簽的應(yīng)用方法”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前標(biāo)題：HTML5的meta標(biāo)簽的應(yīng)用方法
本文網(wǎng)址：http://www.muchs.cn/article38/jdospp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站收錄、網(wǎng)站制作、用戶體驗(yàn)、Google、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)