头部使用规范

  • 页面起始标签使用 <!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 属性。

页面元素使用规范

MIP-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> 标签中使用一次
<svg> 允许使用
<button> 允许使用
<link> 允许使用
  • <link> 必须在 <head> 中
  • 必须存在 rel="miphtml" 或 rel="canonical" 的 <link> 标签
  • 拥有 rel="miphtml" 或 rel="canonical" 的标签之间或自身不能重复
  • 如果 rel="miphtml" 或 rel="canonical" ，则 href 必须以 https 、http 或 // 开头
  • 如果非 rel="miphtml" 或 rel="canonical" ，则 href 必须以非 / 开头（除 //）
  • 注：支持引入外链 CSS
<a> 允许使用
  • href 属性必填，同时其值不可以 href="javascript:"
  • MIP 页之间跳转推荐使用 <a data-type="mip">
<source> 允许使用 其父元素必须是 <mip-video>、<mip-audio>、<picutre>，其他均不可
<base> 允许使用
  • 不能存在多个
  • 必须在 <head> 标签中
  • 属性必须存在 target 或 href 属性之一
  • target 必须为 _top 、_self 或 _blank
  • href 必须 /
input elements 允许使用
  • 包括: <select> 、<option> 、 <textarea> 、<input>
  • 父元素必须是 <mip-form>
  • <source> 的 src 必须存在且非 / 开头的相对路径

自定义标签

mip-img

属性 必填 备注
src 否 属性非空
srcset 否 属性非空

[notice]mip-img 必须存在 src 或 srcset 属性之一

mip-pix

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

mip-video

属性 必填 备注
src 是 对于不包含 <source> 后代节点的 <mip-video> 标签，src 属性是强制的
属性 必填 备注
width 是 width 是 1-4 位的数字
height 是 height 是 1-4 位的数字

mip-iframe

属性 必填 备注
width 是 width 是 1-4 位的数字
height 是 height 是 1-4 位的数字

mip-appdl

属性 必填 备注
tpl 是 值为 imageText 或 noneImg
src 是 如果 tpl 为 imageText ，src 必须为 http(s) 开头，其他场景无限制
texttip 是 非空

mip-audio

属性 必填 备注
src 是 非相对路径，即 / 开头的路径

mip-stats-bidu

属性 必填 备注
token 是 非空

mip-form

属性 必填 备注
method 否 值为 get 或 post
url 是 必须是 http(s) 或 // 开头的地址
属性 必填 备注
href 是 值为非 javascript:

mip-ad && mip-embed

属性 必填 备注
type 是 -

mip-vd-baidu

属性 必填 备注
src 是 src 必须是 http(s) 或 // 开头
title 是 非空
poster 是 非空

template

属性 必填 备注
type 是 -

HTML 属性

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

自定义样式使用规范

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

正确

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

错误

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

[info] 所有 MIP 规范都可以通过 MIP 代码校验工具进行快速检查，帮忙开发者迅速定位到问题！