我们讲解下设计第一个移动页面，现在移动端是浏览网站占比很大，小程序，今儿头条，等大部分通过这些搜索相关信息了。所以一个网站的手机版是必不可少的。手机版的和html写法和电脑版的有什么区别呢？
我们看看基础的语法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="//freemuban.com/js/508//jquery.mobile-1.4.5.min.css" />
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/508//jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header">
<h1>jQuery Mobile</h1>
</header>
<div data-role="content" class="content">
<p>Hello World!</p>
</div>
<footer data-role="footer">
<h1><a href="http://freemuban.com/">http://freemuban.com/</a></h1>
</footer>
</section>
</body>
</html>
简单的手机demo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery.mobile/jquery.mobile-1.4.5.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.mobile/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content" class="content">
<p>Hello World!</p>
</div>
<div data-role="footer">
<h1><a href="http://freemuban.com/">http://freemuban.com/</a></h1>
</div>
</div>
</body>
</html>
创建HTML5文档
<!DOCTYPE html> <!-- 声明文档类型 -->
<html> <!-- 声明文档语言编码-->
<head> <!-- 文档头部区域 -->
<meta charset=utf-8> <!-- 定义字符集，设置字符编码，utf-8是通用编码 -->
<!--[if IE]><![endif]--> <!-- IE专用标签，兼容性写法 -->
<title>文档标题</title> <!-- 文档标题 -->
<!--[if IE 9]><meta name=ie content=9><![endif]--> <!--兼容IE9 -->
<!--[if IE 8]><meta name=ie content=8 ><![endif]--><!--兼容IE8 -->
<meta name=description content=文档描述信息><!-- 定义文档描述信息-->
<meta name=author content=文档作者><!--开发人员署名 -->
<meta name=copyright content=版权信息><!--设置版权信息 -->
<link rel=shortcut icon href=favicon.ico><!--网页图标 -->
<link rel=apple-touch-icon href=custom_icon.png><!-- apple设备图标的引用 -->
<!--不同接口设备的特殊声明-->
<meta name=viewport content=width=device-width, user-scalable=no >
<link rel=stylesheet href=main.css><!--引用外部样式文件-->
<!--兼容IE的专用样式表 --><!--[if IE 7]>
<!--[if IE]><link rel=stylesheet href=win-ie-all.css><![endif]-->
<link rel=stylesheet type=text/css href=win-ie7.css><![endif]--><!-- 兼容IE7浏览器 -->
<!--[if lt IE 8]><script src=http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8. js></script><![endif]--><!--让IE8及其早期版本也兼容HTML5的JavaScript脚本-->
<script src=script.js></script><!-- 调用JavaScript脚本文件-->
</head>
<body>
<header>HTML5文档标题</header>
<nav>HTML5文档导航</nav>
<section>
<aside>HTML5文档侧边导航 </aside>
<article>HTML5文档的主要内容</article>
</section>
<footer>HTML5文档页脚</footer>
</body>
</HTML>
HTML5标识文章
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>新闻</title>
</head>
<body>
<article>
<header>
<h1>人工智能击败职业围棋选手 百万美元挑战世界冠军</h1>
<time pubdate="pubdate">2016-01-29 19:28:00</time>
</header>
<p>央广网北京1月29日消息（记者赵珂）据经济之声《天下公司》报道，今年三月份，一场举世瞩目的对决将在韩国首尔举行。这就是谷歌的人工智能电脑AlphaGo与韩国九段棋手李世石的围棋比赛。</p>
<footer>
<p>http://news.163.com/</p>
</footer>
<section>
<h2>评论</h2>
<article>
<header>
<h3>张三</h3>
<p>
<time pubdate datetime="2016-2-1 19:10-08:00">人类应该警惕人工智能</time>
</p>
</header>
<p>ok</p>
</article>
<article>
<header>
<h3>李四</h3>
<p>
<time pubdate datetime="2016-2-2 19:10-08:00">人工智能知否会像核弹一样毁灭人类？</time>
</p>
</header>
<p>well</p>
</article>
</section>
</article>
</body>
</html>
HTML5分段内容
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<section>
<h1>新歌TOP10</h1>
<ol>
<li>心术 张宇</li>
<li>最亲爱的你 范玮琪</li>
<li>珍惜 李宇春</li>
<li>思凡 林宥嘉 </li>
<li>错过 王铮亮</li>
<li>好难得 丁当</li>
<li>抱着你的感... 费玉清</li>
<li>好想你也在 郁可唯</li>
<li>不难 徐佳莹 </li>
<li>我不能哭 莫艳琳</li>
</ol>
</section>
</body>
</html>
demo2
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<header>
<h1>潜行者m的个人介绍</h1>
</header>
<p>潜行者m是一个中国男人，是一个帅哥。。。。</p>
<section>
<h2>评论</h2>
<article>
<h3>评论者：潜行者n</h3>
<p>确实，m同学真的很帅</p>
</article>
<article>
<h3>评论者：潜行者a</h3>
<p>M今天吃药了没？</p>
</article>
</section>
</article>
</body>
</html>
demo3
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<article>
<h1>W3C</h1>
<p>万维网联盟（World Wide Web Consortium，W3C），又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯-李。</p>
<section>
<h2>CSS</h2>
<p>全称Cascading Style Sheet，级联样式表，通常又称为"风格样式表（Style Sheet）"，它是用来进行网页风格设计的。</p>
</section>
<section>
<h2>HTML</h2>
<p>全称Hypertext Markup Language，超文本标记语言，用于描述网页文档的一种标记语言。</p>
</section>
</article>
</body>
</html>
demo4
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<section>
<h1>W3C</h1>
<article>
<h2>CSS</h2>
<p>全称Cascading Style Sheet，级联样式表，通常又称为"风格样式表（Style Sheet）"，它是用来进行网页风格设计的。</p>
</article>
<h2>HTML</h2>
<p>全称Hypertext Markup Language，超文本标记语言，用于描述网页文档的一种标记语言。</p>
</section>
</body>
</html>
