|
|
一、MIP 改造前说明
对于简单的WAP站点进行MIP Html改造，一般不会造成界面的改变，但是也有很多站点会出现“大改版”的现象。在Wap原站点上进行改造，更适合新闻资讯类生成静态或者伪静态的站点。熟悉DIV+CSS的肯定也熟悉一个词，叫“DIV重构”，其实简单的WAP网站改造成MIP站点，有点DIV重构的感觉。功能非常复杂或者特效非常多的站点，最好是新建一套MIP模版。
二、MIP改造界面预览
内容页 | |
内容页
|
列表页
|
因为我是做的MIP新建，所以模版我本着简洁简洁再简洁的原则来制作。
一个普通的网页<html></html>里面主要包含<head></head>和<body></body>两大部分，单从截图可以看出来，整个网站页面的BODY大体的布局是
首页body布局，头部：标题+导航；内容区：大图+列表；页脚无内容显示。
列表页body布局，头部：标题+导航；内容区：大图+列表+分页；页脚无内容显示。
内容页body布局，头部：标题；内容区：文章标题+内容+分页+列表内容；页脚无内容。
那么下面就从HEAD和BODY进行拆解分析，最后附有内容页、列表页、首页完整代码
三、Head改造详解
普通网页的写法
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
- <title>移动网页DEMO</title>
- <meta name="description" content="描述" /> <meta name="keywords" content="关键词" />
- <link rel="stylesheet" href="/skin/css/style.css" type="text/css" />
- </head>
MIP的Head区域的写法
- <!DOCTYPE html>
- <html mip>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
- <title>MIP DEMO</title>
- <meta name="description" content="描述" /><meta name="keywords" content="关键词" />
- <link rel="stylesheet" type="text/css" href="//mipcache.bdstatic.com/static/mipmain-v1.0.1.css">
- <link rel="canonical" href="页面h5 url">
- <style mip-custom>css 部分</style>
- </head>
其实对比可以看得出来，MIP和普通网页虽然大部分相同，但还是有不同地方的：
其中对于<head>之前的部分，就是网页一开始，必须引入
<!DOCTYPE html>，
<htmlmip>
<head></head>之间的部分首先要注明网页编码，<metacharset="utf-8">目前MIP只支持UTF-8。
其次加入移动端缩放代码
<metaname="viewport"content="width=device-width,minimum-scale=1,initial-scale=1">
对于网页的TDK部分，和普通网页一样的写法
<title>网页标题</title>，
<meta name="description"content="描述" />，
<metaname="keywords" content="关键词" />
其中加入<link rel="canonical" href="页面h5 url">指明和MIP对应的普通网页地址;
如果一个页面的MIP和非MIP版本同时被收录，这个标签能够帮助搜索引擎将两个页面对应起来。
对于常规网页，会在头部引用css和js，但是MIP只可以引用一个官方css，写法如下
- <linkrel="stylesheet" type="text/css"href="//mipcache.bdstatic.com/static/mipmain-v1.0.1.css">
对于MIP标准，head还是有几点需要注意的，当然，你要是直接复制我的代码进行修改，需要注意的并不多，下面一起看一下这几点需要注意的吧，其实主要是给粗心的人准备的。
1、代码大小写。
网页大部分是强制小写的。其中规定
<html mip>，<head>，
<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.0.1.css" >，
<link rel="standardhtml"href="xxx">
都是必须小写的，强制规定的，不小写不行！所以网页全局尽量都小写吧。
2、网页只可以有两个<link
一个是引用官方标准的css文件，
<link rel="stylesheet"type="text/css"href="https://mipcache.bdstatic.com/static/mipmain-v1.0.1.css" >
一个指明标准页面地址。
<linkrel="standardhtml" href="xxx">
其他的不准再出现以<link 开头的代码。
3、<head></head>内容区域代码标签，不可以写到<body>区域，或者写到其他区域，
不属于<head> </head>区域代码也不要往这里随便写。
MIP html要求大家书写代码规范！重要的事情说三遍，规范！规范！规范！
四、MIP Html Body简单说明
对于懂CSS和html的技术员来说，MIP的内容和常规网页区别不是很大。
1、其中图片标签由<img src="图片地址" />换成了<mip-img src="图片地址"></mip-img>
图片地址必须为完整地址，当然<mip-img 里面是可以加alt、css、的，可以参考示例。
2、其中<head>区域引用的官方标准CSS文件中，包含了很多css样式比如.mip-html、mip-img、.mip-html p、header、body、.mip-text等等，后续将不断完善。希望大家可以下载官方css文件仔细看一下，这都是可以直接引用，其他没有的css样式，需要在head区域的<style mip-custom></style>里面写入，然后在body引用。
3，首先</body>前面加上MIP必须的官方js文件
- <scriptsrc="https://mipcache.bdstatic.com/static/mipmain-v1.0.3.js"></script>
目前，除了官方js文件，是禁止链接非官方js文件的，如果需要新建组件来实现特定的交互，请在github的mipengine项目中提交组件代码，目前支持的js组建有：百度统计、百度分享、百度联盟广告、app下载、视频、音频、隐藏层等。
此示例，演示了百度统计的MIP JS和代码书写
- <mip-stats-bidutoken="623be0d7dc9047afe33405a0a69ab869"></mip-stats-bidu>
- <scriptsrc="https://mipcache.bdstatic.com/static/v0.1/mip-stats-bidu.js"></script>
比较直白地说，如果想改造 MIP，不要指望把以前网站所有的特效都搬过来，而是针对MIP现在有的组件进行网页改造。
4，所有的<a>链接，必须是<a href="url"target="_blank"></a>，
url必须是完整地址，必须新窗口打开，不可以是<a href="javascript:xxx()"></a>，如果要在当前窗口打开，可使用
<mip-link>组件，记得引用配套JS。
5，Body内容，不支持常规表单提交、不支持注册登录等动态网页代码、不支持搜索内容等。
6，还是重提一下书写代码要规范这个事
该在head写的标签和代码，不要写在body里面；该在body写的代码和标签，也不要随便往其他地方写
五、首页BODY改造拆解
对于MIP改造，其实和常规网页制作区别不是太大，只要额外注意MIP提出的几点规范即可，大部分还是和常规HTML一样来设计制作网页的。
对于首页显示的头部，我这里有一个黑色背景的标题《励志教育·励志人物》，以及导航，其实这部分代码和常规HTML代码没什么区别，唯一一点就是所有超链接必须是完整连接和新窗口打开。
首页内容区域是一个大图，然后下面就是列表，一排排的文章罗列下来的。
其中单独说一下大图代码和其中一篇文章代码
大图代码
- <a href="http://mip.lypk.net/renwu/276.html" target="_blank">
- <mip-img data-carousel="carousel" class="mip-element mip-img quanping" src="//lypk.net/uploads/allimg/160711/1153333261-28.jpg">
- <p class="mip-img-subtitle">LV边上开了家烧饼油条店，</p>
- </mip-img>
- </a>
如果是普通网页，大概是这个写法
- <a href="http://mip.lypk.net/renwu/276.html" target="_blank">
- <img data-carousel="carousel" class="mip-element mip-img quanping" src="//lypk.net/uploads/allimg/160711/1153333261-28.jpg">
- <p class="mip-img-subtitle">LV边上开了家烧饼油条店，</p>
- </a>
不同之处在于，img-换成了mip-img而且还有结尾</mip-img>，当然图片包含超链接，都必须是完整地址的，超链接必须是新窗口打开的。如果要在当前窗口打开，可使用<mip-link>组件。其它部分和普通网页是一样的写法。
其中一篇文章的代码
- <li><div class="list_img2"><a href="http://mip.lypk.net/renwu/276.html" target="_blank">
- <mip-img data-carousel="carousel" class="mip-element mip-img" src="//lypk.net/uploads/allimg/160711/1153333261-28.jpg"></mip-img></a></div>
- <div class="list_cont"><div class="list_title2"><a href="http://mip.lypk.net/renwu/276.html" target="_blank">LV边上开了家烧饼油条店，火遍上海滩</a></div> <div class="list_time2">
- <p><b>热</b>2016-09-02</p><span class="list_fx2"></span></div></div>
- <div class="clearfloat"></div></li>
普通网页的写法
- <li><div class="list_img2"><a href="http://mip.lypk.net/renwu/276.html" target="_blank">
- <img data-carousel="carousel" class="mip-element mip-img" src="//lypk.net/uploads/allimg/160711/1153333261-28.jpg"></a></div>
- <div class="list_cont"><div class="list_title2"><a href="http://mip.lypk.net/renwu/276.html" target="_blank">LV边上开了家烧饼油条店，火遍上海滩</a></div> <div class="list_time2">
- <p><b>热</b>2016-09-02</p><span class="list_fx2"></span></div></div>
- <div class="clearfloat"></div></li>
看到没，主要区别还是在于 img变换成mip-img，并且结尾有mip-img。图片链接和超链接必须是完整地址以及超链接必须是新窗口打开，如果要在当前窗口打开，可使用<mip-link>组件，这个规则不用再重复了吧。
内容区域到此，就结束了。
页脚部分代码写法
- <mip-stats-bidu token="4f3148f2fe8dc07845739a9368dd0a8a"></mip-stats-bidu>
- <script src="https://mipcache.bdstatic.com/static/mipmain-v1.0.3.js" ></script>
- <script src="https://mipcache.bdstatic.com/static/v1.1/mip-stats-bidu.js" ></script>
页脚部分是什么都不显示的，其中第一行和第二行代码是百度统计的作用，
其中token值这里是从百度统计代码的
hm.src ="//hm.baidu.com/hm.js?4f3148f2fe8dc07845739a9368dd0a8a"; 提取的。
值得注意的是<mip-stats-bidu>必须放在mip-stats-bidu.js前面统计才能生效
第三行代码是作为MIP必须引用的一段JS。对于JS部分，希望大家看JS组建教程进行详细的了解。
对于首页的MIP Body改造，在这里就介绍完毕了。
六、 列表页BODY改造拆解
列表页的头部、文章列表部分、底部其实是和首页一样的，在这里没有必要再罗列一遍，就说一下，列表页的分页代码。
对于很多网页列表页都有分页的，有的含有JS脚本，还有用到 input、textareaa、select、option。在这里说明一下，如果列表页含有分页，最好做成纯css样式的，不要包含JS或者select、option等，MIP目前是禁止的，附件中附有页面标签禁使表，或者去官方网站查看。分页所使用的超链接也必须是完整地址且新窗口打开
比如我列表页的分页代码如下，请做参考
- <p align='center' class='ArtPage'><b>
- <span class="now">1</span>
- <a target='_blank' href='http://mip.lypk.net/wz/list_2.html'>2</a>
- <a target='_blank' href='http://mip.lypk.net/wz/list_3.html'>3</a>
- <a target='_blank' href='http://mip.lypk.net/wz/list_2.html'>向后</a>
- </b></p>
在这里，列表页也算是做了一个了解。
七、内容页BODY改造说明
对于内容页，其中头部：网站标题；内容区：文章标题+内容+分页+列表内容；页脚无内容。都已经在首页和列表页中做了拆解。其实对于文章内容，主要是图片代码是<img src="图片地址" />换成<mip-img src="图片地址"></mip-img>样式，如果是一般网站后台，那么内容区域除了替换img为mip-img，其他代码和普通网页并无太大区别。
当然对于主流cms，大家可以进行修改内核，添加文章内容正规则替换，来实现。
八、页面标签禁使表
MIP对于网页的改造，还是有些区别的，比如有些标签是不支持的
对于标签不支持，或者支持不太好的，尽量先不要用。
| | | | | | | | | | | | | | | | | | | | 禁止使用script标签, 以下两种情况除外：1）外链mip组件所需js，2）type为 "application/ld+json" 或 "application/json" | | | | | | | | | | | | 不可以href="javascript:"，target必须设置为_blank | | | | | | | | | | | | | | | | | | | | | | | | 包括: input, textareaa, select, option |
九，首页、列表页、内容页代码，仅供参考
在这里提供首页、列表页、内容页代码，大家复制出来用dreamwever等网页编辑工具新建utf-8 的网页，然后把代码复制到新建的网页中，即可预览MIP改造后的网页。由于代码比较多，我们以附件的形式提供html代码。
首页、列表页、内容页.zip
(13.29 KB, 下载次数: 12)
|
|
|Archiver|手机版|小黑屋|IPv6.la（IPv6技术网）
发表于 2018-4-24 13:36:16