比如我" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 你需要一個(gè)開始編程的契機(jī)~入門篇：來自于一個(gè)HTML頁面的成就感

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

時(shí)間：2023-09-07 05:36:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-07 05:36:02 來源：網(wǎng)站運(yùn)營(yíng)

你需要一個(gè)開始編程的契機(jī)~入門篇：來自于一個(gè)HTML頁面的成就感：
以下，一點(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）組成




代碼的構(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í)，語法要求必須用 /

<head> <title>填寫信息 | 王老二餐廳預(yù)約服務(wù)</title></head>道理類似，必須有首尾標(biāo)簽 <head> ... </head> 和 <title> ... </title>
這里切記，在 title 的物理范圍以外的地方，不能有任何文本信息及符號(hào)（半角空格可）

<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用得更好？

入門了？！或許吧，謙虛一點(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)成

包間：<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ū)的名稱

酒水： <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 的值大小試試效果

編輯軟件/工具

那么多標(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ì)有涉及

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

作者表示，這是一件很尷尬的事情 :(
本篇主要是想讓大家知道怎樣能寫出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的用法等，期待下篇更精彩！

下一篇 >

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

關(guān)鍵詞：成就,契機(jī),入門

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉