一、結(jié)構(gòu)
H5 的文檔標(biāo)簽頭部：<!DOCTYPE html>
最基礎(chǔ)的結(jié)構(gòu)如下：
<!DOCTYPE html>
<html>
<head>
<!-- 頭部信息 含文檔屬性及style /引用等-->
<!--js代碼-->
</head>
<body>
<!--內(nèi)容布局-->
</body>
</html>
二、布局
關(guān)于布局CSS等相關(guān)的，這里不詳細(xì)說，這里就說一下最近比較流行的布局方式：Flex。
2009年，W3C 提出了一種新的方案----Flex 布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。
Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
任何一個(gè)容器都可以指定為 Flex 布局。
.box{
display: flex;
}
.box{
display: inline-flex;
}
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。
flex的基本概念：
采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為 Flex 項(xiàng)目（flex item），簡(jiǎn)稱"項(xiàng)目"。
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。
項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。
關(guān)于更多的flex布局的應(yīng)用，會(huì)在下個(gè)文章中表述。
三、響應(yīng)
這里說的響應(yīng)是指，當(dāng)我們編寫好界面了，需要做的交互，就拿網(wǎng)絡(luò)請(qǐng)求來說，
開始時(shí)：需要給用戶一個(gè)loading效果；
過程中：需要一個(gè)loading不停轉(zhuǎn)圈；
請(qǐng)求結(jié)束時(shí)：把請(qǐng)求回來的數(shù)據(jù)展示在界面上；
通常我們通過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>
<!--內(nèi)容布局-->
<!--按鈕-->
<div class="button" onclick="countNumber(1,2,3)">
計(jì)算
</div>
</body>
</html>
