一、結(jié)構(gòu)
H5 的文檔標簽頭部：<!DOCTYPE html>
最基礎的結(jié)構(gòu)如下：
<!DOCTYPE html>
<html>
<head>
<!-- 頭部信息 含文檔屬性及style /引用等-->
<!--js代碼-->
</head>
<body>
<!--內(nèi)容布局-->
</body>
</html>
二、布局
關于布局CSS等相關的兢榨，這里不詳細說，這里就說一下最近比較流行的布局方式：Flex顺饮。
2009年吵聪，W3C 提出了一種新的方案----Flex 布局，可以簡便兼雄、完整吟逝、響應式地實現(xiàn)各種頁面布局。目前赦肋，它已經(jīng)得到了所有瀏覽器的支持块攒，這意味著励稳，現(xiàn)在就能很安全地使用這項功能。
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）盏混，簡稱"項目"蔚鸥。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start许赃，結(jié)束位置叫做main end株茶；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end图焰。
項目默認沿主軸排列。單個項目占據(jù)的主軸空間叫做main size蹦掐，占據(jù)的交叉軸空間叫做cross size技羔。
關于更多的flex布局的應用，會在下個文章中表述卧抗。
三藤滥、響應
這里說的響應是指，當我們編寫好界面了社裆，需要做的交互拙绊，就拿網(wǎng)絡請求來說，
開始時：需要給用戶一個loading效果泳秀；
過程中：需要一個loading不停轉(zhuǎn)圈标沪；
請求結(jié)束時：把請求回來的數(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)">
計算
</div>
</body>
</html>
