你需要一個(gè)開始編程的契機(jī)~入門篇：來自于一個(gè)HTML頁面的成就感

HTML Programming

以下，一點(diǎn)不算廢話的閑言碎語

不管你現(xiàn)在學(xué)的是C系列語言還是類似于VB的 可視化編程語言 ，都這個(gè)時(shí)代了，你不另外學(xué)點(diǎn)HTML網(wǎng)頁編程，還真是跟不上時(shí)代了
比如我身邊的軟件開發(fā)同行，有做 嵌入式開發(fā) 的，有做 桌面應(yīng)用開發(fā) 的，還有做 APP開發(fā) 的，其中不乏高手，但很多人都想學(xué)或是已經(jīng)在學(xué)用一定程度的HTML網(wǎng)頁編程技術(shù)

為什么呢？打個(gè)通俗的比方（或許有些牽強(qiáng)），電腦上的輸入法，不管你用拼音還是五筆甚至日文德文，都得使用鍵盤吧
要打出各種語言文字，就相當(dāng)于嵌入式開發(fā)呀桌面應(yīng)用開發(fā)呀APP開發(fā)，而你可能需要用到ctrl或alt等快捷鍵，那么這就可能相當(dāng)于使用HTML
這種情形下，HTML類似于輔助性的功能，但并不代表要用它去做多么令人激動(dòng)的事，所以這個(gè)比喻僅僅針對(duì)上面的命題，適用于非網(wǎng)頁編程的開發(fā)者想做的事情

還不知道HTML的朋友，不用著急可以自行找度娘問問，知道HTML的朋友可以更加期待本篇內(nèi)容，不管怎樣咱們從基礎(chǔ)開始，進(jìn)入正題

初識(shí)HTML

我盡量以HTML5為例解說
另外，網(wǎng)上數(shù)不盡的各種官方的非官方的對(duì)于HTML的定義，大家可以先不用理會(huì)
跟著本篇學(xué)會(huì)了，自然會(huì)有不少啟發(fā)，到時(shí)再去看定義，應(yīng)該會(huì)有較好的理解

第一次的 掃盲篇，給大家拿出了案例“餐廳預(yù)約系統(tǒng)”
那么從本篇開始（包括后續(xù)各篇章）就圍繞著這個(gè)案例引導(dǎo)大家進(jìn)入角色--做軟件（網(wǎng)站）

上菜：怎樣的情況？

HTML制作出來的簡(jiǎn)單頁面效果

填寫預(yù)約信息的頁面

貼上代碼

<!DOCTYPE HTML>
<html>
  <head>
  <title>填寫信息 | 王老二餐廳預(yù)約服務(wù)</title>
  </head>
  <body>
    <h3>請(qǐng)輸入您要預(yù)約的以下信息：</h3>
    姓名：<input type="text" size="15"><br>
    電話：<input type="tel" size="15"><br>
    人數(shù)：<input type="number" style="width: 10em"><br>
    日期：<input type="date"><br>
    時(shí)間：<input type="time"><br>
    <input type="submit" value="預(yù)約確認(rèn)">
  </body>
</html>

這里可以“動(dòng)"起來：https://jsfiddle.net/codingme/xyz58L6t/
另外，大家可以使用這個(gè)網(wǎng)站來任意編寫前端代碼 html + css + javascript，免費(fèi)而無需在自己電腦上安裝任何編程軟件/編輯器，也不需要搭建什么服務(wù)器（目前這個(gè)階段），只要能寫出代碼，展現(xiàn)出頁面構(gòu)成，是多么很有成就感的一件事

調(diào)味：分析頁面與代碼

頁面的構(gòu)成

從截圖可知，由姓名到時(shí)間的幾個(gè)輸入用的基本信息項(xiàng)目，和一個(gè)確認(rèn)按鈕等元素（element）組成

  • 姓名、電話、人數(shù)
    以三個(gè)文本輸入框的形式表現(xiàn)出來

  • 日期、時(shí)間
    雖然也是文本輸入框，但填充了一些文字和字符，為什么呢？放在下面的代碼構(gòu)成講解

  • “預(yù)約確認(rèn)”
    以按鈕的形式表現(xiàn)出來，按照通常的理解，點(diǎn)擊這個(gè)按鈕，就會(huì)出現(xiàn)一些交互性的動(dòng)作，也放在后面講解

  • 其它
    還看出有什么了？

    • 還有一個(gè)可以稱之為頁面標(biāo)題的“請(qǐng)輸入您要預(yù)約的以下信息：”，它是以加粗且稍大號(hào)的字體顯示的（可以想像成Word呀Excel里的粗體和字號(hào)）
      但它只是我們自稱的標(biāo)題，我甚至也可以把它叫做段落標(biāo)題，因?yàn)橐粋€(gè)頁面中理論上可以有無數(shù)個(gè)這類標(biāo)題，且字體大小可以比較隨意地設(shè)定，但它并不是網(wǎng)頁本身的標(biāo)題，下面即將說明的便是網(wǎng)頁本身的標(biāo)題

    • “放眼”整個(gè)截圖，除了瀏覽器本身的地址欄和書簽欄以外，最上方網(wǎng)頁的標(biāo)題“填寫信息 | 王老二餐廳預(yù)約服務(wù)”也是代碼里一個(gè)組成部分
      從HTML代碼的語法來說，它是可有可無的，不過你會(huì)覺得有了它（實(shí)際做網(wǎng)站也會(huì)）是一種完美 ;)

代碼的構(gòu)成

什么是標(biāo)簽？這里可以事先了解一下：http://www.w3school.com.cn/html/html_primary.asp

  • 第一行 
    <!DOCTYPE HTML>

“聲明”自己是一個(gè)“合法的”html文檔
注意，< 與 > 是始末配對(duì)標(biāo)志，必須同時(shí)有，并且它倆對(duì)于html代碼中的任意標(biāo)簽都是必須的

  • 第二行及最后一行 
    <html>
 ...
</html>

在這個(gè)物理范圍內(nèi)，寫下咱們的html代碼（以及后面要講的css和javascript）
注意，這里在結(jié)束標(biāo)簽時(shí)，語法要求必須用 /

  • html頭部（header） 
    <head>
  <title>填寫信息 | 王老二餐廳預(yù)約服務(wù)</title>
</head>

道理類似，必須有首尾標(biāo)簽 <head> ... </head> 和 <title> ... </title>
這里切記，在 title 的物理范圍以外的地方，不能有任何文本信息及符號(hào)（半角空格可）

  • body，是重點(diǎn)，直接決定了網(wǎng)頁的展現(xiàn)內(nèi)容

    <body>
  <h3>請(qǐng)輸入您要預(yù)約的以下信息：</h3>
  姓名：<input type="text" size="15"><br>
  電話：<input type="tel" size="15"><br>
  人數(shù)：<input type="number" style="width: 10em"><br>
  日期：<input type="date"><br>
  時(shí)間：<input type="time"><br>
  <input type="submit" value="預(yù)約確認(rèn)">
</body>

    • <h3>：是 <h1>...<h5> 的其中一個(gè)，字體由大到小，看似調(diào)整字體的作用，實(shí)則它們是作為頁面的一些標(biāo)識(shí)性標(biāo)簽，尤其是面向搜索引擎很適用（seo-friendly）

    • <input>：輸入型元素中常見的一類，由 type 指定表現(xiàn)內(nèi)容，可以參考這里 http://www.w3school.com.cn/html/html_form_input_types.asp
      本例中，除了 text以外，都是HTML5里新增加的內(nèi)容，比如 number 的輸入框中，只能輸入數(shù)字，date 和 time 則適用于輸入日期時(shí)間（tel 目前只有 Safari 8 支持）
      submit，這里暫不作詳細(xì)解釋，大家理解為進(jìn)入要下一個(gè)頁面（預(yù)約內(nèi)容的確認(rèn)）的按鈕即可
      還有 size，是 <input> 標(biāo)簽特有的屬性，設(shè)定輸入框在頁面上顯示出來的長(zhǎng)度為15個(gè)半角字符
      <br> 標(biāo)簽，起換行的作用，如果省略它，會(huì)是怎樣的顯示呢？
      大家可以在jsfiddle里自行調(diào)整，看看效果，包括上面提到的 size，現(xiàn)在是15，也可以調(diào)整數(shù)值大小，試試吧！

  • 縮進(jìn)
    應(yīng)該不難發(fā)現(xiàn)，上面第一次寫出的完整代碼中，除了第一行以外，其它行基本都是縮進(jìn)的（2個(gè)半角空格），至少是開始標(biāo)簽的地方，這是為什么呢？
    這完全是為了“美觀”！對(duì)，年輕人愛美，咱們寫代碼也不能含糊（開個(gè)玩笑）
    其實(shí)，縮不縮進(jìn)，縮進(jìn)幾個(gè)空格，在語法上完全可以忽略，但這是作為一個(gè)程序員的素養(yǎng)，寫出美觀的代碼是很有必要的，在工作中也是非常需要的
    關(guān)于縮進(jìn)，這里有一些說法，可作參考 https://doc.yonyoucloud.com/doc/java-code-conventions/page04.html
    （因?yàn)槊糠N編程語言的縮進(jìn)都大同小異，所以暫時(shí)了解/實(shí)踐一種就可以）

  • 其它
    大家可能發(fā)現(xiàn)，使用jsfiddle操作實(shí)例時(shí)，并沒有第一行以及 <html> 標(biāo)簽，這是為什么呢？
    僅從HTML代碼的語法來說，它們是可有可無的，但作為HTML文件來說，是必須的
    所以通過jsfiddle等編程環(huán)境來練習(xí)時(shí)，可以省略這些部分，盡情玩弄html代碼于股掌，而要作為開發(fā)網(wǎng)站為目的時(shí)，請(qǐng)務(wù)必寫完整?。ń窈髸?huì)有相關(guān)文章來講解）

想把HTML用得更好？

入門了？！或許吧，謙虛一點(diǎn)，下面繼續(xù)...

再加入幾個(gè)常見元素

HTML制作出來的頁面效果

填寫預(yù)約信息的頁面 更多項(xiàng)目

貼上代碼

<!DOCTYPE HTML>
<html>
  <head>
  <title>填寫信息 | 王老二餐廳預(yù)約服務(wù)</title>
  </head>
  <body>
    <h3>請(qǐng)輸入您要預(yù)約的以下信息：</h3>
    姓名：<input type="text" size="15" placeholder="張三"><br>
    電話：<input type="tel" size="15" placeholder="13712345678"><br>
    人數(shù)：<input type="number" style="width: 10em" placeholder="10"><br>
    日期：<input type="date"><br>
    時(shí)間：<input type="time"><br>
    包間：<input type="checkbox">如需要請(qǐng)勾選<br>
    菜品：
    <select>
      <option selected>隨意點(diǎn)菜</option>
      <option>特色餐桌</option>
      <option>四季餐桌</option>
      <option>家庭餐桌</option>
      <option>商務(wù)餐桌</option>
      <option>豪華餐桌</option>
    </select><br>
    酒水：
    <input type="radio" name="drink">酒水單點(diǎn)
    <input type="radio" name="drink">酒水全包（+30元/人）
    <input type="radio" name="drink">僅軟飲料（+10元/人）<br>
    備注：
    <textarea rows="5" cols="30" placeholder="例：有老人和3歲小孩各一位，麻煩到時(shí)安排一下，謝謝"></textarea><br>
    注：如果需要包場(chǎng)，請(qǐng)另外聯(lián)系<br>
    <input type="submit" value="預(yù)約確認(rèn)">
  </body>
</html>

仍然是jsfiddle，這里可以“動(dòng)"起來：https://jsfiddle.net/codingme/tq8fyndb/

分析頁面與代碼

頁面的構(gòu)成

在之間的基礎(chǔ)項(xiàng)目上，加入了幾個(gè)可選項(xiàng)目，作為細(xì)節(jié)，讓顧客有更多選擇性，也感到些許人性化
加入了幾個(gè)不同的頁面元素，提供稍微豐富的可視性，及提高了操作上的便利性

代碼的構(gòu)成

  • 復(fù)選項(xiàng) 
    包間：<input type="checkbox">如需要請(qǐng)勾選

可以理解為想表達(dá) YES / NO 的意思
實(shí)際生活中，經(jīng)?？吹降捻撁嫔蠒?huì)使用復(fù)選項(xiàng)讓咱們確定某商品的篩選條件，比如顏色、大小、品牌

  • 下拉列表 
    菜品：
<select>
  <option selected>隨意點(diǎn)菜</option>
  ...
</select>

只要覺得想加入的內(nèi)容，“戀人餐桌”“尊師餐桌”“哥們餐桌”...，可以隨意增加N多個(gè)選項(xiàng) option，其中我用 selected 屬性把第一個(gè)選項(xiàng)設(shè)定成默認(rèn)被選擇的狀態(tài)
理論上應(yīng)該沒有限制，不過，你不會(huì)想往里面加入上百個(gè)選項(xiàng)??！那會(huì)有多么地難看，以咱們這個(gè)例子，從jsfiddle試試便知 ;)
實(shí)際生活中，經(jīng)?？吹降捻撁嫔蠒?huì)使用下拉列表顯示各省自治區(qū)的名稱

  • 單選項(xiàng) 
    酒水：
<input type="radio" name="drink">酒水單點(diǎn)
<input type="radio" name="drink">酒水全包（+30元/人）
<input type="radio" name="drink">僅軟飲料（+10元/人）

與復(fù)選項(xiàng)類似，不過，這時(shí)只能選定其中一種
如果沒有 name 這個(gè)屬性，且必須要寫成同一個(gè)屬性值（因?yàn)槭窍氡磉_(dá)河水，所以這里是drink），不然，選定后的效果會(huì)與復(fù)選項(xiàng)一樣了，達(dá)不到單選的目的！以咱們這個(gè)例子，去掉所有 name="drink"， 挨個(gè)點(diǎn)擊選項(xiàng)，從jsfiddle試試便知 ;)
實(shí)際生活中，經(jīng)常看到的頁面上會(huì)使用單選項(xiàng)讓咱們選擇性別：男 or 女

  • 文本域（多行輸入） 
    備注：
<textarea rows="5" cols="30" placeholder="例：有老人和3歲小孩各一位，麻煩到時(shí)安排一下，謝謝"></textarea>

這個(gè)也很常見，可以改變屬性 rows 以及 cols 的值大小試試效果

  • placeholder屬性
    看出例子中各輸入框里的效果了嗎？
    這是HTML5里新增加的屬性之一，主要是起到提示的作用，在它誕生之前，總會(huì)通過在旁邊寫上說明文，占用顯示地盤還得考慮寫怎樣的文字描述才能讓用戶更容易地明白
    以咱們這個(gè)例子，去掉所有 placeholder 屬性和它的值，從jsfiddle看看效果吧

編輯軟件/工具

那么多標(biāo)簽和代碼，都得自己一個(gè)個(gè)敲鍵盤嗎？！
大家可能有這樣的擔(dān)心，所以如果你不夠勤奮的話，這確實(shí)是一個(gè)問題...
但又不用過于擔(dān)心，有妙招，尤其在實(shí)際工作中，需要高效編碼（不過，初學(xué)者還是多敲敲鍵盤吧，有益無害）

  • 模板 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title></title>
  </head>
  <body>

  </body>
</html>

這一段代碼，我沒有敲一個(gè)鍵盤，鼠標(biāo)輕輕一點(diǎn)，自動(dòng)生成，編碼效率大幅提高（稍后講解）
有些模板已經(jīng)做得很人性化，甚至你連代碼都不用怎么寫，一個(gè)完整的頁面就出來了
現(xiàn)在，作為html的骨架部分已經(jīng)有具備，那么本篇前面部分講述那些的 <title> <body>，接下來就該你來表演了

提示 ：雖然說骨架已經(jīng)具備，但因?yàn)橹皇浅鯇W(xué)編寫html，這樣足夠了，而實(shí)際工作中要開發(fā)一個(gè)網(wǎng)站的話，這里也是有很多學(xué)問的，今后的文章中會(huì)有涉及

  • 自動(dòng)補(bǔ)全
    注：<input> 標(biāo)簽有點(diǎn)特殊，可以忽略
    開始標(biāo)簽（<h3> <select> <option> <textarea>），可以從jsfiddle試試，只要鍵盤敲出了，那么結(jié)尾標(biāo)簽（</h3> </select> </option> </textarea>） 自動(dòng)就給咱們補(bǔ)全了，是不是很省心，而且會(huì)減少鍵盤敲打錯(cuò)誤的幾率，也即是降低了語法錯(cuò)誤的幾率

  • 編輯器/工具介紹
    一方面，類似于jsfiddle這類在線編輯器，且能實(shí)時(shí)看到效果的還有很多，我自己一般都不去下載什么編輯軟件了，直接在線上（云端）編程

    另一方面，現(xiàn)在收費(fèi)或免費(fèi)編輯工具很多，為程序員所鐘愛的也不少，確實(shí)能極大地提升編碼效率，大家可以參考一下主流的編輯器 https://zhuanlan.zhihu.com/p/29498175

    由于種種原因，我平時(shí)用了一個(gè)叫做PSPad的編輯器，順便推薦一下
    通過它，鼠標(biāo)輕輕一點(diǎn)，自動(dòng)生成了稍前提到的模板代碼的骨架，大家自行摸索實(shí)踐吧
    它好像沒有在主流編輯器一覽中，但我覺得挺好用，除了編碼外相關(guān)功能也很齊全，它支持多國語言，官網(wǎng)提供漢化包

    還有一些“神作”，比如Emmet，大家可以在今后的工作實(shí)踐中好好利用，這里不作講解

頁面顯示太死板了，看不下去...

作者表示，這是一件很尷尬的事情 :(
本篇主要是想讓大家知道怎樣能寫出html代碼，且講解了頁面構(gòu)成和相關(guān)元素的使用
為了進(jìn)一步激發(fā)大家的興趣化解迷局，接下來把原本放在下一篇要講的內(nèi)容稍作提示，也為本篇作個(gè)了結(jié)

“前端工程師”，想必大家經(jīng)常聽到，尤其是準(zhǔn)備就職的朋友們，html + css + ?，這個(gè)組合是必備技能
“？”的地方先保留一下，現(xiàn)在只是針對(duì)本節(jié)的尷尬局面，對(duì)css作點(diǎn)預(yù)習(xí)

還是先上頁面的效果

填寫預(yù)約信息的頁面 稍加修飾

代碼

<head>
  <title>填寫信息 | 王老二餐廳預(yù)約服務(wù)</title>
</head>

<body style="font-family: Microsoft YaHei">
  <h3 style="background-color: lightgray">請(qǐng)輸入您要預(yù)約的以下信息：</h3>
  姓名：<input type="text" size="15" placeholder="張三" style="border-radius: 5px; border:solid 1px black; margin:5px;"><br>
  電話：<input type="tel" size="15" placeholder="13712345678" style="border-radius: 5px; border:solid 1px black; margin:5px;"><br>
  人數(shù)：<input type="number" style="width: 10em" placeholder="10" style="border-radius: 5px; border:solid 1px black; margin:5px;"><br>
  日期：<input type="date" style="border-radius: 5px; border:solid 1px black; margin:5px;"><br>
  時(shí)間：<input type="time" style="border-radius: 5px; border:solid 1px black; margin:5px;"><br>
  包間：<input type="checkbox">如需要請(qǐng)勾選<br>
  菜品：
  <select style="border-radius: 5px; border:solid 1px black; margin:5px;">
    <option selected>隨意點(diǎn)菜</option>
    <option>特色餐桌</option>
    <option>四季餐桌</option>
    <option>家庭餐桌</option>
    <option>商務(wù)餐桌</option>
    <option>豪華餐桌</option>
  </select><br>
  酒水：
  <input type="radio" name="drink">酒水單點(diǎn)
  <input type="radio" name="drink">酒水全包（+30元/人）
  <input type="radio" name="drink">僅軟飲料（+10元/人）<br>
  備注：
  <textarea rows="5" cols="30" placeholder="例：有老人和3歲小孩各一位，麻煩到時(shí)安排一下，謝謝" style="border-radius: 5px; border:solid 1px black; margin:5px;"></textarea><br><br>
  注：如果需要包場(chǎng)，請(qǐng)另外聯(lián)系<br>
  <input type="submit" value="預(yù)約確認(rèn)" style="border-radius: 5px; border:solid 1px black; padding:5px; margin: 10px 0 0 150px; display: block">
</body>

jsfiddle實(shí)例在這里 https://jsfiddle.net/codingme/5j6obdgf/

這里只作了簡(jiǎn)單的變化，所以頁面并沒有被我改得多么漂亮...
不過，大家看出什么端倪了嗎？
除了我把頁面整體（<body>）的字體從默認(rèn)的宋體變化成了微軟雅黑，更多魔法在于 style 屬性
我在每個(gè)輸入框類的元素中，分別加入了一小串代碼，即所謂的css（與下篇要講解的css文件異曲同工，本質(zhì)是一樣的），修飾需要變化的元素
大家可以自行實(shí)踐，網(wǎng)上查閱css的用法等，期待下篇更精彩！

下一篇 《或許程序員與藝術(shù)家有前世的緣分~入門篇：Hello Style! 化妝師CSS帶來的問候》

希望能為社會(huì)盡一份綿薄之力，更多和您類似的迷惘中的朋友能看到
無論點(diǎn)贊、收藏、分享或是打賞，您的關(guān)注，便是我繼續(xù)寫作的動(dòng)力
原創(chuàng)作品，歡迎轉(zhuǎn)發(fā)，但求注明出處，謝謝合作！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,068評(píng)論 25贊 709
  • 用兩張圖告訴你，為什么你的 App 會(huì)卡頓? - Android - 掘金 Cover 有什么料？ 從這篇文章中你...
    hw1212閱讀 14,012評(píng)論 2贊 59
  • 1、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請(qǐng)求組件 FMDB本地?cái)?shù)據(jù)庫組件 SD...
    陽明AI閱讀 16,209評(píng)論 3贊 119
  • 看著深秋的雨點(diǎn)敲打在玻璃窗上，思緒又回到兩天前的那個(gè)陰郁的風(fēng)雨之夜，那天晚上，同樣陰郁的還有工段長(zhǎng)胡扒皮的心情，從...
    吃破產(chǎn)閱讀 248評(píng)論 0贊 0
  • 給“花卷”的一封信 To花卷： 花卷，轉(zhuǎn)眼間又要到我們相遇的日子。時(shí)間的沙漏在一點(diǎn)一滴靜靜地流淌，歲月的痕跡在一筆...
    花卷要給妞妞辮花辮閱讀 497評(píng)論 2贊 3

友情鏈接更多精彩內(nèi)容