MIP教程：如何使手機站網頁符合MIP網頁規范

文讀懂如何使您的手機站網頁符合MIP網頁規范

前面的文章中我們陸續講了什么是MIP，及MIP的作用，今天繼續談談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"> ，其中 initial-scale=1 ，同時推薦包含 minimum-scale=1 。

必須在 <head> 標簽中包含 <link rel="stylesheet" type="text/css" > 。

必須在 <head> 標簽中包含 <link rel="canonical" href="http(s)://example.com"> 。

必須在 <body> 標簽中包含 <script src="https://c.mipcdn.com/static/v1/mip.js"></script> ，如果包含在 <head> 標簽中則須增加 async 屬性。

二、給頁面添加json數據

示例：

"@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",

"@id": "http://m.0460.com/view/204254.html",

"appid": "1597528186091083",

"title":"0460網站之家移動版",

"description": "網站百科移動版為您分享：如何自動同步頭條號、微信公眾號、愛奇藝號的文章到百家號？進入百家號個人中心頁面，點擊頁面左側工具欄下的“內容助手”。",

"pubDate": "2018-05-01T16:46:00"

}</script>

三、可以根據頁面實際情況，使用MIP方式，在頁面中添加關注按鈕。讓用戶在瀏覽您的頁面時，通過關注按鈕成為您的粉絲。（可選）

提示：MIP頁面添加關注代碼后，無法即時看到效果，當搜索結果頁出現閃電標識時，即可查看關注組件效果。

添加關注功能代碼（強烈推薦）

引入熊掌號MIP組件的SDK

在頁面mip.js代碼<script src="https://c.mipcdn.com/static/v1/mip.js"></script>之后、</body>標簽前添加代碼

使用熊掌號MIP組件

<mip-cambrian site-id="1597528186091083"></mip-cambrian>

在頁面<body>標簽后添加代碼

注意：site-id為熊掌號唯一ID，請勿做任何修改，否則無法正常展現。

建議：緊挨<body>標簽添加，能夠獲得更好的體驗。

四、頁面元素使用規范（大部分可選）

MIP-HTML 禁止使用對頁面性能以及安全有較大影響的標簽，同時也規定了元素的使用方式。

標簽使用范圍備注

<img>禁止使用需替換為 <mip-img>

<video>禁止使用需替換為 <mip-video>

<audio>禁止使用需替換為 <mip-audio>

<form>禁止使用需替換為 <mip-form>

<frame>禁止使用

<frameset>禁止使用

<param>禁止使用

<applet>禁止使用

<embed>禁止使用

src 屬性存在

type 必須 text/javascript 、application/javascript 或 type 不存在（即沒有 type 屬性）

src 必須是 https 或 // 開頭

src 必須是 MIP 域名，否則禁止使用

如果在 <head> 中，必須加 async 屬性

src 屬性不存在

type 必須是 application/json 或 application/ld+json

script 不強制大小寫，不區分單雙引號

script 父節點不能是 template

<svg>允許使用

<button>允許使用

<link>允許使用

必須存在 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否屬性非空

注意：mip-img 必須存在 src 或 srcset 屬性之一

mip-pix

屬性必填備注

src是src 必須是以 http(s) 或 // 開頭的地址

mip-video

屬性必填備注

src是對于不包含 <source> 后代節點的 <mip-video> 標簽，src 屬性是強制的

mip-carousel

屬性必填備注

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) 或 // 開頭的地址

mip-link

屬性必填備注

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> 標簽里。

正確

<head>

p { color: #00f;}

</style>

</head>

<body>

<p>Hello World!</p>

</body>

錯誤

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

MIP網頁規范檢測工具

MIP頁面會有嚴格的規范校驗，不允許存在任何校驗不通過的問題存在。

好了，頁面整改完成后，可通過官方提供的MIP網頁規范檢測工具去檢測一下了。

MIP網頁規范檢測工具網址：https://www.mipengine.org/validator/validate

當然，也可通過百度熊掌號提供的在線檢測工具進行檢測。

如果網頁仍有不合規范之處，也不用著急，按照提示一步步修改就可以了。更多MIP方面的問題交流，可通過文章底部給我留言，我將一一答復，祝您建站愉快！

在大家都知道主要的三站，電腦網站手機網站和微信網站。電腦網站大家都知道具體的功能樣子，那么微信網站和手機網站有什么不同呢，讓我們一起看下。

微信網站和手機網站的區別是：微信網站可以調用微信的功能，而手機網站不能。當然你也可以用微信瀏覽器來瀏覽普通的手機網站，其實這就是微官網。微官網的另一層含義就是手機官網其實它是以展示企業或產品為主，追求簡單明了，而手機門戶網或手機資訊網，更側重于提供信息，如汽車之家網易新聞等。

手機wap網站就是適合手機看的網站。它和制作電腦網頁的制作方法相同，不過布局的時候不用準確的像素，而是使用百分比來控制，以達到在不同尺寸手機屏幕上顯示出相同的效果。

剛開始的手機網站稱為WAP網站，因為他使用的是WML協議，是指手機wap瀏覽器可瀏覽的網站，網址的開頭是wap。它用的協議和電腦上的網站是不同的，之后隨著智能手機的普及，網速的提升，以及國內手機瀏覽器的快速成長，這種基于WML協議做的網站已經很少了。現在的手機可以直接瀏覽 html網頁，所以大家現在所說的WAP網站，就是手機網站。

本文作者：某信5。4。3。5。6。7。4。1。3

TML 或超文本標記語言 允許 Web 用戶使用元素、標簽和屬性創建和構造部分、段落和鏈接。然而，值得注意的是，HTML 不能被視為一種編程語言，因為它不能創建動態功能。

HTML有很多用例，即：

網頁開發。開發人員使用 HTML 代碼來設計瀏覽器如何顯示網頁元素，例如文本、超鏈接和媒體文件。
互聯網導航。由于 HTML 被大量用于嵌入超鏈接，因此用戶可以輕松地在相關頁面和網站之間導航和插入鏈接。
網絡文檔。HTML 使組織和格式化文檔成為可能，類似于 Microsoft Word。
還值得注意的是，HTML 現在被視為官方 Web 標準。萬維網聯盟 (W3C)維護和開發 HTML 規范，同時提供定期更新。

本文將介紹 HTML 的基礎知識，包括它的工作原理、優缺點以及它與 CSS 和 JavaScript 的關系。

什么是 HTML？

HTML（代表超文本標記語言）是構成大多數網頁和在線應用程序的計算機語言。超文本是用于引用其他文本片段的文本，而標記語言是告訴 Web 服務器文檔的樣式和結構的一系列標記。

HTML 是如何工作的

在國內的網站上找了一圈，這應該是介紹歷史最細致的，長按保存手機里翻譯

html文件

平均每個網站包含幾個不同的信息 HTML 頁面。例如，主頁、關于頁面和聯系頁面都將具有單獨的 HTML 文件。

HTML 文檔是以 .html 或 .htm 擴展名結尾的文件。Web 瀏覽器讀取 HTML 文件并呈現其內容，以便互聯網用戶可以查看它。

html元素的三個部分

所有 HTML 頁面都有一系列 HTML 元素，由一組標簽和屬性組成。HTML 元素是網頁的構建塊。標簽告訴 Web 瀏覽器元素在哪里開始和結束，而屬性描述元素的特征。

元素的三個主要部分是：

開始標簽 - 用于說明元素開始生效的位置。標簽用左尖括號和右尖括號包裹。例如，使用開始標簽 <p> 創建一個段落。
內容——這是其他用戶看到的輸出。
結束標簽 - 與開始標簽相同，但在元素名稱前有一個正斜杠。例如，</p> 結束一個段落。

這三個部分的組合將創建一個 HTML 元素：

<p>這是在HTML中添加段落的方法。</p>

HTML 元素的另一個關鍵部分是它的屬性，它有兩個部分——名稱和屬性值。名稱標識用戶想要添加的附加信息，并且屬性值給出進一步的說明。

例如，添加紫色和 font-family verdana 的樣式元素將如下所示：

< p style="color:purple;font-family:verdana" >這是在HTML中添加段落的方法。< /p >

另一個屬性，HTML 類，對于開發和編程來說是最重要的。class 屬性添加了可以作用于具有相同類值的不同元素的樣式信息。例如，我們將對標題 <h1> 和段落 <p> 使用相同的樣式。樣式包括背景顏色、文本顏色、邊框、邊距和填充，在 .important 類下。要在 <h1> 和 <p> 之間實現相同的樣式，請在每個開始標記后添加 class=”important”：

<html>
<head>
<style>
.important {
  background-color: blue;
  color: white;
  border: 2px solid black;
  margin: 2px;
  padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>

大多數元素都有一個開始標簽和一個結束標簽，但有些元素不需要結束標簽即可工作，例如空元素。這些元素不使用結束標簽，因為它們沒有內容：

< img src="/" alt="圖像" >

這個圖像標簽有兩個屬性——一個src屬性，圖像路徑，和一個alt屬性，描述性文本。但是，它沒有內容，也沒有結束標簽。

最后，每個 HTML 文檔都必須以 <!DOCTYPE> 聲明開頭，以告知 Web 瀏覽器文檔類型。使用 HTML5，doctype HTML public 聲明將是：

< !DOCTYPE html >

最常用的 HTML 標簽和 HTML 元素

目前，有 142 個 HTML 標簽可以用于創建各種元素。盡管現代瀏覽器不再支持其中一些標簽，但學習所有可用的不同元素仍然是有益的。

第二節將討論最常用的 HTML 標簽和兩個主要元素——塊級元素和內聯元素。

塊級元素

塊級元素占據頁面的整個寬度。它總是在文檔中開始一個新行。例如，標題元素將位于與段落元素不同的行中。

每個 HTML 頁面都使用這三個標簽：

<html>標簽是定義整個 HTML 文檔的根元素。
<head> 標簽保存頁面標題和字符集等元信息。
<body>標簽包含了頁面上出現的所有內容。

<html>
  <head>
    <!-- META INFORMATION -->  
  </head>
  <body>
    <!-- PAGE CONTENT -->
  </body>
</html>

其他流行的塊級標簽包括：

標題標簽 - 這些范圍從 <h1> 到 <h6>，其中標題 h1 的大小最大，當它們向上移動到 h6 時變得越來越小。
段落標簽——全部使用 <p> 標簽括起來。
列表標簽——有不同的變體。<ol> 標簽用于有序列表，<ul> 用于無序列表。然后，使用 <li> 標記將各個列表項括起來。

內聯元素

內聯元素格式化塊級元素的內部內容，例如添加鏈接和強調的字符串。內聯元素最常用于在不破壞內容流的情況下格式化文本。

例如，一個 <strong> 標簽會以粗體呈現一個元素，而 <em> 標簽會以斜體顯示它。超鏈接也是使用 <a> 標記和 href 屬性來指示鏈接目標的內聯元素：

<a href="https://www.icodingdeu.com/" >點我！</a>

HTML 演變——HTML 和 HTML5 有什么區別？

HTML 的第一個版本由 18 個標簽組成。從那時起，每個新版本都帶有添加到標記中的新標簽和屬性。迄今為止，該語言最重大的升級是 2014 年引入的 HTML5。
HTML 和 HTML5的主要區別在于HTML5 支持新類型的表單控件。HTML5 還引入了幾個語義標簽，可以清楚地描述內容，例如 <article>、<header> 和 <footer>。

HTML 的優點和缺點

就像任何其他計算機語言一樣，HTML 有其優點和局限性。以下是 HTML 的優缺點：

優點：

初學者友好: HTML 具有干凈且一致的標記，以及較淺的學習曲線。
支持領域廣：該語言被廣泛使用，擁有大量資源和龐大的社區。
無障礙：它是開源的并且完全免費。HTML 在所有 Web 瀏覽器中本機運行。
靈活的：HTML很容易與PHP和 Node.js等后端語言集成。

就像任何其他計算機語言一樣，HTML 有其優點和局限性。以下是 HTML 的優缺點：

缺點：

靜止的 該語言主要用于靜態網頁。對于動態功能，您可能需要使用 JavaScript 或 PHP 等后端語言。
單獨的 HTML 頁面用戶必須為 HTML 創建單獨的網頁，即使元素相同。
瀏覽器兼容性 一些瀏覽器采用新特性的速度很慢。有時較舊的瀏覽器并不總是呈現較新的標簽。

HTML、CSS 和 Javascript 是如何相關的

HTML 用于添加文本元素并創建內容結構。然而，僅僅建立一個專業的和完全響應的網站是不夠的。因此，HTML 需要借助層級樣式表 (CSS)和JavaScript來創建絕大多數網站內容。

CSS 負責樣式，例如背景、顏色、布局、間距和動畫。
JavaScript 添加了動態功能，例如滑塊、彈出窗口和照片庫。這三種語言是前端開發的基礎。

結論

HTML 是 Internet 上的主要標記語言。每個 HTML 頁面都有一系列創建網頁或應用程序內容結構的元素。

HTML 是一種對初學者友好的語言，有很多支持，主要用于靜態網站頁面。HTML 與用于樣式的 CSS 和用于功能的 JavaScript 一起使用效果最好。

我們還向您展示了一些在線教學課程，它們將有助于提高您的 HTML 知識或提供對 HTML 的基本理解。

如果您有任何其他喜歡的資源來學習 HTML，請在評論部分告訴我們。

在線咨詢

上一篇：「光緒六年保定府」直隸省城街道全圖 - 寺廟標注（2
下一篇：Grid.js - 跨框架的前端表格插件

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

MIP教程：如何使手機站網頁符合MIP網頁規范

文讀懂如何使您的手機站網頁符合MIP網頁規范

一、頭部使用規范

二、給頁面添加json數據

三、可以根據頁面實際情況，使用MIP方式，在頁面中添加關注按鈕。讓用戶在瀏覽您的頁面時，通過關注按鈕成為您的粉絲。（可選）

四、頁面元素使用規范（大部分可選）

MIP網頁規范檢測工具

什么是 HTML？

HTML 是如何工作的

html文件

html元素的三個部分

最常用的 HTML 標簽和 HTML 元素

塊級元素

內聯元素

HTML 演變——HTML 和 HTML5 有什么區別？

HTML 的優點和缺點

HTML、CSS 和 Javascript 是如何相關的

結論

您的項目需求