HTML5的 meta 标签 使用汇总

2020-06-11 各大网站前端界面中的  标签

Meat对象代表HTML的一个元素，提供HTML元素的元信息，比如描述、关键字、刷新频率。对象属性：

content 设置或返回元素的content属性

httpEquiv 把content属性连接到一个HTTP头部

name 把content属性连接到某个名称

scheme 设置或返回用于解释content属性的格式

• 百度主页
• 阿里主页
• 美团主页
• 滴滴主页
• 字节跳动
• 淘宝主页
• 京东主页
• 华为主页
• 微软官网

百度主页

阿里主页

美团主页

滴滴官网

 //从桌面icon启动IOS Safari是否进入全屏状态（APP模式）
  //双核浏览的渲染方式设定
  // 手持设备优化
 //uc强制竖屏
 //QQ强制竖屏
 // 强制全屏
 //QQ强制全屏
 //浏览模式
  //QQ应用模式
 //移动端winphone系统a、input标签被点击时产生的半透明灰色背景是否去掉，点击无高光
 //指定是否将网页内容中的手机号码显示为拨号的超链接。
 // apple 触摸进入，是否进入全屏

字节跳动

 //应用设备
 //搜索引擎抓取
 //谷歌翻译
 //指定是否将网页内容中的手机号码显示为拨号的超链接。

淘宝主页

京东官网

华为官网

 //移动端代理

微软官网

总结

 有2个属性 http-equiv 和 name

http-equiv

1. Content-Type 设定网页字符集，说明网页制作所用语言和文字，浏览器会据此调用。
       //旧的HTML，不推荐
       //HTML5设定网页字符集的方式

2. X-UA-Compatible 告知浏览器以何种方式渲染当前页面
       //优先使用IE最新版本和Chrome

3. pragma Cache-Control expires 各种http强缓存方式，优先级p>c>e
    
     //不缓存
     // 7200s后缓存内容失效
     //网页到期时间，GMT格式，过期后必须到服务器上重新调用 
     //禁止浏览器从本地缓存中调取信息，一旦离开页面就无法从Cache中再调用

4. refresh 让网页在一定时间内刷新，或者一定时间后跳转到其他页面
       //30s后刷新自己
    定时让网页在指定的时间n内，跳转到页面http://yourlink；

5. Cache-Control 避免百度等浏览器打开网页时可能对其进行转码，比如 贴广告等
       //先发送请求，与服务器确认该资源是否被更改，未被更改则使用缓存

6. Content-Security-Policy 内容安全策略，指定浏览器智能加载content中的js代码，其他所有均拒绝
    

    base-uri: 用于限制可在页面的  元素中显示的网址。
    child-src: 用于列出适用于工作线程和嵌入的帧内容的网址。例如：child-src https://youtube.com 将启用来自 YouTube（而非其他来源）的嵌入视频。 使用此指令替代已弃用的 frame-src 指令。
    connect-src: 用于限制可（通过 XHR、WebSockets 和 EventSource）连接的来源。
    font-src: 用于指定可提供网页字体的来源。Google 的网页字体可通过 font-src https://themes.googleusercontent.com 启用。
    form-action: 用于列出可从 
 标记提交的有效端点。
    frame-ancestors: 用于指定可嵌入当前页面的来源。此指令适用于 、