1.HTML文件的基本構(gòu)成
我們從最基礎(chǔ)的一段HTML代碼開始編程：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>房貸計算器</title>
</head>
<body>
</body>
</html>
這段代碼包含了一個HTML的骨架领跛，是每個HTML文件都需要的部分。讀者需要了解HTML文件是由一層層的標簽組成的巍糯，并掌握了以下先修知識，便可以動手編輯HTML代碼客扎。
先修知識：
- HTML簡介祟峦，只需要對HTML有一個簡略了解即可，包括什么是HTML徙鱼，如何打開宅楞、編輯、新建一個HTML文件袱吆。參考鏈接：關(guān)于HTML厌衙。編輯HTML文件推薦使用Brackets，開啟實時預覽功能绞绒，可以隨時觀察編寫的HTML是否符合預期婶希，參考鏈接：Brackets官網(wǎng)，Brackets教程蓬衡。
- 需要了解
<html>標簽喻杈、<head> 標簽、<body>標簽和 <title>標簽各自的作用狰晚。參考鏈接：<html>標簽筒饰。 -
<!DOCTYPE>聲明告知瀏覽HTML文件的版本。參考鏈接：<!DOCTYPE >壁晒。 -
<meta>標簽的cahrset屬性定義了HTML文件的字符編碼瓷们，讀者可以在每個標簽的參考鏈接中查找到標簽包含哪些屬性。參考鏈接：<meta> 讨衣。關(guān)于UTF-8只需要知道可以正確顯示中文即可换棚，參考鏈接： UTF-8。
2.房貸計算器的內(nèi)容部分
在網(wǎng)上找到一個網(wǎng)頁版的房貸計算器反镇，或者觀察教程的運行結(jié)果截圖固蚤，思考一個網(wǎng)頁版的房貸計算器需要用戶輸入哪些信息，需要計算出哪些數(shù)據(jù)歹茶，用什么樣的HTML標簽可以實現(xiàn)所需要的功能夕玩。
2.1. 貸款類別。
需要用戶選擇貸款類別是商業(yè)貸款還是公積金貸款惊豺。
效果截圖：
源代碼：
貸款類別:
<input type="radio" name="dai_kuan_lei_bie" value="gong_ji_jin_dai_kuan" checked = "checked">公積金貸款
<input type="radio" name="dai_kuan_lei_bie" value="shang_ye_dai_kuan">商業(yè)貸款
先修知識：
- 純文本在HTML文件中直接輸入即可燎孟。換行符需要用標簽實現(xiàn)，所以運行的結(jié)果都在一行顯示尸昧。
- 用單選按鈕實現(xiàn)用戶選擇商業(yè)貸款還是公積金貸款的功能揩页。<input> 標簽用于搜集用戶信息，根據(jù)不同的 type 屬性值烹俗，輸入字段擁有很多種形式爆侣，可以是單行文本框萍程、文本域、單選按鈕等兔仰。name屬性代表單選按鈕的名字茫负，名字相同的是同一組單選按鈕，即使兩個按鈕不挨在一起也行乎赴；value屬性代表每一個按鈕的值忍法，在后面判斷選中了哪一個按鈕時會用到；checked屬性表示默認選中的是哪一個按鈕榕吼，參考鏈接： <input> 饿序。
為了字段的名字和值便于識別，減少學習負擔友题，代碼中全部使用了漢語全拼加下劃線表示嗤堰。
2.2貸款利率
需要向用戶展示每種貸款類別的貸款利率戴质，教程中采用是2017年4月份的貸款利率度宦。
效果截圖：
源代碼：
<br>
<br>
貸款利率:
<input type="text" id="id_dai_kuan_li_lv" name="dai_kuan_li_lv" value="3.25">
%
先修知識：
-
<br>標簽用來表示一個換行，參考鏈接： 換行符 - 單行文本框用來向用戶展示單行文本數(shù)據(jù)告匠，或者向用戶收集單行文本數(shù)據(jù)戈抄。value屬性表示文本框的值，并顯示在文本框中后专，這個值在后續(xù)的交互部分還會根據(jù)用戶選擇的貸款類型改變划鸽。
id屬性是一個全局屬性（每一個標簽都可以用的屬性），表示這個標簽在HTML文檔中的唯一標識戚哎，后續(xù)用jQuery選中某一個標簽時裸诽，會用到這個屬性，參考鏈接： 全局屬性型凳，id屬性丈冬。
2.3計算方式
用戶需要選擇計算方式，是根據(jù)單價面積首付比例算出貸款總額甘畅，還是由用戶直接輸入貸款總額埂蕊。
效果截圖：
源代碼：
<br>--------------------------------------------------
<br>
計算方式:
<br>
<br>
<input type="radio" name="ji_suan_fang_shi" value="gen_ju_mian_ji" checked="checked">根據(jù)面積、單價疏唾、首付比例計算
<div id="id_div_gen_ju_mian_ji">
<br>
單價:
<input id="id_dan_jia" type="text" name="dan_jia" >
元/平方米
<br>
<br>
面積:
<input id="id_mian_ji" type="text" name="mian_ji" >
平方米
<br>
<br>
首付比例:
<select id="id_shou_fu_bi_li" name="shou_fu_bi_li">
<option value="0">無</option>
<option value="0.1">1成</option>
<option value="0.2">2成</option>
<option value="0.3" selected = "selected">3成</option>
<option value="0.4">4成</option>
<option value="0.5">5成</option>
<option value="0.6">6成</option>
<option value="0.7">7成</option>
<option value="0.8">8成</option>
<option value="0.9">9成</option>
</select>
</div>
<br>
<br>
<input type="radio" name="ji_suan_fang_shi" value="gen_ju_zong_e">根據(jù)貸款總額計算
<div id="id_div_gen_ju_zong_e">
<br>
貸款總額:
<input id="id_dai_kuan_zong_e" type="text" name="dai_kuan_zong_e" >
元
</div>
先修知識：
-
<div>標簽用來分塊蓄氧，此處是為了后續(xù)當用戶選中一種計算方式時，將另一種計算方式的分塊內(nèi)的全部內(nèi)容隱藏起來做準備槐脏，參考鏈接： <div>喉童。 -
<select>標簽標示一個選擇列表，用來實現(xiàn)用戶選擇首付比例的功能顿天。<option>標簽表示下拉列表中的一個選項,selected屬性表示默認選中項,value的值設(shè)置為對應(yīng)的小數(shù)堂氯，是為了后續(xù)計算還款數(shù)額做準備重抖。參考鏈接: <select>, <option>。
2.4貸款年數(shù)祖灰、還款方式以及計算按鈕
用戶需要選擇貸款年數(shù)钟沛，采用等額本息還款還是等額本金還款，當用戶點擊計算按鈕時局扶，會計算出還款詳情恨统，當用戶點擊重置按鈕時，會恢復每個標簽的初始值三妈。
效果截圖：
源代碼：
<br>--------------------------------------------------
<br>
貸款年數(shù):
<select id="id_dai_kuan_nian_shu" name="dai_kuan_nian_shu">
<option value="72">6年(72期)</option>
<option value="84">7年(84期)</option>
<option value="96">8年(96期)</option>
<option value="108">9年(108期)</option>
<option value="120">10年(120期)</option>
<option value="132">11年(132期)</option>
<option value="144">12年(144期)</option>
<option value="156">13年(156期)</option>
<option value="168">14年(168期)</option>
<option value="180">15年(180期)</option>
<option value="192">16年(192期)</option>
<option value="204">17年(204期)</option>
<option value="216">18年(216期)</option>
<option value="228">19年(228期)</option>
<option value="240">20年(240期)</option>
<option value="252">21年(252期)</option>
<option value="264">22年(264期)</option>
<option value="276">23年(276期)</option>
<option value="288">24年(288期)</option>
<option value="300">25年(300期)</option>
<option value="312">26年(312期)</option>
<option value="324">27年(324期)</option>
<option value="336">28年(336期)</option>
<option value="348">29年(348期)</option>
<option value="360" selected = "selected" >30年(360期)</option>
</select>
<br>
<br>
還款方式:
<input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_xi" checked="checked">等額本息
<input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_jin">等額本金
<br>
<br>
<button id="ji_suan" type = "button">計算</button>
<button id="chong_zhi" type = "button">重置</button>
<br>
<br>--------------------------------------------------
先修知識：
1.<button>標簽標示一個按鈕畜埋，type屬性規(guī)定了按鈕的類型，參考鏈接：<button>畴蒲。
選擇列表的值悠鞍，取的是對應(yīng)的月數(shù)，是為后續(xù)計算還款詳情做準備模燥。
2.5計算結(jié)果
點擊計算按鈕后需要向用戶展示計算結(jié)果咖祭。等額本息每月還款額固定，采用單行文本框來表示蔫骂，等額本金每月還款額不同横腿，采用文本域來表示徒役。并將這兩個標簽的相關(guān)內(nèi)容寫在不同的分塊中姐浮，為后續(xù)選擇還款方式后杂拨，隱藏另外一個分塊做準備。
效果截圖：
源代碼：
<br>
結(jié)果：
<br>
<br>
房款總額:
<input id="id_jie_guo_fang_kuan_zong_e" type="text" name="jie_guo_fang_kuan_zong_e" >
元
<br>
<br>
首付數(shù)額:
<input id="id_jie_guo_shou_fu_shu_e" type="text" name="jie_guo_shou_fu_shu_e" >
元
<br>
<br>
貸款總額:
<input id="id_jie_guo_dai_kuan_zong_e" type="text" name="jie_guo_dai_kuan_zong_e" >
元
<br>
<br>
還款總額:
<input id="id_jie_guo_huan_kuan_zong_e" type="text" name="jie_guo_huan_kuan_zong_e" >
元
<br>
<br>
利息總額:
<input id="id_jie_guo_li_xi_zong_e" type="text" name="jie_guo_li_xi_zong_e" >
元
<br>
<br>
貸款月數(shù):
<input id="id_jie_guo_dai_kuan_yue_shu" type="text" name="jie_guo_dai_kuan_yue_shu" >
月
<br>
<div id="id_div_jie_guo_mei_yue_huan_kuan">
<br>
每月還款:
<input id="id_jie_guo_mei_yue_huan_kuan" type="text" name="jie_guo_mei_yue_huan_kuan" >
元
</div>
<div id="id_div_jie_guo_mei_yue_huan_kuan_qing_dan">
<br>
每月還款:
<textarea id="id_jie_guo_mei_yue_huan_kuan_qing_dan" name="jie_guo_mei_yue_huan_kuan_qing_dan" rows="10" cols="21">
</textarea>
</div>
先修知識：
-
<textarea>標簽標示文本域补胚， cols 和 rows 屬性來設(shè)置 textarea 的尺寸码耐，參考鏈接：<textarea>。
3.房貸計算器HTML部分的源代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>房貸計算器</title>
</head>
<body>
貸款類別:
<input type="radio" name="dai_kuan_lei_bie" value="gong_ji_jin_dai_kuan" checked = "checked">公積金貸款
<input type="radio" name="dai_kuan_lei_bie" value="shang_ye_dai_kuan">商業(yè)貸款
<br>
<br>
貸款利率:
<input type="text" id="id_dai_kuan_li_lv" name="dai_kuan_li_lv" value="3.25">
%
<br>--------------------------------------------------
<br>
計算方式:
<br>
<br>
<input type="radio" name="ji_suan_fang_shi" value="gen_ju_mian_ji" checked="checked">根據(jù)面積溶其、單價骚腥、首付比例計算
<div id="id_div_gen_ju_mian_ji">
<br>
單價:
<input id="id_dan_jia" type="text" name="dan_jia" >
元/平方米
<br>
<br>
面積:
<input id="id_mian_ji" type="text" name="mian_ji" >
平方米
<br>
<br>
首付比例:
<select id="id_shou_fu_bi_li" name="shou_fu_bi_li">
<option value="0">無</option>
<option value="0.1">1成</option>
<option value="0.2">2成</option>
<option value="0.3" selected = "selected">3成</option>
<option value="0.4">4成</option>
<option value="0.5">5成</option>
<option value="0.6">6成</option>
<option value="0.7">7成</option>
<option value="0.8">8成</option>
<option value="0.9">9成</option>
</select>
</div>
<br>
<br>
<input type="radio" name="ji_suan_fang_shi" value="gen_ju_zong_e">根據(jù)貸款總額計算
<div id="id_div_gen_ju_zong_e">
<br>
貸款總額:
<input id="id_dai_kuan_zong_e" type="text" name="dai_kuan_zong_e" >
元
</div>
<br>--------------------------------------------------
<br>
貸款年數(shù):
<select id="id_dai_kuan_nian_shu" name="dai_kuan_nian_shu">
<option value="72">6年(72期)</option>
<option value="84">7年(84期)</option>
<option value="96">8年(96期)</option>
<option value="108">9年(108期)</option>
<option value="120">10年(120期)</option>
<option value="132">11年(132期)</option>
<option value="144">12年(144期)</option>
<option value="156">13年(156期)</option>
<option value="168">14年(168期)</option>
<option value="180">15年(180期)</option>
<option value="192">16年(192期)</option>
<option value="204">17年(204期)</option>
<option value="216">18年(216期)</option>
<option value="228">19年(228期)</option>
<option value="240">20年(240期)</option>
<option value="252">21年(252期)</option>
<option value="264">22年(264期)</option>
<option value="276">23年(276期)</option>
<option value="288">24年(288期)</option>
<option value="300">25年(300期)</option>
<option value="312">26年(312期)</option>
<option value="324">27年(324期)</option>
<option value="336">28年(336期)</option>
<option value="348">29年(348期)</option>
<option value="360" selected = "selected" >30年(360期)</option>
</select>
<br>
<br>
還款方式:
<input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_xi" checked="checked">等額本息
<input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_jin">等額本金
<br>
<br>
<button id="ji_suan" type ="button">計算</button>
<button id="chong_zhi" type = "button">重置</button>
<br>
<br>--------------------------------------------------
<br>
結(jié)果：
<br>
<br>
房款總額:
<input id="id_jie_guo_fang_kuan_zong_e" type="text" name="jie_guo_fang_kuan_zong_e" >
元
<br>
<br>
首付數(shù)額:
<input id="id_jie_guo_shou_fu_shu_e" type="text" name="jie_guo_shou_fu_shu_e" >
元
<br>
<br>
貸款總額:
<input id="id_jie_guo_dai_kuan_zong_e" type="text" name="jie_guo_dai_kuan_zong_e" >
元
<br>
<br>
還款總額:
<input id="id_jie_guo_huan_kuan_zong_e" type="text" name="jie_guo_huan_kuan_zong_e" >
元
<br>
<br>
利息總額:
<input id="id_jie_guo_li_xi_zong_e" type="text" name="jie_guo_li_xi_zong_e" >
元
<br>
<br>
貸款月數(shù):
<input id="id_jie_guo_dai_kuan_yue_shu" type="text" name="jie_guo_dai_kuan_yue_shu" >
月
<br>
<div id="id_div_jie_guo_mei_yue_huan_kuan">
<br>
每月還款:
<input id="id_jie_guo_mei_yue_huan_kuan" type="text" name="jie_guo_mei_yue_huan_kuan" >
元
</div>
<div id="id_div_jie_guo_mei_yue_huan_kuan_qing_dan">
<br>
每月還款:
<textarea id="id_jie_guo_mei_yue_huan_kuan_qing_dan" name="jie_guo_mei_yue_huan_kuan_qing_dan" rows="10" cols="21">
</textarea>
</div>
</body>
</html>
4.HTML部分最終效果截圖：
