该网站为IT技术、SEO技术、网络营销及推广分享博客,如有技术问题,可以互相交流,本人时间很重要,广告勿扰,联系QQ:747995996
当前位置:首页 > HTML技巧 > 正文

新手快速入门百度MIP

11-09 HTML技巧

头部使用规范:
 

页面起始标签使用 <!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 可以快速检查。

转载请保留链接: http://www.bengenseo.com/html/41.html