簡(jiǎn)介這份個(gè)人博客網(wǎng)頁(yè)設(shè)計(jì)HTML源碼面向希望快速搭建個(gè)人站點(diǎn)的初學(xué)者與前端入門者提供一套可直接運(yùn)行的靜態(tài)博客主題用于展示作品、想法或日常生活。資源包共30個(gè)文件以27個(gè)gif裝飾圖、1張jpg頭像、1個(gè)html頁(yè)面和1個(gè)css樣式表為主壓縮包約37KB體積輕巧便于下載與二次修改。其中index.html定義頁(yè)面頭部、導(dǎo)航、文章與頁(yè)腳等結(jié)構(gòu)style.css通過(guò)類選擇器、ID選擇器控制字體、顏色、間距與盒模型布局images目錄中的圖片資源承擔(dān)背景、分隔線與圖標(biāo)等視覺(jué)裝飾。目前已有3820人學(xué)習(xí)下載適合作為HTML與CSS基礎(chǔ)練習(xí)的參考案例。讀者可借此理解網(wǎng)頁(yè)結(jié)構(gòu)組織、樣式與內(nèi)容分離的思路并在此基礎(chǔ)上替換圖片與文字快速改造成符合個(gè)人風(fēng)格的博客頁(yè)面。1. 個(gè)人博客網(wǎng)頁(yè)設(shè)計(jì)html源碼從一份靜態(tài)骨架到能上線的站點(diǎn)很多人搜「?jìng)€(gè)人博客網(wǎng)頁(yè)設(shè)計(jì)html源碼」腦子里想的是下載一個(gè)壓縮包解壓雙擊index.html瀏覽器里出現(xiàn)一個(gè)能看的博客然后改改文字就完事。我一開(kāi)始也這么想直到幫朋友把一個(gè)「源碼」部署到服務(wù)器上才發(fā)現(xiàn)問(wèn)題導(dǎo)航點(diǎn)不動(dòng)、手機(jī)端錯(cuò)位、文章頁(yè)全是寫死的假數(shù)據(jù)、CSS 里還引著本地絕對(duì)路徑。所謂源碼其實(shí)只是一張靜態(tài)截圖。這篇筆記要解決的就是把這個(gè)模糊的需求拆開(kāi)一份能用的個(gè)人博客 html 源碼到底由哪些文件組成每部分怎么寫改哪里能變成自己的以及怎么從「本地能打開(kāi)」走到「線上能訪問(wèn)」。適合兩類人想自己手寫一套博客頁(yè)面的前端新手和拿到一份 html 模板卻不知道怎么改成自己博客的從業(yè)者。下面按文件結(jié)構(gòu)、頁(yè)面骨架、樣式布局、響應(yīng)式、上線部署的順序講每一步都給能直接抄的代碼。2. 一份個(gè)人博客 html 源碼到底包含哪些文件2.1 最小可用目錄結(jié)構(gòu)與各文件職責(zé)先明確一件事純 html 源碼做的是「展示層」它不負(fù)責(zé)存文章、不負(fù)責(zé)評(píng)論、不負(fù)責(zé)登錄。個(gè)人博客常見(jiàn)的做法是 html css js 三件套文章數(shù)據(jù)要么寫死在 html 里要么用 js 從一個(gè) json 文件讀。目錄結(jié)構(gòu)我一般這么組織my-blog/ ├── index.html # 首頁(yè)文章列表 ├── post.html # 文章詳情頁(yè)模板 ├── about.html # 關(guān)于頁(yè) ├── css/ │ ├── reset.css # 清除瀏覽器默認(rèn)樣式 │ └── style.css # 主樣式 ├── js/ │ ├── main.js # 交互邏輯 │ └── posts.json # 文章數(shù)據(jù)可選 └── images/ └── avatar.jpg # 頭像等靜態(tài)資源這個(gè)結(jié)構(gòu)的好處是職責(zé)清晰index.html只管首頁(yè)結(jié)構(gòu)style.css管所有視覺(jué)main.js管點(diǎn)擊、加載、返回頂部這類行為。新手最容易犯的錯(cuò)是把樣式寫成行內(nèi)style...幾十個(gè)標(biāo)簽寫下來(lái)改一個(gè)顏色要翻遍整個(gè)文件。把 css 抽出來(lái)是讓源碼「可維護(hù)」的第一步。posts.json是可選項(xiàng)。如果你只有幾篇文章直接寫在 html 里最省事如果文章會(huì)持續(xù)增加用 json 存數(shù)據(jù)、js 渲染列表改文章就不用動(dòng) html 結(jié)構(gòu)。兩種方式我都用過(guò)前者適合剛起步后者適合寫到二三十篇以后。2.2 首頁(yè)骨架從 doctype 到文章列表容器一份規(guī)范的 html 源碼開(kāi)頭必須是!doctype html這行告訴瀏覽器用標(biāo)準(zhǔn)模式渲染少了它某些瀏覽器會(huì)進(jìn)入怪異模式盒模型計(jì)算方式都變了布局直接翻車。下面是我常用的首頁(yè)骨架!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 title我的個(gè)人博客/title meta namedescription content記錄前端與后端的學(xué)習(xí)筆記 link relstylesheet hrefcss/reset.css link relstylesheet hrefcss/style.css /head body header classsite-header a classlogo hrefindex.htmlMy Blog/a nav classnav a hrefindex.html首頁(yè)/a a hrefabout.html關(guān)于/a /nav /header main classpost-list article classpost-item h2a hrefpost.html第一篇文章標(biāo)題/a/h2 p classmeta2024-01-01 · 前端/p p classexcerpt這里是文章摘要控制在兩行以內(nèi)。/p /article /main footer classsite-footer p? 2024 My Blog/p /footer script srcjs/main.js/script /body /html逐塊說(shuō)明。meta charsetutf-8必須放在 head 最前面否則中文可能亂碼這是血淚經(jīng)驗(yàn)編碼聲明晚了瀏覽器已經(jīng)按別的編碼解析了。viewport那行是移動(dòng)端適配的前提沒(méi)有它手機(jī)上會(huì)按 980px 寬度渲染再縮小字小得看不清。main里每個(gè)article是一篇文章卡片h2放標(biāo)題、meta放日期分類、excerpt放摘要。語(yǔ)義化標(biāo)簽header/nav/main/article/footer不只是好看它對(duì) SEO 和讀屏軟件都有實(shí)際作用搜索引擎能據(jù)此判斷哪塊是正文。參數(shù)上langzh-cn影響的是瀏覽器選字體和斷詞規(guī)則寫博客用中文就設(shè)成 zh-cn。title和description是搜索結(jié)果里顯示的內(nèi)容別偷懶寫「首頁(yè)」兩個(gè)字。2.3 文章詳情頁(yè)與數(shù)據(jù)分離的兩種做法文章頁(yè)有兩種寫法。寫死版每篇文章一個(gè) html 文件內(nèi)容直接寫在article里優(yōu)點(diǎn)是簡(jiǎn)單、SEO 友好缺點(diǎn)是文章多了文件爆炸。數(shù)據(jù)驅(qū)動(dòng)版只有一個(gè)post.html用 js 讀 url 參數(shù)再渲染對(duì)應(yīng)內(nèi)容// js/main.js const params new URLSearchParams(location.search); const id params.get(id) || 1; fetch(js/posts.json) .then(res res.json()) .then(posts { const post posts.find(p p.id id); if (!post) { document.querySelector(.post-body).textContent 文章不存在; return; } document.title post.title - 我的博客; document.querySelector(.post-title).textContent post.title; document.querySelector(.post-body).innerHTML post.content; }) .catch(() { document.querySelector(.post-body).textContent 加載失敗請(qǐng)刷新重試; });這段邏輯是從地址欄拿id去posts.json里找對(duì)應(yīng)文章找到就填進(jìn)頁(yè)面找不到給提示。URLSearchParams是現(xiàn)代瀏覽器都支持的原生方法不用引第三方庫(kù)。fetch后面必須跟.catch否則網(wǎng)絡(luò)斷了頁(yè)面一片空白用戶不知道發(fā)生了什么。注意innerHTML直接插入內(nèi)容有 XSS 風(fēng)險(xiǎn)如果文章內(nèi)容來(lái)自用戶輸入要先轉(zhuǎn)義自己寫的博客內(nèi)容可控問(wèn)題不大。posts.json的結(jié)構(gòu)建議這樣[ { id: 1, title: 第一篇文章, date: 2024-01-01, content: p正文段落/p } ]id 用字符串而不是數(shù)字避免 url 參數(shù)類型轉(zhuǎn)換的坑。content 里放 html 片段渲染時(shí)用 innerHTML 才能生效。3. 用 CSS 把骨架變成能看的博客頁(yè)面3.1 reset 與主樣式先歸零再布局瀏覽器對(duì) h1、p、ul 這些標(biāo)簽有默認(rèn)的 margin 和 padding不同瀏覽器還不一樣。不重置的話你在 Chrome 調(diào)好的間距到 Safari 就變了。reset.css我一般寫最簡(jiǎn)版* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, PingFang SC, Microsoft YaHei, sans-serif; line-height: 1.7; color: #333; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; }box-sizing: border-box是關(guān)鍵它讓 padding 和 border 算進(jìn)元素寬度里否則你設(shè)width: 100%再加 padding元素就撐出容器了這是新手布局錯(cuò)位最常見(jiàn)的原因。字體棧里-apple-system讓蘋果設(shè)備用系統(tǒng)字體PingFang SC是中文字體Microsoft YaHei兜底 Windows最后 sans-serif 保底。line-height: 1.7是中文正文比較舒服的行高1.5 偏擠2.0 偏散。主樣式style.css負(fù)責(zé)布局。首頁(yè)文章列表用 flex 或 grid 都行單列博客用最簡(jiǎn)單的居中容器.site-header { display: flex; justify-content: space-between; align-items: center; max-width: 720px; margin: 0 auto; padding: 24px 16px; border-bottom: 1px solid #eee; } .post-list { max-width: 720px; margin: 0 auto; padding: 24px 16px; } .post-item { padding: 20px 0; border-bottom: 1px solid #f0f0f0; } .post-item h2 { font-size: 20px; margin-bottom: 8px; } .meta { font-size: 13px; color: #999; margin-bottom: 8px; } .excerpt { color: #666; }max-width: 720px加margin: 0 auto是經(jīng)典的居中容器寫法720px 是中文閱讀比較舒適的行寬太寬眼睛要來(lái)回掃。justify-content: space-between讓 logo 和導(dǎo)航分居兩端。這些數(shù)值不是死的你可以按自己審美調(diào)但行寬別超過(guò) 800px。3.2 響應(yīng)式三個(gè)斷點(diǎn)讓手機(jī)端不崩不做響應(yīng)式手機(jī)上打開(kāi)就是災(zāi)難。我一般設(shè)三個(gè)斷點(diǎn)但個(gè)人博客其實(shí)兩個(gè)就夠media (max-width: 768px) { .site-header { flex-direction: column; gap: 12px; } .post-item h2 { font-size: 18px; } } media (max-width: 480px) { .post-list { padding: 16px 12px; } body { font-size: 15px; } }768px 是平板豎屏和手機(jī)橫屏的分界480px 是手機(jī)豎屏。768 以下把 header 改成縱向排列導(dǎo)航不會(huì)擠成一團(tuán)。480 以下縮小內(nèi)邊距和字號(hào)給內(nèi)容留出更多空間。斷點(diǎn)不是越多越好每多一個(gè)就多一份維護(hù)成本兩個(gè)斷點(diǎn)覆蓋絕大多數(shù)設(shè)備。提示調(diào)試響應(yīng)式別只靠瀏覽器縮放用開(kāi)發(fā)者工具的 device toolbar 切到具體機(jī)型或者直接在真機(jī)上打開(kāi)看縮放模擬和真實(shí)渲染有差異。3.3 返回頂部與暗色模式兩個(gè)提升體驗(yàn)的小交互返回頂部是博客的標(biāo)配實(shí)現(xiàn)很簡(jiǎn)單const btn document.querySelector(.back-to-top); window.addEventListener(scroll, () { btn.style.display window.scrollY 400 ? block : none; }); btn.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });scrollY 400是滾動(dòng)超過(guò) 400px 才顯示按鈕避免一進(jìn)頁(yè)面就冒出來(lái)。behavior: smooth讓滾動(dòng)有過(guò)渡動(dòng)畫比瞬間跳回舒服。這個(gè)閾值按頁(yè)面高度調(diào)內(nèi)容短的博客可以設(shè)小一點(diǎn)。暗色模式現(xiàn)在也算基礎(chǔ)體驗(yàn)了用 CSS 變量配合媒體查詢:root { --bg: #fff; --text: #333; } media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; --text: #ddd; } } body { background: var(--bg); color: var(--text); }prefers-color-scheme跟隨系統(tǒng)設(shè)置用戶系統(tǒng)開(kāi)了暗色頁(yè)面自動(dòng)切換不用自己做開(kāi)關(guān)。用 CSS 變量是為了改主題時(shí)只動(dòng)一處所有引用變量的地方自動(dòng)更新。4. 個(gè)人博客 html 源碼避坑與常見(jiàn)問(wèn)題排查4.1 中文亂碼charset 位置和文件編碼不一致現(xiàn)象頁(yè)面中文顯示成方塊或亂碼。原因通常是兩個(gè)一是meta charsetutf-8沒(méi)放在 head 最前面瀏覽器已經(jīng)用默認(rèn)編碼解析了二是 html 文件本身保存的編碼不是 utf-8比如 Windows 記事本默認(rèn)存成 GBK。解決把 charset 聲明提到 head 第一行編輯器里把文件另存為 utf-8 編碼。VS Code 右下角能看到當(dāng)前編碼點(diǎn)一下就能改。4.2 手機(jī)端橫向滾動(dòng)條某個(gè)元素?fù)纹屏艘暱诂F(xiàn)象手機(jī)上頁(yè)面能左右滑動(dòng)右邊多出一塊空白。原因一般是某個(gè)元素寬度超過(guò)屏幕常見(jiàn)的是固定寬度的圖片、超長(zhǎng)的英文單詞、或者加了 padding 的 100% 寬度元素。解決先給body加overflow-x: hidden應(yīng)急然后逐個(gè)檢查元素。用開(kāi)發(fā)者工具選中元素看它的實(shí)際寬度超過(guò)視口寬度的就是元兇。圖片加max-width: 100%長(zhǎng)單詞加word-break: break-all。4.3 本地能打開(kāi)線上 404路徑大小寫和相對(duì)路徑現(xiàn)象本地雙擊 html 一切正常傳到服務(wù)器后 css、js、圖片全加載不出來(lái)。原因Linux 服務(wù)器區(qū)分文件名大小寫本地 Windows 不區(qū)分Style.css和style.css在本地都能找到線上就 404。另外絕對(duì)路徑/css/style.css在子目錄部署時(shí)會(huì)指錯(cuò)位置。解決統(tǒng)一用小寫文件名引用一律用相對(duì)路徑css/style.css部署前在本地起個(gè)靜態(tài)服務(wù)器測(cè)一遍別只靠雙擊文件。4.4 fetch 加載 json 失敗跨域和 file 協(xié)議現(xiàn)象用 js 讀posts.json本地雙擊打開(kāi)時(shí)控制臺(tái)報(bào) CORS 或跨域錯(cuò)誤文章列表空白。原因?yàn)g覽器對(duì)file://協(xié)議下的 fetch 有安全限制不允許讀本地文件。解決本地起一個(gè)靜態(tài)服務(wù)器比如python -m http.server 8000然后訪問(wèn)http://localhost:8000。這不是代碼問(wèn)題是協(xié)議限制部署到線上 http 環(huán)境就正常了。4.5 樣式改了沒(méi)生效緩存和優(yōu)先級(jí)現(xiàn)象改了 css 刷新頁(yè)面沒(méi)變化。原因?yàn)g覽器緩存了舊 css或者新樣式被更高優(yōu)先級(jí)的規(guī)則覆蓋。解決先強(qiáng)制刷新CtrlShiftR還不行就打開(kāi)開(kāi)發(fā)者工具看元素的實(shí)際生效樣式被劃掉的就是被覆蓋了。行內(nèi)樣式優(yōu)先級(jí)高于 id 高于 class選擇器越具體優(yōu)先級(jí)越高。實(shí)在不行給樣式加!important應(yīng)急但別濫用后面維護(hù)會(huì)痛苦。5. 從源碼到上線靜態(tài)托管與自定義域名5.1 三種部署方式的選擇純靜態(tài)博客的部署常見(jiàn)三條路。一是對(duì)象存儲(chǔ)加 CDN把文件傳上去開(kāi)靜態(tài)網(wǎng)站功能成本低、速度快適合訪問(wèn)量穩(wěn)定的博客。二是靜態(tài)托管平臺(tái)連上代碼倉(cāng)庫(kù)自動(dòng)構(gòu)建部署推代碼就上線適合頻繁更新的。三是自己買服務(wù)器配 nginx靈活但要自己維護(hù)適合想順便練運(yùn)維的。我一般推薦前兩種個(gè)人博客沒(méi)必要為部署耗太多精力。nginx 配置靜態(tài)博客的核心就幾行server { listen 80; server_name your-domain.com; root /var/www/my-blog; index index.html; location / { try_files $uri $uri/ 404; } }root指向文件目錄index指定默認(rèn)首頁(yè)try_files按順序找文件找不到返回 404。改完nginx -t測(cè)配置nginx -s reload重載。5.2 上線前的自檢清單部署前我會(huì)過(guò)一遍這幾項(xiàng)所有鏈接點(diǎn)一遍確認(rèn)不 404手機(jī)和電腦各看一遍布局控制臺(tái)沒(méi)有報(bào)錯(cuò)title和description每頁(yè)都不同圖片都?jí)嚎s過(guò)單張別超過(guò) 200KBposts.json路徑正確。這幾項(xiàng)花十分鐘能省掉上線后被訪問(wèn)者發(fā)現(xiàn)的尷尬。5.3 一個(gè)容易被忽略的細(xì)節(jié)文章頁(yè)的 SEO數(shù)據(jù)驅(qū)動(dòng)渲染的文章頁(yè)搜索引擎爬蟲可能抓不到 js 渲染的內(nèi)容。如果在意 SEO文章頁(yè)要么寫死 html要么做服務(wù)端渲染。純靜態(tài)博客的折中做法是首頁(yè)和文章列表用 js 渲染沒(méi)問(wèn)題但每篇文章生成獨(dú)立的靜態(tài) html 文件。很多靜態(tài)站點(diǎn)生成器就是干這個(gè)的把 markdown 編譯成 html。如果你堅(jiān)持手寫至少保證文章標(biāo)題和正文在 html 源碼里能直接看到而不是全靠 js 填。我自己的習(xí)慣是每寫完一篇就本地起服務(wù)器完整點(diǎn)一遍確認(rèn)沒(méi)有死鏈、沒(méi)有錯(cuò)位再推上去。這套 html 源碼方案不復(fù)雜但細(xì)節(jié)決定它是一份「能看的模板」還是一個(gè)「能用的博客」。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取