HTML中的meta的属性作用
在写前端页面时,常常忽略meta标签的作业,只是习惯性的粘贴常用的一些代码,很多不明白meta还有其他很多用法,下面是我整理的一部分。
meta标签的组成:
meta标签原本有两个属性,它们分别是http-equiv属性和name属性,后h5发布了一个新属性charset;每个属性有不同的参数值,这些不同的参数值就实现了不同的网页功能;下面我们介绍一下属性;
- charset(h5增加的属性)
charset 属性规定 HTML 文档的字符编码;html中必带属性;
<meta charset="UTF-8">
- name属性;
name属性主要用于描述网页,属性值为content,content中的内容常用在SEO中。
<meta name="参数"content="具体的参数值">。 - Keywords(关键字)
keywords用来告诉搜索引擎此页面的关键字是什么,主要用于SEO的优化
<meta name="keywords"content="文章的关键字,需要搜索的关键字"> - description(网站的内容描述)
description用来告诉搜索引擎网站主要内容,用简短的概括性文字描述网站,也是主要用于SEO的优化。
<meta name="description"content="网站的简短介绍"> - robots(机器人向导)
robots用来告诉搜索机器人哪些页面需要被索引,哪些页面不需要被索引。
<meta name="robots"content="all/none/index/noindex/follow/nofollow">
具体参数如下:
信息参数为all:文件可被检索,且页面上的链接可以被查询;
信息参数为none:文件不可被检索,且页面上的链接不可以被查询;
信息参数为index:文件将被检索;
信息参数为follow:页面上的链接可以被查询;
信息参数为noindex:文件将不可检索,但页面上的链接可以被查询;
信息参数为nofollow:文件可被检索,但页面上的链接不可以被查询; - author(网页的开发人员)
标注网页的开发人员;
举例:
<meta name="author"content="姓名,邮箱"> - viewport(控制页面是否可以缩放,主要用于移动端)
在移动端的布局中,css中的1px并不等于物理上的1px,现在手机屏幕的分辨率已经越来越高,高像素但是屏幕尺寸却没有发生太大变化,这就说明一个物理像素点实际上塞入了好几个像素。
所以在做移动端开发时,为了使移动端的页面在不同的手机上同样的大小来显示,我们可以将页面的宽度固定,然后获取设备的宽度,可以得到我们之前设定的宽度与设备宽度的比例,再使用HTML5新增的viewport来对页面进行缩放,并固定不允许用户再重新缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
参数的详解如下:
width 设置layout viewport 的宽度,为一个正整数,使用字符串”width-device”表示设备宽度
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
user-scalable 是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许 - revisit-after
revisit-after参数表示多久后网站重新访问,1days代表1天,依此类推。
<meta name="revisit-after" content="1days"> - generator参数,代表说明网站的采用的什么软件制作。
- COPYRIGHT
COPYRIGHT的信息参数,表示说明此网站的版权信息。
<meta name="COPYRIGHT" content="版权信息">
http-equiv属性
http-equiv可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,对应的属性值为content;meta标签的http-equiv属性语法格式是:***<meta http-equiv="参数"content="参数变量值">***http-equiv属性有以下几种参数:
Expires(期限)
用于设定网页的到期时间。时间到时网页自动过期,页面必须到服务器上重新传输。***<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"> 注意:必须使用GMT的时间格式。***
Pragma(cache模式)
Pragma禁止浏览器从本地计算机的缓存中访问页面内容,每一次的加载页都是从网络服务器中加载;这样设定,访问者将无法脱机浏览,必须在联网的状态下浏览页面;***<meta http-equiv="Pragma"content="no-cache">***
Refresh(设置自动刷新)
设置页面在等待多久时间后自动刷新页面或者指向新页面,跳转页面。***<meta http-equiv="Refresh"content="10;URL=http://www.haorooms.com"> //(注意后面的引号,分别在秒数的前面和网址的后面,此例子为10秒后跳转)***
Set-Cookie(cookie删除)
网页过期时,本地计算机中的cookie将自动被删除。***<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/"> 注意:必须使用GMT的时间格式。***
Window-target(设置显示窗口的默认设定)
强制改变页面在当前窗口的显示方式为独立显示,可以用来防止别人在框架里调用自己的页面。***<meta http-equiv="Window-target"content="_top">***
- content-Language(显示语言的设定)
<meta http-equiv="Content-Language"content="zh-cn"/>
meta其他
忽略数字自动识别为电话号码<meta content="telephone=no" name="format-detection" />忽略识别邮箱<meta content="email=no" name="format-detection" />
WebApp(全屏模式:伪装app,离线应用)。
***<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 启用 WebApp 全屏模式 -->***
meta在移动端的用法
<!-- 针对手持设备优化,主要是针对一些老的不识别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">
HTML < base > 标签
为页面上所有默认链接:
例如:
***<base href="连接地址">***<base> 标签为页面上的所有链接规定默认地址或默认目标
为页面上所有链接指定默认打开方式(和meta的Window-target有作用相似):
例如:
***<base target="_self">***target指定页面中所有标签都是本页打开
HTML中的meta的属性作用相关推荐
- html打开新窗口设置窗口属性,HTML之:让网页中的a标签属性统一设置-如‘新窗口打开’...
在开发过程中,我们往往想在页面中,给设置一个统一的默认格式,例如我们想让链接:"在新窗口打开",我们就可以使用标签 在网页中添加这段代码: [注解] 标签为页面上的所有链接规定默认 ...
- [html] html5中的meta标签http-equiv属性有什么作用?
[html] html5中的meta标签http-equiv属性有什么作用? http-equiv是http5新增的属性,用于把 content 属性关联到 HTTP 头部,可模拟响应头.例如:con ...
- html中写meta会乱码,网页html代码不可缺少的5个meta标签属性
网页html代码中,meta标签是个非常重要的标签,meta标签可以包含很多属性,而其中有5个是不可缺少的. meta标签属性 1.title title其实不算是meta标签的属性,其本身就是一个标 ...
- [html] html5中的meta标签renderer有什么作用?
[html] html5中的meta标签renderer有什么作用? 指定双核浏览器,默认以什么浏览器方式渲染页面 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎 ...
- [html] html5中的meta标签robots有什么作用?
[html] html5中的meta标签robots有什么作用? 禁止搜索引擎对本页面内容进行收录,不会出现在SRP页面上 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
- HTML中<meta>标签的name属性都有哪些——标准元数据名称
是什么 标准元数据名称是在HTML的<meta> 标签中定义的name 属性的可选名称,name属性包含两种类型: 标准名称.这是规范中定义的,所有浏览器都能够明白其所指称的名称 自定义名 ...
- C#中的字段与属性的区别及属性的作用
C#中的字段与属性的区别及属性的作用 先上代码 public class Employee {//字段private string name;//属性public string Name {get { ...
- Cookie中的httponly的属性和作用
1.什么是HttpOnly? 如果cookie中设置了HttpOnly属性,那么通过js脚本将无法读取到cookie信息,这样能有效的防止XSS攻击,窃取cookie内容,这样就增加了cookie的安 ...
- Meta http-equiv属性详解
Meta http-equiv属性详解 博客分类: Web综合 HTML浏览器IECache搜索引擎 http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮 ...
最新文章
- 《OpenCV3编程入门》学习笔记6 图像处理(六)图像金字塔与图片尺寸缩放
- 我们需要的不仅仅是一个车模轨迹
- 关于python语言、下列说法不正确的是-关于 Python语言,哪个说法是不正确的?
- MSMQ消息队列演示程序
- Hyper-V Server 2008 R2 加入活动目录的方法
- [html] 渐进式渲染是什么?
- 怎样写一篇优秀论文?看完受益匪浅!
- seleniumpython定位网页元素方法_Python+Selenium 定位元素
- 极客大学架构师训练营 网络通信协议 非阻塞网络I/O NIO 数据库架构原理 第16课 听课总结
- oracle的用户和mysql的用户_oracle数据库的用户以及表空间
- Java Web开发实战经典(基础篇)
- 华为eSight 监控AR系列路由器端口流量
- 微信小程序上线问题与经验总结
- eNSP网络类型实验报告
- ubuntu+网易云安装
- 打卡复旦MBA首场公开课暨招生宣讲会,在不确定性中寻找确定性
- 《提问的智慧》 - 懒人的脑图
- android 电视语音遥控器,基于遥控器的Android电视语音聊天系统及其方法与流程
- Ubuntu1604报错统一解决方法E: 无法获得锁 /var/lib/apt/lists/lock - open (11: 资源暂时不可用)
- 独立后台2.0全新版本微信红包封面抽奖流量主小程序 裂变快 收益高