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