一、结构
H5 的文档标签头部：<!DOCTYPE html>
最基础的结构如下：
<!DOCTYPE html>
<html>
<head>
<!-- 头部信息 含文档属性及style /引用等-->
<!--js代码-->
</head>
<body>
<!--内容布局-->
</body>
</html>
二、布局
关于布局CSS等相关的，这里不详细说，这里就说一下最近比较流行的布局方式：Flex。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{
display: flex;
}
.box{
display: inline-flex;
}
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
flex的基本概念：
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
image
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
关于更多的flex布局的应用，会在下个文章中表述。
三、响应
这里说的响应是指，当我们编写好界面了，需要做的交互，就拿网络请求来说，
开始时：需要给用户一个loading效果；
过程中：需要一个loading不停转圈；
请求结束时：把请求回来的数据展示在界面上；
通常我们通过script 来完成，更常见的是javaScript；
<!DOCTYPE html>
<html>
<head>
<!-- 头部信息 含文档属性及style /引用等-->
<!--js代码-->
<script type="text/javascript">
function countNumber(a,b,c){
alert('a+b+c='+(a+b+c));
}
</script>
</head>
<body>
<!--内容布局-->
<!--按钮-->
<div class="button" onclick="countNumber(1,2,3)">
计算
</div>
</body>
</html>
网友评论