您现在的位置是：网站首页> 编程资料编程资料

HTML的meta标签常见用法集锦HTML标签meta总结,HTML5 head meta 属性整理HTML5各种头部meta标签的功能(推荐)HTML5头部<meta>标签的一些常用信息小结html meta标签的使用总结(推荐)实例讲解HTML5的meta标签的一些应用举例讲解HTML中META标签的一些使用技巧html中meta标签及用法详解

2023-10-09 335人已围观

简介写在Web的head头部中的mata标签看似不起眼,实则可以设置非常多种的功能,包括页面编码等重要设定,这里我们便来总结HTML的meta标签常见用法集锦:

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

基本语法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

示例:

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

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

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

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

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

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

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

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

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

上一篇：向div元素添加圆角边框的实现方法css3圆角边框和边框阴影示例CSS3的Border-radius轻松制作圆角CSS3圆角边框和边界图片效果实例 border-radius是向元素添加圆角边框的方法

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢