HTML5 meta标签属性整理

最新推荐文章于 2021-02-06 14:27:15 发布
最新推荐文章于 2021-02-06 14:27:15 发布
阅读量277 收藏 1
点赞数
分类专栏： HTML5

基本标签

声明文档使用的字符编码

<meta charset="utf-8">

声明文档的兼容模式

<meta http-equiv="X-UA-Compatible" content="IE=edge" />//指示IE以目前可用的最高模式显示内容。
<meta http-equiv="X-UA-Compatible" content="IE=Emulate IE7" />//指示IE使用<！DOCTYPE>指令确定如何呈现内容。标准模式指令以IE7 标准模式显示，而Quirks模式指令以IE5模式显示。

SEO优化

页面描述

<meta name="description" content="不超过150个字符" />

页面关键词

<meta name="keywords" content="宇智科技，html5，css3" />

定义网页作者

<meta name="author" content="您好小耗子" />

定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「，」分割的值，通常有如下几种取值：name，noindex，nofollow，all，index和follow。

<meta name="robots" content="index,follow" />

为移动设备添加viewport

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

content参数：
width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

ios设备

添加到主屏后的标题（iOS 6 新增）

<meta name="apple-mobile-web-app-title" content="宇智科技">

是否启用 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 参数：
default 默认值。
black 状态栏背景是黑色。
black-translucent 状态栏背景是黑色半透明。
如果设置为 default或 black,网页内容从状态栏底部开始。如果设置为 black-translucent,网页内容充满整个屏幕，顶部会被状态栏遮挡。

ios图标
rel 参数：
apple-touch-icon 图片自动处理成圆角和高光等效果。
apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。
iPhone 和 iTouch，默认 57x57 像素，必须有

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />

iPad，72x72 像素，可以没有，但推荐有

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />

Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />

Retina iPad，144x144 像素，可以没有，但推荐有

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />

ios 启动画面
iPad 的启动画面是不包括状态栏区域的。
iPad 竖屏 768 x 1004（标准分辨率）

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />

iPad 竖屏 1536x2008（Retina）

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />

iPad 横屏 1024x748（标准分辨率）

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />

iPad 横屏 2048x1496（Retina）

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" />

iPhone 和 iPod touch 的启动画面是包含状态栏区域的。
iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />

iPhone/iPod Touch 竖屏 640x960 (Retina)

<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />

iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />

Window 8

Windows 8 磁贴颜色

<meta name="msapplication-TileColor" content="#000"/>

Windows 8 磁贴图标

<meta name="msapplication-TileImage" content="icon.png"/>

其他

添加 RSS 订阅

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />

添加 favicon icon

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />

不识别邮箱

<meta name="format-detection" content="email=no" />

不识别电话

<meta name="format-detection" content="telephone=no" />

 前端随记

<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="name, email@gmail.com"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
 
    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="标题">
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
 
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <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">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- 针对手持设备优化，主要是针对一些老的不识别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">
    <!-- iOS 图标 begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
    <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
    <!-- iOS 图标 end -->
 
    <!-- iOS 启动画面 begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
    <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
    <!-- iPad 竖屏 1536x2008（Retina） -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    <!-- iPad 横屏 1024x748（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    <!-- iPad 横屏 2048x1496（Retina） -->
 
    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
    <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
    <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
    <!-- iOS 启动画面 end -->
 
    <!-- iOS 设备 end -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 磁贴图标 -->
 
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- 添加 RSS 订阅 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <!-- 添加 favicon icon -->

    <!-- sns 社交标签 begin -->
    <!-- 参考微博API -->
    <meta property="og:type" content="类型" />
    <meta property="og:url" content="URL地址" />
    <meta property="og:title" content="标题" />
    <meta property="og:image" content="图片" />
    <meta property="og:description" content="描述" />
    <!-- sns 社交标签 end -->
 
    <title>标题</title>
</head>

jiegeng2233
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTMl中Meta标签详解以及meta property=og标签含义
lzqial1987的专栏
07-08 1901
meta是用来在HTML文档中模拟HTTP协议的响应头报文。META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级，等等。 name 属性 1、<meta nam
meta标签的作用及整理
热门推荐
yc123h的博客
05-09 5万+
欢迎访文我的博客YangChen’s Blogmeta的标签的使用是我在前端学习中曾经困惑过一段时间的问题。一方面不是很了解meta标签的用途，另一方面是对于meta标签里的属性和值不是懂，也不知道从哪里冒出来的，所以这篇文章专门整理下meta标签，一个必用且关键的标签。什么是meta标签？引自下W3school的定义说明一下。 元数据（metadata）是关于数据的信息。 标签提供
HTML中meta标签详解；property=og标签详解
weixin_34055910的博客
04-06 234
meta是用来在HTML文档中模拟HTTP协议的响应头报文。META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者...
HTML中Meta标签详解以及meta property=og标签含义
喵叫兽的博客
09-18 9957
  meta是用来在HTML文档中模拟HTTP协议的响应头报文。META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的&lt;HEAD&gt;标记和&lt;TITLE&gt;标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使...
meta标签总结
_
02-06 6680
<meta>标签可提供页面数据的元信息（meta information）。 <meta>标签位于文档头部，不包含内容，其属性定义了与文档关联的键值对。 简单来说，<meta>就是文档信息描述的标签。我们从以下几个方面来看看<meta>的实际用途。比如： 搜索引擎优化（SEO） 定义页面使用语言 自动刷新并指向新的页面 实现网页转换时的动态效果 控制页面缓冲 网页定级评价 控制网页显示的窗口 一、meta标签的属性 1、charset属性
关于网站的meta标签里有property="og:title"
farmerXU的博客
05-13 5203
无意中看到一个人博客网站的源代码meta里面property="og:title"觉得好奇就查了一下； og是一种新的HTTP头部标记，即Open Graph Protocol，这种协议可以让网页成为一个“富媒体对象”。 OG主要标签属性 og:title 标题 og:type 类型 常用值:article book movie og:image 略缩图地址 og:url 页面地址 og:description 页面的简单描述 og:site_name 页面所在网站名 og:videosrc 视频或者F
HTML标签meta总结,HTML5 head meta 属性整理
12-14
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。   <!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分...
关于html中meta的作用(网上搜集整理得来)
12-14
标签的属性定义了与文档相关联的名称/值对。 HTML 与 XHTML 之间的差异 在 HTML 中，<meta> 标签没有结束标签。 在 XHTML 中，<meta> 标签必须被正确地关闭。 提示和注释： 注释：<meta> ...
HTML5和以前HTML4的区别整理
09-28
4. **更新的表单控件**：HTML5对`<form>`和`<input>`标签进行了大量改进，增加了诸如`autofocus`、`placeholder`、`required`等新属性，提高了表单验证和用户体验。新的输入类型如`date`、`email`、`range`等，使得...
HTML基础笔记的整理
03-09
在编写HTML时，团队常约定标签名、类名、属性等使用小写字母。 文档类型声明<!DOCTYPE>指示浏览器使用哪个HTML版本解析页面，例如<!DOCTYPE html>代表HTML5。页面语言通过lang属性定义，如<html lang="en">表示页面...
HTMl综合各大网站谈谈Meta标签和meta property=og标签含义
weixin_40916042的博客
03-11 5911
看看国内一些网站头部meta的设置： 1.天猫首页 &lt;meta charset="utf-8"/&gt; &lt;meta name="renderer" content="webkit"/&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"/&gt; &lt;meta na
meta property=og标签含义及作用
abxn2002的专栏
02-25 1734
转载地址: http://bbs.xiusheji.net/thread-2173-1-1.html Meta Property=og标签是什么呢? 　　og是一种新的HTTP头部标记，即Open Graph Protocol： 　　The Open Graph Protocol enables any web page to become a rich object in a
Meta标签常用属性值的写法和作用
xustart7720的博客
03-22 7055
什么是meta标签？ 元数据（metadata）是关于数据的信息。 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。 典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 标签始终位于 head 元素中。 元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 met...
html meta标签使用总结
weixin_33743703的博客
08-07 388
meta标签作用 META标签是HTML标记HEAD区的一个关键标签，提供文档字符集、使用语言、作者等基本信息，以及对关键词和网页等级的设定等，最大的作用是能够做搜索引擎优化（SEO）。 PS：便于搜索引擎机器人查找、分类，互联网应用应该要注意。 大网站都是怎么写？ 在了解这个标签之前，我查找了各个主流网站他们的对于Meta的设置，如下： 京东首页的Meta设置： &lt;meta...
分布式电网动态电压恢复器模拟装置设计与实现.doc
最新发布
07-06
本装置采用DC-AC及AC-DC-AC双重结构，前级采用功率因数校正（PFC）电路完成AC-DC变换，改善输入端电网电能质量。后级采用单相全桥逆变加变压器输出的拓扑结构，输出功率50W。整个系统以TI公司的浮点数字信号控制器TMS320F28335为控制电路核心，采用规则采样法和DSP片内ePWM模块功能实现SPWM波，采用DSP片内12位A/D对各模拟信号进行采集检测，简化了系统设计和成本。本装置具有良好的数字显示功能，采用CPLD自行设计驱动的4.3英寸彩色液晶TFT-LCD非常直观地完成了输出信号波形、频谱特性的在线实时显示，以及输入电压、电流、功率，输出电压、电流、功率，效率，频率，相位差，失真度参数的正确显示。本装置具有开机自检、输入电压欠压及输出过流保护，在过流、欠压故障排除后能自动恢复。
html5 meta各属性
04-08
HTML5中的meta标签有很多属性，每个属性都有不同的作用，下面是一些常见的属性及其作用： 1. charset属性：指定页面的字符编码。 2. name属性：用于定义页面的元数据。常见的值包括"description"、"keywords"、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值