HTML5 actual combat and analysis: look at the mobile terminal structure line by line-H5 Tutorial-php.cn

HTML5 actual combat and analysis: look at the mobile terminal structure line by line

黄舟

Release： 2017-02-10 14:27:48

Original

1448 people have browsed it

It’s been a long time since I shared my little stuff with you. Here Menglong would like to say sorry to you all. I also gave myself a long vacation before.

Due to small personal reasons, I changed to a more promising company and changed from Web front-end to HTML5. What I was dealing with also changed from the PC side to the mobile side, and I instantly felt that there were a lot of things worth playing. Thinking of this, I felt full of energy.

As I continue to play, I feel that from time to time I should share some of my experiences with Menglong with my colleagues to provide some little convenience for everyone.

Okay, without further ado, let’s look at the theme this time—HTML5 actual combat and analysis, line by line, looking at the mobile terminal structure. Regarding this topic, I would like to use practical experience to better share with you some things about mobile terminal development. This time, we will subvert the previous sharing method and explain it line by line using real-life comments.

<!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>

Copy after login

## The above is a line-by-line explanation, and the following is a template without comments. Development If you need it urgently, you can just copy it.

<!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>

Copy after login

HTML5 Practical Combat and Analysis This concludes the introduction to the structure of the mobile terminal line by line. Today I mainly introduce to you some small details about the structure of the mobile terminal. Dongdong, I hope it can be helpful to everyone in the development of mobile terminals. Some CSS3 related knowledge is used here. If you want to know about CSS3 related knowledge, feel free to check out the relevant knowledge in the CSS3 attribute detailed explanation section of this site. Thank you all for your support.

The above is the actual combat and analysis of HTML5, looking at the structure of the mobile terminal line by line. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!