本文的開篇，本人想說句正確的廢話，應屆生程序員要過面試，不能單靠自我介紹，也不能單靠背題，事實上應屆生準備面試得綜合地從簡歷、項目、技術和背面試題方面做準備。

由于本人是做Java方面的，所以本人就將從上述諸多方面綜合講下，應屆生朋友該如何過面試，其中的操作要點有兩個，一是要在簡歷和面試中，向面試官證明自己有足夠的商業(yè)項目經(jīng)驗，商業(yè)項目經(jīng)驗可以理解成實習經(jīng)驗，二是要結合項目講清楚自己熟悉的技術，這樣才能證明自己的技術是來自實踐，而不是只會理論。

先說下不少應屆生在找Java工作時的一些認知誤區(qū)以及實際情況。

1 不是誰技術好，誰實習經(jīng)驗長，誰背的面試題多，誰就能找到好工作。事實上，Java應屆生應當在簡歷上寫清楚盡量多的java商業(yè)項目經(jīng)驗，這樣的簡歷才會得到更多的面試機會。在這個基礎上，還要在面試中證明自己足量的商業(yè)項目經(jīng)驗以及掌握必要的技術，這樣就能更好地找到工作。

2 雖然說，校招java程序員時，未必要求應屆生有java真實的項目經(jīng)驗，事實上大多數(shù)的應屆生在投簡歷和面試階段，都只能證明自己的學習項目經(jīng)驗，但如果應屆生求職者能證明自己的商業(yè)項目經(jīng)驗，一定能產(chǎn)生代差優(yōu)勢。

3 這點其實說得有些悲觀，java應屆生，如果學歷是本科，學校是一本，剛畢業(yè)就進大廠的機會就能多些。如果學校是二本，那么進大廠不是說沒可能，但可能性會大大降低。至于大專應屆生，找工作的目標一般是僅限于小公司。

4 不少應屆生朋友會在簡歷上，通過學校的課程，學習成績，畢業(yè)設計項目或自學階段的項目來證明自己的實力，但是面試官，尤其是好公司的面試官，在挑簡歷時首先看學校是不是一本，然后再看商業(yè)項目經(jīng)驗。

所以可以這樣說，如果學校一般，甚至學歷是大專，如果只簡歷上寫熟悉的技術，以及學過的課程，不展現(xiàn)商業(yè)項目的實習能力，簡歷過篩選這得靠運氣，過面試也得靠海投。而不少211,985院校的java應屆生，可能單靠學校和學歷，就能超越不少一般學校的求職者。

在下文里，本人不想羅列一些Java面試八股文，因為這些哪怕背熟了意義也不大，就會從簡歷和面試這兩個方面，講講java應屆生的求職技巧。甚至，如果臨近畢業(yè)，自己java技能感覺不熟，本人還給出了在短時間內(nèi)彌補技能和面試說辭的技巧。

先說下，Java應屆生找工作的兩個要點是，第一能證明自己有半年（甚至更長）的實習經(jīng)驗，第二能證明自己至少能用spring boot開發(fā)項目。

如果當下感覺自己spring boot技術不熟，千萬別直接背八股文，也別輕易去github上去下載一個java項目來跑，更也別貿(mào)然去報個班，而是可以直接通過自學，先學會spring boot+數(shù)據(jù)庫做增刪改查業(yè)務的技能。這塊要達到什么樣的效果呢？

1 能建立一個spring boot項目，數(shù)據(jù)庫可以用mysql，但其中建一個表就行。在spring boot項目里，需要寫控制器層，service層和repo層代碼，實現(xiàn)用spring boot框架實現(xiàn)增刪改查的操作，當然在其中包含的必要的技術，比如注解或java語法，這些得掌握。

2 java核心語法層面，別系統(tǒng)學，就針對spring boot做增刪改查業(yè)務的點，用到什么學什么。比如用到了集合，異常處理或類，基本上就遇到什么學什么。這好比是通過看英文文章來熟悉常用單詞，這比單純系統(tǒng)背單詞，效果要好太多。

3 別全面去學分布式組件或spring cloud微服務技術，當然這塊如果掌握最好，如果當下不掌握，在校階段去學這些比較值錢的技術，未必能學好，而且在面試中也未必能證明自己在項目里用過。

其實上文給出的學習要求是比較低的，可能會有不少應屆生朋友質疑，學太簡單了未必能找到工會作。但本人更想說的是，第一，在項目里會用技術和在面試中證明自己會用技術，這是兩回事，后者的難度是遠小于前者的。第二，應屆生在學習階段，由于沒有接觸到真實項目，所以真會做太多的無用功。同時，結合下文的描述，大家能看到，其實學到上述這個程度，真能去找工作。

下面再說下應屆生該如何寫簡歷，其中的要點剛已經(jīng)說了，盡量寫上足夠多的商業(yè)項目經(jīng)驗。這里需要額外說下，如果在簡歷中寫課程成績之類的，這其實很虛，如果寫學習項目或畢業(yè)設計項目，這塊意義也不大，但如果有編程方面的獲獎經(jīng)驗或其它加分項，這倒可以寫上。

商業(yè)項目是指，真正在實習公司里做過的項目，或者是用于掙錢的項目。其中包含的關鍵要素是公司或掙錢。商業(yè)項目該怎么寫？

1 寫上時間范圍，這個項目所在的公司，以及項目名稱，如果不是在公司里做的，寫上能證明是商業(yè)項目的文字。同時寫一些你做過的業(yè)務模塊。

比如是，2022年2月到2022年10月，在上海xx公司實習，做了報銷管理系統(tǒng)。本人做的是業(yè)務報銷和信息錄入模塊。再如，2022年2月到2022年10月，本人是幫教研室老師做了一個政府信息管理系統(tǒng)，這個項目是來自xx渠道，這個項目是掙錢的，本人拿到了xx收益。本人做的是信息錄入和關鍵字查詢等模塊。

2 寫用到的技術，技術不求多，因為不是靠技術來證明項目是商業(yè)項目。

比如是，用到了spring boot，jpa，mysql，logback，redis等。

3 這點很關鍵，要寫些商業(yè)項目區(qū)別于學習項目的點，這些點最好還是你參與過或你知道。

比如是，這個項目里，本人是用junit做測試，用logback寫日志，用jenkins部署，參與過部署到linux上的工作，同時本人還看過線上日志，排查過業(yè)務問題。

如果這個項目是能看得到摸得著的項目，比如是web項目或app項目，直接寫到簡歷上，如果不是，那么可以寫，這是個公司內(nèi)部項目，對方客戶已經(jīng)上線。注意，商業(yè)項目會上線，學習項目一般沒這個過程。

4 如果有分布式微服務方面的亮點可以加上，但應屆生如果寫明了商業(yè)項目，哪怕只用到spring boot增刪改查技術，這比學習項目要強太多。

比如可以寫，這個項目里，本人用到了redis做緩存，用kafka做消息中間件，解決過JVM問題。

從上文的描述里大家能看到，在簡歷中是通過多個方面來證明這是商業(yè)項目，但是別擴展寫功能，別把簡歷這部分的項目描述寫成是項目使用說明書，因為面試官不關心這個。

有些話本人不想說得太直接，不過，在面試中通過真實項目說出來的spring boot增刪改查技術，其實效果和上文提到的，spring boot+單表的增刪改查技術，其實兩者是差不多的。求職者一方面需要說明其中包含的spring boot的處理流程，無非是從控制器到service到repo再到數(shù)據(jù)表，另一方面求職需要說明其中包含的注解。

至于前端技術，比如vue.js或android框架，當然熟悉最好，不熟悉的話，應屆生面試時就一句話，“本人在這個項目里只做后端”，這就可以了，因為能有商業(yè)后端項目經(jīng)驗的應屆生真不多。

簡歷上如果包含半年等的商業(yè)項目經(jīng)驗，其實真能爭取到不少面試機會了，下面再說說應屆生朋友該如何準備Java面試。

應屆生朋友應該是通過介紹項目，來證明商業(yè)項目的真實性。由于商業(yè)項目是用于掙錢的，而且商業(yè)項目正是因為要從客戶那邊收錢，所以其在確定需求，開發(fā)，測試，部署和問題排查等方面，和學習項目存在很大的差異。Java應屆生朋友，不僅應該從技術層面，更應該從項目開發(fā)的諸多細節(jié)，來證明自己做過商業(yè)項目。

先可以說下真實項目的敏捷開發(fā)流程和常用的項目管理工具。

學習項目一般是從零跑通一個項目，只要能從前端發(fā)請求看到預期的效果，這個項目就算成了，但真實的項目一般會采用敏捷開發(fā)模式，哪怕是有些公司的田園敏捷開發(fā)模式，一般也是采用“迭代”開發(fā)的流程。

比如一個項目從開始做，到真實完成，假設需要半年，包含大概50個功能點，那么就會把這些功能點，均攤到6個開發(fā)周期，每個周期大概是一個月，這樣每個月發(fā)布一次，把本月需要完成的功能點和本月修改掉的bug一起發(fā)布上線。

具體的，比如一個月有4周，會在第一周的前半周，和產(chǎn)品方或客戶方談好需求，一般這是項目經(jīng)理主導做的，談好以后分配任務給諸多程序員，分配任務時一般用jira來記錄，當然如果發(fā)現(xiàn)bug了，也會用jira來記錄bug。

開發(fā)前，一般會基于git的主分支（master或dev或current）上創(chuàng)建一個新分支，比如202210dev分支，諸多程序員在這個分支上開發(fā)，然后約定個開發(fā)結束時間，這樣到了這個月的第三周結束后，這個開發(fā)分支上就包含了本次發(fā)布所需要的的代碼，然后這個發(fā)布版本就會凍結住，凍結的意思是，發(fā)布的版本需要穩(wěn)定，不能隨便再向里面提交并合并代碼，在此基礎上測試人員就開始測試。

一旦測試人員測出問題，項目經(jīng)理會做個評估，如果不影響本次發(fā)布，就會在下個周期里修改掉，如果影響很大，那么需要走“解封”流程，解開本次已經(jīng)凍結住的git分支，修改后再凍結住。

這樣到了本次迭代周期的發(fā)布日，一般是業(yè)務量比較少的時間點，比如周末凌晨，運維人員會把從git上拉下待發(fā)布的分支，用maven或各種工具打成jar包，然后通過jenkins工具，或干脆手動復制粘貼，放到linux環(huán)境上，再用java -jar命令啟動，啟動后開發(fā)和測試人員發(fā)現(xiàn)沒問題后，本次發(fā)布就算成功，然后再開始下個為期一個月的開發(fā)周期，這樣一直到本項目全部完成。

所以求職者如果要證明自己的項目是真實項目，可以從如下若干個角度來準備說辭。

1 我們項目是用敏捷開發(fā)模式，然后大致敘述下開發(fā)周期，同時加一句，我們項目組，會每天開會討論進度，如果有阻塞性的問題，或者技術問題，得趕緊提出來。

2 我們項目組用到了git和maven來管理代碼和依賴包，同時看些git拉分支，合并代碼和處理沖突的細節(jié)，也可以看下用maven打包以及創(chuàng)建公司私有倉庫的做法。

3 我們項目是用jira來管理任務和bug，真實項目一般都用jira，所以哪怕是零基礎的，jira未必要搭建，未必要實踐，但需要了解下通過jira創(chuàng)建任務和創(chuàng)建bug的細節(jié)。

4 我接到開發(fā)任務后，一定會在開發(fā)分支，比如202210dev分支，在此基礎上再創(chuàng)建一個我自己用的任務分支，比如202210dev001，其中001是任務號，在此分支上開發(fā)功能點。開發(fā)好以后，我會用junit寫單元測試案例，也會用postman發(fā)請求，這個屬于程序員自己要做的測試，當測試通過后，再提交到202210dev001分支上。

5 這里請注意，得說下代碼review。我在202210dev001分支上的代碼，得合并到202210dev這個發(fā)布分支，合并前，項目經(jīng)理會指定其它開發(fā)者review我的代碼，如果有功能或代碼規(guī)范的問題，我會修改掉。測試人員如果發(fā)現(xiàn)我做的模塊有功能問題后，會給我開個bug，一般也是用jira開，我會修，當然我把修改掉bug后的代碼合并到發(fā)布分支前，依然需要經(jīng)過code review這個過程。

6 我自己做好我的業(yè)務模塊后，會用junit寫測試案例，如果junit不熟悉可以不說，但一定要說用postman發(fā)請求測試。在版本發(fā)布的時候，我會留守在公司，遇到問題我會排查和解決。

應注意，上述提到的技術要點，哪怕對于零基礎的應屆生朋友，絕不是高不可攀，而是能通過一些簡單的項目實踐能掌握。

在商業(yè)項目里，開發(fā)者未必是全棧都做，而是只做后端開發(fā)，而且后端開發(fā)一定要加入很多細節(jié)。

在不少應屆生朋友做的學習項目里，開發(fā)者其實是全包的，從前端到后端spring boot，再到建數(shù)據(jù)表，這些工作都要做。但在真實項目中，如果你的職責是后端代碼，那么其實是無需關注前端的。

而且在項目組里，你其實真未必是從零開始做。比如你入職被分配到一個財務系統(tǒng)里，這個系統(tǒng)一定是開發(fā)到一定程度了， 所以你其實是無需參與表設計的工作，也無需參與搭建前端后端框架的事。你的事情其實就是用spring boot開發(fā)業(yè)務，在上文的基礎上，你還可以用如下的說辭證明你做的是商業(yè)項目，而不是學習項目。

1 我只負責用后端開發(fā)，即用spring boot開發(fā)控制器，service和repo層，我這個接口是用@requestmapping來匹配前端請求，前端是html頁面。

2 我開發(fā)的api需要用swagger來展示接口，swagger其實不難，大家可以看下。在我開發(fā)的api里，要用logback寫日志，以便排查線上問題。對應的，我每開發(fā)好一個接口后，要用junit來寫單元測試案例，這里強烈建議大家學下junit，這不難，而且了解一下其中mock數(shù)據(jù)的動作。

3 我們的環(huán)境分測試環(huán)境和生產(chǎn)環(huán)境，其中生產(chǎn)環(huán)境就是對外提供服務的，但我們的代碼開發(fā)好以后，會部署到測試環(huán)境，測試環(huán)境也是linux。一般學習項目甚至只在windows上開發(fā)，但真實項目一般分測試和生產(chǎn)兩個環(huán)境。

4 我開發(fā)的時候，如果需要其它組提供接口，比如支付系統(tǒng)里要調(diào)用對賬模塊的api，那么我會和其它組的人溝通，對應地，對方組開發(fā)好以后，會用swagger來展示接口。這里你可以展示在項目開發(fā)中必不可少的溝通技能，相比之下在學習項目，一定沒這個流程。

上述說辭對應屆生朋友來說絕非難點，但是很多應屆生是忽視的，所以如果應屆生朋友用些時間學習并練習一下說辭，絕對能很好地證明自己做過商業(yè)項目。

在真實項目里，一定會遇到線上問題，你可以說下排查分析線上問題的細節(jié)。

這塊大家可以說，告警信息后，可以通過vi命令，去觀察linux上的系統(tǒng)日志，或者甚至可以直接從linux上把代碼拉到windows，再用記事本來打開。應屆生朋友一般不會處理太難的問題，所以可以說解決過因參數(shù)不對導致的問題。比如是業(yè)務問題，是參數(shù)不對，那么能根據(jù)日志上的告警信息，定位到具體的類和代碼行，然后解決。再如，在日志里看到是空指針，然后也是定位到具體的類和具體的行，然后解決。

如果應屆生能通過準備日志方面的說辭，證明自己排查過線上問題，那么也能很好地證明自己的商業(yè)項目經(jīng)驗。

在準備好上述商業(yè)項目的說辭后，應屆生朋友背些java八股文倒也不是不可以，不過一方面，java八股文資料太多，另一方面，如果在說好項目和相關的技術后，有些面試官問的八股文就會簡單很多。所以這塊八股文方面，本人不做展開。

所以應屆生朋友在找工作時，絕對應該是方法得到，即優(yōu)先展示商業(yè)項目經(jīng)驗。事實上，本人最近一直在幫一些應屆生朋友做入職輔導，用的就是上述的一些經(jīng)驗。

再說應屆生薪資這個話題，其實應該這樣說，應屆生朋友如果能找到java工作，那么就能拿到當?shù)乇容^普遍的薪資，這看似是正確的廢話，但更可以這樣理解。

1 比如在上海，22年對java應屆生的行情是8k到12k左右，所以本科應屆生不論Java技術掌握怎么樣，只要能過Java面試，就能拿到這個薪資。

2 但如果應屆生Java能力一般，無法過面試，那么哪怕是降價要5k薪資，對方公司也不會錄用。

3 還是這句話，java應屆生能拿多少薪資，和本身所掌握的java技術關系不大，是由學校，學歷，能證明出的java真實項目的時長以及面試時能展示的java技能決定的，說穿了一方面看學校，另一方面看面試。所以不少應屆生朋友希望通過多學技術從而拿到高薪，這不大現(xiàn)實，畢竟學技術是一方面，展示真實項目經(jīng)驗是另一方面，而面試的表現(xiàn)則再是一個方面。

4 應屆生朋友如果只背八股文，只去看技術，不去準備面試技巧，哪怕找到工作，薪資估計也會被低估，甚至還很難找到工作。

回到主題上，講講應屆java程序員該如何在面試中做自我介紹。做自我介紹一定要有素材，即項目經(jīng)驗和spring boot等的技術，否則說得再好也沒用。通過上文給出的方法，如果大家已經(jīng)有真實的實習經(jīng)驗，那么能根據(jù)上文的說辭更好地整理自我介紹的說辭，如果大家當下沒真實項目經(jīng)驗，哪怕通過熟悉spring boot+熟悉真實項目的流程，再此基礎上準備自我介紹說辭問題也不大。

最后給出些應屆生做自我介紹的公式化文字，大家可以分若干個層次依次有條理地說明。

1 先亮出自己的信息和亮點。

本人叫xxx，xx學校xx系畢業(yè)，當下有半年（或其它時間長度）的java項目經(jīng)驗，是在xx公司做的實習，或者是跟著教研室老師做了半年時間的java項目。

2 說下自己做的項目，以及其中用到的技術。

我做的是xx倉庫管理系統(tǒng)，其中做了出入庫管理，物流信息管理和人員管理等模塊，本人用的是spring boot + jpa做增刪改查，此外還用到了logback和redis或其它（自己實現(xiàn)準備）技術。

3 再重點說下這個項目區(qū)分于學習項目的要點。

在這個項目里，用到了maven和git等工作管理項目，本人用了junit和postman做測試，本人還有通過看日志排查線上問題的經(jīng)驗。

4 如果有亮點再拋出。

比如在這個項目里，本人有用過索引，排查過jvm問題，用過spring cloud組件，這樣能為后面的面試做進一步的鋪墊。

其實這樣真就行了，但事實上，本人在做校招時，不少求職者在自我介紹時會說一大堆和求職無關的事，比如興趣愛好，校園經(jīng)歷等，這些說再說也沒用，說再出彩也無法幫到自己成功應聘。但是，如果大家按本文給出的步驟，先通過少量的時間熟悉必要的spring boot等技能，再通過必要的準備，展示商業(yè)項目經(jīng)驗和技術，并在此基礎上準備面試說辭，那一定能高效找到工作。

原文鏈接：https://www.cnblogs.com/JavaArchitect/p/17011865.html

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

世界微塵里

吾寧愛與憎

- 2024.03.18 -

在互聯(lián)網(wǎng)的世界中，表單是用戶與網(wǎng)站進行互動的重要橋梁。無論是注冊新賬號、提交反饋、還是在線購物，表單都扮演著至關重要的角色。在網(wǎng)頁中，我們需要跟用戶進行交互，收集用戶資料，此時就需要用到表單標簽。

HTML提供了一系列的表單標簽，使得開發(fā)者能夠輕松地創(chuàng)建出功能豐富的表單。今天我們就來深入探討這些標簽，了解它們的作用以及如何使用它們來構建一個有效的用戶界面。

一、表單的組成

在HTML中，一個完整的表單通常由表單域、表單控件（表單元素）和提示信息三個部分構成。

表單域

• 表單域是一個包含表單元素的區(qū)域
• 在HTML標簽中，<form>標簽用于定義表單域，以實現(xiàn)用戶信息的收集和傳遞
• <form>會把它范圍內(nèi)的表單元素信息提交給服務器

表單控件

這些是用戶與表單交云的各種元素，如<input>（用于創(chuàng)建不同類型的輸入字段）、<textarea>（用于多行文本輸入）、<button>（用于提交表單或執(zhí)行其他操作）、<select>和<option>（用于創(chuàng)建下拉列表）等。

提示信息

這些信息通常通過<label>標簽提供，它為表單控件提供了描述性文本，有助于提高可訪問性。<label>標簽通常與<input>標簽一起使用，并且可以通過for屬性與<input>標簽的id屬性關聯(lián)起來。

這三個部分共同構成了一個完整的HTML表單，使得用戶可以輸入數(shù)據(jù)，并通過點擊提交按鈕將這些數(shù)據(jù)發(fā)送到Web服務器進行處理。

二、表單元素

在表單域中可以定義各種表單元素，這些表單元素就是允許用戶在表單中輸入或者選擇的內(nèi)容控件。下面就來介紹HTML中常用的表單元素。

1、<form>標簽：基礎容器

作用：定義一個表單區(qū)域，用戶可以在其中輸入數(shù)據(jù)進行提交。

<form action="submit.php" method="post">

其中action屬性指定了數(shù)據(jù)提交到的服務器端腳本地址，method屬性定義了數(shù)據(jù)提交的方式（通常為GET或POST）。

2、<input>標簽：數(shù)據(jù)輸入

<input>標簽是一個單標簽，用于收集用戶信息。允許用戶輸入文本、數(shù)字、密碼等。

<input type="text" name="username" placeholder="請輸入用戶名">

type屬性決定了輸入類型，name屬性定義了數(shù)據(jù)的鍵名，placeholder屬性提供了輸入框內(nèi)的提示文本。

<input>標簽的屬性

下面舉個例子來說明：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<form>
用戶名：<input type="text" value="請輸入用戶名"><br>
密碼：<input type="password"><br>
性別：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
愛好：吃飯<input type="checkbox"> 睡覺<input type="checkbox"> 打豆豆<input type="checkbox"><br>
<input type="submit" value="免費注冊">
<input type="reset" value="重新填寫">
<input type="button" value="獲取短信驗證碼"><br>
上傳頭像：<input type="file">
</form>
</body>
</html>

3、<label>標簽：關聯(lián)說明

它與輸入字段如文本框、單選按鈕、復選框等關聯(lián)起來，以改善網(wǎng)頁的可用性和可訪問性。<label>標簽有兩種常見的用法：

1）包裹方式：

在這種用法中，<label>標簽直接包裹住關聯(lián)的表單元素。例如：

<label>用戶名：<input type="text" name="username"></label>

這樣做的好處是用戶點擊標簽文本時，關聯(lián)的輸入字段會自動獲取焦點，從而提供更好的用戶體驗。

2）使用for屬性關聯(lián)：

在這種用法中，<label>標簽通過for屬性與目標表單元素建立關聯(lián)，for屬性的值應與目標元素的id屬性相匹配。例如：

<label for="username">用戶名：</label><input type="text" id="username" name="username">

這樣做的優(yōu)勢是單擊標簽時，相關的表單元素會自動選中（獲取焦點），從而提高可用性和可訪問性。

4、<select>和<option>標簽：下拉選擇

在頁面中，如果有多個選項讓用戶選擇，并且想要節(jié)約頁面空間時，我們可以使用標簽控件定義下拉列表。

注意點：

• <select>中至少包含一對<option>
• 在<option>中定義selected=“selected”時，當前項即為默認選中項

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
籍貫：
<select>
<option>山東</option>
<option>北京</option>
<option>西安</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>

5、<textarea>標簽：多行文本輸入

當用戶輸入內(nèi)容較多的情況下，我們可以用表單元素標簽替代文本框標簽。

• 允許用戶輸入多行文本。

<textarea name="message" rows="5" cols="30">默認文本</textarea>

rows和cols屬性分別定義了文本區(qū)域的行數(shù)和列數(shù)。

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
今日反饋：
<textarea>請在此輸入內(nèi)容</textarea>
</form>
</body>
</html>

6、<button>標簽：按鈕控件

創(chuàng)建一個可點擊的按鈕，通常用于提交或重置表單。它允許用戶放置文本或其他內(nèi)聯(lián)元素（如<i>、<b>、<strong>、<br>、<img>等），這使得它比普通的<input type="button">具有更豐富的內(nèi)容和更強的功能。

<button type="submit">提交</button>

type屬性為submit時表示這是一個提交按鈕。

7、<fieldset>和<legend>標簽：分組和標題

通常用于在HTML表單中對相關元素進行分組，并提供一個標題來描述這個組的內(nèi)容。

<fieldset>標簽：該標簽用于在表單中創(chuàng)建一組相關的表單控件。它可以將表單元素邏輯分組，并且通常在視覺上通過圍繞這些元素繪制一個邊框來區(qū)分不同的組。這種分組有助于提高表單的可讀性和易用性。

<legend>標簽：它總是與<fieldset>標簽一起使用。<legend>標簽定義了<fieldset>元素的標題，這個標題通常會出現(xiàn)在瀏覽器渲染的字段集的邊框上方。<legend>標簽使得用戶更容易理解每個分組的目的和內(nèi)容。

代碼示例：

<form>
<fieldset>
<legend>個人信息</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email"><br><br>
</fieldset>
<fieldset>
<legend>興趣愛好</legend>
<input type="checkbox" id="hobby1" name="hobby1" value="music">
<label for="hobby1">音樂</label><br>
<input type="checkbox" id="hobby2" name="hobby2" value="sports">
<label for="hobby2">運動</label><br>
<input type="checkbox" id="hobby3" name="hobby3" value="reading">
<label for="hobby3">閱讀</label><br>
</fieldset>
<input type="submit" value="提交">
</form>

在這個示例中，我們使用了兩個<fieldset>元素來組織表單的不同部分。第一個<fieldset>包含姓名和郵箱字段，而第二個<fieldset>包含三個復選框，用于選擇用戶的興趣愛好。每個<fieldset>都有一個<legend>元素，用于提供標題。這樣，用戶在填寫表單時可以更清晰地了解每個部分的內(nèi)容。

想要快速入門前端開發(fā)嗎？推薦一個前端開發(fā)基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想

8、<datalist>標簽：預定義選項列表

<datalist>標簽是HTML5中引入的一個新元素，它允許開發(fā)者為輸入字段提供預定義的選項列表。當用戶在輸入字段中輸入時，瀏覽器會顯示一個下拉菜單，其中包含與用戶輸入匹配的預定義選項。

使用<datalist>標簽可以提供更好的用戶體驗，因為它可以幫助用戶選擇正確的選項，而不必手動輸入整個選項。此外，<datalist>還可以與<input>元素的list屬性結合使用，以將預定義的選項列表與特定的輸入字段關聯(lián)起來。

下面是一個使用<datalist>標簽的代碼示例：

<form>
<label for="color">選擇你喜歡的顏色：</label>
<input type="text" id="color" name="color" list="colorOptions">
<datalist id="colorOptions">
<option value="紅色">
<option value="藍色">
<option value="綠色">
<option value="黃色">
<option value="紫色">
</datalist>
<input type="submit" value="提交">
</form>

9、<output>標簽：計算結果輸出

<output>標簽是HTML5中引入的一個新元素，它用于顯示計算結果或輸出。該標簽通常與JavaScript代碼結合使用，通過將計算結果賦值給<output>元素的value屬性來顯示結果。

<output>標簽可以用于各種類型的計算和輸出，例如數(shù)學運算、字符串處理、數(shù)組操作等。它可以與<input>元素一起使用，以實時更新計算結果。

下面是一個使用<output>標簽的示例：

<form>
<label for="num1">數(shù)字1：</label>
<input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
<label for="num2">數(shù)字2：</label>
<input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
<label for="result">結果：</label>
<output id="result"></output>
</form>

<script>
function calculate() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").value = result;
}
</script>

10、<progress>標簽：任務進度展示

<progress>標簽是HTML5中用于表示任務完成進度的一個新元素。它通過value屬性和max屬性來表示進度，其中value表示當前完成的值，而max定義任務的總量或最大值。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Progress Example</title>
</head>
<body>
<h1>File Download</h1>
<progress id="fileDownload" value="0" max="100"></progress>
<br>
<button onclick="startDownload()">Start Download</button>

<script>
function startDownload() {
var progress = document.getElementById("fileDownload");
for (var i = 0; i <= 100; i++) {
setTimeout(function() {
progress.value = i;
}, i * 10);
}
}
</script>
</body>
</html>

在上面的示例中，我們創(chuàng)建了一個名為"fileDownload"的<progress>元素，并設置了初始值為0，最大值為100。我們還添加了一個按鈕，當用戶點擊該按鈕時，會觸發(fā)名為"startDownload"的JavaScript函數(shù)。這個函數(shù)模擬了一個文件下載過程，通過循環(huán)逐步增加<progress>元素的value屬性值，從而顯示下載進度。

11、<meter>標簽：度量衡指示器

<meter>標簽在HTML中用于表示度量衡指示器，它定義了一個已知范圍內(nèi)的標量測量值或分數(shù)值，通常用于顯示磁盤使用情況、查詢結果的相關性等。例如：

<p>CPU 使用率： <meter value="0.6" min="0" max="1"></meter> 60%</p>
<p>內(nèi)存使用率： <meter value="0.4" min="0" max="1"></meter> 40%</p>

在這個示例中，我們使用了兩個<meter>標簽來分別顯示CPU和內(nèi)存的使用率。value屬性表示當前的測量值，min和max屬性分別定義了測量范圍的最小值和最大值。通過這些屬性，<meter>標簽能夠清晰地顯示出資源的使用情況。

需要注意的是，<meter>標簽不應該用來表示進度條，對于進度條的表示，應該使用<progress>標簽。

12、<details>和<summary>標簽：詳細信息展示

<details>和<summary>標簽是HTML5中新增的兩個元素，用于創(chuàng)建可折疊的詳細信息區(qū)域。

<details>標簽定義了一個可以展開或折疊的容器，其中包含一些額外的信息。它通常與<summary>標簽一起使用，<summary>標簽定義了<details>元素的標題，當用戶點擊該標題時，<details>元素的內(nèi)容會展開或折疊。

示例：

<details>
<summary>點擊查看詳細信息</summary>
<p>這里是一些額外的信息，用戶可以點擊標題來展開或折疊這些信息。</p>
</details>

在這個示例中，我們使用了<details>標簽來創(chuàng)建一個可折疊的容器，并在其中添加了一個<summary>標簽作為標題。當用戶點擊這個標題時，容器的內(nèi)容會展開或折疊。

總結：

HTML表單標簽是構建動態(tài)網(wǎng)頁的基石，它們使得用戶能夠與網(wǎng)站進行有效的交互。

通過合理地使用這些標簽，開發(fā)者可以創(chuàng)建出既美觀又功能強大的表單，從而提升用戶體驗和網(wǎng)站的可用性。所以說，掌握這些標簽的使用，對于前端開發(fā)者來說是至關重要的。

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內(nèi)容由：云端源想分享

在的網(wǎng)站效果多樣而功能復雜，技術棧也多種多樣，react\vue\jquery等層出不窮，對于編程愛好者初學者入門極不友好。我這里有一個簡單的個人網(wǎng)站模板，包括主頁、項目和聯(lián)系方式、關于我四個部分。你可以根據(jù)自己的需求進行調(diào)整。

模板效果展示：

主頁 (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的個人網(wǎng)站</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">主頁</a></li>
                <li><a href="about.html">關于我</a></li>
                <li><a href="projects.html">項目</a></li>
                <li><a href="contact.html">聯(lián)系方式</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="hero">
            <h1>歡迎來到我的個人網(wǎng)站</h1>
            <p>我是一個充滿激情的程序員，熱衷于學習和分享知識。</p>
        </section>
    </main>
    <footer>
        <p>? 2024 我的名字</p>
    </footer>
</body>
</html>

關于我 (about.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>關于我 - 我的個人網(wǎng)站</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
  <nav>
    <ul>
      <li><a href="index.html">主頁</a></li>
      <li><a href="about.html">關于我</a></li>
      <li><a href="projects.html">項目</a></li>
      <li><a href="contact.html">聯(lián)系方式</a></li>
    </ul>
  </nav>
</header>
<main>
  <section class="about">
    <h1>關于我</h1>
    <p>你好！我是[一周一志程序員]，一名經(jīng)驗豐富的Java程序員，致力于能源電力SaaS和系統(tǒng)架構設計。</p>
    <p>目前我正在備考2024年11月6日的《系統(tǒng)架構設計師》考試，并在著手成為獨立開發(fā)者，輕創(chuàng)業(yè)準備中。</p>
  </section>
</main>
<footer>
  <p>? 2024 一周一志程序員</p>
</footer>
</body>
</html>

項目 (projects.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>項目 - 我的個人網(wǎng)站</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">主頁</a></li>
                <li><a href="about.html">關于我</a></li>
                <li><a href="projects.html">項目</a></li>
                <li><a href="contact.html">聯(lián)系方式</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="projects">
            <h1>項目</h1>
            <ul>
                <li><strong>電力SaaS平臺開發(fā)</strong> - 開發(fā)用電考核模塊。</li>
                <li><strong>系統(tǒng)架構設計</strong> - 為不同客戶提供系統(tǒng)架構解決方案。</li>
                <li><strong>Spring Boot 項目</strong> - 創(chuàng)建和管理多個Spring Boot項目。</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>? 2024 我的名字</p>
    </footer>
</body>
</html>

聯(lián)系方式 (contact.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>聯(lián)系方式 - 我的個人網(wǎng)站</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
  <nav>
    <ul>
      <li><a href="index.html">主頁</a></li>
      <li><a href="about.html">關于我</a></li>
      <li><a href="projects.html">項目</a></li>
      <li><a href="contact.html">聯(lián)系方式</a></li>
    </ul>
  </nav>
</header>
<main>
  <section class="contact">
    <h1>聯(lián)系方式</h1>
    <p>如果你有任何問題或合作意向，請隨時聯(lián)系我。</p>
    <p>Email: <a href="mailto:1184795629@qq.com">your-email@domain.com</a></p>
    <p>公眾號: <a href="#">一周一志程序員</a></p>
    <p>抖音: <a href="#">麥冬會開花</a></p>
  </section>
</main>
<footer>
  <p>? 2024 我的名字</p>
</footer>
</body>
</html>

樣式文件 (styles.css)

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header {
    background: #06362B;
    color: #fff;
    padding: 1rem 0;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 1rem;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

.hero {
    background: #f4f4f4;
    padding: 2rem;
    text-align: center;
}

.about, .projects, .contact {
    padding: 2rem;
}

footer {
    background: #06362B;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

你可以將這些文件保存為index.html、about.html、projects.html、contact.html和styles.css，并將它們放在同一目錄下。然后，你可以通過瀏覽器打開index.html來查看你的個人網(wǎng)站。

學習使用，希望這對你有幫助把！如果你有其他需求或需要進一步定制，請告訴我。