Html中的meta标签

·  阅读 274

本文已参与掘金创作者训练营第三期「高产更文」赛道,详情查看:掘力计划|创作者训练营第三期正在进行,「写」出个人影响力

是什么

<meta> 元素表示那些不能由其它HTML元相关元素 <base>, <link>, <script>, <style> 或 <title> 之一表示的任何元数据信息。(例如:keyword,author)`

作用

  • SEO优化
  • 自动刷新
  • 跳转页面
  • 定义语言
  • 。。。。。。

标签属性

  1. name

  2. http-equiv

  3. charset

  4. itemprop

    当有http-equivname属性的时候,一定要有content属性对其进行说明。 http-equiv和name定义是什么。content补充具体内容。

charset

规定 HTML 文档的字符编码:

常用的值:

  • UTF-8 -> Unicode 字符编码
  • ISO-8859-1 ->拉丁字母表的字符编码

name

用于描述网页的,对应的content提供给搜索引擎查找和分类的信息。语法:

<meta name="" content="" />
复制代码

name="keywords"

设置网站的关键字:

<meta name="keywords" content="大数据,数据" />
复制代码

name="description"

设置网站的描述:

<meta name="description" content="这是一段描述" />
复制代码

name="robots"

设置,让搜索引擎知道哪些页面需要索引,哪些页面不需要索引。content 有如下参数:

  • all:文件将被检索,且页面上的链接可以被查询;
  • none:文件将不被检索,且页面上的链接不可以被查询;
  • index:文件将被检索;
  • noindex:文件将不被检索,但页面上的链接可以被查询;
  • follow:页面上的链接可以被查询;
  • nofollow:文件将被检索,但页面上的链接不可以被查询。
<meta name="robots" content="all" />
复制代码

name="author"

设置页面的作者:

<meta name="author" content="syl" />
复制代码

name="generator"

设置网站采用什么软件制作的:

<meta name="generator" content="dreamviewer" />
复制代码

name="copyright"

设置网站的版权信息的:

<meta name="copyright" content="***版权所有" />
复制代码

name="revisit-after"

设置网站的重访,30day代表30天:

<meta name="revisit-after" content="30day" />
复制代码

name="viewport"

设置浏览器窗口的大小和缩放的

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
复制代码

http-equiv 属性

http-equiv相当于 HTTP 的文件头的设置。语法:

<meta http-equiv="" content="" />
复制代码

http-equiv="expires"

它是来设置网页的过期时间的,到期必须从服务器重新传输

<meta http-equiv="expires" content="2020 05:28:00 GMT+0800 (CST)" />
复制代码

http-equiv="Pragma"

它是来设置禁止浏览器从本地缓存中访问页面:

<meta http-equiv="Pragma" content="no-cache" />
复制代码

http-equiv="Refresh"

设置自动刷新或者跳转新页面,其中content第一个数字代表 5 秒后自动刷新:

<meta http-equiv="Refresh" content="5;URL=www.baidu.com" />
复制代码

http-equiv="Set-Cookie"

设置 Cookie ,如果网页过期,这个网页的cookies的也会被删除:

<meta http-equiv="Set-Cookie" content="cookie value=xxx;expires=2020 05:28:00 GMT+0800 (CST) path=/" />
复制代码

http-equiv="Window-target"

强制页面在当前窗口以独立页面显示:

<meta http-equiv="Window-target" content="top" />
复制代码

http-equiv="content-Type"

设置页面使用的字符集:

<meta http-equiv="content-Type" content="text/html;charset=gb2312" />
复制代码

http-equiv="Content-Language"

设置页面的语言的:

<meta http-equiv="Content-Language" content="zh-cn" />
复制代码

http-equiv="Cache-Control"

设置页面缓存,:

  • no-cache: 先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。
  • no-store: 不允许缓存,每次都要去服务器上,下载完整的响应。(安全措施)
  • public :缓存所有响应,但并非必须。因为max-age也可以做到相同效果
  • private :只为单个用户缓存,因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)
  • maxage :表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。例如:max-age=60表示响应可以再缓存和重用 60 秒。
<meta http-equiv="Cache-Control" content="no-cache" />
复制代码

http-equiv="Content-Script-Type"

设置页面中脚本的类型:

<meta http-equiv="Content-Script-Type" content="text/javascript" />
复制代码
分类:
前端
标签: