整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
前面的文章中我們陸續(xù)講了什么是MIP，及MIP的作用，今天繼續(xù)談?wù)凪IP的相關(guān)話題。
那么，如何使手機(jī)站網(wǎng)頁合乎MIP網(wǎng)頁規(guī)范，可主要從以下幾個(gè)方面改造：
頁面起始標(biāo)簽使用 <!doctype html> 。
<html> 標(biāo)簽必寫且唯一，同時(shí)必須存在 mip 屬性，即：<html mip> 。
<head> 標(biāo)簽必寫且唯一，其父元素必須是 <html> 標(biāo)簽。
<body> 標(biāo)簽必寫且唯一，其父元素必須是 <html> 標(biāo)簽。
必須在 <head> 標(biāo)簽中包含字符集聲明 <meta charset="utf-8"> ，不區(qū)分大小寫，同時(shí)頁面字符集必須使用 UTF-8 。
必須在 <head> 標(biāo)簽中包含 viewport 設(shè)置標(biāo)簽 <meta name="viewport" content="width=device-width,initial-scale=1"> ，其中 initial-scale=1 ，同時(shí)推薦包含 minimum-scale=1 。
必須在 <head> 標(biāo)簽中包含 <link rel="stylesheet" type="text/css" > 。
必須在 <head> 標(biāo)簽中包含 <link rel="canonical" href="http(s)://example.com"> 。
必須在 <body> 標(biāo)簽中包含 <script src="https://c.mipcdn.com/static/v1/mip.js"></script> ，如果包含在 <head> 標(biāo)簽中則須增加 async 屬性。
示例：
<script type="application/ld+json">{
"@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
"@id": "http://m.0460.com/view/204254.html",
"appid": "1597528186091083",
"title":"0460網(wǎng)站之家移動版",
"description": "網(wǎng)站百科移動版為您分享：如何自動同步頭條號、微信公眾號、愛奇藝號的文章到百家號？進(jìn)入百家號個(gè)人中心頁面，點(diǎn)擊頁面左側(cè)工具欄下的“內(nèi)容助手”。",
"pubDate": "2018-05-01T16:46:00"
}</script>
提示：MIP頁面添加關(guān)注代碼后，無法即時(shí)看到效果，當(dāng)搜索結(jié)果頁出現(xiàn)閃電標(biāo)識時(shí)，即可查看關(guān)注組件效果。
添加關(guān)注功能代碼（強(qiáng)烈推薦）
引入熊掌號MIP組件的SDK
<script src="https://c.mipcdn.com/extensions/platform/v1/mip-cambrian/mip-cambrian.js"></script>
在頁面mip.js代碼<script src="https://c.mipcdn.com/static/v1/mip.js"></script>之后、</body>標(biāo)簽前添加代碼
使用熊掌號MIP組件
<mip-cambrian site-id="1597528186091083"></mip-cambrian>
在頁面<body>標(biāo)簽后添加代碼
注意：site-id為熊掌號唯一ID，請勿做任何修改，否則無法正常展現(xiàn)。
建議：緊挨<body>標(biāo)簽添加，能夠獲得更好的體驗(yàn)。
MIP-HTML 禁止使用對頁面性能以及安全有較大影響的標(biāo)簽，同時(shí)也規(guī)定了元素的使用方式。
標(biāo)簽使用范圍備注
<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 不強(qiáng)制大小寫，不區(qū)分單雙引號
script 父節(jié)點(diǎn)不能是 template
<style>替換為 <style mip-custom>只能在 <head> 標(biāo)簽中使用一次
<svg>允許使用
<button>允許使用
<link>允許使用
<link> 必須在 <head> 中
必須存在 rel="miphtml" 或 rel="canonical" 的 <link> 標(biāo)簽
擁有 rel="miphtml" 或 rel="canonical" 的標(biāo)簽之間或自身不能重復(fù)
如果 rel="miphtml" 或 rel="canonical" ，則 href 必須以 https 、http 或 // 開頭
如果非 rel="miphtml" 或 rel="canonical" ，則 href 必須以非 / 開頭（除 //）
注：支持引入外鏈 CSS
<a>允許使用
href 屬性必填，同時(shí)其值不可以 href="javascript："
MIP 頁之間跳轉(zhuǎn)推薦使用 <a data-type="mip">
<source>允許使用其父元素必須是 <mip-video>、<mip-audio>、<picutre>，其他均不可
<base>允許使用
不能存在多個(gè)
必須在 <head> 標(biāo)簽中
屬性必須存在 target 或 href 屬性之一
target 必須為 _top 、_self 或 _blank
href 必須 /
input elements允許使用
包括: <select> 、<option> 、 <textarea> 、<input>
父元素必須是 <mip-form>
<source> 的 src 必須存在且非 / 開頭的相對路徑
自定義標(biāo)簽
mip-img
屬性必填備注
src否屬性非空
srcset否屬性非空
注意：mip-img 必須存在 src 或 srcset 屬性之一
mip-pix
屬性必填備注
src是src 必須是以 http(s) 或 // 開頭的地址
mip-video
屬性必填備注
src是對于不包含 <source> 后代節(jié)點(diǎn)的 <mip-video> 標(biāo)簽，src 屬性是強(qiáng)制的
mip-carousel
屬性必填備注
width是width 是 1-4 位的數(shù)字
height是height 是 1-4 位的數(shù)字
mip-iframe
屬性必填備注
width是width 是 1-4 位的數(shù)字
height是height 是 1-4 位的數(shù)字
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 屬性。
自定義樣式使用規(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>
MIP頁面會有嚴(yán)格的規(guī)范校驗(yàn)，不允許存在任何校驗(yàn)不通過的問題存在。
好了，頁面整改完成后，可通過官方提供的MIP網(wǎng)頁規(guī)范檢測工具去檢測一下了。
MIP網(wǎng)頁規(guī)范檢測工具網(wǎng)址：https://www.mipengine.org/validator/validate
當(dāng)然，也可通過百度熊掌號提供的在線檢測工具進(jìn)行檢測。
如果網(wǎng)頁仍有不合規(guī)范之處，也不用著急，按照提示一步步修改就可以了。更多MIP方面的問題交流，可通過文章底部給我留言，我將一一答復(fù)，祝您建站愉快！
在大家都知道主要的三站，電腦網(wǎng)站手機(jī)網(wǎng)站和微信網(wǎng)站。電腦網(wǎng)站大家都知道具體的功能樣子，那么微信網(wǎng)站和手機(jī)網(wǎng)站有什么不同呢，讓我們一起看下。
微信網(wǎng)站和手機(jī)網(wǎng)站的區(qū)別是：微信網(wǎng)站可以調(diào)用微信的功能，而手機(jī)網(wǎng)站不能。當(dāng)然你也可以用微信瀏覽器來瀏覽普通的手機(jī)網(wǎng)站，其實(shí)這就是微官網(wǎng)。微官網(wǎng)的另一層含義就是手機(jī)官網(wǎng)其實(shí)它是以展示企業(yè)或產(chǎn)品為主，追求簡單明了，而手機(jī)門戶網(wǎng)或手機(jī)資訊網(wǎng)，更側(cè)重于提供信息，如汽車之家網(wǎng)易新聞等。
手機(jī)wap網(wǎng)站就是適合手機(jī)看的網(wǎng)站。 它和制作電腦網(wǎng)頁的制作方法相同，不過布局的時(shí)候不用準(zhǔn)確的像素，而是使用百分比來控制 ，以達(dá)到在不同尺寸手機(jī)屏幕上顯示出相同的效果。
剛開始的手機(jī)網(wǎng)站稱為WAP網(wǎng)站，因?yàn)樗褂玫氖荳ML協(xié)議，是指手機(jī)wap瀏覽器可瀏覽的網(wǎng)站，網(wǎng)址的開頭是wap。它用的協(xié)議和電腦上的網(wǎng)站是不同的，之后隨著智能手機(jī)的普及，網(wǎng)速的提升，以及國內(nèi)手機(jī)瀏覽器的快速成長，這種基于WML協(xié)議做的網(wǎng)站已經(jīng)很少了。現(xiàn)在的手機(jī)可以直接瀏覽 html網(wǎng)頁， 所以大家現(xiàn)在所說的WAP網(wǎng)站，就是手機(jī)網(wǎng)站。
本文作者：某信5。4。3。5。6。7。4。1。3
TML 或超文本標(biāo)記語言 允許 Web 用戶使用元素、標(biāo)簽和屬性創(chuàng)建和構(gòu)造部分、段落和鏈接。然而，值得注意的是，HTML 不能被視為一種編程語言，因?yàn)樗荒軇?chuàng)建動態(tài)功能。
HTML有很多用例，即：
本文將介紹 HTML 的基礎(chǔ)知識，包括它的工作原理、優(yōu)缺點(diǎn)以及它與 CSS 和 JavaScript 的關(guān)系。
HTML（代表超文本標(biāo)記語言）是構(gòu)成大多數(shù)網(wǎng)頁和在線應(yīng)用程序的計(jì)算機(jī)語言。超文本是用于引用其他文本片段的文本，而標(biāo)記語言是告訴 Web 服務(wù)器文檔的樣式和結(jié)構(gòu)的一系列標(biāo)記。
在國內(nèi)的網(wǎng)站上找了一圈，這應(yīng)該是介紹歷史最細(xì)致的，長按保存手機(jī)里翻譯
平均每個(gè)網(wǎng)站包含幾個(gè)不同的信息 HTML 頁面。例如，主頁、關(guān)于頁面和聯(lián)系頁面都將具有單獨(dú)的 HTML 文件。
HTML 文檔是以 .html 或 .htm 擴(kuò)展名結(jié)尾的文件。Web 瀏覽器讀取 HTML 文件并呈現(xiàn)其內(nèi)容，以便互聯(lián)網(wǎng)用戶可以查看它。
所有 HTML 頁面都有一系列 HTML 元素，由一組標(biāo)簽和屬性組成。HTML 元素是網(wǎng)頁的構(gòu)建塊。標(biāo)簽告訴 Web 瀏覽器元素在哪里開始和結(jié)束，而屬性描述元素的特征。
元素的三個(gè)主要部分是：
這三個(gè)部分的組合將創(chuàng)建一個(gè) HTML 元素：
<p>這是在HTML中添加段落的方法。</p>HTML 元素的另一個(gè)關(guān)鍵部分是它的屬性，它有兩個(gè)部分——名稱和屬性值。名稱標(biāo)識用戶想要添加的附加信息，并且屬性值給出進(jìn)一步的說明。
例如，添加紫色和 font-family verdana 的樣式元素將如下所示：
< p style="color:purple;font-family:verdana" >這是在HTML中添加段落的方法。< /p >另一個(gè)屬性，HTML 類，對于開發(fā)和編程來說是最重要的。class 屬性添加了可以作用于具有相同類值的不同元素的樣式信息。 例如，我們將對標(biāo)題 <h1> 和段落 <p> 使用相同的樣式。樣式包括背景顏色、文本顏色、邊框、邊距和填充，在 .important 類下。要在 <h1> 和 <p> 之間實(shí)現(xiàn)相同的樣式，請?jiān)诿總€(gè)開始標(biāo)記后添加 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>大多數(shù)元素都有一個(gè)開始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽，但有些元素不需要結(jié)束標(biāo)簽即可工作，例如空元素。這些元素不使用結(jié)束標(biāo)簽，因?yàn)樗鼈儧]有內(nèi)容：
< img src="/" alt="圖像" >這個(gè)圖像標(biāo)簽有兩個(gè)屬性——一個(gè)src屬性，圖像路徑，和一個(gè)alt屬性，描述性文本。但是，它沒有內(nèi)容，也沒有結(jié)束標(biāo)簽。
最后，每個(gè) HTML 文檔都必須以 <!DOCTYPE> 聲明開頭，以告知 Web 瀏覽器文檔類型。使用 HTML5，doctype HTML public 聲明將是：
< !DOCTYPE html >目前，有 142 個(gè) HTML 標(biāo)簽可以用于創(chuàng)建各種元素。盡管現(xiàn)代瀏覽器不再支持其中一些標(biāo)簽，但學(xué)習(xí)所有可用的不同元素仍然是有益的。
第二節(jié)將討論最常用的 HTML 標(biāo)簽和兩個(gè)主要元素——塊級元素和內(nèi)聯(lián)元素。
塊級元素占據(jù)頁面的整個(gè)寬度。它總是在文檔中開始一個(gè)新行。例如，標(biāo)題元素將位于與段落元素不同的行中。
每個(gè) HTML 頁面都使用這三個(gè)標(biāo)簽：
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>其他流行的塊級標(biāo)簽包括：
內(nèi)聯(lián)元素格式化塊級元素的內(nèi)部內(nèi)容，例如添加鏈接和強(qiáng)調(diào)的字符串。內(nèi)聯(lián)元素最常用于在不破壞內(nèi)容流的情況下格式化文本。
例如，一個(gè) <strong> 標(biāo)簽會以粗體呈現(xiàn)一個(gè)元素，而 <em> 標(biāo)簽會以斜體顯示它。超鏈接也是使用 <a> 標(biāo)記和 href 屬性來指示鏈接目標(biāo)的內(nèi)聯(lián)元素：
<a href="https://www.icodingdeu.com/" >點(diǎn)我！</a> HTML 的第一個(gè)版本由 18 個(gè)標(biāo)簽組成。從那時(shí)起，每個(gè)新版本都帶有添加到標(biāo)記中的新標(biāo)簽和屬性。迄今為止，該語言最重大的升級是 2014 年引入的 HTML5。
HTML 和 HTML5的主要區(qū)別在于HTML5 支持新類型的表單控件。HTML5 還引入了幾個(gè)語義標(biāo)簽，可以清楚地描述內(nèi)容，例如 <article>、<header> 和 <footer>。
就像任何其他計(jì)算機(jī)語言一樣，HTML 有其優(yōu)點(diǎn)和局限性。以下是 HTML 的優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：
就像任何其他計(jì)算機(jī)語言一樣，HTML 有其優(yōu)點(diǎn)和局限性。以下是 HTML 的優(yōu)缺點(diǎn)：
缺點(diǎn)：
HTML 用于添加文本元素并創(chuàng)建內(nèi)容結(jié)構(gòu)。然而，僅僅建立一個(gè)專業(yè)的和完全響應(yīng)的網(wǎng)站是不夠的。因此，HTML 需要借助層級樣式表 (CSS)和JavaScript來創(chuàng)建絕大多數(shù)網(wǎng)站內(nèi)容。
HTML 是 Internet 上的主要標(biāo)記語言。每個(gè) HTML 頁面都有一系列創(chuàng)建網(wǎng)頁或應(yīng)用程序內(nèi)容結(jié)構(gòu)的元素。
HTML 是一種對初學(xué)者友好的語言，有很多支持，主要用于靜態(tài)網(wǎng)站頁面。HTML 與用于樣式的 CSS 和用于功能的 JavaScript 一起使用效果最好。
我們還向您展示了一些在線教學(xué)課程，它們將有助于提高您的 HTML 知識或提供對 HTML 的基本理解。
如果您有任何其他喜歡的資源來學(xué)習(xí) HTML，請?jiān)谠u論部分告訴我們。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
