很长时间不和大家分享小东东了，在这里梦龙向大家说声对不起啦。之前，也给自己放了个长假。
由于个人小原因换了个比较有前途的公司，从Web前端变成了HTML5了。我打交道的也从PC端变成了移动端，瞬间也觉得有很多值得玩的东西了，想到这里也感觉浑身充满了干劲儿。
在不断玩的期间，我感觉也时不常的应该向同行分享一些梦龙心得，为大家提供一些小小便利。
好了，闲话不多说，还是看这次的主题——HTML5实战与剖析之一行一行看移动端结构。针对这次的主题，我想用实战来为大家更好的分享一下有关移动端开发的那些事儿。这次将颠覆以前以往的分享形式，真枪实弹用注释的方式为大家一行一行解释。
<!doctype html>
<!--
<!doctype html> 一般的手机网站都以此开头，这个开头和html5开头的文档说明是一样的。主要应用在webapp此类的项目中。
-->
<html>
<!--
移动端开发的html标签和HTML5标签一样，比较之前版本的都比较简单了
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--
meta标签对文档的类型说明，这个标签是必要存在的。无论互联网还是手机网站都要有这个！
很多手机功能都是用meta标签实现的，在这里不得不承认meta标签的伟大！
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"/>
<!--
上面的meta标签，针对手机网站才会管用。
name="viewport"的意思是使用视图窗口，
width=device-width的意思是其宽度等于设备的相对宽度
initial-scale=1.0的意思是初始放大倍数为1倍，
maximum-scale=1.0, minimum-scale=1.0意思是最大和最小的放大倍数为1倍。
user-scalable=no的意思是停止手动放大缩小功能，有了这句话，"maximum-scale=1.0, minimum-scale=1.0"形容虚设了就
-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--
上面的meta标签，专属的移动网站的meta标签，此标签主要针对的是IOS系统的。
有了这个标签，便可以自定义保存至主屏幕的ICO图标。
在用IOS自带的safari浏览器中的"添加到主屏幕"功能的时候就会产生自定义的logo
"添加到主屏幕"的功能是由WebApp变成桌面App的方法，在safari浏览器中可找到。
-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--
上面这组meta标签表示的是当启动webapp功能时，显示手机信号、时间、电池的顶部导航栏的颜色。
默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
这个主要是根据实际的页面设计的主体色为搭配来进行设置。
这个支持IOS的，少部分android也支持
-->
<link rel="apple-touch-startup-image" href="images/start.jpg"/>
<!--
表示在点击主屏幕中生成的快捷图标后，网站在加载过程中，显示的图片。
这个功能用户体验很好。避免加载时的白屏，减少用户等待网站加载过程的烦闷。
缺陷是目前只支持竖屏浏览模式，横屏浏览时不支持。
-->
<!--
以下标签为选用内容
只有添加了 <meta name="apple-mobile-web-app-capable" content="yes" /> 标签之后才会生效
-->
<link rel="apple-touch-icon" href="images/iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/iphone4.png" />
<!--
上面这三项是针对不同版本自定义的不同的主屏幕图标。当然不定义也可以，点击主屏幕时，会以当前屏幕截图作为图标的。
而其中apple-touch-icon表示的该图标是自动加高光的图标按钮。
与之相对应的是apple-touch-icon-precomposed。按原设计不加高光效果的图标。可根据实际项目情况，选择使用。
-->
<link rel="stylesheet" type="text/css" href="print.css" media="only handheld and (max-width: 480px)"/>
<!--
上面的link标签指明了外部的样式链接，但是有条件的。这个条件就是使用media来进行设置的。它表明的意思是说仅应用在手持设备上，且最大屏幕宽度为480px;
!-->
<title>梦龙小站</title>
</head>
<body>
</body>
</html>
登录后复制
上面是一行一行的解释，下面是一个没有注释的模板，开发要是急用可以直接复制就好。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-startup-image" href="images/start.jpg"/>
<link rel="apple-touch-icon" href="images/iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/iphone4.png" />
<link rel="stylesheet" type="text/css" href="print.css" media="only handheld and (max-width: 480px)"/>
<title>梦龙小站</title>
</head>
<body>
</body>
</html>
登录后复制
HTML5实战与剖析之一行一行看移动端结构就为大家介绍到这里了，今天主要为大家介绍了一下有关移动端在结构方面的小东东，希望能对大家在移动端方面的开发有所帮助。这里面运用了些CSS3的相关知识，欲了解CSS3的相关知识尽情在本站的CSS3属性详解板块中查看相关知识。感谢大家支持。
以上就是HTML5实战与剖析之一行一行看移动端结构 的内容，更多相关内容请关注PHP中文网（www.php.cn）！
