Sky
HOME
HOME
  • 前端笔记

    • CSS

      • 盒子模型
      • 屏幕单位
      • CSS 性能优化
    • JavaScript

      • Methods

        • Scheduler
        • Deep Clone
        • Curry
        • Calculation Function
        • debounce & throttle
      • Function bind
      • Array reduce
      • cross domain
      • event loop
      • ajax
      • event
      • context
      • inheritance
      • prototype
    • HTML

      • html render
      • forbidden <a>
      • <meta>
      • <script>
    • uni-app

      • scroll table

meta

The tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

meta标签是用来让机器识别的,同时它对SEO起着重要的作用

charset

指定了html文档的编码格式,常用的是utf-8(Unicode的字符编码),还有ISO-8859-1(拉丁字母的字符编码)。

<meta charset="utf-8">

name & content

name属性用来说明content的内容,content属性用来说明name的内容。

<!-- keywords——为搜索引擎提供关键字 -->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

<!-- description——对网页整体的描述 -->
<meta name="description" content="Free Web tutorials on HTML and CSS">

<!-- author——定义了页面的作者 -->
<meta name="author" content="Hege Refsnes">

<!-- generator——包含生成页面软件的标识符 -->
<meta name="generator" content="vscode">

<!-- theme-color——定义主题颜色 -->
<meta name="theme-color" content="#4285f4">

<!-- viewport——对页面视图相关进行定义 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

    width=device-width——将页面宽度设置为跟随屏幕宽度变化而变化
    initial-scale=1.0——设置浏览器首次加载页面时的初始缩放比例(0.0-10.0正数)
    maximum-scale=1.0——允许用户缩放的最大比例(0.0-10.0正数),必须大于等于minimum-scale
    minimum-scale=1.0——允许用户缩放的最小比例(0.0-10.0正数),必须小于等于maximum-scale
    user-scalable=no——是否允许用户手动缩放(yes或者no)

http-equiv & content

http-equiv属性用来模拟http协议的应答头,content属性用来说明http-equiv的内容。


<!-- refresh——设置页面自动刷新 -->
<meta http-equiv="refresh" content="5">

<!-- content-type——设置文档的MIME类型和字符集 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- expires——设置网页的到期时间 -->
<meta http-equiv="expires" content="Wed, 20 Jun 2019 22:00:00 GMT">

<!-- cache-control——请求和响应遵循的缓存机制,可以声明缓存的内容,修改过期时间,可多次声明 -->
<meta http-equiv="cache-control" content="no-cache">
no-transform——不得对资源进行转换或转变。
no-siteapp——禁止百度进行转码

<!-- pragma——设置网页的缓存机制 -->
<meta http-equiv="pragma" content="no-cache">

<!-- set-cookie——设置网页的cookie -->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">

<!-- window-target——设置网页的默认窗口 -->
<meta http-equiv="window-target" content="_top">

<!-- content-security-policy——设置网页的安全策略 -->
<meta http-equiv="content-security-policy" content="default-src 'self'">

<!-- X-UA-Compatible——告知浏览器以何种版本渲染界面。下面的例子有限使用IE最新版本 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
不想兼容低版本的IE,可以直接忽略这一条

property & content

property属性用来说明content的内容,content属性用来说明property的内容。

可以让网页成为一个富媒体对象,同意网页内容被其他网站引用,同时在应用的时候不会只是一个链接,会提取相应的信息展现给用户。


<!-- og:title——网页标题 -->
<meta property="og:title" content="The Rock">  

<!-- og:type——网页类型 -->  
<meta property="og:type" content="video.movie">  

<!-- og:url——网页链接 -->  
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/">  

<!-- og:image——网页图片 -->  
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg">  

<!-- og:site_name——网页所在网站名称 -->  
<meta property="og:site_name" content="IMDb">  

最近更新: 2023/11/6 17:56
Contributors: liujw155@outlook.com
Prev
forbidden <a>
Next
<script>