meta标签的使用

    xiaoxiao2022-07-05  176

    html说简单很简单,说复杂也复杂。以下是meta标签的使用,你知道多少呢?

    meta标签位于文档的头部,不会显示在页面上,但机器是可以读的。作用是:提供html页面的元信息,比如设置关键字、描述、作者、视口属性、刷新频率、缓存控制等。

    一、<meta charset="UTF-8"> 告诉机器以何种方式解析文档,跟文档本身的字符编码是两码事。放在<html>标签的下面。一下是文档保存的字符编码。

    UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,又称万国码。一个英文单词、空格、符号占用一个字节(8比特位),一个中文占用3个字节(24比特位)(国际单位)。GBK全称《汉字内码扩展规范》,(GBK即“国标”、“扩展”汉语拼音的第一个字母)。一个英文单词、空格、符号占用一个字节,一个中文占用2个字节。

    必选属性

     meta的必需属性是content,当然并不是说meta标签里一定要有content,而是当有http-equiv或name属性的时候,一定要有content属性。

    可选的属性

    属性值描述http-equiv

     

    把 content 属性关联到 HTTP 头部。name 把 content 属性关联到一个名称。scheme 定义用于翻译 content 属性值的格式。

    SEO优化

    <!-- 页面标题<title>标签(head 头部必须) --> <title>your title</title> <!-- 页面关键词 keywords,关键字长度一般不超过15字 --> <meta name="keywords" content="your keywords"> <!-- 页面描述内容 description --> <meta name="description" content="your description"> <!-- 定义网页作者 author --> <meta name="author" content="author,email address"> <!-- 定义网页搜索引擎索引方式,有这几种取值:none,noindex,nofollow,all,index和follow。 --> <meta name="robots" content="index,follow">

    viewport(视口属性)

    viewport用在手机,平板上的网页。

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0">

    以下内容来自参考网站

    Microsoft Internet Explorer

    <!-- 优先使用最新的ie版本 --> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- 是否开启cleartype显示效果 --> <meta http-equiv="cleartype" content="on"> <meta name="skype_toolbar" content="skype_toolbar_parser_compatible"> <!-- Pinned Site --> <!-- IE 10 / Windows 8 --> <meta name="msapplication-TileImage" content="pinned-tile-144.png"> <meta name="msapplication-TileColor" content="#009900"> <!-- IE 11 / Windows 9.1 --> <meta name="msapplication-config" content="ieconfig.xml">

    Google Chrome

    <!-- 优先使用最新的chrome版本 --> <meta http-equiv="X-UA-Compatible" content="chrome=1" /> <!-- 禁止自动翻译 --> <meta name="google" value="notranslate">

    360浏览器

    <!-- 选择使用的浏览器解析内核 --> <meta name="renderer" content="webkit|ie-comp|ie-stand">

    UC手机浏览器

    <!-- 将屏幕锁定在特定的方向 --> <meta name="screen-orientation" content="landscape/portrait"> <!-- 全屏显示页面 --> <meta name="full-screen" content="yes"> <!-- 强制图片显示,即使是"text mode" --> <meta name="imagemode" content="force"> <!-- 应用模式,默认将全屏,禁止长按菜单,禁止手势,标准排版,强制图片显示。 --> <meta name="browsermode" content="application"> <!-- 禁止夜间模式显示 --> <meta name="nightmode" content="disable"> <!-- 使用适屏模式显示 --> <meta name="layoutmode" content="fitscreen"> <!-- 当页面有太多文字时禁止缩放 --> <meta name="wap-font-scale" content="no">

    QQ手机浏览器

    <!-- 锁定屏幕在特定方向 --> <meta name="x5-orientation" content="landscape/portrait"> <!-- 全屏显示 --> <meta name="x5-fullscreen" content="true"> <!-- 页面将以应用模式显示 --> <meta name="x5-page-mode" content="app">

    Apple iOS

    <!-- Smart App Banner --> <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"> <!-- 禁止自动探测并格式化手机号码 --> <meta name="format-detection" content="telephone=no"> <!-- Add to Home Screen添加到主屏 --> <!-- 是否启用 WebApp 全屏模式 --> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 添加到主屏后的标题 --> <meta name="apple-mobile-web-app-title" content="App Title">

    Google Android

    <meta name="theme-color" content="#E64545"> <!-- 添加到主屏 --> <meta name="mobile-web-app-capable" content="yes"> <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

    App Links

    <!-- iOS --> <meta property="al:ios:url" content="applinks://docs"> <meta property="al:ios:app_store_id" content="12345"> <meta property="al:ios:app_name" content="App Links"> <!-- Android --> <meta property="al:android:url" content="applinks://docs"> <meta property="al:android:app_name" content="App Links"> <meta property="al:android:package" content="org.applinks"> <!-- Web Fallback --> <meta property="al:web:url" content="http://applinks.org/documentation"> <!-- More info: http://applinks.org/documentation/ -->

    最后——移动端常用的meta

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 --> <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话,忽略email识别 --> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no"> <!-- 适应移动端end -->

     

     

     

    参考链接

    http://www.w3school.com.cn/tags/tag_meta.asp

    GBK与GB2312的区别

    https://blog.csdn.net/weixin_37657720/article/details/80548223

    最新回复(0)