本文目的是短時間之内，通過做出一個簡單的緣分對對碰遊戲，了解網頁的基本要素。之前沒有接觸過網頁開發，這次算是個入門了。
對于大部分網頁，都要包括HTML、CSS、JavaScript三種技術。而相對應的三種檔案格式為.html、.css、.js。下面首先給出這個遊戲的代碼，在分析中學習。我認為了解整體架構之後，學習過程中對于自己不懂的部分百度一下，可以學習的更快，是以我不會做的過于詳細。對最新标準支援比較好的是Chrome和Firefox浏覽器，推薦使用這兩個浏覽器進行調試。
遊戲說明
這是一個非常簡單的遊戲。使用者輸入兩個名字，點選測一測，就可以看到緣分指數。整個遊戲總共有三個檔案，即上文提到的三個。
HTML部分
HTML即超文本标記語言負責呈現給使用者的界面，通過各種标記來定義網頁的目錄和内容。最新的标準為HTML5，新标準下面的遊戲開發是最近比較火的一個方向。
下面是相應的代碼：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>緣分對對碰</title>
<link rel="stylesheet"
type="text/css"
href="wordStory.css"/>
<script type="text/javascript"
src="wordStory.js">
</script>
</head>
<body>
<h1>緣分對對碰</h1>
<h2>輸入你和ta的名字，測出你們的緣分指數！</h2>
<p>
<form>
<fieldset>
<label for="boyName">男方姓名</label>
<input type="text" id="boyName"/>
<label for="girlName">女方姓名</label>
<input type="text" id="girlName"/>
<button type="button"
οnclick="tellStory()">
測一測
</button>
</fieldset>
</form>
<div id="output">
</div>
</p>
</body>
</html> 在<>中的稱為tag，通常首尾tag中的内容稱為一個container，單個tag一般為element。tag中可以定義參數，如type等等。
html tag包含html代碼，包括head和body兩部分。
而head中title定義了浏覽器中顯示的标簽名稱，link tag給出了一個到css檔案的連結，script給出了使用的JavaScript檔案，如果不想使用外部的css和js檔案，可以在head部分直接貼代碼。
在body部分，h1給出了大标題，h2、h3等等可以定義小一級的标題。form和fieldset tag内部是一個表格。lable和input分别定義了标簽和輸入文本框。button定義了一個按鈕，onclick參數設定了點選按鈕時候要運作的代碼。
div tag給出了一個可以使用JS實時改變的html内容，具體如何改變下面會提到。
CSS部分
CSS又稱為風格樣式表，定義了網頁呈現的風格和樣式，如字型大小、顔色、邊距等等。
CSS檔案代碼：
background-color: rgb(228,255,255);
}
h1{
text-align: center;
}
h2{
text-align: center;
color: rgb(20,180,30);
}
fieldset{
width: 600px;
text-align: center;
margin: auto;
}
label{
float: left;
text-align: right;
padding-right: 1em;
clear: left;
width: 300px;
}
input{
float: left;
}
button{
display: block;
clear: both;
margin: auto;
}
#output{
text-align: center;
font-size: 36px;
color: rgb(120,30,250);
}
可以看到，代碼是分塊構成的，每個塊定義對應的tag的樣式。最後一個#output之前加#可以把一個div通過id變成一個可以操作的container。
大多數參數都能從名字看出含義，這也是網頁開發中的一個要點。因為網頁代碼通常數量多，良好的命名方式可以加快開發速度。
不過，有幾個參數略微複雜。padding定義了tag内部的邊緣空白，而margin定義了外部的邊緣空白。float使tag中内容向某個方向靠，clear則是使某個方向上開始的元素就是這個tag，即不會在左邊還有元素。比如label就使得每個label停靠在容器最左邊。clear：both則使得這個元素單獨成一行。
JavaScript部分
JS曆史悠久，生命力非常強大。在用戶端Angular等各種各樣的庫，甚至可以在浏覽器裡模拟linux系統（jslinux），也可以運作大型遊戲（doom和epic citadel）。而在伺服器端，node.js在chrome浏覽器v8引擎基礎上作為server，性能遠超php。可以說，JS is the future。當然這是一句玩笑話。
在這個遊戲HTML檔案中看到，按鍵被點選時會調用tellStory函數，這個函數是在JavaScript檔案中定義的。
下面給出代碼：
var textBoyName=document.getElementById("boyName");
var boyName=textBoyName.value;
var textGirlName=document.getElementById("girlName");
var girlName=textGirlName.value;
var output=document.getElementById("output");
var point=Math.ceil(10*(Math.random()+9));
story=boyName+" 和 "+girlName+" 此時此刻的緣分指數為 "+point;
output.innerHTML=story;
}//end tellStory 這段代碼僅僅定義了一個函數。函數中getElementById可以根據id得到相應的元素，取其value值就是使用者輸入的文本。使用random函數随即生成一個分數，就可以輸出了（額，如何生成分數可以更sophisticate一些）。當然，這個輸出是輸出到output對應的div元素中的。
進一步的學習
将css和js代碼分别存儲為檔案，使用浏覽器打開html檔案，這個遊戲就可以運作了。
這是一個非常簡單的遊戲，對于初學者，可以跟着Wiley.HTML5.Game.Development.for.Dummies.2013這本書學習。
空談誤國，實幹興邦。如果一直隻是看代碼，看書，是很難精通網頁開發的。最好自己實作一些功能子產品，可以參照現有的網站
富貴論壇www.fgba.net，w3school在學習過程中的參考手冊很友善。
![vue搭建過程及出現問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)