MIP-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 属性。

页面元素使用规范

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/javascriptapplication/javascripttype 不存在(即没有 type 属性)
    • src 必须是 https// 开头
    • src 必须是 MIP 域名,否则禁止使用
    • 如果在 <head> 中,必须加 async 属性
  • src 属性不存在
    • type 必须是 application/jsonapplication/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 必须以 httpshttp// 开头
  • 如果非 rel="miphtml"rel="canonical" ,则 href 必须以非 / 开头(除 //
  • 注:支持引入外链 CSS
<a>允许使用
  • href 属性必填,同时其值不可以 href="javascript:"
  • MIP 页之间跳转推荐使用 <a data-type="mip">
<source>允许使用其父元素必须是 <mip-video><mip-audio><picutre>,其他均不可
<base>允许使用
  • 不能存在多个
  • 必须在 <head> 标签中
  • 属性必须存在 targethref 属性之一
  • target 必须为 _top_self_blank
  • href 必须 /
input elements允许使用
  • 包括: <select><option><textarea><input>
  • 父元素必须是 <mip-form>
  • <source>src 必须存在且非 / 开头的相对路径

自定义标签

mip-img

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

注意:mip-img 必须存在 srcsrcset 属性之一

mip-pix

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

mip-video

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

mip-iframe

属性必填备注
widthwidth 是 1-4 位的数字
heightheight 是 1-4 位的数字

mip-appdl

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

mip-audio

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

mip-stats-bidu

属性必填备注
token非空

mip-form

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

mip-ad && mip-embed

属性必填备注
type-

mip-vd-baidu

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

template

属性必填备注
type-

HTML 属性

  • MIP-HTML 中所有 on 开头的属性都不允许使用,如:onclickonmouseover
  • 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 规范都可以通过 MIP 代码校验工具进行快速检查,帮忙开发者迅速定位到问题!