后台-插件-广告管理-内容页广告位一(手机)

您现在的位置是:首页 > HTML技巧 > HTML技巧

新手快速入门百度MIP

2018-11-09 16:53 HTML技巧 人已围观

简介其实百度mip并没有想象中那么难的,记住要领就可以事半功倍,下面就说说两个该注意小点:1.百度mip禁用的标签,替换的标签,2.头部使用规范,还有官方所提供的MIP代码校验工具检测自

头部使用规范:
 

页面起始标签使用 <!doctype html> 。

 

<html> 标签必写且唯一,同时必须存在 mip 属性,即:<html mip> 。

 

<head> 标签必写且唯一,其父元素必须是 <html> 标签。

 

<body> 标签必写且唯一,其父元素必须是 <html> 标签。

 

必须在 <head> 标签中包含字符集声明 <meta charset="utf-8"> ,不区分大小写,同时页面字符集必须使用 UTF-8 。

 

必须在 <head> 标签中包含 viewport 设置标签 <meta name="viewport" content="width=device-width,initial-scale=1"> ,其中 initial-scale=1 ,同时推荐包含 minimum-scale=1 。

 

必须在 <head> 标签中包含 <link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css"> 。

 

必须在 <head> 标签中包含 <link rel="canonical" href="http(s)://example.com"> 。

 

必须在 <body> 标签中包含 <script src="https://c.mipcdn.com/static/v1/mip.js"></script> ,如果包含在 <head> 标签中则须增加 async 属性。

是不是看了之后头晕乱坠?
不要紧,冰洁给大伙们提供了比较直接的代码,如下:

<!DOCTYPE html>
<html mip>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
        <link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css">
        <link rel="canonical" href="https://www.bengenseo.com">
        <title>demo</title>
        <style mip-custom>
            h1 { color: #00f;}
        </style>
    </head>
    <body>
        <h1>冰洁小经验!</h1>
        <script src="https://c.mipcdn.com/static/v1/mip.js" type="text/javascript"></script>
    </body>
</html>



页面元素使用规范:
禁用的标签列表

标签

使用范围

备注

<img>

禁止使用

需替换为 <mip-img>

<video>

禁止使用

需替换为 <mip-video>

<audio>

禁止使用

需替换为 <mip-audio>

<iframe>

禁止使用

需替换为 <mip-iframe>

<form>

禁止使用

需替换为 <mip-form>

<frame>

禁止使用

 

<frameset>

禁止使用

 

<object>

禁止使用

 

<param>

禁止使用

 

<applet>

禁止使用

 

<embed>

禁止使用

 

<script>

限制使用

禁止使用 <script> 不包括以下两种场景:

src 属性存在

type 必须 text/javascript 、application/javascript 或 type 不存在(即没有 type 属性)

src 必须是 https 或 // 开头

src 必须是 MIP 域名,否则禁止使用

如果在 <head> 中,必须加 async 属性

src 属性不存在

type 必须是 application/json 或 application/ld+json

script 不强制大小写,不区分单双引号

script 父节点不能是 template

<style>

替换为 <style mip-custom>

只能在 <head> 标签中使用一次


mip-img标签的写法:

<mip-img
    layout="responsive"
    width="350"
    height="263"
    popup
    alt="baidu mip img"
    src="https://www.mipengine.org/static/img/sample_01.jpg">
</mip-img>


其他注意点:
自定义样式使用规范
出于性能考虑,HTML 中不允许使用内联 style ,所有样式只能放到 <head> 的 <style> 标签里。

正确写法,如下:

 

<head>
    <style mip-custom>
        p { color: #00f;}
    </style>
</head>
<body>
    <p>Hello World!</p>
</body>


不知道自己写得正不正确,官方给出了MIP 代码校验工具https://www.mipengine.org/validator/validate 可以快速检查。

Tags:百度快排 快速排名 

很赞哦!+

相关文章

后台-插件-广告管理-内容页广告位四(手机)

站点信息

  • 文章统计177篇文章
  • 浏览统计20379次浏览
  • 评论统计24个评论
  • 标签管理标签云
  • 统计数据:统计代码
  • 微信公众号:扫描二维码,关注我们