什么是mata标签
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
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编码可以节省带宽,提高网页的打开速度,但是现在我们家庭带宽都是4M起完全忽略节省的那些字节.
示例:
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="新网页地址”>
示例:2881064178
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" >
WEB前端学习交流群21 598399936
什么是mata标签的更多相关文章
- Mata标签,og标签
一.Mata标签 meta是用来在HTML文档中模拟HTTP协议的响应头报文,meta 标签用于网页的<head>与</head>中.meta 的属性有两种:name和http ...
- HTML Meta标签
Meta标签用于存储web页面上的信息.本质上讲,它是信息数据.他帮助浏览器和搜索引擎更好地知道.理解页面内容. Web开发者,通过Mata标签设置页面描述.作者或关键字等等.然而,许多meta标签功 ...
- HTML5屏幕适配标签设置
开发HTML5游戏中,我们常用的一些mata标签: <meta name="viewport" content="width=device-width, initi ...
- 关于viewport
最近无聊的很,买了本教材,学习响应式网站设计. 因为有多年css的编程基础,前面的媒介查询学的很顺利.当学到viewport这个mata标签的时候,教程讲的比较简单. 今天,百度了不少资料,基本搞清楚 ...
- Web知识总结
一)window.location.href和window.location.replace的区别 1.window.location.href=“url”:改变url地址: 2.window.loc ...
- html常用笔记
<?php //CSS可以对文本格式进行精确的控制 //HTML标记更有利于搜索引擎 //一.标签 <br> <p>//换行后插入一个空行,单字节不换行,双字节自动换行 ...
- 学习H5一周随笔
H5学习也已经进行了一个周了,除了学习过程中的乱哄哄的脑子,对H5初学者(我)常见的问题有了如下见解. 1.初学者在建立新的Html文件之后,有时候会把 <meta charset=" ...
- css知识总结
---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握 ...
- HTML+CSS项目——模拟京东网页
项目准备 项目名称:京东商城 项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分. 设计目标 保证浏览器 ie7及以上, 火狐, 360, safari,chrome等.谁让我再测ie6,就 ...
随机推荐
- 类和ID选择器的区别
学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点: 相同点:可以应用于任何元素不同点: 1.ID选择器只能在文档中使用一 ...
- 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美
<完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...
- Wdcp两日志的路径
Wdcp两日志的路径: /www/wdlinux/httpd-2.2.22/logs /www/wdlinux/nginx-1.0.15/logs
- 项目任务管理(TaskMgr)设计篇
为什么使用void FilllXX(TypeA pParm1, TypeB pParm2) 应用场景色:void FillXX的好处是可以不用关心实例情况:如果在方法体中需要一个实例,而方法体只知道基 ...
- ios+oc面试题
ios+oc面试题 浅复制和深复制的区别?//浅拷贝和深拷贝答案:浅层复制(copy):只复制指向对象的指针,而不复制引用对象本身.//通过对象的指针来访问这个对象深层复制(mutableCo ...
- 如何用extjs显示一个已经存在的页面
最近碰到了一个需求: 画面上有个按钮,点击了按钮之后,弹出一个窗体(window),而该窗体(window)上显示的内容是某个系统的内容,如下图所示 查了好长时间的extjs的帮助文档,没有找个现成的 ...
- 对话Facebook人工智能实验室主任、深度学习专家Yann LeCun
对话Facebook人工智能实验室主任.深度学习专家Yann LeCun Yann LeCun(燕乐存),Facebook人工智能实验室主任,NYU数据科学中心创始人,计算机科学.神经科学.电子电气科 ...
- A Statistical View of Deep Learning (III): Memory and Kernels
A Statistical View of Deep Learning (III): Memory and Kernels Memory, the ways in which we remember ...
- 几个国外FMX网站 good
FireMonkey X – Amazing overview of FireMonkey FMX Feeds – All your FireMonkey news in one place FMX ...
- android 随手记 自定义广播通知栏
自定义通知栏图标?不是很简单么.自定义布局都不在话下! 是的,有xml布局文件当然一切都很简单,如果不给你布局文件用呢? 听我慢慢道来! 首先怎么创建一个通知呢? 1.new 一个 Notificat ...