HTML的meta标签用法总结

meta标签在html中很重要，本文我们将介绍HTML的meta标签用法总结，希望能帮助到大家大家。

什么是mata标签

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
meta是html语言head区的一个辅助性标签。几乎所有的网页里，我们都能看到meta标签,不过浏览器的显示页面中是看不到的,也许你认为这些代码可有可无。其实meta标签很重要，会给你的网站带来实际的效果，例如网站描述()会在搜索引擎的索引中得到体现. 例如使用meta标签设置网站的编码是gbk2312还是utf-8meta标签设定关键字

基本语法

<meta  name="keywords"   content="关键字1,关键字2,关键字3....">

关键字标签作用是告诉搜索引擎网站的内容的是关于那些方面的内容,方便搜索引擎对网站的定义和索引.关键字和关键字之间使用英文输入法下的逗号隔开,关键字的长度一般不超过100个字符.
例如我们网站是关于Web开发技术学习的网站,关键字描述可以这么写:

<meta  name="keywords"   content="html教程,css教程,javascript教程">

当用户在搜索引擎搜索这些关键字时,你的网站就能在结果中出现. 但是由于早期很多作弊者(黑帽SEO)利于关键字堆砌作弊,现在的搜索引擎(百度)对关键字不再那么敏感.

meta标签设定描述
语法格式:

<meta  name=“discription”  content=“描述的内容”>

网页的描述很重要,直接能够在搜索引擎中得到体现.例如打开百度网站搜索"新浪"看到以下页面

meta标签设定字符集
语法格式:

<meta http-equiv =“content-type”  content=“text/html;    charset="编码格式”>

常见的编码格式有中文编码(gbk2312)和国际编码(UTF-8) ,gbk2312是中文编码,如果你的网站内容都是中文的就使用gbk2312 UTF-8是国际编码左右的文字通用(包括中文和英文). 它们的主要区别是gbk2312是专门为中文打造的,一个汉字占2个字符. UTF-8是通用的一个汉字占3个字节. 早期的网络带宽资源短缺所以使用gbk2312编码可以节省带宽,提高网页的打开速度,但是现在我们家庭带宽都是4Ｍ起完全忽略节省的那些字节．
示例:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

我们在浏览网页的时候,大多数人都碰到过乱码的页面把. 编码格式是让浏览器以设定的编辑格式进行解析,如果编码格式不正确就会用出现乱码. 所以我建议使用通用的UTF-8编码,这样全球所有的浏览器访问我们的网页都能正常显示.

meta标签设定自动刷新时间
语法格式

<meta http-equiv=“refresh”  content=“刷新间隔的时间”>

刷新时间以秒为单位,例如论坛的页面只有刷新后才能看到新发布帖子,像这样更新速度很快的页面可以加入自动刷新的代码,保证可以看到最新的页面.
示例:

XML/HTML Code复制内容到剪贴板

<meta http-equiv=“refresh”  content=“3”>

这里我们演示把时间设定为3秒,请自行测试.

meta标签设定自动跳转新页面
语法格式

<meta http-equiv=“refresh”  content=“跳转间隔的秒数；  Url="新网页地址”>

示例

<meta http-equiv=“refresh”  content=“3；  Url="http://www.adminwang.com”>

当浏览器打开此页面,3秒后将自动跳转到我们网站的首页.

meta标签设定禁用缓存
语法格式

<meta http-equiv="cache-control"  content="no-cache" />

我们知道浏览器都有个缓存机制,就是打开一个网页会自动保存在本地,这样做的目的在一定的时间内再次访问会直接调用缓存中的文件提高访问速度. 但是像论坛这种时时变化的页面我们不希望浏览器保存缓存文件可以加上这句代码. 在程序开发中还有一个用途,程序调试要时时查看代码修改后的效果可以使用此代码禁用浏览器缓存.
另外的一种写法：

<meta http-equiv="pragma" content="no-cache" >

以上就是HTML的meta标签用法总结的详细内容，更多请关注其它相关文章！