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