MIP HTML 规范

MIP 规范是高性能 MIP 页面的保证,其中最重要的规范是:MIP HTML 规范。按照页面功能区域划分,MIP HTML 规范主要分为以下列出的若干类型。

提示: 所有 MIP 规范都可以通过 MIP 代码校验工具进行快速检查,帮忙开发者迅速定位到问题!校验工具的提示信息解读请参考 MIP 校验错误列表

由于规范长期更新,更多最新规范可查阅 MIP 官方网站 MIP HTML规范章节。也同时欢迎开发者到 MIP 项目的 GitHub,参与 MIP HTML 规范的讨论。

头部使用规范

下面简要列出MIP页头部的使用规范。头部是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">,推荐包含minimum-scale=1
  • 必须在<head> 标签中包含<link rel="stylesheet" type="text/css" href="https:// c.mipcdn.com/static/v2/mip.css" >
  • 必须在 <head> 标签中包含 <link rel="canonical" href="http(s)://example.com"> ,详情请阅读 Canonical 使用规范
  • 必须在 <body> 标签底部包含 <script src="https://c.mipcdn.com/static/v2/mip.js"></script> ,如果包含在 <head> 标签中则须增加 async 属性。

因此一个满足 MIP 头部使用规范的最简页面如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html> <html mip> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="canonical" href="https://www.mipengine.org"> <link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v2/mip.css"> </head> <body> <!-- 页面内容 --> <script src="https://c.mipcdn.com/static/v2/mip.js" async="async"></script> </body> </html>

页面元素使用规范

MIP-HTML 禁止使用对页面性能以及安全有较大影响的标签,同时也规定了元素的使用方式。

标签使用范围备注
<a>允许使用
  • href 属性必填,同时其值不可以 href="javascript:"
  • MIP 页之间跳转推荐添加 data-type="mip" 属性,以获得更好的页面切换效果: <a data-type="mip">
<applet>禁止使用
<audio>禁止使用需替换为 <mip-audio>
<base>允许使用
  • 不能存在多个
  • 必须在 <head> 标签中
  • 属性必须存在 targethref 属性之一
  • target 必须为 _top_self_blank
  • href 必须 /
<button>允许使用
<embed>禁止使用
<form>禁止使用需替换为 <mip-form>
<frame>禁止使用
<frameset>禁止使用
<iframe>禁止使用需替换为 <mip-iframe>
<img>禁止使用需替换为 <mip-img>
input elements允许使用
  • 包括: <select><option><textarea><input>
  • 父元素必须是 <mip-form>
  • <source>src 必须存在且非 / 开头的相对路径
<link>允许使用
  • <link> 必须在 <head>
  • 必须存在 rel="miphtml"rel="canonical"<link> 标签
  • 拥有 rel="miphtml" 或 rel="canonical" 的标签之间或自身不能重复
  • 如果 rel="miphtml"rel="canonical" ,则 href 必须以 httpshttp// 开头
  • 如果非 rel="miphtml"rel="canonical" ,则 href 必须以非 / 开头(除 //
  • 注:支持引入外链 CSS
<object>禁止使用
<param>禁止使用
<script>
<script type="text/javascript">
<script type="application/javascript">
限制使用
  • 仅允许用于加载 MIP JS、MIP 组件 JS
  • 禁止用于自定义 JS
  • <script> 应放在页面底部加载,并建议添加 async 属性。如放在 <head> 里面加载,则必须添加 async 属性防止 JS 加载阻塞页面渲染。
<script type="application/json">
<script type="type="application/ld+json">
允许使用一般作为 MIP 组件的复杂配置项使用
<source>允许使用其父元素必须是 <mip-video><mip-audio><picutre>,其他均不可
<style>限制使用只能在 <head> 标签中使用一次,并且添加 mip-custom 属性,如:<style mip-custom></style>
<svg>允许使用
<video>禁止使用需替换为 <mip-video>

HTML 元素属性规范

全局属性规范

这些规范无论是原生的 HTML 标签或者是 MIP 组件都必须遵守的。

属性使用范围备注
所有 on* 开头的属性
onclick
onmouseover
禁止使用使用 MIP 事件机制代替
style禁止使用改为使用 class

MIP 组件使用规范

MIP 官方组件根据各自组件的功能需求同样也需要遵守一些规范。

mip-img

属性必填备注
src
srcset
ip-img 必须存在 srcsrcset 属性之一
width
height
layout
建议防止页面加载时由于图片加载过慢而导致页面抖动,并可能会影响到 MIP 首屏渲染计算错误。
请阅读 样式和布局 进行页面展示优化的学习。

mip-pix

属性必填备注
srcsrc 必须是以 http(s)// 开头的地址

mip-video

属性必填备注
src对于不包含 <source> 后代节点的 <mip-video> 标签,src 属性是强制的
width
height
layout
建议防止页面加载时由于视频加载过慢而导致页面抖动,并可能会影响到 MIP 首屏渲染计算错误。
请阅读 样式和布局 进行页面展示优化的学习。

mip-carousel

属性必填备注
width
height
layout
防止页面加载时由于图片加载过慢而导致页面抖动,并可能会影响到 MIP 首屏渲染计算错误。
请阅读 样式和布局 进行页面展示优化的学习。

mip-iframe

属性必填备注
width
height
layout
防止页面加载时由于 iframe 网页内容加载过慢而导致页面抖动,并可能会影响到 MIP 首屏渲染计算错误。
请阅读 样式和布局 进行页面展示优化的学习。

mip-appdl

属性必填备注
tpl值为 imageTextnoneImg
src如果 tplimageTextsrc 必须为 http(s) 开头,其他场景无限制
texttip非空

mip-audio

属性必填备注
src必须是 以https://// 开头的路径

mip-stats-bidu

属性必填备注
token非空

mip-form

属性必填备注
method值为 getpost
url必须是 http(s)// 开头的地址

mip-ad && mip-embed

属性必填备注
type-

mip-vd-baidu

属性必填备注
srcsrc 必须是 http(s)// 开头
title非空
poster非空
width
height
layout
防止页面加载时由于视频加载过慢而导致页面抖动,并可能会影响到 MIP 首屏渲染计算错误。
请阅读 样式和布局 进行页面展示优化的学习。

template

属性必填备注
type-

自定义样式使用规范

MIP 允许开发者自定义样式来修饰网页。我们从性能和体验的角度出发,同样制定了自定义样式规范来保证页面体验。在此之前,强烈建议开发者学习 样式和布局 一文,了解如何使用 MIP 提供的机制来提高页面渲染效率。

出于性能考虑,HTML 中不允许使用内联 style,所有样式只能放到 <head><style mip-custom> 标签里。

正确方式:

1
2
3
4
5
6
7
8
<head> <style mip-custom> p { color: #00f;} </style> </head> <body> <p>Hello World!</p> </body>

错误方式:

1
2
3
4
5
6
7
8
<!-- 禁止使用 style 属性 --> <p style="color:#00f;">Hello World!</p> <p> <!-- 禁止在 body 中使用 style 标签 --> <style> p { color: #00f; } </style> </p>

样式属性规范如下表所示:

属性适用范围说明
position: fixed禁止使用请使用 <mip-fixed> 组件替代
!important建议少用
CSS3 样式,如:
display: flex
transition
transform
允许使用需自行处理兼容性问题

同时需要注意的是,在 class 的命名上,为避免与 MIP 内部使用的类名冲突,因此不要以 mip-*i-mip-* 作为自定义 class 的名称。