着移动互联网的飞速发展，移动端网站的重要性日益凸显。在这一过程中，HTML5和WAP作为两种不同的移动端网页技术，各自扮演着独特的角色。本文将深入探讨HTML5与WAP之间的区别，介绍它们的不同之处以及各自的区别。

首先，从定义和性质上来看，HTML5和WAP有着本质的差异。HTML5是超文本标记语言的第五次修订版本，它是一种脚本语言，可以直接在多种平台上使用，无需转换代码，从而保证了页面的兼容性。而WAP，即无线应用协议，是一种通信协议，其设计目的是将互联网上的HTML内容转换为WML（无线标记语言），以便在移动电话等早期移动设备的小屏幕上显示。简而言之，HTML5是一种编程语言，而WAP则是一种实现移动电话与互联网结合的应用协议标准。

其次，从平台支持的角度来看，HTML5和WAP也存在着显著的区别。HTML5支持大多数Web前端平台和移动终端，包括智能手机、平板电脑和个人电脑等。这意味着，通过HTML5制作的网站可以灵活运行于各种媒体，为用户提供一致的浏览体验。而WAP主要支持老式的移动设备，尤其是那些只能访问WAP网站的功能机。随着智能手机的普及，WAP的应用范围已经大幅缩减。

从功能方面上考虑，HTML5和WAP同样存在着较大的差异。HTML5提供了丰富的新特性，如地理位置服务、本地存储、视频播放等，这些功能使得HTML5能够提供更加动态和交互性强的网页体验。而WAP的功能则相对基础，主要用于显示简单的文本和链接，不适合现代互联网的需求。

此外，HTML5还具有跨平台性、离线存储、多媒体支持、图形和动画以及实时通信等优势。这些特点使得HTML5成为了移动互联网和Web开发的主流技术。

以上总体来看，HTML5和WAP在定义和性质、平台支持以及功能方面上存在着显著的区别。HTML5作为目前移动互联网和Web开发的主流技术，提供了更加先进的功能和更好的跨平台兼容性，适用于现代的智能手机和浏览器。而WAP作为早期的移动网页技术，随着智能手机的普及，其应用范围已经大幅缩减。在未来的发展中，HTML5将继续发挥其优势，推动移动互联网和Web开发的进步。

要快搭建高质量的个人网站，可以试着用Wordpress搭建属于自己的个人网站了，这也是很多设计师比较关心的事情。

认识Wordpress

在前面讲过网页分为静态和动态两种，通过前面知识的学习应该完全可以制作一个静态页面出来，但是静态页面的局限性非常大，尤其是个人网站，可能需要经常更新作品或者文字，这就需要一个动态页面，而动态页面需要编写后台系统，好在现在互联网上有非常多开源的建站系统可供选择，Wordpress就是其中非常优秀的一款。

截止到本书完稿前，Wordpress的最新版本为4.9.4。Wordpress诞生于2003年，经过15年的发展，功能已经非常强大，在其官网上可以看到很多案例，如图4-25所示。

Wordpress需要安装在服务器或者虚拟主机上，对服务器的环境要求为：PHP 5.2.4或更高版本；MySQL 5.0或更高版本。

目前网上有非常多的服务器提供商可供选择，包括免费的和收费的，一般收费的服务器在速度和稳定性上都好过免费的，另外服务器的价格会高于虚拟主机的价格，个人网站使用虚拟主机即可，建议大家根据实际情况进行选择。

下面以服务商“阿里云”为例讲解申请购买虚拟主机的方法。

打开阿里云网站，然后在导航中找到“云虚拟主机”，如图4-26所示。

在“云虚拟主机”页面中可以看到不同价格的虚拟主机，主要区别是空间、内存、数据库大小和带宽等，如图4-27所示。个人网站选择最便宜的虚拟主机就足够使用了。

在下面可以看到对应主机的详细信息，在“数据库类型”和“支持语言”中可以找到对应虚拟主机支持的PHP和MySQL版本号，如图4-28所示。

选择好需要的虚拟主机后，单击购买按钮会跳转到配置界面，在这个界面中主要是选择虚拟主机的操作系统，因为需要用来搭建Wordpress，所以选择Linux操作系统，如图4-29所示。

一般虚拟主机的操作系统需要根据网站开发的语言和数据库进行选择。网站的开发语言为ASP、.NET和HTML，数据库为ACCESS和SQL Server 则选择Windows系统；网站的开发语言为PHP、HTML和WAP，数据库为MySQL和SQLite则选择Linux系统。机房则根据所在地，或者目标主要访问用户所在地进行选择即可，比如有青岛和北京两个机房，目标用户主要分布在北京就可以优先选择北京的机房。距离越近延迟时间越少访问速度越快。无论是机房还是操作系统，后期都可以进行切换。

付款完成后，在网站的“管理控制台”中可以找到购买的虚拟主机，如图4-30所示。

单击右侧的“管理”按钮即可进入虚拟主机的管理界面，在这个界面中可以找到虚拟主机的FTP登录名和密码、MySQL数据库的名称、用户名和密码等信息，这些可以用来对Wordpress进行配置，如图4-31所示。

安装Wordpress

准备好服务器或虚拟主机后就可以安装Wordpress了。Wordpress的安装非常简单，首先访问Wordpress的官网并下载Wordpress安装包，如图4-32所示。

将下载到的wordpress-4.9.4-zh_CN.zip文件通过FTP工具上传到虚拟主机上。可供选择的FTP工具非常多，这里以FileZilla为例进行讲解，FileZilla是一款免费的FTP工具，有Linux、Windows和macOS版本可供选择，如图4-33所示。需要注意的是，这里的操作系统版本是个人电脑的操作系统，并非虚拟主机的操作系统。

下载并安装后打开FileZilla，主界面如图4-34所示。要使用FileZilla进行传输，需要对FileZilla和虚拟主机进行连接。可以在阿里云的帮助中心找到阿里云虚拟主机和FileZilla进行连接的设置方法。

当连接到虚拟主机后，可以在FileZilla右侧的“远程站点”界面中，看到虚拟主机的文件信息，然后找到htdocs文件夹并打开，如图4-35所示。

将下载的Wordpress安装包解压，然后将解压出来的文件复制并粘贴到FileZilla右侧的远程站点窗口中，即可把这些文件上传到htdocs文件夹中，如图4-36所示。注意，不要把wordpress文件夹上传上去了。

FileZilla下方会显示文件上传的进度，等文件全部上传完成后，打开浏览器输入http://xxx.xxx.com/wp-admin/install.php，其中xxx.xxx.com这个地址是虚拟主机的默认域名，大家在图4-31中的临时域名可以找到这个地址，每个人的虚拟主机的域名都不相同，用该地址替换xxx.xxx.com，如果一切无误浏览器会打开图4-37所示的网页。

单击“现在就开始”按钮进行数据库配置，如图4-38所示。这里的所有信息请回到虚拟主机的管理界面进行查询并将其填入对应的列表中，其中，数据库名对应图4-31中的数据库名称；用户名对应的是数据库用户名；密码则是各位数据库的密码，如果不清楚点击重置密码即可重新设置；数据库主机则对应的是数据库链接地址。表前缀保持为默认即可。

信息填写完成后单击“提交”按钮，若所有信息正确可以看到图4-39所示的界面，然后单击“现在安装”按钮，即可自动安装Wordpress。

在“欢迎”界面中需要填写一些初始信息，如图4-40所示。这里的所有信息都可以按照自己的喜好进行填写，后续也可以随意修改，需要注意的是，这里填写的用户名和密码，是个人网站管理员的账号和密码，建议大家慎重填写，并防止这些信息的泄露。其中电子邮件地址也建议填写真实的邮件地址，在后续找回密码等操作中会有用到。

一切填写完成后，单击“安装WordPress”按钮，这时就已经完成了Wordpress的全部安装工作，接下来可以像使用一个博客系统那样使用Wordpress来对个人网站进行管理。

Wordpress的基本使用

安装完成Wordpress后可以通过http://xxx.xxx.com/wp-login.php进入到自己网站的登录界面，输入安装时设置的用户名和密码即可进入Wordpress的后台，如图4-41所示。

在这里可以对网站做一切管理，包括界面的设置、文章的发布和留言的管理等。可以通过虚拟主机的临时域名进入到网站，在后台进行任何变动后，都建议前往网站查看变动的效果。图4-42所示是Wordpress默认的网站内容。

在后台中执行“外观>主题”菜单命令，即可对网站外观进行修改，默认会有3个主题，可以单击“添加新主题”来选择更多的主题模板，如图4-43所示。

在这里可以看到所有的Wordpress主题列表，这个列表还在不断地新增中，找到自己喜欢的主题，把鼠标悬停上去，可以快速地进行预览和安装，如图4-44所示。

还可以快速的筛选主题，单击“特性筛选”按钮，然后勾选筛选的内容，接着单击“应用过滤器2”即可对主题进行筛选，如图4-45所示。

如果以上都无法满足需要，还可以通过互联网进行主题模板的添加。可以通过搜索引擎搜索“Wordpress主题”等关键词找到对应的网站。现在网上有非常多的模板可供免费下载使用，图4-46所示是一款图片主题，单击网页上方的“下载该主题”按钮，即可下载到一个包含该主题的zip文件。

下载完成后回到Wordpress后台的添加主题板块，单击“上传主题”按钮，然后选择刚才下载到的zip文件并单击“现在安装”按钮，即可完成主题的安装，如图4-47所示。

Wordpress主题的代码修改

虽然可以自行选择主题，但是很多情况下主题也会有所限制，比如上述主题左上角的LOGO只能显示文字，我们希望修改为图片；左下角的Blank Portfolio by ThemePort的字样，我们希望修改为其他内容。

这就需要进行代码层级的修改了，通过前面对HTML和CSS基础知识的学习，这些都是小问题。要修改Wordpress的主题代码，只需执行“外观>编辑”菜单命令即可，如图4-48所示。

要修改主题内容，需要找到该内容所在的位置，在上图中的右侧可以切换主题中的文件，不同的内容在不同的位置需要自己慢慢查找，并没有其他快速的办法，但是可以根据内容所在的位置优先找到大致的文件。

比如左下角的文字应该属于页脚位置，因此选择“主题页脚（footer.php）”文件，这时可以看到以下的代码，如图4-49所示。

<?php printf( esc_html__( '%1$s by %2$s', 'blankportfolio' ), 'Blank Portfolio', '<a href="https://themeport.net" rel="designer">ThemePort</a>' ); ?>

接下来修改左上角的LOGO，这里的LOGO相对比较复杂一些。

根据LOGO所在的位置应该可以在“首页页眉（header.php）”中找到，但是主题中的内容会根据网站的名字进行变更，可能并不能直接找到这部分代码所在的位置，这时就需要借助chrome的开发者工具。

在chrome中打开这个网站，然后执行“设置>更多工具>开发者工具”操作进入开发者模式，如图4-50所示。

这时通过查看“全栈设计”这几个字快速定位其代码，可以看到这里是<h1>和<h2>标签，并且其class值分别为site-title和site-description，如图4-51所示。

再回到Wordpress的编辑界面，在“首页页眉（header.php）”中就可以快速的定位到这里的代码所在的位置，如图4-52所示。

可以直接在里面的<a>标签中嵌套一个<img>标签，并且直接在<img>标签中设置图片的宽和高的属性，比类似于下面的代码。

<h1>

<a href="http://www.hfwen.com/quanzhan">

<img src="/quanzhan/logo.png" width="102px" height="30px">

</a>

</h1>

这里需要注意图片的位置，一般情况下需要把图片上传到虚拟主机的htdocs文件夹中。

这样便可以完全自定义个人网站了，Wordpress的功能远不止这些，并且通过插件的支持，其功能强大到远超你的想象，大家如果有兴趣可以深入学习，在Wordpress的官网可以查阅到Wordpress的官方文档。

域名的申请和绑定

在申请虚拟主机时发现主机只有一个临时域名，且很难记住，实际上要申请一个顶级的域名也非常容易。

域名和主机可以选择同一个服务商，也可以选择不同的服务商，选择相同的服务商在绑定虚拟主机时可能更加方便一点。本文依然以“阿里云”为例，带大家了解一下域名的申请和绑定。

首先，在阿里云网站菜单中，找到域名注册，如图4-53所示。

进入到注册域名的页面后，首先需要查询希望注册的域名是否被注册。在上方的输入框中输入希望注册的域名，然后单击“查询名”按钮即可，如图4-54所示。注意如果希望注册一个如www.xxx.com的域名，只需要输入xxx部分即可，一般个人网站可以考虑使用自己名字的拼音或者英文名。

域名后缀可以不用选择，一般情况下网站会查询所有的域名后缀，直接单击“查询”按钮即可。在结果页，可以看到可以注册的域名以及对应的价格，还可以单击筛选按钮，只查看感兴趣的后缀域名，如图4-55所示。

接下来就可以根据购买虚拟主机的方法购买域名，一个域名最长可以选择10年，且不保证域名的价格永远相同，因此对于自己特别喜欢的域名，如果觉得价格合适可以多买几年，否则域名如果到期后没有续费，就可能会被回收。

域名购买后可以在管理控制台中看到该域名，并对其进行管理，如图4-56所示。

如果需要将域名绑定到虚拟主机上，单击“解析”按钮即可。一般情况下需要修改A解析，将其地址设置为虚拟主机的IP地址即可，不同的域名服务商和虚拟主机服务商对此可能会有不同的要求，具体方法建议大家查询对应服务商的帮助文档，如图4-57所示。

总结

需要注意的是，网站和域名都是锦上添花的东西，更重要的是网站本身的内容。如果没有优质的内容，网站只是一个毫无价值的存在。所以，要让个人网站发挥光芒，持续不断地进行更新才是王道。

爱读微课（iread360.com） | 色技手稿

天给大家演示一下如何安装我们开发的一款校园二手市场wap版的系统，该系统界面精美，实现了校园二手市场的所有功能，我们授权后可以直接部署上线商用，目前我们搭建了一个演示站：http://www.ischoolbar.com，有兴趣的可以去看看，里面的演示数据在东华大学下，该系统实现了全国所有高校的录入，后台也可以新增，跟公众号绑定后可实现微信登录。系统基于thinkphp3.2开发，php版本需要5.3以上才可以运行，mysql版本不限，nginx或Apache都可以，下面我们来演示一下如何部署到本地（原理跟部署服务器是一样的）。

1. 将项目源码复制到你的网站根目录下，因为我的根目录下有很多个项目，所以我新建了一个文件夹，放在二级目录下。

2. 复制（服务器的话就是上传至ftp）过去后，我们来改配置文件。

3. 首先是Common/con/config.php这个文件：

4. 接下来修改一下js文件，因为该系统全部用的ajax异步加载的方式，所以里面的路径需要配置下，App/Public/js/index_goods.js：

5. 接下来是App/Public/js/publish.js：

6. 接下来修改上传图片的php文件，ThinkPHP/Library/Org/Plupload/Plupload.class.php：

改成windows格式的如下：

7.接下来修改富文本编辑器的上传浏览路径/Admin/Public/edit/php/config.json：

8. 接下来就是导入数据库文件了，这里我们用的是navicat工具，也可以用phpmyadmin等，这个随意，只要能把文件导入进去就行。

9. 导入进去后就可以运行了。

10. 如果需要开通微信登录的话在后台的系统设置里面填写微信公众号的基本信息，如下图所示：

在公众号后台设置回调域名：

更多项目猿来入此获取！

首次打开后会跳转到选择地区学校等信息，选择完后会记录，以后直接跳转到最近选择的学校，当然你可以从首页随意切换地区学校，

下面是选择地区，有自动定位，可直接选择定位的地区：

选择学校列表：

接下来我们要在后台配置一下首页的幻灯片，后台地址是网址/admin.php，用户名密码都是admin：

配置完后首页如下：

注册登陆页面：

会员中心：

发布商品页面：

商品发布后需要后台管理员审核后才会显示在前端：

审核通过后刚才发布的就出现在首页了：

商品详情页：