皮毛

MIP定义:

移动网页加速器

MIP原理:

1、组件封装。2、缓存

MIP的好处

MIP可以降低手机版网页的开发难度。(组件)

MIP页面被手机百度收录后,会在搜索结果中显 示闪电标志,暗示此网页的访问速度快一些。

MIP改造的方案:

1. PC+M+MIP (三套URL使用同一个数据库)

2. PC+MIP (将手机M站改造成MIP )

3.自适应+MIP (新增MIP站)

4.完全MIP ( PC+手机自适应)

框架部分:MIP网页基本要求(与普通网页的区别)

1.首行申明<!DOCTYPE html> (与HTML 5相同)

2. <html mip>标签以及UTF8编码

3. viewport标签(里面的参数值 写1 尽量不要写1.0)

4.引入mip.css

5.<link rel="miphtml"> 和<link rel=" canonical">

6.body结尾前引入mip.js

(自适应可以直接写 <link rel=" canonical" href="当前url">)

第一个mip网页:

<!DOCTYPE HTML>
<html mip>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> 
<link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css">
<link rel="canonical" href="https://www.baidu.com">
<title>TEST DEMO</title>
</head>
<body>

<script src="https://c.mipcdn.com/static/v1/mip.js"></script>
</body>
</html>

可以复制到百度MIP检测工具看下是否符合规范,检测地址:https://www.mipengine.org/validator/validate

内容部分:MIP网页基本要求(与普通网页的区别)

1:内部使用style标签时,后面加mip-custom

<style mip-custom>(注意区别)
h1 {color :red;}
</style>

2.支持link标签引入外部CSS样式表

3.禁止使用行内样式( <div style="color:red"></div> )

常用:图片

(responsive响应式,其他属性请参考:https://www.mipengine.org/v2/docs/mip-standard/mip-html-spec.html#mipimg)

 示例:按4:1宽高显示

<mip-img layout="responsive" width="4" height="1" alt=" 风景图片”src="1.jpg">
<!--
layout="responsive"  width="4" height="1" 响应式,宽高 按比例显示
layout="fixed" width="400" height="400"   真实宽高,会显示正方形
layout="fixed-height" width="无效" height="200"  高真实高度  宽度100%自适应

-->

点击图片实现全拼效果

<mip-img popup layout="fixed" width="400" height="400" alt=" 风景图片”src="1.jpg">
<!--加上 popup即可实现点击图片 全屏显示  popup可以没有值-->

常用:mip幻灯片

<mip-carousel layout=" responsive" width="600" height="400"
indicator autoplay defer="3000">
<mip-img src= ”01.jpg"></mip-img>
<mip-img src=" 02.jpg"></mip-img>
<mip-img src= ”03.jpg"></mip-img>
</mip- carousel>

需要额外引入脚本的组件:

详情参考:https://www.mipengine.org/v2/components/dynamic-content/mip-gototop.html

下面有一个 所需脚本. 则需要把这个脚本引入到body结束标签前.

总结:

1.改造方案(网站类型、新建或改造)  一般情况只适合新闻资讯或 文章类型的网站来进行建设,功能比较复杂的不太适合.

2.网页编码( UTF-8 )

3.外部JS (改为组件的方式,如轮播图、统计等)

4.标签替换(如img/video )

其他:请参考:https://www.mipengine.org/v2/components/index.html

相关推荐

百度Sitemap协议 百度Sitemap.xml格式说明

参考文档:http://help.baidu.com/question?prod_id=99&class=0&id=3032参考资料:https://ziyuan.baidu.com/

百度分词说明

百度的词法分析价格 10万次 190元 有效期 12个月 可免费试用50万次请求地址(post):https://aip.baidubce.com/rpc/2.0/nlp/v1/lexer?acces

chrome浏览器自定义css 屏蔽百度热搜榜

首先建议大家下载一个 "山寨"的chrome浏览器之所以我叫他"山寨"是因为他使用的chrome内核开发 并且chrome有的它都有,外观也几乎一模一样之所以用

JavaScript获取cookies的指定值 php设置cookies

由于有些中文cookies会被编码 所以要加上解码前端:JavaScript获取指定cookies值函数定义:function getCookie(cookie_name) { var all

html复选框checkbox的使用, 未选中也是on的问题,原生JavaScript操作checkbox

html代码:已改成html<label for="myCheckbox">点击我</label>JavaScript代码:document.getElem

JavaScript 解析json解析 遍历

obj=JSON.parse('{"id":"8","home":"beijing","uid&qu

html中select option原生JavaScript按照value值 或 按照文本 选择指定选项

function select_value(id,value){//按照option的值来选择 selectdom=document.getElementById(id); option=se

JavaScript操作select option 下拉组合框

1、获取选中select的value和text,html<select id="mySelect"> <option value="1"&g

php取访客ip 取ua 取网站跟目录

php取访客ip$ip=$_SERVER["REMOTE_ADDR"];php取用户ua$ua=$_SERVER["HTTP_USER_AGENT"];php取

自绘GDiplus基础:gdi和gdi+的区别、设备环境DC的概念、以及对象的使用方法

gdi和gdi+的区别1.GDI是gdi32.dll这个库,而GDI+是GDIplus.dll这个库2.GDI是硬件加速的,而GDI+不是3.GDI是有状态的,而GDI+是无状态的4.GDI绘图要使用