
正文
Html的<meta>标签使用方法及用例
提示:扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
浏览器支持
所有浏览器都支持 <meta> 标签。
定义和用法
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
HTML 与 XHTML 之间的差异
在 HTML 中,<meta> 标签没有结束标签。
在 XHTML 中,<meta> 标签必须被正确地关闭。
提示和注释:
注释:<meta> 标签永远位于 head 元素内部。
注释:元数据总是以名称/值的形式被成对传递的。
必需的属性
| 属性 | 值 | 描述 |
|---|---|---|
| content | some_text | 定义与 http-equiv 或 name 属性相关的元信息 |
可选的属性
| 属性 | 值 | 描述 |
|---|---|---|
| http-equiv |
| 把 content 属性关联到 HTTP 头部。 |
| name |
| 把 content 属性关联到一个名称。 |
| scheme | some_text | 定义用于翻译 content 属性值的格式。 |
常用方法实例name 属性
name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称。
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。
<meta name="keywords" content="HTML,ASP,PHP,SQL">//类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助
//或文档的描述信息
<meta name="author"content="www.cnblogs.com/oospace/">
<meta name="revised"content="David Yang,8/1/07">
<meta name="generator"content="Dreamweaver 8.0en">
或者
<meta name="viewport" content="width=device-width, initial-scale=1"/>//使当前页面的宽度等于屏幕的宽度,常用于适应手机屏幕等小屏幕设备
或者
<meta name="renderer" content="webkit"/>//常用于多核浏览器,使其默认使用wekit内核,比如国内某些浏览器
如果没有提供 name 属性,那么名称/值对中的名称会采用 http-equiv 属性的值。
http-equiv 属性
http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时,会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一个:content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。例如,添加:
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
这样发送到浏览器的头部就应该包含:
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008
当然,只有浏览器可以接受这些附加的头部字段,并能以适当的方式使用它们时,这些字段才有意义。
或者
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />//设置文档类型及编码方式
<meta http-equiv="X-UA-Compatible" content="IE=12;IE=11;IE=10;IE=9; IE=8;" /> //设置IE浏览器使用自己本身的内核,禁用兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE12;IE=EmulateIE11;IE=EmulateIE10;IE=EmulateIE9;IE=EmulateIE8" />//设置IE浏览器使用自己本身的渲染方式,禁用兼容模式
或者
<meta http-equiv="Refresh" content="5;url=http://www.cnblogs.com/oospace/" />//页面重定向,5秒以后自动跳转到对应链接
content 属性
<meta http-equiv="Refresh" content="5;url=http://www.cnblogs.com/oospace/" />//页面重定向,5秒以后自动跳转到对应链接
content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content 属性始终要和 name 属性或 http-equiv 属性一起使用。
scheme 属性
scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。
全局属性
<meta> 标签支持 HTML 中的全局属性。即常用的属性
HTML 全局属性
= HTML5 中添加的属性。
| 属性 | 描述 |
|---|---|
| accesskey | 规定激活元素的快捷键。 |
| class | 规定元素的一个或多个类名(引用样式表中的类)。 |
| contenteditable | 规定元素内容是否可编辑。 |
| contextmenu | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 |
| data-* | 用于存储页面或应用程序的私有定制数据。 |
| dir | 规定元素中内容的文本方向。 |
| draggable | 规定元素是否可拖动。 |
| dropzone | 规定在拖动被拖动数据时是否进行复制、移动或链接。 |
| hidden 5 | 规定元素仍未或不再相关。 |
| id | 规定元素的唯一 id。 |
| lang | 规定元素内容的语言。 |
| spellcheck | 规定是否对元素进行拼写和语法检查。 |
| style | 规定元素的行内 CSS 样式。 |
| tabindex | 规定元素的 tab 键次序。 |
| title | 规定有关元素的额外信息。 |
| translate | 规定是否应该翻译元素内容。 |
以上。
Html的<meta>标签使用方法及用例的更多相关文章- meta标签使用方法总结
meta标签是用来描述一个HTML网页文档的属性,比如该网页的作者,日期,网页的关键字,刷新,网页等级设定等等,是文档中的最基本的元信息,本文是对meta标签的学习总结,内容大多来自网上各个地方,非原 ...
- Asp.net 后台添加Meta标签方法
Asp.net 后台添加Meta标签方法包括keywords,CSS.JS 下面是从Asp.net 后台添加CSS.JS.Meta标签的写法,我们这里写成函数方便以后使用.如果函数放在页面类中, Pa ...
- 实现网页页面跳转的几种方法(meta标签、js实现、php实现)
1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面 代码如下 复制代码 1 <meta http-equiv="refresh&quo ...
- 实现网页页面跳转的几种方法大全(meta标签、js实现、php实现)
1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面 代码如下 复制代码 1 <meta http-equiv="refresh&quo ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 最齐全的站点元数据meta标签的含义和使用方法
最齐全的站点元数据meta标签的含义和使用方法 随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到现在Windows 7.Windows 8的I ...
- meta标签的使用方法(PC端)
<!DOCTYPE html> <html lang="en"> <head> <!--设定页面使用的字符集--> <meta ...
- html meta标签属性与内容
meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...
- meta标签中的http-equiv属性使用介绍(转载)
meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...
随机推荐- Nagios+zabbix+ganglia的相关参数分析和优缺点介绍
转自: http://blog.csdn.net/messiaDemo/article/details/52046822?utm_source=itdadao&utm_medium=refer ...
- 自定义Dialog以及Dialog返回值到Activity
步骤: 1.定义自定义的Dialog的布局文件 2.写一个类MyDialog继承Dialog 3.Dialog 返回值到Activity的方法是定义一个接口,接口中定义返回值到Activity的方法, ...
- GridFS
GridFS是一个建立在MongoDB文档基础之上的轻量级的文件存储规范. GridFS的一个基本思想就是可以将一个大文件分成很多块.每块作为一个单独的文档存储. GridFS支持在文档中存储二进制数 ...
- HTTP status codes
响应码由三位十进制数字组成,它们出现在由HTTP服务器发送的响应的第一行.响应码分五种类型,由它们的第一位数字表示:1.1xx:信息,请求收到,继续处理2.2xx:成功,行为被成功地接受.理解和采纳3 ...
- linux学习(六)绝对路径、相对路径、cd、mkdir、rmdir、rm
一.绝对路径 就是从根开始的,如:/root./usr/local. 二.相对路径 相对于当前路径的,比如我们在当前路径下建立了一个a.txt. [root@iZ25lzba47vZ ~]# pwd ...
- Linux下提权常用小命令
有些新手朋友在拿到一个webshell后如果看到服务器是Linux或Unix操作系统的就直接放弃提权,认为Linux或Unix下的提权很难,不是大家能做的,其实Linux下的提权并没有很多人想象的那么 ...
- java 中 热部署与卸载关系
今天发现早年在大象笔记中写的一篇笔记,之前放在ijavaboy上的,现在它已经访问不了了.前几天又有同事在讨论这个问题.这里拿来分享一下. 在web应用开发或者游戏服务器开发的过程中,我们时时刻刻都在 ...
- nginx代理 upstream轮询
问题描述 我有2个Tomcat 一个端口开启(8021),一个端口未开启(8022),在nginx里用upstream模块进行代理 ,代理的负载算法采用的是默认的轮询算法,配置成功后,访问页面时并没 ...
- 使用HttpGet协议与正则表达实现桌面版的糗事百科
写在前面 最近在重温asp.net,找了一本相关的书籍.本书在第一章就讲了,在不使用浏览器的情况下生成一个web请求,获取服务器返回的内容.于是在网上搜索关于Http请求相关的资料,发现了很多资料都是 ...
- Java事务管理之Hibernate
环境与版本 Hibernate 版本:Hibernate 4.2.2 (下载后的文件名为hibernate-release-4.2.2.Final.zip,解压目录hibernate-release- ...
meta标签是用来描述一个HTML网页文档的属性,比如该网页的作者,日期,网页的关键字,刷新,网页等级设定等等,是文档中的最基本的元信息,本文是对meta标签的学习总结,内容大多来自网上各个地方,非原 ...
Asp.net 后台添加Meta标签方法包括keywords,CSS.JS 下面是从Asp.net 后台添加CSS.JS.Meta标签的写法,我们这里写成函数方便以后使用.如果函数放在页面类中, Pa ...
1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面 代码如下 复制代码 1 <meta http-equiv="refresh&quo ...
1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面 代码如下 复制代码 1 <meta http-equiv="refresh&quo ...
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
最齐全的站点元数据meta标签的含义和使用方法 随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到现在Windows 7.Windows 8的I ...
<!DOCTYPE html> <html lang="en"> <head> <!--设定页面使用的字符集--> <meta ...
meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...
meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...
- Nagios+zabbix+ganglia的相关参数分析和优缺点介绍
转自: http://blog.csdn.net/messiaDemo/article/details/52046822?utm_source=itdadao&utm_medium=refer ...
- 自定义Dialog以及Dialog返回值到Activity
步骤: 1.定义自定义的Dialog的布局文件 2.写一个类MyDialog继承Dialog 3.Dialog 返回值到Activity的方法是定义一个接口,接口中定义返回值到Activity的方法, ...
- GridFS
GridFS是一个建立在MongoDB文档基础之上的轻量级的文件存储规范. GridFS的一个基本思想就是可以将一个大文件分成很多块.每块作为一个单独的文档存储. GridFS支持在文档中存储二进制数 ...
- HTTP status codes
响应码由三位十进制数字组成,它们出现在由HTTP服务器发送的响应的第一行.响应码分五种类型,由它们的第一位数字表示:1.1xx:信息,请求收到,继续处理2.2xx:成功,行为被成功地接受.理解和采纳3 ...
- linux学习(六)绝对路径、相对路径、cd、mkdir、rmdir、rm
一.绝对路径 就是从根开始的,如:/root./usr/local. 二.相对路径 相对于当前路径的,比如我们在当前路径下建立了一个a.txt. [root@iZ25lzba47vZ ~]# pwd ...
- Linux下提权常用小命令
有些新手朋友在拿到一个webshell后如果看到服务器是Linux或Unix操作系统的就直接放弃提权,认为Linux或Unix下的提权很难,不是大家能做的,其实Linux下的提权并没有很多人想象的那么 ...
- java 中 热部署与卸载关系
今天发现早年在大象笔记中写的一篇笔记,之前放在ijavaboy上的,现在它已经访问不了了.前几天又有同事在讨论这个问题.这里拿来分享一下. 在web应用开发或者游戏服务器开发的过程中,我们时时刻刻都在 ...
- nginx代理 upstream轮询
问题描述 我有2个Tomcat 一个端口开启(8021),一个端口未开启(8022),在nginx里用upstream模块进行代理 ,代理的负载算法采用的是默认的轮询算法,配置成功后,访问页面时并没 ...
- 使用HttpGet协议与正则表达实现桌面版的糗事百科
写在前面 最近在重温asp.net,找了一本相关的书籍.本书在第一章就讲了,在不使用浏览器的情况下生成一个web请求,获取服务器返回的内容.于是在网上搜索关于Http请求相关的资料,发现了很多资料都是 ...
- Java事务管理之Hibernate
环境与版本 Hibernate 版本:Hibernate 4.2.2 (下载后的文件名为hibernate-release-4.2.2.Final.zip,解压目录hibernate-release- ...







