MIP HTML規(guī)范

2018-11-07 17:28 更新

頭部使用規(guī)范

  • 起始標(biāo)簽使用 <!doctype html>

  • html標(biāo)簽必須加上mip標(biāo)記，即: <html mip>

  • 必須包含 <head>和 <body>標(biāo)簽

  • 必須在head標(biāo)簽中包含字符集聲明: <meta charset="utf-8">，字符集統(tǒng)一為utf-8

  • 必須在head標(biāo)簽中包含viewport設(shè)置標(biāo)簽: <meta name="viewport" content="width=device-width,minimum-scale=1">，推薦包含initial-scale=1

  • 必須在head標(biāo)簽中包含 < link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/mipmain-v1.1.1.css" >

  • 必須在body標(biāo)簽中包含 <script src="https://mipcache.bdstatic.com/static/mipmain-v1.1.2.js" ></script >

  • 必須在head標(biāo)簽中包含 <link rel="canonical" href="http(s)://xxx" >

頁面元素使用規(guī)范

MIP HTML 禁止使用對(duì)頁面性能以及安全有較大影響的標(biāo)簽，請(qǐng)將其替換為MIP的特有標(biāo)簽（例如:將img標(biāo)簽替換為mip-img）:

標(biāo)簽使用范圍備注
img替換為mip-img 
video替換為mip-video 
audio替換為mip-audio 
iframe替換為mip-iframe 
style替換為<style mip-custom>只能在head標(biāo)簽中使用一次
script禁止使用禁止使用script標(biāo)簽, 以下兩種情況除外：1）外鏈mip組件所需js，2）type為 "application/ld+json" 或 "application/json"
svg允許使用 
button允許使用 
link允許使用不允許使用link標(biāo)簽進(jìn)行樣式表的加載
a允許使用不可以href="javascript:"，target必須設(shè)置為_blank
frame禁止使用 
frameset禁止使用 
object禁止使用 
param禁止使用 
applet禁止使用 
embed禁止使用 
form替換為mip-form內(nèi)部允許使用input標(biāo)簽
input elements禁止使用包括: input, textareaa, select, option

自定義樣式使用規(guī)范

出于性能考慮，html 中不允許使用內(nèi)聯(lián)style，所有樣式只能放到head 的 style 標(biāo)簽里。

  • 正確：
<head>
    <style mip-custom>
        p { color: #00f;}
    </style>
</head>
<body>
    <p>Hello World!</p>
</body>
  • 錯(cuò)誤：
<p style="color:#00f;">Hello World!</p>

驗(yàn)證規(guī)范

MIP校驗(yàn)工具地址：https://www.mipengine.org/validator/validate

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)