簡(jiǎn)單HTML個(gè)人網(wǎng)頁：從結(jié)構(gòu)到發(fā)布)
說出來你可能不信我這個(gè)寫了不少年代碼的人對(duì)外最常用的名片不是社交平臺(tái)主頁而是一個(gè)只有幾個(gè)HTML文件的小網(wǎng)站。它沒有框架、沒有數(shù)據(jù)庫連JavaScript都只有寥寥幾行但就是這樣一個(gè)樸素的個(gè)人網(wǎng)頁幫我對(duì)接過合作機(jī)會(huì)也成了我給新人講前端時(shí)最順手的教學(xué)樣本。你說它簡(jiǎn)單嗎確實(shí)簡(jiǎn)單。可越是簡(jiǎn)單的東西越能看出一個(gè)人對(duì)內(nèi)容組織和基礎(chǔ)功夫的態(tài)度。這篇文章我就把制作一個(gè)簡(jiǎn)單的HTML個(gè)人網(wǎng)頁的全過程完整講一遍從為什么值得手寫開始到信息架構(gòu)怎么定、HTML結(jié)構(gòu)怎么寫、CSS怎么美化、多頁面怎么跳轉(zhuǎn)再到發(fā)布前必須做的檢查。全程用真實(shí)代碼說話踩過的坑也會(huì)一并交代清楚。不管你是剛接觸前端的學(xué)生還是想給自己搭一個(gè)獨(dú)立展示頁面的職場(chǎng)人照著這篇做應(yīng)該都能得到一版能直接發(fā)出去的網(wǎng)頁。1. 為什么我堅(jiān)持從最樸素的HTML開始做個(gè)人網(wǎng)頁1.1 快與合適是兩回事先聊一個(gè)很多人不太注意的問題做個(gè)人網(wǎng)頁最快的路到底是不是用現(xiàn)成的網(wǎng)站生成器我的答案是快是真的快但快不等于合適。我也試過用那些拖拽式工具選個(gè)模板、改改文字、換張圖片十分鐘就能看到頁面效果?？缮钊胗靡魂囎泳桶l(fā)現(xiàn)模板歸根到底是別人設(shè)計(jì)的你想調(diào)一下間距可能要找半天設(shè)置項(xiàng)你想去掉某個(gè)加載很慢的動(dòng)畫可能要把樣式翻個(gè)底朝天。更麻煩的是這類工具生成的頁面通常附帶不少額外的腳本和統(tǒng)計(jì)代碼頁面越攢越重真正屬于你自己的內(nèi)容反而被淹沒了。手寫HTML完全沒有這個(gè)問題。你寫多少頁面就有多少。一個(gè)簡(jiǎn)單的HTML個(gè)人網(wǎng)頁從結(jié)構(gòu)到樣式再到交互每一行都在你掌控之中。文件體積小加載速度快也不依賴任何第三方平臺(tái)哪天想換個(gè)風(fēng)格直接改CSS就行。這種自己說了算的感覺是我后來一直堅(jiān)持用最樸素方式做個(gè)人頁面的根本原因。1.2 它同時(shí)也是最值得做的前端練手項(xiàng)目除了實(shí)用價(jià)值手寫個(gè)人網(wǎng)頁還有一個(gè)容易被低估的好處它是學(xué)習(xí)前端最合適的第一個(gè)完整項(xiàng)目。很多新手學(xué)HTML時(shí)今天學(xué)標(biāo)題標(biāo)簽明天學(xué)列表標(biāo)簽知識(shí)都是散的學(xué)完就忘。但如果帶著我要做一個(gè)個(gè)人主頁這個(gè)目標(biāo)去學(xué)情況就完全不同了。你自然就會(huì)遇到這樣的問題頁面標(biāo)題怎么設(shè)置段落怎么分段圖片為什么顯示不出來鏈接怎么跳到另一個(gè)頁面樣式為什么會(huì)串這些問題的答案恰好就是HTML和CSS最核心的知識(shí)點(diǎn)。所以我的建議是不管你已經(jīng)有多少編程基礎(chǔ)都值得親手做一次個(gè)人網(wǎng)頁。它不像寫業(yè)務(wù)系統(tǒng)那樣要考慮復(fù)雜的邏輯也沒有后端那些事務(wù)、并發(fā)、權(quán)限的煩惱。它足夠簡(jiǎn)單讓初學(xué)者能跑通完整的寫代碼、預(yù)覽、調(diào)樣式、發(fā)布上線鏈路它又足夠真實(shí)能讓你體會(huì)到把一個(gè)空白文件慢慢變成可用產(chǎn)品的那種成就感。1.3 做這個(gè)項(xiàng)目我不會(huì)用到什么為了避免后面越聊越復(fù)雜我先明確一下邊界做這個(gè)頁面我不會(huì)用到React、Vue這類前端框架也不會(huì)引入Bootstrap之類的組件庫更不會(huì)搭本地開發(fā)服務(wù)器。就用電腦自帶的文本編輯器加上瀏覽器從零開始寫。不用的原因不是它們不好而是殺雞不用牛刀。你只是要做一個(gè)內(nèi)容型頁面根本不需要框架帶來的狀態(tài)管理和組件化。等你以后真要開發(fā)復(fù)雜的Web應(yīng)用再學(xué)那些工具也不遲。先把最基礎(chǔ)的HTML語言本身吃透這對(duì)理解后面所有框架的原理都有幫助——所有那些看起來很酷的框架編譯打包之后落到瀏覽器里跑的還是HTML、CSS、JavaScript這三樣?xùn)|西。2. 動(dòng)筆之前先決定你的頁面上到底要放什么2.1 我給個(gè)人主頁劃分的六個(gè)模塊很多人一上來就打開編輯器敲代碼這是最容易走彎路的地方。用一句老話說叫磨刀不誤砍柴工。我的習(xí)慣是先在紙上把頁面內(nèi)容定下來哪怕只是寫幾行關(guān)鍵詞也比盲目開寫強(qiáng)得多。以我自己為例一個(gè)典型的個(gè)人主頁我會(huì)分成六個(gè)模塊頁頭Header放姓名、頭像以及一句簡(jiǎn)短的個(gè)人定位或口號(hào)。關(guān)于我About兩三段話講清楚自己是誰、在做什么、關(guān)注什么方向。技能特長(zhǎng)Skills用列表展示自己掌握的技術(shù)或能力方向。作品/經(jīng)歷Portfolio放幾個(gè)代表性項(xiàng)目或工作經(jīng)歷附上鏈接。聯(lián)系方式Contact郵箱、社交賬號(hào)方便別人找到你。頁腳Footer放版權(quán)信息、頁面更新日期這類收尾內(nèi)容。這個(gè)結(jié)構(gòu)不是固定的。有人想突出作品可以把作品模塊放大有人是找工作的場(chǎng)景可以加一段求職意向。關(guān)鍵是先想清楚你希望訪客在30秒內(nèi)從你的頁面里讀到什么這是個(gè)人主頁最核心的設(shè)計(jì)問題。2.2 內(nèi)容收集的小方法列提綱而不是直接寫代碼我在做自己的頁面時(shí)習(xí)慣先用文檔或便簽列一個(gè)粗糙的提綱大概長(zhǎng)這樣姓名 一句slogan關(guān)于我技術(shù)背景、興趣方向、最近在做什么技能HTML/CSS/JavaScript/Photoshop作品項(xiàng)目A一句話介紹鏈接、項(xiàng)目B同上聯(lián)系方式郵箱、社交賬號(hào)列完之后我還會(huì)故意去翻幾個(gè)別人做的個(gè)人主頁看看他們的模塊劃分、文案語氣和組織方式。注意不是讓你抄別人的內(nèi)容而是學(xué)習(xí)信息呈現(xiàn)的思路。我見過不少把個(gè)人信息寫得密密麻麻的頁面觀感很差也見過只有一屏內(nèi)容但設(shè)計(jì)得很舒服的頁面。差別不在于內(nèi)容多少而在于結(jié)構(gòu)是否清晰、重點(diǎn)是否突出。2.3 單頁還是多頁我在不同階段的選擇模塊定好了接下來要決定所有內(nèi)容放在一個(gè)頁面上還是拆成多個(gè)頁面我的經(jīng)驗(yàn)是第一次做先用單頁解決能不能用之后再拆成多頁也來得及。單頁的好處是制作簡(jiǎn)單所有內(nèi)容從上到下一目了然訪客滑一屏就能看完不用點(diǎn)來點(diǎn)去。等你內(nèi)容變多比如作品列表長(zhǎng)了、博客文章開始積累了再拆成首頁作品頁關(guān)于頁的多頁結(jié)構(gòu)也不遲。所以這篇文章下面會(huì)先帶你做完整的單頁然后在第五部分講怎么把它拆成帶導(dǎo)航的多頁站點(diǎn)。兩個(gè)方案都覆蓋你可以按自己的需要選。3. 第一版頁面完整寫一遍HTML核心結(jié)構(gòu)3.1 為什么每個(gè)頁面都得從DOCTYPE開始你現(xiàn)在可以打開任何一個(gè)文本編輯器新建一個(gè)文件命名為index.html然后把下面的內(nèi)容敲進(jìn)去。我先解釋一下這個(gè)固定的開頭部分每一行都在干什么!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的個(gè)人主頁/title /head body /body /html!DOCTYPE html告訴瀏覽器這是一個(gè)HTML5文檔。沒有這一行瀏覽器可能會(huì)按舊的兼容模式去解析你的頁面導(dǎo)致樣式表現(xiàn)和預(yù)期不一致。這個(gè)坑我之前踩過少寫了DOCTYPE頁面在瀏覽器里直接亂了版。html langzh-cn聲明頁面語言是簡(jiǎn)體中文。它對(duì)瀏覽器的翻譯建議、朗讀工具都有影響搜索引擎爬蟲也會(huì)讀取它。meta charsetutf-8聲明字符編碼為UTF-8防止中文亂碼。只要你用了中文這一行幾乎必須寫而且要放在head比較靠前的位置。meta nameviewport ...針對(duì)手機(jī)瀏覽器的設(shè)置讓頁面寬度適應(yīng)屏幕。沒有這行頁面在手機(jī)上會(huì)被當(dāng)成一個(gè)PC頁面縮小顯示字小到看不清。title我的個(gè)人主頁/title瀏覽器標(biāo)簽頁上顯示的文字也是搜索結(jié)果里的標(biāo)題務(wù)必好好寫。head區(qū)里做的事就是這些真正的頁面內(nèi)容全部放在body標(biāo)簽里。別小看這個(gè)骨架后面所有模塊都是往body里填的。3.2 用語義化標(biāo)簽組織頁面而不是一鍋div亂燉很多老教程會(huì)讓你大量使用div標(biāo)簽因?yàn)樗亲钪行缘娜萜鳂?biāo)簽。但我建議你從第一天就養(yǎng)成用語義化標(biāo)簽的習(xí)慣header、nav、main、section、footer。它們和div在視覺效果上沒有區(qū)別但對(duì)閱讀代碼的人和機(jī)器比如屏幕閱讀器、搜索引擎來說語義化標(biāo)簽?zāi)芮宄乇磉_(dá)這里是導(dǎo)航這里是正文。下面是我的個(gè)人主頁body部分的骨架你可以直接參考body header h1林小碼/h1 p一個(gè)在路上的前端學(xué)習(xí)者/p /header nav a href#about關(guān)于我/a a href#skills技能/a a href#works作品/a a href#contact聯(lián)系/a /nav main section idabout h2關(guān)于我/h2 p這里是自我介紹寫兩三段話就夠。/p /section section idskills h2技能/h2 ul liHTML/li liCSS/li liJavaScript/li /ul /section section idworks h2作品/h2 p項(xiàng)目卡片放在這個(gè)區(qū)域。/p /section section idcontact h2聯(lián)系我/h2 p郵箱和社交鏈接放這里。/p /section /main footer p? 2025 林小碼/p /footer /body注意幾個(gè)我特別強(qiáng)調(diào)的習(xí)慣一級(jí)標(biāo)題h1在整頁里只用一次放在header里告訴瀏覽器和搜索引擎這個(gè)頁面最重要的內(nèi)容是什么。每個(gè)section都加一個(gè)id這樣導(dǎo)航里的鏈接才能精確跳到對(duì)應(yīng)位置這是典型的錨點(diǎn)用法后面第五部分會(huì)細(xì)講。內(nèi)容級(jí)標(biāo)題從h2開始用不要跳級(jí)。頁面結(jié)構(gòu)要保持層級(jí)清晰。3.3 文本、列表、圖片和鏈接的基本用法每個(gè)模塊內(nèi)部需要不同類型的內(nèi)容我再把最常用的幾個(gè)標(biāo)簽一次說清楚。文本標(biāo)簽段落用p強(qiáng)調(diào)用strong和em。新手經(jīng)常把加粗和強(qiáng)調(diào)混為一談這里我提醒一下它們默認(rèn)的瀏覽器樣式確實(shí)分別是加粗和斜體但語義上完全不是一回事。strong表示這段文字很重要em表示語氣上的強(qiáng)調(diào)屏幕閱讀器對(duì)它們的朗讀方式也不同。所以別隨便替換先想想你想表達(dá)的是重要還是強(qiáng)調(diào)。列表標(biāo)簽無序列表用ul包li適合放技能列表有序列表用ol包li適合放有先后順序的信息。比如技能沒有高低之分用ul實(shí)習(xí)經(jīng)歷按時(shí)間排用ol更合理。圖片標(biāo)簽img srcimages/avatar.jpg alt我的頭像src是圖片路徑alt是圖片無法顯示時(shí)的替代文本同時(shí)也是無障礙訪問的重要組成部分。我見過太多人圖省事不寫alt結(jié)果圖片掛了頁面就只剩一個(gè)裂圖圖標(biāo)非常難看。寫alt也有技巧不要堆關(guān)鍵詞就用一句人話描述圖片內(nèi)容比如我在辦公室的一張工作照。鏈接標(biāo)簽a hrefhttps://example.com target_blank relnoopener我的項(xiàng)目倉庫/ahref寫目標(biāo)地址target_blank表示在新標(biāo)簽頁打開relnoopener是配套的安全寫法防止新頁面拿到對(duì)當(dāng)前頁面的控制權(quán)。這三個(gè)屬性一起用是最穩(wěn)妥的寫法。如果是頁內(nèi)跳轉(zhuǎn)target就不要加了直接href#about這樣點(diǎn)擊才會(huì)在本頁滾動(dòng)到指定位置。到這里一個(gè)不包含任何樣式的HTML個(gè)人網(wǎng)頁已經(jīng)能跑起來了。你在瀏覽器里打開index.html應(yīng)該能看到所有文字從上到下排成一列。接下來要做的就是讓它變得好看。4. 用CSS把頁面從能用變成好看4.1 樣式寫在哪三種方式我為什么只推薦一種CSS有三種引入方式行內(nèi)樣式寫在標(biāo)簽的style屬性里、內(nèi)部樣式寫在head里的style中、外部樣式單獨(dú)一個(gè).css文件用link引入。我強(qiáng)烈推薦外部樣式。原因很樸素內(nèi)容與樣式分離以后改樣式只動(dòng)一個(gè)文件就行。行內(nèi)樣式看著方便但一旦頁面大起來改起來會(huì)讓你頭疼到懷疑人生內(nèi)部樣式適合單頁小項(xiàng)目但你想給多個(gè)頁面共用樣式時(shí)就不行了。外部樣式是能長(zhǎng)期維護(hù)的方式從第一版就開始用可以省掉后面很多麻煩。在head里加上這一行l(wèi)ink relstylesheet hrefcss/style.css然后新建一個(gè)css文件夾在里面創(chuàng)建style.css。下面所有樣式都寫在這個(gè)文件里。4.2 第一次美化優(yōu)先做這三件事我見過不少新手一上來就追求炫酷又是漸變背景又是動(dòng)態(tài)效果結(jié)果頁面五彩斑斕反而讓人抓不住重點(diǎn)。我的建議是第一版的美化只做三件事統(tǒng)一字體、拉開間距、定好配色。字體與基礎(chǔ)排版body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif; line-height: 1.7; color: #333; background-color: #f9f9f9; margin: 0; padding: 0; }這里line-height: 1.7很關(guān)鍵它把行高設(shè)為字號(hào)的1.7倍中文段落立刻會(huì)變得舒展不再擠成一團(tuán)。font-family里寫了多個(gè)字體瀏覽器會(huì)按順序選擇一個(gè)能用的這就是字體回退機(jī)制保證不同系統(tǒng)上都不會(huì)因?yàn)槿弊煮w而顯示奇怪的東西。間距我習(xí)慣給所有section統(tǒng)一上下留白讓頁面有呼吸感section { max-width: 800px; margin: 0 auto 40px; padding: 0 20px; }max-width: 800px限制內(nèi)容寬度太寬的行讀起來眼睛容易疲勞margin: 0 auto是讓這個(gè)容器水平居中padding: 0 20px是防止頁面很窄時(shí)文字貼到屏幕邊緣。這一組規(guī)則在幾乎所有內(nèi)容型頁面上都好用可以記成一個(gè)口訣內(nèi)容寬度、水平居中、內(nèi)邊距保護(hù)。配色我的建議是正文用深灰而不是純黑背景用淺灰而不是純白鏈接用不算太刺眼的藍(lán)色。純黑和純白對(duì)比太強(qiáng)長(zhǎng)時(shí)間閱讀容易累而深灰配淺灰會(huì)更溫和。第一版不要超過三種主色等審美積累起來再慢慢調(diào)整。4.3 卡片式布局盒模型的一次實(shí)戰(zhàn)作品區(qū)通常需要做成卡片讓每一條內(nèi)容獨(dú)立成塊。先看HTMLsection idworks h2作品/h2 div classcard h3個(gè)人博客/h3 p記錄日常學(xué)習(xí)筆記已更新30篇文章。/p a hrefhttps://example.com去看看/a /div div classcard h3天氣查詢小工具/h3 p調(diào)用免費(fèi)API實(shí)現(xiàn)的簡(jiǎn)易天氣應(yīng)用。/p a hrefhttps://example.com去看看/a /div /section對(duì)應(yīng)CSS.card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-bottom: 20px; } .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }這里涉及的就是CSS里最核心的盒模型每個(gè)元素都是一個(gè)盒子從里到外分別是內(nèi)容、內(nèi)邊距padding、邊框border、外邊距margin。你可以試著在瀏覽器開發(fā)者工具里選中這個(gè)卡片右側(cè)會(huì)有一個(gè)非常直觀的盒模型圖——強(qiáng)烈建議你親手點(diǎn)幾下比讀十篇文章都管用。border-radius: 8px讓四個(gè)角變圓潤(rùn)box-shadow在鼠標(biāo)懸停時(shí)給卡片一層輕盈的陰影這兩個(gè)細(xì)節(jié)一加頁面質(zhì)感立刻就不一樣了但它們只是加法真正的根基還是間距和留白。4.4 讓手機(jī)也能看得舒服viewport與媒體查詢前面提到head里那行viewport meta它配合CSS的媒體查詢就能讓頁面在不同屏幕寬度下自適應(yīng)。我的策略很簡(jiǎn)單內(nèi)容型頁面只在必要的時(shí)候改布局。大部分情況下單列排版在手機(jī)和電腦上都沒問題。真正需要調(diào)整的是字體大小和間距可以用一個(gè)媒體查詢media (max-width: 600px) { body { font-size: 16px; } section { padding: 0 12px; } }這行代碼的意思是當(dāng)屏幕寬度不大于600像素時(shí)應(yīng)用里面的樣式。你可以把手機(jī)瀏覽器切換到電腦模式對(duì)比一下會(huì)發(fā)現(xiàn)小屏上的文字不再貼著屏幕邊緣閱讀體驗(yàn)明顯改善。提示CSS選擇器是區(qū)分大小寫的寫成#About和#about是兩個(gè)完全不同的東西。這類錯(cuò)誤很難排查因?yàn)轫撁娌粫?huì)報(bào)錯(cuò)只是點(diǎn)擊導(dǎo)航?jīng)]反應(yīng)。如果你遇到明明id對(duì)得上跳轉(zhuǎn)卻失效的情況先去檢查大小寫。5. 從單頁走向多頁導(dǎo)航、鏈接與文件組織5.1 文件夾結(jié)構(gòu)怎么安排才不亂內(nèi)容多起來之后把頁面拆成多個(gè)文件是自然趨勢(shì)。我常用的結(jié)構(gòu)是這樣my-site/ ├── index.html ├── about.html ├── works.html ├── contact.html ├── css/ │ └── style.css ├── images/ │ ├── avatar.jpg │ └── project-1.png └── js/ └── main.js規(guī)則很簡(jiǎn)單HTML文件放根目錄樣式放css文件夾圖片放images文件夾腳本放js文件夾。這樣做的好處是路徑可預(yù)期不管在哪個(gè)頁面css/style.css這個(gè)相對(duì)路徑都能訪問到同一個(gè)樣式文件。5.2 相對(duì)路徑同一層級(jí)、子目錄、上級(jí)目錄怎么指多頁面之間互相跳轉(zhuǎn)最關(guān)鍵的就是路徑寫法。先說結(jié)論在你自己的項(xiàng)目?jī)?nèi)部一律用相對(duì)路徑不要把自己電腦上的絕對(duì)路徑寫進(jìn)去也別用file:///C:/...這種本機(jī)路徑否則頁面?zhèn)鞯骄W(wǎng)上之后鏈接全都會(huì)失效。相對(duì)路徑的三種情況場(chǎng)景寫法示例同目錄下的文件直接寫文件名hrefabout.html子目錄里的文件文件夾名/文件名hrefcss/style.css上級(jí)目錄里的文件先寫../再寫路徑href../index.html這里最容易讓新人懵的是../。它的意思是往上一層目錄。比如你在about.html里想回到首頁因?yàn)閍bout.html和index.html在同一個(gè)目錄下直接寫hrefindex.html就行不需要../。什么時(shí)候需要../比如一個(gè)頁面在子文件夾里要引用根目錄下的文件時(shí)。5.3 錨點(diǎn)鏈接點(diǎn)擊導(dǎo)航跳到頁內(nèi)指定位置單頁模式下導(dǎo)航鏈接通常不是跳轉(zhuǎn)到新頁面而是平滑地跳到本頁的某個(gè)section。實(shí)現(xiàn)方式就是第二章提到的給目標(biāo)section加id然后導(dǎo)航鏈接的href寫成#id比如nav a href#about關(guān)于我/a a href#skills技能/a a href#works作品/a a href#contact聯(lián)系/a /nav點(diǎn)擊關(guān)于我瀏覽器會(huì)自動(dòng)把頁面滾到idabout的section的位置。如果鏈接寫成about.html#experience就是先跳到about頁面再定位到該頁里idexperience的位置。這個(gè)組合用法在簡(jiǎn)歷型網(wǎng)站上非常常見。5.4 導(dǎo)航欄固定在頁面頂部的小技巧當(dāng)頁面內(nèi)容足夠長(zhǎng)訪客一路往下滾動(dòng)時(shí)導(dǎo)航消失在視野外是個(gè)麻煩。我常用的解決辦法是給導(dǎo)航加固定定位nav { position: sticky; top: 0; background: #ffffff; padding: 12px 20px; border-bottom: 1px solid #eee; z-index: 10; }position: sticky的一個(gè)特點(diǎn)是它一開始在正常流里滾動(dòng)到指定位置后就粘在屏幕頂部。相比position: fixed它不會(huì)一開始就脫離文檔流導(dǎo)致內(nèi)容往上飄更適合導(dǎo)航這種場(chǎng)景。注意要給導(dǎo)航一個(gè)背景色和更高的z-index否則滾動(dòng)時(shí)下方內(nèi)容會(huì)穿透顯示出來。6. 發(fā)布前我必跑的檢查清單編碼、路徑與兼容性6.1 字符編碼中文亂碼九成是這里出問題中文亂碼是我見過最多的問題十次里有八次是同一個(gè)原因文件保存的編碼不是UTF-8。代碼里雖然寫了meta charsetutf-8但如果你用記事本把文件保存成了ANSI編碼瀏覽器按UTF-8解析時(shí)就會(huì)亂掉。解決方法是在編輯器中保存時(shí)明確選擇UTF-8編碼?，F(xiàn)在主流編輯器默認(rèn)都是UTF-8但如果你從別處復(fù)制了老文件或者用了某些老舊編輯器保存前一定檢查一下編碼選項(xiàng)。這個(gè)坑我?guī)啄昵安冗^頁面本地看是好的傳到服務(wù)器上就出現(xiàn)一堆錕斤拷折騰了半天才發(fā)現(xiàn)是保存編碼的問題。6.2 文件命名空格、中文和大小寫文件命名看起來是小事但它直接影響頁面上線后的穩(wěn)定。首先文件名里絕對(duì)不要用空格。瀏覽器會(huì)把空格轉(zhuǎn)成%20鏈接看著奇怪不說有些老舊服務(wù)器解析也不穩(wěn)定。其次除非你清楚自己在做什么否則盡量別用中文文件名。雖然現(xiàn)代瀏覽器基本都支持但放到不同服務(wù)器、不同工具鏈里還是容易出意外。最后注意大小寫HTML文件內(nèi)部的鏈接是區(qū)分大小寫的hrefAbout.html和hrefabout.html在Windows本地可能都能打開但上傳到Linux服務(wù)器后就只有其中一個(gè)能找到文件。我的習(xí)慣是所有文件名小寫單詞之間用連字符分隔。比如my-project.html而不是MyProject.html長(zhǎng)期維護(hù)下來你會(huì)感謝這個(gè)習(xí)慣。6.3 多瀏覽器和手機(jī)端的預(yù)覽檢查發(fā)布之前我會(huì)用一個(gè)簡(jiǎn)單的表格記下檢查項(xiàng)逐項(xiàng)打勾檢查項(xiàng)方法通過標(biāo)準(zhǔn)桌面瀏覽器Chrome、Edge、Firefox各打開一次頁面無錯(cuò)位鏈接可點(diǎn)手機(jī)瀏覽器手機(jī)直接訪問或用開發(fā)者工具設(shè)備模式無橫向滾動(dòng)條字體可讀圖片顯示檢查所有img的src無裂圖鏈接有效性逐個(gè)點(diǎn)一遍導(dǎo)航與正文鏈接無404或空白頁控制臺(tái)報(bào)錯(cuò)F12打開開發(fā)者工具查看Console無紅色錯(cuò)誤特別說下手機(jī)端的檢查。不用真機(jī)的話可以在Chrome里按F12再按CtrlShiftM切換到設(shè)備模擬選iPhone或Android機(jī)型就能看到大致的手機(jī)效果。這個(gè)模式還能幫你發(fā)現(xiàn)是否出現(xiàn)了橫向滾動(dòng)條——那是響應(yīng)式?jīng)]做好的典型癥狀。6.4 分享出去之前別忽略該刪的東西最后一條提醒不太算技術(shù)問題但很重要檢查頁面上有沒有不該公開的信息。包括手機(jī)號(hào)、家庭住址、身份證號(hào)、詳細(xì)地理位置、公司內(nèi)部資料等都不要出現(xiàn)在公開的個(gè)人網(wǎng)頁上。給別人留郵箱和期望的社交賬號(hào)就夠了真實(shí)姓名是否公開也可以自己權(quán)衡。另外如果頁面里引用了朋友的項(xiàng)目或照片最好提前打個(gè)招呼。以前有人把我的照片順手放進(jìn)了他的個(gè)人頁面我倒是無所謂但有些人會(huì)介意這種尊重是基本素質(zhì)。發(fā)布之前把頁面鏈接發(fā)給兩三個(gè)信任的朋友讓他們以陌生人的視角幫你看看往往能發(fā)現(xiàn)你自己注意不到的問題。7. 還能往里面加什么表單、JavaScript和部署7.1 聯(lián)系方式表單沒有后端也能收信很多人想要一個(gè)聯(lián)系表單但頁面沒有后端不知道怎么接收數(shù)據(jù)。最簡(jiǎn)單的方案是用mailto:鏈接點(diǎn)擊后打開訪客本地的郵件客戶端a hrefmailto:helloexample.com發(fā)郵件給我/a但它的體驗(yàn)比較原始訪客會(huì)被彈出郵件客戶端打斷。想要更像樣的表單我在早期用的是免費(fèi)的表單服務(wù)比如Formspree這類把表單的action指向服務(wù)地址訪客提交后內(nèi)容會(huì)轉(zhuǎn)發(fā)到你的郵箱。因?yàn)檫@類服務(wù)規(guī)則時(shí)有變化我這里不展開配置細(xì)節(jié)你需要做的就是在HTML里寫一個(gè)正經(jīng)的表單結(jié)構(gòu)然后按所選服務(wù)的要求改action和表單字段名就行。必填字段、占位提示這些基礎(chǔ)寫法先掌握form actionhttps://formspree.io/f/你的表單ID methodPOST label forname稱呼/label input typetext idname namename required label foremail郵箱/label input typeemail idemail nameemail required label formessage留言/label textarea idmessage namemessage rows5 required/textarea button typesubmit發(fā)送/button /formlabel的for要跟對(duì)應(yīng)輸入框的id一致這樣點(diǎn)擊文字時(shí)輸入框就能獲得焦點(diǎn)這是容易被忽略的可用性細(xì)節(jié)。7.2 一行JavaScript讓頁腳年份自動(dòng)更新個(gè)人主頁里最常見的一個(gè)JavaScript需求是讓頁腳的版權(quán)年份自動(dòng)變成當(dāng)前年份省得每年手動(dòng)改。實(shí)現(xiàn)起來只需幾行script document.getElementById(year).textContent new Date().getFullYear(); /script頁腳HTML里配合寫p? span idyear2025/span 林小碼/p這段腳本放的位置建議在/body之前因?yàn)槟_本要等頁面元素加載完才能找到那個(gè)span。你可能會(huì)問這不就是那寥寥幾行JavaScript嗎沒錯(cuò)好的個(gè)人網(wǎng)頁不需要很多腳本能用最少的代碼解決真實(shí)問題本身就是一種能力。7.3 把頁面放到網(wǎng)上我看重的幾件事頁面做好了怎么讓全世界看到我的建議順序是第一用靜態(tài)托管平臺(tái)。現(xiàn)在有不少平臺(tái)支持把本地文件夾拖上去就能生成一個(gè)可訪問的網(wǎng)址域名通常是免費(fèi)的適合第一次上線試水。第二注冊(cè)一個(gè)自己的域名綁定到托管服務(wù)上。有自己域名的好處是網(wǎng)址簡(jiǎn)短好記而且長(zhǎng)期來看指向穩(wěn)定不像免費(fèi)子域名那么容易受平臺(tái)策略影響。第三配置HTTPS?，F(xiàn)在免費(fèi)托管平臺(tái)幾乎默認(rèn)帶HTTPS不用自己折騰。地址欄里有一把小鎖訪客會(huì)覺得更可信搜索引擎也更友好。部署這塊的具體步驟各家平臺(tái)界面變化較快我這里不寫死操作步驟只強(qiáng)調(diào)一個(gè)原則HTML文件直接放根目錄入口文件叫index.html這是所有靜態(tài)托管的通用約定。把文件結(jié)構(gòu)整理好換平臺(tái)時(shí)你也能很快遷移。最后說一點(diǎn)經(jīng)驗(yàn)層面的體會(huì)。我見過太多人把簡(jiǎn)單和粗糙混為一談但其實(shí)這兩件事差得很遠(yuǎn)。一個(gè)只有幾十行HTML的個(gè)人網(wǎng)頁只要結(jié)構(gòu)清楚、間距舒服、文案用心它給人留下的印象往往比一個(gè)堆滿了動(dòng)畫特效卻內(nèi)容空空的頁面要好得多。這些年我一次次刷新自己的個(gè)人頁刪掉的都是多余的特效保留的永遠(yuǎn)是清晰的結(jié)構(gòu)和真誠(chéng)的內(nèi)容。如果你從頭看到了這里我建議你現(xiàn)在就打開編輯器照著第二章的提綱先把內(nèi)容寫出來再抄一遍第三章的骨架。第一版丑沒關(guān)系我的第一版也丑得不行。重要的是你先擁有一個(gè)屬于自己的、能隨你意愿修改的網(wǎng)頁然后讓它陪你慢慢長(zhǎng)大。 手把手教你制作一個(gè)簡(jiǎn)單HTML個(gè)人網(wǎng)頁：從結(jié)構(gòu)到發(fā)布
說出來你可能不信我這個(gè)寫了不少年代碼的人對(duì)外最常用的名片不是社交平臺(tái)主頁而是一個(gè)只有幾個(gè)HTML文件的小網(wǎng)站。它沒有框架、沒有數(shù)據(jù)庫連JavaScript都只有寥寥幾行但就是這樣一個(gè)樸素的個(gè)人網(wǎng)頁幫我對(duì)接過合作機(jī)會(huì)也成了我給新人講前端時(shí)最順手的教學(xué)樣本。你說它簡(jiǎn)單嗎確實(shí)簡(jiǎn)單。可越是簡(jiǎn)單的東西越能看出一個(gè)人對(duì)內(nèi)容組織和基礎(chǔ)功夫的態(tài)度。這篇文章我就把制作一個(gè)簡(jiǎn)單的HTML個(gè)人網(wǎng)頁的全過程完整講一遍從為什么值得手寫開始到信息架構(gòu)怎么定、HTML結(jié)構(gòu)怎么寫、CSS怎么美化、多頁面怎么跳轉(zhuǎn)再到發(fā)布前必須做的檢查。全程用真實(shí)代碼說話踩過的坑也會(huì)一并交代清楚。不管你是剛接觸前端的學(xué)生還是想給自己搭一個(gè)獨(dú)立展示頁面的職場(chǎng)人照著這篇做應(yīng)該都能得到一版能直接發(fā)出去的網(wǎng)頁。1. 為什么我堅(jiān)持從最樸素的HTML開始做個(gè)人網(wǎng)頁1.1 快與合適是兩回事先聊一個(gè)很多人不太注意的問題做個(gè)人網(wǎng)頁最快的路到底是不是用現(xiàn)成的網(wǎng)站生成器我的答案是快是真的快但快不等于合適。我也試過用那些拖拽式工具選個(gè)模板、改改文字、換張圖片十分鐘就能看到頁面效果?？缮钊胗靡魂囎泳桶l(fā)現(xiàn)模板歸根到底是別人設(shè)計(jì)的你想調(diào)一下間距可能要找半天設(shè)置項(xiàng)你想去掉某個(gè)加載很慢的動(dòng)畫可能要把樣式翻個(gè)底朝天。更麻煩的是這類工具生成的頁面通常附帶不少額外的腳本和統(tǒng)計(jì)代碼頁面越攢越重真正屬于你自己的內(nèi)容反而被淹沒了。手寫HTML完全沒有這個(gè)問題。你寫多少頁面就有多少。一個(gè)簡(jiǎn)單的HTML個(gè)人網(wǎng)頁從結(jié)構(gòu)到樣式再到交互每一行都在你掌控之中。文件體積小加載速度快也不依賴任何第三方平臺(tái)哪天想換個(gè)風(fēng)格直接改CSS就行。這種自己說了算的感覺是我后來一直堅(jiān)持用最樸素方式做個(gè)人頁面的根本原因。1.2 它同時(shí)也是最值得做的前端練手項(xiàng)目除了實(shí)用價(jià)值手寫個(gè)人網(wǎng)頁還有一個(gè)容易被低估的好處它是學(xué)習(xí)前端最合適的第一個(gè)完整項(xiàng)目。很多新手學(xué)HTML時(shí)今天學(xué)標(biāo)題標(biāo)簽明天學(xué)列表標(biāo)簽知識(shí)都是散的學(xué)完就忘。但如果帶著我要做一個(gè)個(gè)人主頁這個(gè)目標(biāo)去學(xué)情況就完全不同了。你自然就會(huì)遇到這樣的問題頁面標(biāo)題怎么設(shè)置段落怎么分段圖片為什么顯示不出來鏈接怎么跳到另一個(gè)頁面樣式為什么會(huì)串這些問題的答案恰好就是HTML和CSS最核心的知識(shí)點(diǎn)。所以我的建議是不管你已經(jīng)有多少編程基礎(chǔ)都值得親手做一次個(gè)人網(wǎng)頁。它不像寫業(yè)務(wù)系統(tǒng)那樣要考慮復(fù)雜的邏輯也沒有后端那些事務(wù)、并發(fā)、權(quán)限的煩惱。它足夠簡(jiǎn)單讓初學(xué)者能跑通完整的寫代碼、預(yù)覽、調(diào)樣式、發(fā)布上線鏈路它又足夠真實(shí)能讓你體會(huì)到把一個(gè)空白文件慢慢變成可用產(chǎn)品的那種成就感。1.3 做這個(gè)項(xiàng)目我不會(huì)用到什么為了避免后面越聊越復(fù)雜我先明確一下邊界做這個(gè)頁面我不會(huì)用到React、Vue這類前端框架也不會(huì)引入Bootstrap之類的組件庫更不會(huì)搭本地開發(fā)服務(wù)器。就用電腦自帶的文本編輯器加上瀏覽器從零開始寫。不用的原因不是它們不好而是殺雞不用牛刀。你只是要做一個(gè)內(nèi)容型頁面根本不需要框架帶來的狀態(tài)管理和組件化。等你以后真要開發(fā)復(fù)雜的Web應(yīng)用再學(xué)那些工具也不遲。先把最基礎(chǔ)的HTML語言本身吃透這對(duì)理解后面所有框架的原理都有幫助——所有那些看起來很酷的框架編譯打包之后落到瀏覽器里跑的還是HTML、CSS、JavaScript這三樣?xùn)|西。2. 動(dòng)筆之前先決定你的頁面上到底要放什么2.1 我給個(gè)人主頁劃分的六個(gè)模塊很多人一上來就打開編輯器敲代碼這是最容易走彎路的地方。用一句老話說叫磨刀不誤砍柴工。我的習(xí)慣是先在紙上把頁面內(nèi)容定下來哪怕只是寫幾行關(guān)鍵詞也比盲目開寫強(qiáng)得多。以我自己為例一個(gè)典型的個(gè)人主頁我會(huì)分成六個(gè)模塊頁頭Header放姓名、頭像以及一句簡(jiǎn)短的個(gè)人定位或口號(hào)。關(guān)于我About兩三段話講清楚自己是誰、在做什么、關(guān)注什么方向。技能特長(zhǎng)Skills用列表展示自己掌握的技術(shù)或能力方向。作品/經(jīng)歷Portfolio放幾個(gè)代表性項(xiàng)目或工作經(jīng)歷附上鏈接。聯(lián)系方式Contact郵箱、社交賬號(hào)方便別人找到你。頁腳Footer放版權(quán)信息、頁面更新日期這類收尾內(nèi)容。這個(gè)結(jié)構(gòu)不是固定的。有人想突出作品可以把作品模塊放大有人是找工作的場(chǎng)景可以加一段求職意向。關(guān)鍵是先想清楚你希望訪客在30秒內(nèi)從你的頁面里讀到什么這是個(gè)人主頁最核心的設(shè)計(jì)問題。2.2 內(nèi)容收集的小方法列提綱而不是直接寫代碼我在做自己的頁面時(shí)習(xí)慣先用文檔或便簽列一個(gè)粗糙的提綱大概長(zhǎng)這樣姓名 一句slogan關(guān)于我技術(shù)背景、興趣方向、最近在做什么技能HTML/CSS/JavaScript/Photoshop作品項(xiàng)目A一句話介紹鏈接、項(xiàng)目B同上聯(lián)系方式郵箱、社交賬號(hào)列完之后我還會(huì)故意去翻幾個(gè)別人做的個(gè)人主頁看看他們的模塊劃分、文案語氣和組織方式。注意不是讓你抄別人的內(nèi)容而是學(xué)習(xí)信息呈現(xiàn)的思路。我見過不少把個(gè)人信息寫得密密麻麻的頁面觀感很差也見過只有一屏內(nèi)容但設(shè)計(jì)得很舒服的頁面。差別不在于內(nèi)容多少而在于結(jié)構(gòu)是否清晰、重點(diǎn)是否突出。2.3 單頁還是多頁我在不同階段的選擇模塊定好了接下來要決定所有內(nèi)容放在一個(gè)頁面上還是拆成多個(gè)頁面我的經(jīng)驗(yàn)是第一次做先用單頁解決能不能用之后再拆成多頁也來得及。單頁的好處是制作簡(jiǎn)單所有內(nèi)容從上到下一目了然訪客滑一屏就能看完不用點(diǎn)來點(diǎn)去。等你內(nèi)容變多比如作品列表長(zhǎng)了、博客文章開始積累了再拆成首頁作品頁關(guān)于頁的多頁結(jié)構(gòu)也不遲。所以這篇文章下面會(huì)先帶你做完整的單頁然后在第五部分講怎么把它拆成帶導(dǎo)航的多頁站點(diǎn)。兩個(gè)方案都覆蓋你可以按自己的需要選。3. 第一版頁面完整寫一遍HTML核心結(jié)構(gòu)3.1 為什么每個(gè)頁面都得從DOCTYPE開始你現(xiàn)在可以打開任何一個(gè)文本編輯器新建一個(gè)文件命名為index.html然后把下面的內(nèi)容敲進(jìn)去。我先解釋一下這個(gè)固定的開頭部分每一行都在干什么!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的個(gè)人主頁/title /head body /body /html!DOCTYPE html告訴瀏覽器這是一個(gè)HTML5文檔。沒有這一行瀏覽器可能會(huì)按舊的兼容模式去解析你的頁面導(dǎo)致樣式表現(xiàn)和預(yù)期不一致。這個(gè)坑我之前踩過少寫了DOCTYPE頁面在瀏覽器里直接亂了版。html langzh-cn聲明頁面語言是簡(jiǎn)體中文。它對(duì)瀏覽器的翻譯建議、朗讀工具都有影響搜索引擎爬蟲也會(huì)讀取它。meta charsetutf-8聲明字符編碼為UTF-8防止中文亂碼。只要你用了中文這一行幾乎必須寫而且要放在head比較靠前的位置。meta nameviewport ...針對(duì)手機(jī)瀏覽器的設(shè)置讓頁面寬度適應(yīng)屏幕。沒有這行頁面在手機(jī)上會(huì)被當(dāng)成一個(gè)PC頁面縮小顯示字小到看不清。title我的個(gè)人主頁/title瀏覽器標(biāo)簽頁上顯示的文字也是搜索結(jié)果里的標(biāo)題務(wù)必好好寫。head區(qū)里做的事就是這些真正的頁面內(nèi)容全部放在body標(biāo)簽里。別小看這個(gè)骨架后面所有模塊都是往body里填的。3.2 用語義化標(biāo)簽組織頁面而不是一鍋div亂燉很多老教程會(huì)讓你大量使用div標(biāo)簽因?yàn)樗亲钪行缘娜萜鳂?biāo)簽。但我建議你從第一天就養(yǎng)成用語義化標(biāo)簽的習(xí)慣header、nav、main、section、footer。它們和div在視覺效果上沒有區(qū)別但對(duì)閱讀代碼的人和機(jī)器比如屏幕閱讀器、搜索引擎來說語義化標(biāo)簽?zāi)芮宄乇磉_(dá)這里是導(dǎo)航這里是正文。下面是我的個(gè)人主頁body部分的骨架你可以直接參考body header h1林小碼/h1 p一個(gè)在路上的前端學(xué)習(xí)者/p /header nav a href#about關(guān)于我/a a href#skills技能/a a href#works作品/a a href#contact聯(lián)系/a /nav main section idabout h2關(guān)于我/h2 p這里是自我介紹寫兩三段話就夠。/p /section section idskills h2技能/h2 ul liHTML/li liCSS/li liJavaScript/li /ul /section section idworks h2作品/h2 p項(xiàng)目卡片放在這個(gè)區(qū)域。/p /section section idcontact h2聯(lián)系我/h2 p郵箱和社交鏈接放這里。/p /section /main footer p? 2025 林小碼/p /footer /body注意幾個(gè)我特別強(qiáng)調(diào)的習(xí)慣一級(jí)標(biāo)題h1在整頁里只用一次放在header里告訴瀏覽器和搜索引擎這個(gè)頁面最重要的內(nèi)容是什么。每個(gè)section都加一個(gè)id這樣導(dǎo)航里的鏈接才能精確跳到對(duì)應(yīng)位置這是典型的錨點(diǎn)用法后面第五部分會(huì)細(xì)講。內(nèi)容級(jí)標(biāo)題從h2開始用不要跳級(jí)。頁面結(jié)構(gòu)要保持層級(jí)清晰。3.3 文本、列表、圖片和鏈接的基本用法每個(gè)模塊內(nèi)部需要不同類型的內(nèi)容我再把最常用的幾個(gè)標(biāo)簽一次說清楚。文本標(biāo)簽段落用p強(qiáng)調(diào)用strong和em。新手經(jīng)常把加粗和強(qiáng)調(diào)混為一談這里我提醒一下它們默認(rèn)的瀏覽器樣式確實(shí)分別是加粗和斜體但語義上完全不是一回事。strong表示這段文字很重要em表示語氣上的強(qiáng)調(diào)屏幕閱讀器對(duì)它們的朗讀方式也不同。所以別隨便替換先想想你想表達(dá)的是重要還是強(qiáng)調(diào)。列表標(biāo)簽無序列表用ul包li適合放技能列表有序列表用ol包li適合放有先后順序的信息。比如技能沒有高低之分用ul實(shí)習(xí)經(jīng)歷按時(shí)間排用ol更合理。圖片標(biāo)簽img srcimages/avatar.jpg alt我的頭像src是圖片路徑alt是圖片無法顯示時(shí)的替代文本同時(shí)也是無障礙訪問的重要組成部分。我見過太多人圖省事不寫alt結(jié)果圖片掛了頁面就只剩一個(gè)裂圖圖標(biāo)非常難看。寫alt也有技巧不要堆關(guān)鍵詞就用一句人話描述圖片內(nèi)容比如我在辦公室的一張工作照。鏈接標(biāo)簽a hrefhttps://example.com target_blank relnoopener我的項(xiàng)目倉庫/ahref寫目標(biāo)地址target_blank表示在新標(biāo)簽頁打開relnoopener是配套的安全寫法防止新頁面拿到對(duì)當(dāng)前頁面的控制權(quán)。這三個(gè)屬性一起用是最穩(wěn)妥的寫法。如果是頁內(nèi)跳轉(zhuǎn)target就不要加了直接href#about這樣點(diǎn)擊才會(huì)在本頁滾動(dòng)到指定位置。到這里一個(gè)不包含任何樣式的HTML個(gè)人網(wǎng)頁已經(jīng)能跑起來了。你在瀏覽器里打開index.html應(yīng)該能看到所有文字從上到下排成一列。接下來要做的就是讓它變得好看。4. 用CSS把頁面從能用變成好看4.1 樣式寫在哪三種方式我為什么只推薦一種CSS有三種引入方式行內(nèi)樣式寫在標(biāo)簽的style屬性里、內(nèi)部樣式寫在head里的style中、外部樣式單獨(dú)一個(gè).css文件用link引入。我強(qiáng)烈推薦外部樣式。原因很樸素內(nèi)容與樣式分離以后改樣式只動(dòng)一個(gè)文件就行。行內(nèi)樣式看著方便但一旦頁面大起來改起來會(huì)讓你頭疼到懷疑人生內(nèi)部樣式適合單頁小項(xiàng)目但你想給多個(gè)頁面共用樣式時(shí)就不行了。外部樣式是能長(zhǎng)期維護(hù)的方式從第一版就開始用可以省掉后面很多麻煩。在head里加上這一行l(wèi)ink relstylesheet hrefcss/style.css然后新建一個(gè)css文件夾在里面創(chuàng)建style.css。下面所有樣式都寫在這個(gè)文件里。4.2 第一次美化優(yōu)先做這三件事我見過不少新手一上來就追求炫酷又是漸變背景又是動(dòng)態(tài)效果結(jié)果頁面五彩斑斕反而讓人抓不住重點(diǎn)。我的建議是第一版的美化只做三件事統(tǒng)一字體、拉開間距、定好配色。字體與基礎(chǔ)排版body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif; line-height: 1.7; color: #333; background-color: #f9f9f9; margin: 0; padding: 0; }這里line-height: 1.7很關(guān)鍵它把行高設(shè)為字號(hào)的1.7倍中文段落立刻會(huì)變得舒展不再擠成一團(tuán)。font-family里寫了多個(gè)字體瀏覽器會(huì)按順序選擇一個(gè)能用的這就是字體回退機(jī)制保證不同系統(tǒng)上都不會(huì)因?yàn)槿弊煮w而顯示奇怪的東西。間距我習(xí)慣給所有section統(tǒng)一上下留白讓頁面有呼吸感section { max-width: 800px; margin: 0 auto 40px; padding: 0 20px; }max-width: 800px限制內(nèi)容寬度太寬的行讀起來眼睛容易疲勞margin: 0 auto是讓這個(gè)容器水平居中padding: 0 20px是防止頁面很窄時(shí)文字貼到屏幕邊緣。這一組規(guī)則在幾乎所有內(nèi)容型頁面上都好用可以記成一個(gè)口訣內(nèi)容寬度、水平居中、內(nèi)邊距保護(hù)。配色我的建議是正文用深灰而不是純黑背景用淺灰而不是純白鏈接用不算太刺眼的藍(lán)色。純黑和純白對(duì)比太強(qiáng)長(zhǎng)時(shí)間閱讀容易累而深灰配淺灰會(huì)更溫和。第一版不要超過三種主色等審美積累起來再慢慢調(diào)整。4.3 卡片式布局盒模型的一次實(shí)戰(zhàn)作品區(qū)通常需要做成卡片讓每一條內(nèi)容獨(dú)立成塊。先看HTMLsection idworks h2作品/h2 div classcard h3個(gè)人博客/h3 p記錄日常學(xué)習(xí)筆記已更新30篇文章。/p a hrefhttps://example.com去看看/a /div div classcard h3天氣查詢小工具/h3 p調(diào)用免費(fèi)API實(shí)現(xiàn)的簡(jiǎn)易天氣應(yīng)用。/p a hrefhttps://example.com去看看/a /div /section對(duì)應(yīng)CSS.card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-bottom: 20px; } .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }這里涉及的就是CSS里最核心的盒模型每個(gè)元素都是一個(gè)盒子從里到外分別是內(nèi)容、內(nèi)邊距padding、邊框border、外邊距margin。你可以試著在瀏覽器開發(fā)者工具里選中這個(gè)卡片右側(cè)會(huì)有一個(gè)非常直觀的盒模型圖——強(qiáng)烈建議你親手點(diǎn)幾下比讀十篇文章都管用。border-radius: 8px讓四個(gè)角變圓潤(rùn)box-shadow在鼠標(biāo)懸停時(shí)給卡片一層輕盈的陰影這兩個(gè)細(xì)節(jié)一加頁面質(zhì)感立刻就不一樣了但它們只是加法真正的根基還是間距和留白。4.4 讓手機(jī)也能看得舒服viewport與媒體查詢前面提到head里那行viewport meta它配合CSS的媒體查詢就能讓頁面在不同屏幕寬度下自適應(yīng)。我的策略很簡(jiǎn)單內(nèi)容型頁面只在必要的時(shí)候改布局。大部分情況下單列排版在手機(jī)和電腦上都沒問題。真正需要調(diào)整的是字體大小和間距可以用一個(gè)媒體查詢media (max-width: 600px) { body { font-size: 16px; } section { padding: 0 12px; } }這行代碼的意思是當(dāng)屏幕寬度不大于600像素時(shí)應(yīng)用里面的樣式。你可以把手機(jī)瀏覽器切換到電腦模式對(duì)比一下會(huì)發(fā)現(xiàn)小屏上的文字不再貼著屏幕邊緣閱讀體驗(yàn)明顯改善。提示CSS選擇器是區(qū)分大小寫的寫成#About和#about是兩個(gè)完全不同的東西。這類錯(cuò)誤很難排查因?yàn)轫撁娌粫?huì)報(bào)錯(cuò)只是點(diǎn)擊導(dǎo)航?jīng)]反應(yīng)。如果你遇到明明id對(duì)得上跳轉(zhuǎn)卻失效的情況先去檢查大小寫。5. 從單頁走向多頁導(dǎo)航、鏈接與文件組織5.1 文件夾結(jié)構(gòu)怎么安排才不亂內(nèi)容多起來之后把頁面拆成多個(gè)文件是自然趨勢(shì)。我常用的結(jié)構(gòu)是這樣my-site/ ├── index.html ├── about.html ├── works.html ├── contact.html ├── css/ │ └── style.css ├── images/ │ ├── avatar.jpg │ └── project-1.png └── js/ └── main.js規(guī)則很簡(jiǎn)單HTML文件放根目錄樣式放css文件夾圖片放images文件夾腳本放js文件夾。這樣做的好處是路徑可預(yù)期不管在哪個(gè)頁面css/style.css這個(gè)相對(duì)路徑都能訪問到同一個(gè)樣式文件。5.2 相對(duì)路徑同一層級(jí)、子目錄、上級(jí)目錄怎么指多頁面之間互相跳轉(zhuǎn)最關(guān)鍵的就是路徑寫法。先說結(jié)論在你自己的項(xiàng)目?jī)?nèi)部一律用相對(duì)路徑不要把自己電腦上的絕對(duì)路徑寫進(jìn)去也別用file:///C:/...這種本機(jī)路徑否則頁面?zhèn)鞯骄W(wǎng)上之后鏈接全都會(huì)失效。相對(duì)路徑的三種情況場(chǎng)景寫法示例同目錄下的文件直接寫文件名hrefabout.html子目錄里的文件文件夾名/文件名hrefcss/style.css上級(jí)目錄里的文件先寫../再寫路徑href../index.html這里最容易讓新人懵的是../。它的意思是往上一層目錄。比如你在about.html里想回到首頁因?yàn)閍bout.html和index.html在同一個(gè)目錄下直接寫hrefindex.html就行不需要../。什么時(shí)候需要../比如一個(gè)頁面在子文件夾里要引用根目錄下的文件時(shí)。5.3 錨點(diǎn)鏈接點(diǎn)擊導(dǎo)航跳到頁內(nèi)指定位置單頁模式下導(dǎo)航鏈接通常不是跳轉(zhuǎn)到新頁面而是平滑地跳到本頁的某個(gè)section。實(shí)現(xiàn)方式就是第二章提到的給目標(biāo)section加id然后導(dǎo)航鏈接的href寫成#id比如nav a href#about關(guān)于我/a a href#skills技能/a a href#works作品/a a href#contact聯(lián)系/a /nav點(diǎn)擊關(guān)于我瀏覽器會(huì)自動(dòng)把頁面滾到idabout的section的位置。如果鏈接寫成about.html#experience就是先跳到about頁面再定位到該頁里idexperience的位置。這個(gè)組合用法在簡(jiǎn)歷型網(wǎng)站上非常常見。5.4 導(dǎo)航欄固定在頁面頂部的小技巧當(dāng)頁面內(nèi)容足夠長(zhǎng)訪客一路往下滾動(dòng)時(shí)導(dǎo)航消失在視野外是個(gè)麻煩。我常用的解決辦法是給導(dǎo)航加固定定位nav { position: sticky; top: 0; background: #ffffff; padding: 12px 20px; border-bottom: 1px solid #eee; z-index: 10; }position: sticky的一個(gè)特點(diǎn)是它一開始在正常流里滾動(dòng)到指定位置后就粘在屏幕頂部。相比position: fixed它不會(huì)一開始就脫離文檔流導(dǎo)致內(nèi)容往上飄更適合導(dǎo)航這種場(chǎng)景。注意要給導(dǎo)航一個(gè)背景色和更高的z-index否則滾動(dòng)時(shí)下方內(nèi)容會(huì)穿透顯示出來。6. 發(fā)布前我必跑的檢查清單編碼、路徑與兼容性6.1 字符編碼中文亂碼九成是這里出問題中文亂碼是我見過最多的問題十次里有八次是同一個(gè)原因文件保存的編碼不是UTF-8。代碼里雖然寫了meta charsetutf-8但如果你用記事本把文件保存成了ANSI編碼瀏覽器按UTF-8解析時(shí)就會(huì)亂掉。解決方法是在編輯器中保存時(shí)明確選擇UTF-8編碼?，F(xiàn)在主流編輯器默認(rèn)都是UTF-8但如果你從別處復(fù)制了老文件或者用了某些老舊編輯器保存前一定檢查一下編碼選項(xiàng)。這個(gè)坑我?guī)啄昵安冗^頁面本地看是好的傳到服務(wù)器上就出現(xiàn)一堆錕斤拷折騰了半天才發(fā)現(xiàn)是保存編碼的問題。6.2 文件命名空格、中文和大小寫文件命名看起來是小事但它直接影響頁面上線后的穩(wěn)定。首先文件名里絕對(duì)不要用空格。瀏覽器會(huì)把空格轉(zhuǎn)成%20鏈接看著奇怪不說有些老舊服務(wù)器解析也不穩(wěn)定。其次除非你清楚自己在做什么否則盡量別用中文文件名。雖然現(xiàn)代瀏覽器基本都支持但放到不同服務(wù)器、不同工具鏈里還是容易出意外。最后注意大小寫HTML文件內(nèi)部的鏈接是區(qū)分大小寫的hrefAbout.html和hrefabout.html在Windows本地可能都能打開但上傳到Linux服務(wù)器后就只有其中一個(gè)能找到文件。我的習(xí)慣是所有文件名小寫單詞之間用連字符分隔。比如my-project.html而不是MyProject.html長(zhǎng)期維護(hù)下來你會(huì)感謝這個(gè)習(xí)慣。6.3 多瀏覽器和手機(jī)端的預(yù)覽檢查發(fā)布之前我會(huì)用一個(gè)簡(jiǎn)單的表格記下檢查項(xiàng)逐項(xiàng)打勾檢查項(xiàng)方法通過標(biāo)準(zhǔn)桌面瀏覽器Chrome、Edge、Firefox各打開一次頁面無錯(cuò)位鏈接可點(diǎn)手機(jī)瀏覽器手機(jī)直接訪問或用開發(fā)者工具設(shè)備模式無橫向滾動(dòng)條字體可讀圖片顯示檢查所有img的src無裂圖鏈接有效性逐個(gè)點(diǎn)一遍導(dǎo)航與正文鏈接無404或空白頁控制臺(tái)報(bào)錯(cuò)F12打開開發(fā)者工具查看Console無紅色錯(cuò)誤特別說下手機(jī)端的檢查。不用真機(jī)的話可以在Chrome里按F12再按CtrlShiftM切換到設(shè)備模擬選iPhone或Android機(jī)型就能看到大致的手機(jī)效果。這個(gè)模式還能幫你發(fā)現(xiàn)是否出現(xiàn)了橫向滾動(dòng)條——那是響應(yīng)式?jīng)]做好的典型癥狀。6.4 分享出去之前別忽略該刪的東西最后一條提醒不太算技術(shù)問題但很重要檢查頁面上有沒有不該公開的信息。包括手機(jī)號(hào)、家庭住址、身份證號(hào)、詳細(xì)地理位置、公司內(nèi)部資料等都不要出現(xiàn)在公開的個(gè)人網(wǎng)頁上。給別人留郵箱和期望的社交賬號(hào)就夠了真實(shí)姓名是否公開也可以自己權(quán)衡。另外如果頁面里引用了朋友的項(xiàng)目或照片最好提前打個(gè)招呼。以前有人把我的照片順手放進(jìn)了他的個(gè)人頁面我倒是無所謂但有些人會(huì)介意這種尊重是基本素質(zhì)。發(fā)布之前把頁面鏈接發(fā)給兩三個(gè)信任的朋友讓他們以陌生人的視角幫你看看往往能發(fā)現(xiàn)你自己注意不到的問題。7. 還能往里面加什么表單、JavaScript和部署7.1 聯(lián)系方式表單沒有后端也能收信很多人想要一個(gè)聯(lián)系表單但頁面沒有后端不知道怎么接收數(shù)據(jù)。最簡(jiǎn)單的方案是用mailto:鏈接點(diǎn)擊后打開訪客本地的郵件客戶端a hrefmailto:helloexample.com發(fā)郵件給我/a但它的體驗(yàn)比較原始訪客會(huì)被彈出郵件客戶端打斷。想要更像樣的表單我在早期用的是免費(fèi)的表單服務(wù)比如Formspree這類把表單的action指向服務(wù)地址訪客提交后內(nèi)容會(huì)轉(zhuǎn)發(fā)到你的郵箱。因?yàn)檫@類服務(wù)規(guī)則時(shí)有變化我這里不展開配置細(xì)節(jié)你需要做的就是在HTML里寫一個(gè)正經(jīng)的表單結(jié)構(gòu)然后按所選服務(wù)的要求改action和表單字段名就行。必填字段、占位提示這些基礎(chǔ)寫法先掌握form actionhttps://formspree.io/f/你的表單ID methodPOST label forname稱呼/label input typetext idname namename required label foremail郵箱/label input typeemail idemail nameemail required label formessage留言/label textarea idmessage namemessage rows5 required/textarea button typesubmit發(fā)送/button /formlabel的for要跟對(duì)應(yīng)輸入框的id一致這樣點(diǎn)擊文字時(shí)輸入框就能獲得焦點(diǎn)這是容易被忽略的可用性細(xì)節(jié)。7.2 一行JavaScript讓頁腳年份自動(dòng)更新個(gè)人主頁里最常見的一個(gè)JavaScript需求是讓頁腳的版權(quán)年份自動(dòng)變成當(dāng)前年份省得每年手動(dòng)改。實(shí)現(xiàn)起來只需幾行script document.getElementById(year).textContent new Date().getFullYear(); /script頁腳HTML里配合寫p? span idyear2025/span 林小碼/p這段腳本放的位置建議在/body之前因?yàn)槟_本要等頁面元素加載完才能找到那個(gè)span。你可能會(huì)問這不就是那寥寥幾行JavaScript嗎沒錯(cuò)好的個(gè)人網(wǎng)頁不需要很多腳本能用最少的代碼解決真實(shí)問題本身就是一種能力。7.3 把頁面放到網(wǎng)上我看重的幾件事頁面做好了怎么讓全世界看到我的建議順序是第一用靜態(tài)托管平臺(tái)。現(xiàn)在有不少平臺(tái)支持把本地文件夾拖上去就能生成一個(gè)可訪問的網(wǎng)址域名通常是免費(fèi)的適合第一次上線試水。第二注冊(cè)一個(gè)自己的域名綁定到托管服務(wù)上。有自己域名的好處是網(wǎng)址簡(jiǎn)短好記而且長(zhǎng)期來看指向穩(wěn)定不像免費(fèi)子域名那么容易受平臺(tái)策略影響。第三配置HTTPS?，F(xiàn)在免費(fèi)托管平臺(tái)幾乎默認(rèn)帶HTTPS不用自己折騰。地址欄里有一把小鎖訪客會(huì)覺得更可信搜索引擎也更友好。部署這塊的具體步驟各家平臺(tái)界面變化較快我這里不寫死操作步驟只強(qiáng)調(diào)一個(gè)原則HTML文件直接放根目錄入口文件叫index.html這是所有靜態(tài)托管的通用約定。把文件結(jié)構(gòu)整理好換平臺(tái)時(shí)你也能很快遷移。最后說一點(diǎn)經(jīng)驗(yàn)層面的體會(huì)。我見過太多人把簡(jiǎn)單和粗糙混為一談但其實(shí)這兩件事差得很遠(yuǎn)。一個(gè)只有幾十行HTML的個(gè)人網(wǎng)頁只要結(jié)構(gòu)清楚、間距舒服、文案用心它給人留下的印象往往比一個(gè)堆滿了動(dòng)畫特效卻內(nèi)容空空的頁面要好得多。這些年我一次次刷新自己的個(gè)人頁刪掉的都是多余的特效保留的永遠(yuǎn)是清晰的結(jié)構(gòu)和真誠(chéng)的內(nèi)容。如果你從頭看到了這里我建議你現(xiàn)在就打開編輯器照著第二章的提綱先把內(nèi)容寫出來再抄一遍第三章的骨架。第一版丑沒關(guān)系我的第一版也丑得不行。重要的是你先擁有一個(gè)屬于自己的、能隨你意愿修改的網(wǎng)頁然后讓它陪你慢慢長(zhǎng)大。