MIP 校驗規(guī)則

2018-11-07 17:28 更新

MIP頁面會有嚴格的規(guī)范校驗,不允許存在任何校驗不通過的問題存在.

MIP校驗工具地址:https://www.mipengine.org/validator/validate

本文檔意在幫助開發(fā)者找到校驗的內容和規(guī)則,快速定位校驗不通過的原因

MIP HTML 標簽和屬性錯誤

1. 缺少強制性標簽

提示MANDATORY_TAG_MISSING
錯誤說明"The mandatory tag '%1' is missing or incorrect."
錯誤說明強制性標簽'xxx'缺失或錯誤
修復方法添加(或者更正)強制性html標簽

在MIP HTML中,強制性標簽包括:

說明備注
<!doctype html>大小寫均可
<html mip>強制小寫
<head>強制小寫
<meta charset="utf-8">utf-8不區(qū)分大小寫,無單引號或者雙引號限制
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">強制小寫,無單引號或者雙引號限制
< link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/mipmain-v1.1.1.css" >強制小寫,無單引號或者雙引號限制,v1.1.1會根據(jù)版本不同而不同
<script src="https://mipcache.bdstatic.com/static/mipmain-v1.1.2.js" ></script >強制小寫,無單引號或者雙引號限制,v1.1.2會根據(jù)版本不同而不同
<body>強制小寫
<link rel="canonical" href="http(s)://xxx">強制小寫
  • P.S.: meta 標簽 name="viewport" 時, content的值必須且最少含有 width=device-width, minimum-scale=1 以及 initial-scale=1這3個屬性且順序不固定。

2. 禁用標簽

提示DISALLOWED_TAG
錯誤說明"The tag '%1' is disallowed."
錯誤說明禁止使用'xx'標簽
修復方法刪除禁用標簽

目前mip中標簽使用規(guī)則:

禁止使用標簽有:

  • frame
  • frameset
  • object
  • param
  • applet
  • embed
  • form
  • input
  • textarea
  • select
  • option

如果有如下標簽需要進行替換

標簽替換后標簽
imgmip-img
videomip-video(暫未開放)
audiomip-audio(暫未開放)

其他說明:

  • style:僅允許在head標簽中使用style標簽,不允許在任何標簽中單獨使用 style 屬性,詳見自定義樣式使用規(guī)范。
  • script:僅允許外鏈 MIP 所需要的js腳本,或type是application/ld+json的情況
注意:
1. 可以把img/video/audio/iframe視為禁用標簽
2. <p style="color: #000;"> 錯

3. 無效屬性值

提示INVALID_ATTR_VALUE
錯誤說明"The attribute '%1' in tag '%2' is set to the invalid value '%3'."
錯誤說明標簽'xx'中的屬性'xx'的屬性值'xx'無效
修復方法修改為有效屬性值

當html標簽有屬性值不正確的時候,會報這個錯誤。mip中需要注意的有:

  • a:href屬性不允許使用javascript:協(xié)議,

  • a:target屬性需要設置為_blank

  • mip-img

    • src:必須是一個url
  • mip-pix

    • src:必須是一個支持https的地址url,
    • 如果不支持https適用百度提供的https代理,url中帶t={TIME}&title={TITLE}&host={HOST}&from=baidu"
  • 其他html基本頁面屬性規(guī)范不變

注意:
1. MIP HTML中的url強制是https的
2. <a>標簽:

<a href="javascript:xxx()"></a> 錯
<a href="xxx" target="_blank"></a> 對

4. 屬性值的無效值

提示INVALID_PROPERTY_VALUE_IN_ATTR_VALUE
錯誤說明"The property '%1' in attribute '%2' in tag '%3' is set to '%4', which is invalid."
錯誤說明標簽'xx'中存在屬性'yy','yy'中存在屬性'zz',屬性'zz'的屬性值'aa'無效
修復方法更正無效屬性值

可能出現(xiàn)屬性值的無效值的情況:

  • <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    • width的屬性值device-width
    • minimum-scale的屬性值1
    • initial-scale的屬性值1
  • <script type="application/ld+json"></script>

  • <script type="application/json"></script>

    • 除了外鏈 MIP 所需 js,script標簽的type的屬性值應該為application/ld+json 或 application/json
注意:
1. 除上述給出的值外均為無效值

5. 缺少強制性屬性

提示MANDATORY_ONEOF_ATTR_MISSING
錯誤說明"The tag '%1' is missing a mandatory attribute - pick one of %2."
錯誤說明標簽'xx'的強制性屬性'xx'缺失
修復方法添加正確是屬性

mip html中具有強制性屬性的標簽及其強制性屬性有:

  • mip-img
    • src
  • mip-pix
    • src

6. 直接父標簽錯誤

提示WRONG_PARENT_TAG
錯誤說明"The parent tag of tag '%1' is '%2', but it can only be '%3'."
錯誤說明標簽'a'的直接父標簽應該是'b',而不是'c'
修復方法添加所需的父標簽

有一些標簽有制定的直接父標簽,如下示例給出了每個標簽必須的直接父標簽:

  • !doctype 的直接父標簽是 root
  • head 的直接父標簽是 html
  • body 的直接父標簽是 html
  • link 的直接父標簽是 head
  • meta 的直接父標簽是 head
  • style mip-custom 的直接父標簽是 head
  • style 的直接父標簽是 boilerplate

7. 非法父級標簽

提示DISALLOWED_TAG_ANCESTOR
錯誤說明"The tag '%1' may not appear as a descendant of tag '%2'."
錯誤說明標簽'a'不應該是標簽'b'的子標簽
修復方法刪除非法嵌套標簽

如:

  • <body>的子標簽寫在了<head>

8. 強制父級標簽

提示MANDATORY_TAG_ANCESTOR
錯誤說明"The tag '%1' may only appear as a descendant of tag '%2'."
錯誤說明M標簽'a'只能是標簽'b'的子級標簽
修復方法刪除標簽或者給標簽添加正確的父級標簽
  • img 必須是noscript的子級標簽
  • video 必須是noscript的子級標簽
  • audio 必須是noscript的子級標簽
  • noscript必須是body的子級標簽

9. 唯一標簽重復

提示DUPLICATE_UNIQUE_TAG
錯誤說明"The tag '%1' appears more than once in the document."
錯誤說明標簽'xx'只能出現(xiàn)一次
修復方法刪除多余的標簽

一份html中,有的標簽具有唯一性,也就是說只能出現(xiàn)一次,當html中有重復的唯一標簽的時候,應該報錯。

以下是唯一標簽列表:

  • <doctype html>
  • <html mip>
  • <head>
  • <link rel="canonical" href=...>
  • <link rel="standardhtml" href=...>
  • <link rel="miphtml" href=...>
  • <meta charset="utf-8">
  • <meta viewport>
  • <style mip-custom>
  • <body>
以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號