zoukankan      html  css  js  c++  java
  • HTML 理解标签

    meta 元素表示那些不能由其它HTML元相关元素 (<base>, <link>, <script>, <style><title>) 之一表示的任何元数据信息.

      --补充: 元数据: 又称中介数据中继数据,为描述数据的数据, 主要是描述数据属性(property)的信息,用来支持如指示存储位置、历史数据、资源查找、文件记录等功能.

    meta标签 , 常用的有以下几个属性:

    1. name : 比较常见的一些属性

      author: 就是这个文档的作者名称,可以用自由的格式去定义

      description: 包括一个关于页面内容的缩略而精准的描述

      keywords: 网页关键词

      referrer: 控制所有从该文档发出的 HTTP 请求中HTTP Referer 首部的内容, content可取的值请参考底部连接

      viewport: 设备视口标签 , 可用于控制页面缩放及不同设备样式适配. content 可取的值有:

         一个正整数或者字符串 device-width => 指定页面的可视宽度, 像素值或 device-width

        height: 一个正整数或者字符串 device-height => 指定页面的可视高度, 像素值或 device-height

        initial-scale: 一个 0.0 到 10.0 之间的正数 => 设置页面初始化时的缩放比例

        maximum-scale: 一个 0.0 到 10.0 之间的正数 => 设置页面最大缩放比例

        minimum-scale: 一个 0.0 到 10.0 之间的正数 => 设置页面最小缩放比例

        user-scalable: 一个布尔值(yes或者no) => 设置禁用缩放

    2. httpEquiv : 这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用 content 来定义. -摘自MDN

        content-security-policy 内容安全策略: 它允许页面作者定义当前页的 内容策略。 内容策略主要指定允许的服务器源和脚本端点,这有助于防止跨站点脚本攻击。-摘自MDN

          例如: 

            <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://cdn.bootcss.com"/>

            通过上述定义(定义了 script 脚本的加载策略)后, 浏览器就只会加载当前网站和 https://cdn.bootcss.com 网站下的脚本资源;

            不仅仅是脚本的安全策略, 还可以定义图像, style, font, plugin, video 等的安全策略;

            更加详细的内容可以参考: https://www.jianshu.com/p/28cfa8508237

        default-style 指定默认样式表: content属性必须包含<link> 元素的标题, href属性链接到CSS样式表或包含CSS样式表的<style>元素的标题.

        refresh 刷新: 如果content 只包含一个正整数,则是重新载入页面的时间间隔(秒);

              如果 content 包含一个正整数并且跟着一个字符串 ';url=' 和一个合法的 URL,则是重定向到指定链接的时间间隔(秒)

        x-ua-compatible 用于强制浏览器的渲染方式

          典型的:<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> : 默认使用chrome来渲染,然后再按照IE该浏览器的最新版本来渲染。

    3. content : 基于内容,这个属性为 http-equiv 或 name 属性提供了与其相关的值的定义. -摘自MDN

    4. charset : 此特性声明当前文档所使用的字符编码,但该声明可以被任何一个元素的 lang 特性的值覆盖。-摘自MDN

        此特性的值必须是一个符合由IANA所定义的字符编码首选MIME 名称, 关于字符编码相关可参考百度百科: https://baike.baidu.com/item/%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81/8446880?fr=aladdin

        根据声明的字符编码, 浏览器以此编码来解释你的文档, 有时候我们从网上扒下来的 demo打开显示异常, 多半是因为字符编码未正确设置的原因 ; 但也不是所有的编码都建议使用 , MDN文档中对于使用的字符编码给出了一下建议和警告;

        

    贴上部分网站的代码:

    京东首页:

      <meta charset="UTF-8">
      <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title>
      <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" />
      <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
    ...其余省略...
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="renderer" content="webkit" />

    淘宝首页:

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <title>淘宝网 - 淘!我喜欢</title>
    <meta name="spm-id" content="a21bo" />
    <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!" />
    <meta name="aplus-xplug" content="NONE">
    <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />

    天猫首页:

    <meta charset="utf-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    ...
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="date=no">
    <meta name="format-detection" content="address=no">
    <meta name="keywords" content="商城,网上购物,网购,进口食品,美容护理,母婴玩具,家用电器,手机数码,家居生活,服饰内衣,营养保健,钟表珠宝,饰品箱包,汽车生活,图书音像,礼品卡"/>
    <meta name="description" content="天猫,中国线上购物的地标网站,亚洲超大的综合性购物平台,拥有10万多品牌商家。每日发布大量国内外商品!正品网购,上天猫!天猫千万大牌正品,品类全,一站购,支付安全,退换无忧!理想生活上天猫!"/>
    
    <meta property="og:title" content="天猫">
    <meta property="og:type" content="website">
    <meta property="og:url" content=" https://www.tmall.com/">
    <meta property="og:image" content=" https://img.alicdn.com/tfs/TB1MaLKRXXXXXaWXFXXXXXXXXXX-480-260.png">
    
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    更多内容参考: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta

  • 相关阅读:
    【POJ 1958】 Strange Towers of Hanoi
    【HNOI 2003】 激光炸弹
    【POJ 3263】 Tallest Cow
    【POJ 2689】 Prime Distance
    【POJ 2777】 Count Color
    【POJ 1995】 Raising Modulo Numbers
    【POJ 1845】 Sumdiv
    6月16日省中集训题解
    【TJOI 2018】数学计算
    【POJ 1275】 Cashier Employment
  • 原文地址:https://www.cnblogs.com/liuyingde/p/8020268.html
Copyright © 2011-2022 走看看