把我们的网站进行MIP化改造,必须遵守MIP HTML规范,下面小编带领大家一起学习这些规范。
头部使用规范
1、起始标签使用 <!doctype html> 2、html标签必须加上mip标记,即: <html mip> 3、必须包含 <head>和 <body>标签 4、必须在head标签中包含字符集声明: <meta charset="utf-8">,字符集统一为utf-8 5、必须在head标签中包含viewport设置标签: <meta name="viewport" content="width=device-width,minimum-scale=1">,推荐包含initial-scale=1 6、必须在head标签中包含 < link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/mipmain-v1.1.1.css" > 7、必须在body标签中包含 <script src="https://mipcache.bdstatic.com/static/mipmain-v1.1.2.js" ></script > 8、必须在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 | 允许使用 | 不允许使用link标签进行样式表的加载 |
| a | 允许使用 | 不可以href="javascript:",target必须设置为_blank |
| frame | 禁止使用 |
|
| frameset | 禁止使用 |
|
| object | 禁止使用 |
|
| param | 禁止使用 |
|
| applet | 禁止使用 |
|
| embed | 禁止使用 |
|
| form | 替换为mip-form | 内部允许使用input标签 |
| nput elements | 禁止使用 |
包括: input, textareaa, select, option |
自定义样式使用规范
出于性能考虑,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
