想學(xué)HTML5的人一般搜的其實(shí)不是“HTML5入門”而是“用html5做一個(gè)簡(jiǎn)單網(wǎng)頁(yè)”、“html5網(wǎng)頁(yè)設(shè)計(jì)作業(yè)代碼”。這透露了一個(gè)現(xiàn)實(shí)大部分新手不是想成為前端工程師就是希望能自己動(dòng)手把頁(yè)面寫出來(lái)交掉作業(yè)或者滿足一下“我也能寫網(wǎng)頁(yè)”的好奇心。這恰恰是HTML5最友好的地方——它不需要復(fù)雜的環(huán)境安裝不需要數(shù)學(xué)基礎(chǔ)打開(kāi)記事本敲幾行字保存成.html文件雙擊打開(kāi)瀏覽器一個(gè)頁(yè)面就誕生了。HTML5不是編程語(yǔ)言而是網(wǎng)頁(yè)的“骨架語(yǔ)言”。它負(fù)責(zé)定義頁(yè)面上有什么標(biāo)題、段落、圖片、視頻、按鈕。真正的樣式和交互分別由CSS和JavaScript負(fù)責(zé)。你可以把它理解成蓋房子時(shí)的結(jié)構(gòu)圖紙CSS是裝修JavaScript是水電走線。三者合在一起才是完整的現(xiàn)代網(wǎng)頁(yè)。這篇內(nèi)容我會(huì)以“零基礎(chǔ)也能看懂”的節(jié)奏把HTML5的核心概念、常用標(biāo)簽、實(shí)戰(zhàn)案例和踩坑經(jīng)驗(yàn)一次講清楚順便把大家常搜的“網(wǎng)頁(yè)設(shè)計(jì)作業(yè)”和“視頻倍速”這兩個(gè)真實(shí)需求也拆開(kāi)揉碎。1. HTML5到底是什么先弄清楚它的身份1.1 從“超文本標(biāo)記語(yǔ)言”這個(gè)名字開(kāi)始理解HTML的全稱是HyperText Markup Language超文本標(biāo)記語(yǔ)言。這里每個(gè)詞都有含義。標(biāo)記Markup意味著它不負(fù)責(zé)計(jì)算邏輯只負(fù)責(zé)在文檔里給內(nèi)容做標(biāo)注這是一級(jí)標(biāo)題、這是一個(gè)段落、這里插入一張圖片。超文本HyperText最早的意思是頁(yè)面之間通過(guò)鏈接跳轉(zhuǎn)今天的互聯(lián)網(wǎng)能從一個(gè)頁(yè)面跳到另一個(gè)頁(yè)面靠的就是a標(biāo)簽這個(gè)超文本核心機(jī)制。HTML5是HTML的第五個(gè)大版本。2014年正式定稿。它比舊版本多出來(lái)一批非常實(shí)用的能力語(yǔ)義化標(biāo)簽header、nav、main等讓頁(yè)面結(jié)構(gòu)更清晰、原生表單驗(yàn)證、video和audio標(biāo)簽支持網(wǎng)頁(yè)直接播放媒體文件、canvas畫布支持繪圖、localStorage本地存儲(chǔ)。這些能力在HTML4時(shí)代要么沒(méi)有要么得靠Flash插件才能實(shí)現(xiàn)。今天你用手機(jī)瀏覽器看視頻、在網(wǎng)頁(yè)上考試答題、玩網(wǎng)頁(yè)小游戲底層幾乎都離不開(kāi)HTML5。1.2 為什么現(xiàn)在學(xué)習(xí)HTML5依然值得有人覺(jué)得前端框架都已經(jīng)到React、Vue滿天飛的程度了直接學(xué)框架不香嗎我的建議是框架可以學(xué)但HTML5依然是繞不過(guò)去的地基。不管你用什么框架最終瀏覽器拿到的還是一堆HTML標(biāo)簽。框架幫你做的事本質(zhì)上就是更高效地“生成HTML”。另外HTML5具備極強(qiáng)的“即時(shí)滿足感”。你今天學(xué)完今天就能交出一個(gè)像模像樣的頁(yè)面。這種反饋對(duì)新手建立信心太重要了。很多編程語(yǔ)言第一個(gè)程序只有命令行輸出而HTML5給你的是一個(gè)可以發(fā)到朋友圈的落地頁(yè)。如果你未來(lái)想往前端、全棧方向走扎實(shí)的HTML5基礎(chǔ)會(huì)幫你少走很多彎路——因?yàn)榭蚣艿奈臋n、社區(qū)討論、面試題到處都在使用HTML5標(biāo)簽和屬性。2. 開(kāi)發(fā)環(huán)境準(zhǔn)備編輯器與瀏覽器怎么配2.1 選一個(gè)順手的編輯器VS Code加插件是新手首選寫HTML最原始的方式是Windows自帶的記事本。它確實(shí)能寫但沒(méi)有任何輔助提示一個(gè)尖括號(hào)輸錯(cuò)就要對(duì)著屏幕找半天。我建議裝一個(gè)免費(fèi)編輯器。目前絕大多數(shù)前端開(kāi)發(fā)者用的都是Visual Studio Code簡(jiǎn)稱VS Code。它開(kāi)源、插件豐富、跨平臺(tái)。安裝VS Code之后再裝兩個(gè)對(duì)HTML新手特別友好的插件。第一個(gè)是Live Server安裝后右鍵HTML文件選擇Open with Live Server它會(huì)啟動(dòng)一個(gè)本地開(kāi)發(fā)服務(wù)器并且在你每次保存文件后自動(dòng)刷新瀏覽器。這是新手最容易忽略的效率神器——不需要手動(dòng)切到瀏覽器按F5。第二個(gè)是Auto Rename Tag改了開(kāi)始標(biāo)簽結(jié)束標(biāo)簽自動(dòng)跟著改避免常見(jiàn)的標(biāo)簽不配對(duì)問(wèn)題。2.2 瀏覽器調(diào)試臺(tái)F12是網(wǎng)頁(yè)作業(yè)的最佳搭檔很多人寫完頁(yè)面發(fā)現(xiàn)顯示不對(duì)第一反應(yīng)是刪了重寫。其實(shí)瀏覽器自帶的調(diào)試工具能幫你精準(zhǔn)找到問(wèn)題。Chrome或者Edge瀏覽器里按F12Mac是Command Option I打開(kāi)開(kāi)發(fā)者工具最常用的兩個(gè)面板是Elements和Console。Elements面板展示的是當(dāng)前頁(yè)面最終的HTML結(jié)構(gòu)你甚至可以直接在里面臨時(shí)修改文字、改樣式立刻看到效果。這是驗(yàn)證想法最快的一種方式改完再回到編輯器里修改正式源碼。Console面板則是JavaScript的運(yùn)行日志如果代碼報(bào)錯(cuò)瀏覽器會(huì)在這個(gè)面板里用紅字告訴你哪一行出錯(cuò)了。學(xué)會(huì)看報(bào)錯(cuò)信息比學(xué)會(huì)寫代碼更重要——這句話對(duì)新手尤其適用。3. 三分鐘寫出第一個(gè)HTML5網(wǎng)頁(yè)3.1 一個(gè)能跑起來(lái)的最小頁(yè)面不搞花哨的先做一個(gè)最低限度能打開(kāi)的頁(yè)面。新建一個(gè)文件命名為index.html輸入下面內(nèi)容!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一個(gè)網(wǎng)頁(yè)/title /head body h1你好HTML5/h1 p這是我的第一個(gè)網(wǎng)頁(yè)。/p /body /html保存后用瀏覽器打開(kāi)你會(huì)看到一個(gè)標(biāo)題“你好HTML5”加一行說(shuō)明文字。這里面有一個(gè)新手必須弄清的點(diǎn)!DOCTYPE html這行不是HTML標(biāo)簽而是文檔類型聲明告訴瀏覽器“請(qǐng)用現(xiàn)代標(biāo)準(zhǔn)模式解析這個(gè)頁(yè)面”。少了這一行瀏覽器可能進(jìn)入老舊模式導(dǎo)致樣式和布局問(wèn)題。meta charsetUTF-8聲明字符編碼沒(méi)有它中文就會(huì)變成亂碼。meta nameviewport是移動(dòng)端的視口設(shè)置在手機(jī)端瀏覽效果時(shí)用的建議寫任何頁(yè)面都帶上。3.2 最常用的標(biāo)簽和背后的門道HTML的核心是標(biāo)簽對(duì)開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽配對(duì)。比如p段落/p有時(shí)也叫元素element。常用標(biāo)簽清單并不長(zhǎng)我建議新手先掌握這些標(biāo)簽作用關(guān)鍵說(shuō)明h1~h6標(biāo)題一級(jí)到六級(jí)從大到小一個(gè)頁(yè)面一般只保留一個(gè)h1p段落默認(rèn)占一整行前后有空隙a超鏈接href屬性指定跳轉(zhuǎn)地址必備target_blank表示新標(biāo)簽頁(yè)打開(kāi)img圖片自閉合標(biāo)簽沒(méi)有結(jié)束標(biāo)簽src指定路徑alt是圖片無(wú)法顯示時(shí)的替代文字ul、li無(wú)序列表導(dǎo)航菜單最常用的結(jié)構(gòu)div塊級(jí)容器萬(wàn)能容器用于布局分組有個(gè)新手很容易踩的坑img這類“自關(guān)閉標(biāo)簽”在HTML5里不用寫/結(jié)尾寫img /也不算錯(cuò)但沒(méi)必要。而a必須成對(duì)出現(xiàn)只寫a href...內(nèi)容不寫/a后面所有內(nèi)容都會(huì)變成鏈接。3.3 鏈接與圖片讓頁(yè)面真正“連通”來(lái)點(diǎn)實(shí)戰(zhàn)把上面的最小頁(yè)面擴(kuò)展一下body h1我的個(gè)人主頁(yè)/h1 p歡迎來(lái)到我的網(wǎng)頁(yè)你可以 a hrefhttps://developer.mozilla.org/zh-CN/ target_blank在這里學(xué)習(xí)更多Web知識(shí)/a。 /p img srcimages/profile.jpg alt我的頭像 /body這段代碼涉及兩個(gè)關(guān)鍵概念絕對(duì)路徑和相對(duì)路徑。https://...開(kāi)頭的是絕對(duì)路徑指向互聯(lián)網(wǎng)上的某個(gè)資源需要聯(lián)網(wǎng)才能訪問(wèn)。images/profile.jpg是相對(duì)路徑指當(dāng)前文件所在目錄下的images文件夾里的profile.jpg這個(gè)圖片文件得自己準(zhǔn)備。新手常見(jiàn)的“圖片裂了”問(wèn)題九成是因?yàn)橄鄬?duì)路徑寫錯(cuò)或者圖片文件根本不放在那個(gè)位置。判斷方法很簡(jiǎn)單在瀏覽器地址欄里輸入路徑看看能不能訪問(wèn)到那個(gè)文件。4. 網(wǎng)頁(yè)設(shè)計(jì)作業(yè)實(shí)戰(zhàn)一個(gè)人物主頁(yè)做全套4.1 動(dòng)手之前先畫出頁(yè)面草圖直接寫代碼是新手最容易掉進(jìn)去的陷阱。正確的順序是先在紙上畫出頁(yè)面布局頂部導(dǎo)航欄、中間主體區(qū)域、底部版權(quán)信息。初中級(jí)前端開(kāi)發(fā)也遵循類似流程。哪怕頁(yè)面很簡(jiǎn)單先畫草圖能幫你想清楚需要哪些模塊代碼寫起來(lái)特別快。以一個(gè)“明星人物主頁(yè)”做案例。頁(yè)面就4個(gè)區(qū)塊頂部導(dǎo)航網(wǎng)站名加兩個(gè)菜單、背景介紹區(qū)照片加一段簡(jiǎn)介、個(gè)人作品展示區(qū)三段文字、底部版權(quán)信息。不要小看這個(gè)示例它幾乎覆蓋了網(wǎng)頁(yè)設(shè)計(jì)作業(yè)一半的常見(jiàn)要求。4.2 語(yǔ)義化標(biāo)簽代替無(wú)腦div規(guī)劃好之后用HTML5的語(yǔ)義化標(biāo)簽來(lái)實(shí)現(xiàn)。注意這里體現(xiàn)的正是HTML5和HTML4的核心差異之一——語(yǔ)義化標(biāo)簽。它讓標(biāo)簽從“純?nèi)萜鳌弊兂闪恕坝泻x的結(jié)構(gòu)”。對(duì)比一下!-- HTML4時(shí)代全是div沒(méi)法區(qū)分代表什么 -- div classheader div classnav.../div /div div classmain div classcontent.../div /div !-- HTML5寫得很明白 -- header nav.../nav /header main section.../section /main語(yǔ)義化標(biāo)簽不直接影響視覺(jué)效果但好處實(shí)在太多代碼可讀性更強(qiáng)自己過(guò)兩天回來(lái)看還能認(rèn)出哪里是導(dǎo)航搜索引擎更容易理解頁(yè)面結(jié)構(gòu)屏幕閱讀器等無(wú)障礙工具能幫助視障用戶精確跳轉(zhuǎn)到導(dǎo)航區(qū)、正文區(qū)。所以從第一天寫HTML就建議養(yǎng)成用語(yǔ)義化標(biāo)簽的習(xí)慣。下面是一份可以直接改來(lái)交作業(yè)的完整頁(yè)面結(jié)構(gòu)!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的偶像主頁(yè)/title /head body header h1林舟的檔案室/h1 nav ul lia href#intro個(gè)人簡(jiǎn)介/a/li lia href#works代表作品/a/li lia href#contact聯(lián)系方式/a/li /ul /nav /header main section idintro h2個(gè)人簡(jiǎn)介/h2 img srcimages/poster.jpg alt個(gè)人照片 p林舟獨(dú)立設(shè)計(jì)師擅長(zhǎng)視覺(jué)傳達(dá)與前端實(shí)現(xiàn)。/p /section section idworks h2代表作品/h2 p作品一城市名片系列海報(bào)/p p作品二個(gè)人作品集網(wǎng)站/p p作品三字體設(shè)計(jì)實(shí)驗(yàn)項(xiàng)目/p /section section idcontact h2聯(lián)系方式/h2 p郵箱examplemail.com/p p社交媒體linzhou/p /section /main footer p? 2024 林舟的檔案室/p /footer /body /html4.3 用CSS把頁(yè)面變得像樣HTML做出來(lái)的頁(yè)面默認(rèn)是白底黑字樣式簡(jiǎn)陋。作業(yè)如果想要高分必須接上CSS。有三種方式內(nèi)聯(lián)樣式寫在標(biāo)簽里、內(nèi)部樣式寫在style標(biāo)簽里、外部樣式寫在單獨(dú)的.css文件里。推薦外部樣式讓結(jié)構(gòu)、表現(xiàn)分離。在head里加一行l(wèi)ink relstylesheet hrefstyle.css然后在style.css里寫body { font-family: PingFang SC, Microsoft YaHei, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; color: #333; } header { background-color: #2c3e50; color: white; padding: 20px; text-align: center; } nav ul { list-style: none; padding: 0; display: flex; justify-content: center; gap: 20px; } nav a { color: white; text-decoration: none; } main { max-width: 960px; margin: 20px auto; padding: 0 16px; } section { background-color: white; padding: 20px; margin-bottom: 20px; border-radius: 8px; } footer { text-align: center; padding: 16px; color: #999; font-size: 14px; }這里的技術(shù)點(diǎn)可以解釋一下display: flex是彈性盒模型讓導(dǎo)航菜單里的列表項(xiàng)排成一行max-width: 960px; margin: 20px auto;實(shí)現(xiàn)頁(yè)面內(nèi)容在寬屏下居中g(shù)ap: 20px是子元素間距。能看到實(shí)際效果頂部深藍(lán)色導(dǎo)航條、白色卡片式的區(qū)塊、底部灰色版權(quán)信息。這份代碼改吧改吧完全可以作為“html5網(wǎng)頁(yè)設(shè)計(jì)作業(yè)代碼”的底子。4.4 少走彎路的排版習(xí)慣排版是CSS里最容易讓人挫敗的部分。踩過(guò)無(wú)數(shù)次坑之后我總結(jié)出三個(gè)對(duì)新手最實(shí)用的習(xí)慣。第一不要用瀏覽器默認(rèn)的body主動(dòng)設(shè)置字體族、背景色、文字顏色氣質(zhì)立刻不一樣。第二如果一個(gè)元素“放不到想要的位置”先檢查它的父容器有沒(méi)有設(shè)置display: flex或display: grid絕對(duì)定位是最后手段。第三強(qiáng)烈建議給img設(shè)置max-width: 100%圖片不會(huì)撐破容器。另外補(bǔ)充一個(gè)作業(yè)里經(jīng)常被扣分的地方區(qū)塊混在一起沒(méi)有間距。給section加一點(diǎn)margin-bottom頁(yè)面瞬間透氣。新手容易把樣式寫得很淡其實(shí)實(shí)話說(shuō)配色只要做到“背景淺、文字深、主色統(tǒng)一”作業(yè)觀感就已經(jīng)超過(guò)一大部分人了。5. 視頻播放與倍速實(shí)現(xiàn)常見(jiàn)需求的底層原理5.1 video標(biāo)簽的基礎(chǔ)屬性在熱搜詞里看到“html5視頻倍速”時(shí)我一點(diǎn)都不意外。這個(gè)功能在網(wǎng)頁(yè)播放器里太常見(jiàn)了班里同學(xué)互相問(wèn)“怎么給網(wǎng)頁(yè)里的視頻加速”本質(zhì)上就是HTML5中video標(biāo)簽的一個(gè)屬性。先看基礎(chǔ)用法video srcvideos/intro.mp4 controls width600 你的瀏覽器不支持 video 標(biāo)簽。 /videocontrols屬性會(huì)顯示瀏覽器自帶的播放控件播放暫停按鈕、進(jìn)度條、音量。沒(méi)有controls頁(yè)面就只剩一個(gè)看不見(jiàn)的播放器。width和height控制顯示尺寸。視頻容器內(nèi)文字是兜底內(nèi)容瀏覽器不支持video標(biāo)簽時(shí)才顯示。這里還要提兩個(gè)常見(jiàn)屬性muted屬性讓視頻靜音autoplay自動(dòng)播放。多數(shù)現(xiàn)代瀏覽器有嚴(yán)格策略帶聲音的自動(dòng)播放幾乎都會(huì)被攔截但“靜音自動(dòng)播放”通常放行。所以做網(wǎng)頁(yè)背景視頻時(shí)標(biāo)準(zhǔn)寫法是video srcxxx.mp4 autoplay muted looploop表示循環(huán)播。5.2 播放速率控制其實(shí)只有一行JS原生播放器控件里沒(méi)有倍速按鈕要加倍速能力需要一點(diǎn)JavaScript。原理特別簡(jiǎn)單HTMLMediaElement暴露了playbackRate屬性給它賦值大于1就是加速小于1就是減速等于0就暫停。不提復(fù)雜的API直接用兩個(gè)按鈕video idmyVideo srcvideos/class.mp4 controls width640/video button onclickdocument.getElementById(myVideo).playbackRate 1.51.5倍速/button button onclickdocument.getElementById(myVideo).playbackRate 22倍速/button看似不起眼但理解這一行涉及兩個(gè)基本功。一是document.getElementById(myVideo)是DOM查找從此處開(kāi)始對(duì)網(wǎng)頁(yè)進(jìn)行“編程式操控”。二是onclick屬性綁定了點(diǎn)擊事件。更靈活一點(diǎn)用一次函數(shù)同時(shí)控制多個(gè)檔位script function setSpeed(rate) { var video document.getElementById(myVideo); video.playbackRate rate; } /script button onclicksetSpeed(1)正常速度/button button onclicksetSpeed(1.5)1.5倍速/button button onclicksetSpeed(2)2倍速/button實(shí)測(cè)有個(gè)小坑切到2倍速后音調(diào)會(huì)變高這不是代碼問(wèn)題是瀏覽器處理速度變化時(shí)的正?，F(xiàn)象。如果只想畫面加速、聲音變調(diào)開(kāi)裂那才是異常需要檢查視頻文件本身是否完整。5.3 視頻格式與自動(dòng)播放的坑瀏覽器對(duì)視頻格式的支持并不統(tǒng)一。目前最穩(wěn)妥的組合是MP4H.264編碼和WebM。MP4兼容性最好Windows和macOS瀏覽器幾乎都支持WebM的文件更小主要用于Chrome、Firefox等現(xiàn)代瀏覽器。如果你有個(gè)mov格式的視頻放在瀏覽器里放不出來(lái)大概率不是代碼寫錯(cuò)是格式不支持。解決方式是轉(zhuǎn)成MP4格式可以用專業(yè)工具或免費(fèi)在線轉(zhuǎn)換網(wǎng)站。還有兩個(gè)具體體驗(yàn)相關(guān)的問(wèn)題。第一video標(biāo)簽不是萬(wàn)能的“下載工具”用戶可以通過(guò)開(kāi)發(fā)者工具找到媒體文件地址如果你不希望視頻被輕易下載需要做防盜鏈加密但這超出入門范圍了。第二視頻播放時(shí)卡頓不一定是文件大也可能是編碼級(jí)別太高。固定碼率、H.264編碼的MP4入門階段基本不會(huì)出問(wèn)題。6. 表單、交互和一點(diǎn)JavaScript6.1 表單還能這么寫原生驗(yàn)證就夠了作業(yè)里的“聯(lián)系方式”區(qū)塊一般都配一個(gè)反饋表單。HTML5帶來(lái)的原生表單能力能幫你省掉一堆繁瑣的JavaScript驗(yàn)證代碼form idcontactForm label forname姓名/label input typetext idname namename placeholder請(qǐng)輸入姓名 required label foremail郵箱/label input typeemail idemail nameemail placeholderexamplemail.com required label formessage留言/label textarea idmessage namemessage rows4/textarea button typesubmit提交/button /formrequired表示這個(gè)字段不能為空typeemail讓瀏覽器自動(dòng)檢查郵箱格式placeholder是輸入框里的灰色提示文字。這些都不需要你自己寫JavaScript提交時(shí)瀏覽器會(huì)自動(dòng)攔截非法輸入。但要注意一個(gè)后端相關(guān)概念目前這個(gè)表單點(diǎn)擊提交后會(huì)刷新頁(yè)面因?yàn)闆](méi)寫action屬性把數(shù)據(jù)交給服務(wù)器。入門階段重點(diǎn)是理解標(biāo)簽的結(jié)構(gòu)等學(xué)了JavaScript之后就能用fetch發(fā)送數(shù)據(jù)實(shí)現(xiàn)真正的“提交”。6.2 按鈕不一定要交給后端簡(jiǎn)單交互用JS有些作業(yè)要求“點(diǎn)擊某個(gè)按鈕后頁(yè)面發(fā)生變化”。這是結(jié)合HTML和JavaScript最簡(jiǎn)單也最有展示價(jià)值的互動(dòng)方式。舉個(gè)例子做一個(gè)“顯示/隱藏”個(gè)人簡(jiǎn)介的按鈕p idbio這是隱蔽的個(gè)人簡(jiǎn)介點(diǎn)擊按鈕顯示。/p button onclicktoggleBio()顯示簡(jiǎn)介/button script function toggleBio() { var bio document.getElementById(bio); if (bio.style.display none) { bio.style.display block; } else { bio.style.display none; } } /script這里的關(guān)鍵是style.display控制元素是否占據(jù)頁(yè)面空間。block是正常顯示none是不顯示。第一次點(diǎn)擊把簡(jiǎn)介藏起來(lái)第二次再點(diǎn)又顯示出來(lái)一個(gè)“開(kāi)關(guān)”就完成了。不要小看這個(gè)交互它能幫你建立“HTML是骨架、JS是行為”的直觀感受。6.3 作業(yè)驗(yàn)收前必查的3個(gè)細(xì)節(jié)如果你做的頁(yè)面要交作業(yè)或者展示我在實(shí)操中最常幫別人檢查的就是三個(gè)細(xì)節(jié)。第一個(gè)是頁(yè)面標(biāo)題title不能還是默認(rèn)的“我的第一個(gè)網(wǎng)頁(yè)”要改成作業(yè)真實(shí)名稱這個(gè)標(biāo)簽在瀏覽器標(biāo)簽頁(yè)上顯示評(píng)委第一眼就會(huì)看到。第二個(gè)是頁(yè)面里所有鏈接都要能跳轉(zhuǎn)尤其是導(dǎo)航欄的錨點(diǎn)鏈接錨點(diǎn)對(duì)應(yīng)頁(yè)內(nèi)id比如a href#works跳到section idworks。第三個(gè)是圖片路徑必須是相對(duì)路徑作業(yè)打包交上去之后images目錄要一起打包不然其他電腦上打開(kāi)時(shí)圖片全裂。7. 新手高頻問(wèn)題排查與避坑指南7.1 為什么我的頁(yè)面全是亂碼頁(yè)面中文全部是“錕斤拷”之類的亂碼九成是字符編碼問(wèn)題。解決翻車的方法很簡(jiǎn)單確認(rèn)head里的meta charsetUTF-8存在并且文件保存時(shí)確實(shí)選的是UTF-8編碼。VS Code右下角可以看當(dāng)前文件編碼格式默認(rèn)是UTF-8但如果你用舊版記事本另存保存對(duì)話框里編碼選錯(cuò)了頁(yè)面就會(huì)亂。另外HTML文件建議統(tǒng)一用英文命名避免某些服務(wù)器環(huán)境對(duì)中文文件名支持不好。7.2 圖片和CSS突然不見(jiàn)了頁(yè)面打開(kāi)圖片裂了、背景樣式也沒(méi)了。最直接的問(wèn)題是路徑。相對(duì)路徑以當(dāng)前文件所在位置為基準(zhǔn)images/a.jpg表示當(dāng)前目錄下的images文件夾里../images/a.jpg表示上級(jí)目錄的images文件夾里以/開(kāi)頭的是根目錄絕對(duì)路徑本地直接雙擊打開(kāi)文件時(shí)絕對(duì)路徑很可能失效所以做作業(yè)盡量用相對(duì)路徑。CSS沒(méi)生效常見(jiàn)原因有三個(gè)link標(biāo)簽放在頁(yè)面head里面而跑到了body里href寫得和實(shí)際文件名不一致或者你修改了style.css但瀏覽器緩存了舊文件——按Ctrl F5強(qiáng)制刷新一下。7.3 效果和教程不一致怎么辦這個(gè)問(wèn)題在我做入門答疑時(shí)出現(xiàn)頻率最高跟著教程敲了代碼效果卻和教程里的不一樣。先別懷疑自己天賦不行按順序排查三件事。第一檢查是否有隱藏的編碼問(wèn)題比如中文引號(hào)被當(dāng)作代碼里的引號(hào)和是截然不同的字符。第二檢查標(biāo)簽是否有閉合可以用VS Code的縮進(jìn)輔助一眼看出層級(jí)關(guān)系。第三打開(kāi)瀏覽器F12開(kāi)發(fā)者工具的Console面板看看有沒(méi)有紅色報(bào)錯(cuò)。實(shí)在找不出就把代碼復(fù)制到在線代碼驗(yàn)證網(wǎng)站檢查語(yǔ)法錯(cuò)誤。7.4 保存、刷新、清緩存的習(xí)慣還有很多“改完沒(méi)反應(yīng)”的時(shí)刻其實(shí)是自己忘了保存文件。VS Code沒(méi)有開(kāi)啟自動(dòng)保存時(shí)文件上有圓點(diǎn)就代表沒(méi)保存。養(yǎng)成習(xí)慣寫完一段代碼按Ctrl SMac是Command S再到瀏覽器刷新。并建議使用Live Server插件保存后自動(dòng)刷新瀏覽器省掉這一步。另外一個(gè)極容易出現(xiàn)的問(wèn)題改了HTML卻忘了CSS文件配合修改刷新后還是老樣式。這時(shí)按Ctrl F5強(qiáng)制刷新繞過(guò)瀏覽器緩存基本都能看到新效果。8. 入門后的路線圖與個(gè)人經(jīng)驗(yàn)8.1 一份不太卷的學(xué)習(xí)路線HTML5本身大概需要一到兩周能基本掌握這里說(shuō)的是每天投入一兩個(gè)小時(shí)。接下去按這個(gè)順序走會(huì)比較順CSS重點(diǎn)學(xué)Flexbox和Grid布局JavaScript重點(diǎn)學(xué)DOM操作和事件然后就可以上手做完整的靜態(tài)頁(yè)面。如果還想繼續(xù)深入再接觸Git版本控制和響應(yīng)式設(shè)計(jì)最后根據(jù)興趣選擇往Vue/React方向發(fā)展。如果只是做網(wǎng)頁(yè)設(shè)計(jì)作業(yè)學(xué)到JavaScript事件這一層已經(jīng)綽綽有余。8.2 我一直堅(jiān)持的幾個(gè)習(xí)慣我做了這么多年的Web開(kāi)發(fā)經(jīng)常被新同學(xué)問(wèn)“有沒(méi)有什么能少走彎路的技巧”?，F(xiàn)在回頭看有三個(gè)習(xí)慣很值得堅(jiān)持。一是多手寫代碼不要復(fù)制粘貼手敲一遍對(duì)標(biāo)簽的記憶效果遠(yuǎn)超刷十遍教程。二是學(xué)會(huì)看官方文檔MDN的HTML參考是我碰到不確定寫法時(shí)最常打開(kāi)的資源中文版也維護(hù)得很好。三是讀別人的頁(yè)面源碼碰到好看的網(wǎng)頁(yè)按F12看它結(jié)構(gòu)怎么搭的樣式怎么寫的比自己悶頭寫提高快得多。8.3 最后說(shuō)點(diǎn)真心話HTML5是整個(gè)Web世界最友好的入口。它不要求你數(shù)學(xué)多好、英語(yǔ)多好只要你愿意打開(kāi)編輯器敲幾行代碼馬上就能收獲一個(gè)實(shí)際可看的成果。你在網(wǎng)頁(yè)里看到的每一張圖片、每一條新聞、每一個(gè)視頻播放器往里拆到最后都是這些基礎(chǔ)標(biāo)簽在支撐。網(wǎng)上找一個(gè)靠譜的HTML5視頻教程也不難但紙上得來(lái)終覺(jué)淺一定要親手敲一個(gè)完整頁(yè)面哪怕它簡(jiǎn)陋、配色不好看那也是你自己的第一行Web腳印。我個(gè)人建議就從“用html5做一個(gè)簡(jiǎn)單網(wǎng)頁(yè)”開(kāi)始把最簡(jiǎn)單的人物主頁(yè)做出來(lái)再加個(gè)視頻、加個(gè)表單然后不斷加點(diǎn)東西。每加一個(gè)新模塊你對(duì)HTML5的理解就會(huì)深一層。