• 0712-2888027 189-8648-0214
    微信公眾號

    孝感風信網絡科技有限公司微信公眾號

    當前位置:主頁 > 技術支持 > HTML5/CSS3 > HTML5 <meta> 標簽屬性與使用方法詳解

    HTML5 <meta> 標簽屬性與使用方法詳解

    時間:2024-03-28來源:風信官網 點擊: 551次
    HTML 5 <meta> 標簽

    所有瀏覽器都支持 <meta> 標簽。

    定義和用法
    <meta> 元素可提供有關頁面的元信息(meta-information),比如針對搜索引擎和更新頻度的描述和關鍵詞。

    <meta> 標簽位于文檔的頭部,不包含任何內容。<meta> 標簽的屬性定義了與文檔相關聯的名稱/值對。

    HTML 4.01 與 HTML 5 之間的差異

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

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

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

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">在 HTML 5 中,這樣就夠了:

    <meta charset="UTF-8">

    例子

    定義針對搜索引擎的關鍵詞:
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

    定義對頁面的描述:
    <meta name="description" content="免費的 web 技術教程。" />

    定義頁面的最新版本:
    <meta name="revised" content="David, 2008/8/8/" />

    每 5 秒刷新一次頁面:
    <meta http-equiv="refresh" content="5" />

    基本標簽

    聲明文檔使用的字符編碼:
    <meta charset="utf-8" />

    聲明文檔的兼容模式:
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> //指示IE以目前可用的最高模式顯示內容

    定義對頁面的描述:
    <meta name="description" content="HTML5COL學院提供高質量HTML5教學" />

    定義頁面的最新版本:
    <meta name="revised" content="Frank, 2016/3/1" />

    SEO 優化

    頁面描述
    <meta name="description" content="不超過850個字符"/>

    定義針對搜索引擎的關鍵詞:
    <meta name="keywords" content="HTML5COL學院, HTML5, CSS3, JavaScript" />

    定義網頁作者:
    <meta name="author" content="HTML5COL" />

    定義網頁搜索引擎索引方式,使用英文逗號「,」分隔,常有如下幾種取值:none,noindex,nofollow,all,index和follow:
    <meta name="robots" content="index,follow" />
    為移動設備添加 viewport
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    參數說明
    content參數 釋義
    width viewport 寬度(數值/device-width)
    height viewport 高度(數值/device-height)
    initial-scale 初始縮放比例
    maximum-scale 最大縮放比例
    minimum-scale 最小縮放比例
    user-scalable 是否允許用戶縮放(yes/no)

    ISO 設備

    添加到主屏后的標題(iOS 6開始):
    <meta name="apple-mobile-web-app-title" content="標題" />

    設置狀態欄的背景顏色:
    <meta name="apple-mobile-web-app-title" content="yes" />

    是否啟用 WebApp 全屏模式:
    <meta name="apple-mobile-web-app-capable" content="yes" />

    設置狀態欄的背景顏色:
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    注:只有在 "apple-mobile-web-app-capable" content="yes" 時生效
    content 參數:
    content參數 釋義
    default 默認值,網頁內容從狀態欄底部開始
    black 狀態欄背景是黑色,網頁內容從狀態欄底部開始
    black-translucent 狀態欄背景是黑色半透明,網頁內容充滿整個屏幕,頂部會被狀態欄遮擋

    Windows 8

    Windows 8 磁貼顏色:
    <meta name="msapplication-TileColor" content="#000" />

    Windows 8 磁貼圖標:
    <meta name="msapplication-TileImage" content="icon.png" />

    其他

    禁止數字識自動別為電話號碼:
    <meta name="format-detection" content="telephone=no" />

    不讓android識別郵箱:
    <meta name="format-detection" content="email=no" />

    每 8 秒刷新一次頁面:
    <meta http-equiv="refresh" content="8" />
    熱門關鍵詞: HTML5 <meta>標簽 屬性 使用方法
    欄目列表
    推薦內容
    熱點內容
    展開
    动漫h精品无码一区二区三区,欧美日韩精品一区二区,午夜麻豆国产精品,加勒比中文字幕无码,亚洲日本va中文字幕区