目录
meta标签。meta作为辅助性标签不具有展示作用,往往被忽略的。
meta称为元数据,即用来描述数据的数据。html里的<meta>标签则是用来描述html页面的。
meta的属性表
属性 | 值 | 描述 | 4 | 5 |
---|---|---|---|---|
charset | character encoding | 定义文档的字符编码。 | 5 | |
content | some_text | 定义与 http-equiv 或 name 属性相关的元信息。 | 4 | 5 |
http-equiv |
| 把 content 属性关联到 HTTP 头部。 | 4 | 5 |
name |
| 把 content 属性关联到一个名称。 | 4 | 5 |
scheme | some_text | 定义用于翻译 content 属性值的格式。不支持。 | 4 |
|
viewport | 用于移动端设备优化 |
html5不再支持scheme属性
(一)charset属性
用来定义文档的字符编码
<meta charset="utf-8">
(二)name 属性
1. 针对搜索引擎的关键词:keywords
这个比较常用,当做展示型的网站时,SEO尤为重要。设置合适的keywords和description有利于搜索引擎的优化
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
2. 对网站内容的描述:description
作用与keywords类似,主要针对搜索引擎设置
<meta name="description" content="这是xx的公司的官网" />
3.描述页面的最新版本:revised
比较不常用的meta信息,主要针对版本的迭代的记录
<meta name="revised" content="chunling, 2019/01/25" />
4.开发者:author
<meta name="author" content="青玉" />
5.说明网站采用什么方法制作的:generator
<meta name="generator" content="Apache" />
6.告诉搜索引擎机器人抓取哪些页面:robots
一般默认all,可取值有all / none / index / noindex / follow / nofollow
<meta name="robots" content="all">
(三)http-equiv属性
1.用来定义文档的字符编码:content-type(html5不推荐)
规定文档使用字符集,与name:charset功能一致。这是html4.01的用法。html5都使用charset而不用这一说明方法了
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> // html4.01
<meta charset="UTF-8"> // html5
2.用于设定网页的到期时间:expires
用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。注意:必须使用GMT的时间格式。
<meta http-equiv="expires" content="Fri,12 Jan 2020 18:18:18 GMT">
3.定义文档自动刷新的时间间隔:refresh
每10秒刷新一次页面。注意,refresh应该慎重使用,它会使得页面不受用户控制
<meta http-equiv="refresh" content="10" />
4.设置cookie过期时间:set-cookie
如果网页过期,那么存盘的cookie会被删除。注意:必须使用GMT的时间格式。
<meta http-equiv="set-cookie" content="cookievalue=xxx"> // 单独描述
<meta http-equiv="set-cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2020 18:18:18 GMT; path=/"> // 与网页过期时间一起设置
5.显示窗口的设定:window-target
强制页面在当前窗口以独立页面显示。注意:用来防止别人在框架(frame/iframe)里调用自己的页面。
<meta http-equiv="window-target" content="_top">
6.动画效果:page-enter
可以在进入网页或者离开网页的一刹那实现动画效果
<meta http-equiv="page-enter" content="revealTrans(duration=5.0,transition=20)">
(四)viewport属性
viewport主要用于移动端优化
可以参考这篇文章:
http://www.runoob.com/w3cnote/viewport-deep-understanding.html
https://www.cnblogs.com/2050/p/3877280.html
width | 设置layout viewport 的宽度,为一个正整数,或字符串"width-device" |
initial-scale | 设置页面的初始缩放值,为一个数字,可以带小数 |
minimum-scale | 允许用户的最小缩放值,为一个数字,可以带小数 |
maximum-scale | 允许用户的最大缩放值,为一个数字,可以带小数 |
height | 设置layout viewport 的高度,这个属性对我们并不重要,很少使用 |
user-scalable | 是否允许用户进行缩放,值为 "no" 或 "yes", no 代表不允许,yes 代表允许 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
(五)全屏属性
<!-- 针对手持设备优化,主要是针对一些老的不识别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 点击无高光 -->