meta标签的作用

最新推荐文章于 2023-08-04 07:56:58 发布

康一夏

最新推荐文章于 2023-08-04 07:56:58 发布

阅读量592

点赞数

分类专栏： H5基础小课堂

本文链接：https://blog.csdn.net/qq_37347273/article/details/103878760

版权

H5基础小课堂专栏收录该内容

29 篇文章 3 订阅

订阅专栏

meta标签的作用

name属性
- name = viewport
- name = description name = keywords name = author
http-equiv属性
移动端头信息示例
网页版头信息示例（CSDN网站）

name属性

<meta name="value" />

name = viewport

<!--initial-scale 初始缩放比-->
<!--禁止用户缩放user-scale=none-->
<meta name='viewport' content="width=devive-width,initial-scale=1,user-scale=none"/>

name = description name = keywords name = author

 <!--搜索关键字 -->
<meta name="keywords" content="景点门票, 特价机票, 酒店预订, 出境度假, Travel abroad, 自助游" />
    
<!-- 网站介绍 -->
<meta name="description" content="某某旅游是中国领先的手机一站式旅游预订平台" />

<!-- 作者的名字 -->
<meta name="author" content="Tom" />

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />

http-equiv属性

设置了 http-equiv 属性，则不应该设置 name 属性
http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值

<meta http-equiv="参数" content="参数变量值" />

http-equiv = Content-Type

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

http-equiv = Refresh 自动刷新

自动刷新并指向新页面

<!-- 2秒后 自动跳转至新地址 -->
<meta http-equiv="Refresh" content="2;URL=https://blog.csdn.net/qq_37347273" />

http-equiv = expires 过期时间

此时content必须使用GMT的时间格式
一旦网页过期，浏览器默认缓存数据无效，所有文件信息重新请求加载

<meta http-equiv="expires" content="Sat, 1 Feb 2020 22:33:00 GMT" />

http-equiv = Pragma

cache模式：是用于设定禁止浏览器从本地机的缓存中调阅页面内容

<!--一旦离开网页就无法从Cache中再调出-->
<meta http-equiv="Pragma" content="no-cache" />

meta标签禁止使用缓存的三种方法

pragma cache-control expires
三者作用一样，且优先级均小于http头文件

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

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

<meta http-equiv="expires" content="0">

移动端头信息示例

<head>
    <base href="/">
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="pragma" content="no-cache">
    <meta name="format-detection" content="telephone=no" />
</head>

网页版头信息示例（CSDN网站）

<head>
	<link rel="canonical" href="https://blog.csdn.net/qq_37347273">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="renderer" content="webkit">
    <meta name="force-rendering" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="report" content="{&quot;pid&quot;:&quot;blog&quot;}">
    <meta name="referrer" content="always">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="shenma-site-verification" content="5a59773ab8077d4a62bf469ab966a63b_1497598848">
	<meta name="csdn-baidu-search" content="{&quot;autorun&quot;:true,&quot;install&quot;:true,&quot;keyword&quot;:&quot;康一夏忙中偷闲的日子_康一夏_CSDN博客-H5笔记,angular基础用法,css领域博主&quot;}">
</head>