百度mip案例html参考

时间：2017-01-11 15:58:47 　来源：免费模板网　作者：风雪　阅读次数　tags百度 mip

MIP HTML规范

头部使用规范

起始标签使用 <!doctype html>
html标签必须加上mip标记，即: <html mip>
必须包含 <head>和 <body>标签
必须在head标签中包含字符集声明: <meta charset="utf-8">，字符集统一为utf-8
必须在head标签中包含viewport设置标签: <meta name="viewport" content="width=device-width,initial-scale=1">，推荐包含minimum-scale=1
必须在head标签中包含 < link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css" >
必须在body标签中包含 <script src="https://mipcache.bdstatic.com/static/v1/mip.js" ></script >
必须在head标签中包含 <link rel="canonical" href="http(s)://xxx" >

页面元素使用规范

MIP HTML 禁止使用对页面性能以及安全有较大影响的标签，请将其替换为MIP的特有标签（例如:将img标签替换为mip-img）:

标签	使用范围	备注
img	替换为mip-img
video	替换为mip-video
audio	替换为mip-audio
iframe	替换为mip-iframe
style	替换为<style mip-custom>	只能在head标签中使用一次
script	禁止使用	禁止使用script标签, 以下两种情况除外：1）外链mip组件所需js，2）type为 "application/ld+json" 或 "application/json"
svg	允许使用
button	允许使用
link	允许使用
a	允许使用,建议使用mip-link组件代替	不可以href="javascript："，target必须设置为_blank
frame	禁止使用
frameset	禁止使用
object	禁止使用
param	禁止使用
applet	禁止使用
embed	禁止使用
form	替换为mip-form	内部允许使用input、textarea标签
input elements	禁止使用	包括: select, option

HTML 属性

MIP HTML 中所有 on 开头的属性都不允许使用，如：onclick，onmouseover。
MIP HTML 中允许使用 on 属性。
MIP HTML 中不允许使用 style 属性。

自定义样式使用规范

出于性能考虑，html 中不允许使用内联style，所有样式只能放到head 的 style 标签里。

正确：

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

错误：

<p style="color:#00f;">Hello World!</p>

验证规范

MIP校验工具地址：https://www.mipengine.org/validator/validate

一个完整的例子

<!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://mipcache.bdstatic.com/static/v1/mip.css">
        <!--TODO: canonical href需要替换成原页面url-->
        <link rel="canonical" href="https://m.baidu.com/demo.html">
        <title>Hello World</title>
        <style mip-custom>
            body{margin:10px;}
            .red-text { color: red;}
            .middle-text { text-align: center;}
            .small-pic { max-width: 200px;}
        </style>
    </head>
    <body>
        <!--自定义样式-->
        <p class="red-text">MIP页支持修改css样式</p>
        <p class="middle-text">我是居中的文字</p>
        <hr>
        <!--图片组件-->
        <p class="middle-text">&lt;mip-img&gt; 图片组件</p>
        <div class="small-pic">
            <mip-img src="https://www.mipengine.org/static/img/mip_logo_3b722d7.png">
                <p>图片说明文字</p>
            </mip-img>
        </div>
        <hr>
        <!--分享组件-->
        <p class="middle-text">&lt;mip-share&gt; 分享组件</p>
        <mip-share title="分享：我的第一个MIP页面"></mip-share>
        <hr>
        <!--百度统计组件 TODO: 修改token值-->
        <p class="middle-text">&lt;mip-stats-baidu&gt; 百度统计组件，代码可见</p>
        <mip-stats-baidu token="4e397f684261b9e4ff9d8"></mip-stats-baidu>
        <!--mip 运行环境-->
        <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>
        <!--分享组件 代码-->
        <script src="https://mipcache.bdstatic.com/static/v1/mip-share/mip-share.js"></script>
        <!--百度统计组件 代码-->
        <script src="https://mipcache.bdstatic.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script>
    </body>
</html>