HTML

網頁開發一直在不斷演進，每年一月，我都喜歡停下腳步重新評估並觀察這個生態系統。 問題是：2022年初學者應該從哪裡開始學習，才能學到能找到工作的技能呢？ 地圖有變嗎？與去年有不同嗎？ 變革似乎需要很長的時間，但它們可以很微妙，有時候從一年到另一年事情會徹底變化，你甚至都意識不到。 因此，我開始撰寫這篇文章，指導您如何在網頁開發領域中導航。 對於想要跟上生態系統並保持相關性的開發人員來說，這也是很有用的。有什麼新東西你一定要學嗎？ 讓我們開始吧。 先說一下，這是一個高度主觀的路線圖。這不是一個列出了1000種不同技術的路線圖，然後就讓你淚流滿面地愁眉苦臉。 讓我為您挑選最好的技術，相信我，這樣您就可以停止無休止的分析，並繼續前進。 在網頁開發中，我們有3條路線： 前端開發人員 後端開發人員 全棧開發人員 這些角色之間的界線有點模糊。在這篇文章中，我將聚焦於全棧開發人員，這是我最喜歡的專業化領域——在這個領域中，您不需要專攻前端或後端，而是能夠創建出所有展示出來的內容。 積極忽略 首先，讓我們從我們將忽略的內容開始。 在這個路線圖中，我將忽略像UI/UX工程師、可訪問性和其他重要主題這樣更專業的範疇。這些完全是不同的職業，有自己獨特的學習路徑。 您不可能從一開始就假設您需要學習所有東西。 積極排除。 我們將忽略使用Web技術進行移動開發。那是一個完全不同的領域。我們還將忽略一切不屬於網頁開發的趨勢，而是不同類型的開發專業化，比如AI、數據科學、web3等等。 深入研究5個核心技術 我建議深入研究一組核心的5個技術： HTML CSS JavaScript React Next.js 這些5個技術按順序是您需要掌握的5個東西。 您可以用一只手數清楚。 其中3個是基礎。HTML、CSS、JavaScript。您無法避免它們。這些是我們的工具。 HTML定義了內容 CSS定義了我們希望內容呈現的樣子 JavaScript定義了行為 React是我在這裡的首個選擇。 React是一種簡化創建用戶界面的技術。 它以許多不同的方式讓我們的生活更輕鬆。 HTML、CSS和JavaScript沒有其他替代品，但您可以選擇使用其他東西，比如Svelte、Vue、Angular，但我選擇了React。 但是React非常流行，它有一個悠久的歷史和遺產，使它成為事實上的標準。它被使用得如此廣泛，以至於您可以找到一切，每個庫，大量的教程和課程，需要幫助時也不用擔心。 您可以賭一個替代品，但您還可以看看工作市場和React帶來的機會，並選擇它。 現在我們需要最後一個組件。一個網絡應用程序框架。 我們選擇了React，所以我們需要選擇一個與React配合的網絡應用程序框架。 在React和HTML/CSS/JavaScript三者之上，我選擇了Next.js，它可以讓React-based網站和應用程序的服務和前端無縫集成。 所以，我們共同使用的3個核心技術是HTML/CSS/JavaScript，最上面的是非常流行的UI庫React，再加上一個非常流行的框架Next.js。 現在還有更多的東西可以添加到這5個選擇中，但您需要從某個地方開始。 通過這5個選擇，您已經排除了很多其他可能分散注意力、讓您在成為網頁開發者的道路上分心的東西。 讓我再強調一下這個排除。至少在開始時忽略TypeScript。我知道你會一直聽到它，但它對你的旅程並不重要，你可以在未來的任何時候添加它。 JavaScript讓事情變得簡單得多，這對於保持動力至關重要。 從HTML和CSS開始 此時，開始學習並進行實驗。學習HTML，創建網頁。閱讀我的[HTML手冊](https://flaviocopes.com/page/html-handbook/）。多做練習。Codepen是一個很好的工具。 只是不要被“我使用CSS完成了這個”吸引住，有些人用CSS做了一些不可能的事情。我不知道他們是怎麼做到的，這是藝術（如果您喜歡，那很好，但在我們的旅程中不是很有用）。 至於CSS，學習基礎知識。閱讀我的[CSS手冊](https://flaviocopes.com/page/css-handbook/）。並立即開始學習Tailwind，這是一種非常實用且流行的將CSS應用於您的網頁的方法。 CSS可能很復雜，但Tailwind使它變得更簡單。相信我，我從事CSS已有 20 年，使用Tailwind讓我終於能夠在每個項目上都處理好事情。這也是其他很多人的感受。 您應該使用HTML和CSS/Tailwind創建哪些項目呢？嗯，從您的愛好和興趣開始。創建一些隨機的網頁，看看它們在瀏覽器中如何顯示。 創建一個有關狗的網頁，有關足球、橄欖球、棒球的網頁，有關您最喜歡的Netflix系列、最喜歡的音樂家的網頁，等等。重要的是進行實驗。 在HTML和CSS/Tailwind上別太花哨。它們是兔子洞。關於這兩者有很多東西要學。熟悉它們，使用它們來完成任務。 熟悉像VS Code這樣的編輯器，以及終端和Bash shell的基礎知識。學習Git來管理版本。它將為您節省很多時間和麻煩。 添加JavaScript 現在是學習JavaScript的時候了。下載並閱讀我的JavaScript初學者手冊。 HTML和CSS定義了內容和呈現方式，而JavaScript是一門程式語言。 使用JavaScript，我們可以開始玩樂。 基礎知識有點……無聊並且可能會令人困惑，因為有很多理論和新概念。但這是您在網頁開發中最常使用的東西。因此，掌握它是至關重要的。 逐步將JavaScript添加到您的網頁中。 使用JavaScript，您將能夠為您的網頁添加一些互動性。您將探索DOM，這是瀏覽器讓我們與頁面上的元素進行交互的方式。 您將創建您的第一個表單。 在創建第一個表單之後，您將需要將表單數據發送到某個地方。 想像一下，您建立了一個電子報註冊表單。您想要將電子郵件發送到某個地方以便存儲它。...

最近我在各種地方聽到很多關於Astro的討論，於是我決定去瞭解一下。 我有一個困擾：我討厭伺服器。我討厭管理伺服器，我討厭建立伺服器，我討厭必須擔心伺服器。安全性、維護、升級，這些都不是我喜歡的事情，除非是必需的。 這就是為什麼我喜歡使用像Netlify和Vercel這樣的平臺。我使用了很多靜態網站生成器，如Hugo、Next.js、SvelteKit和傳統的簡單HTML網站。 Astro看起來很有趣，因為它朝著這個方向前進，但有著不同的觀點。 以下是Astro對我來說主要的賣點： 它生成靜態網站，對我來說這是一大優點，因為我不想管理伺服器，而且我愛靜態網站。 它不依賴於特定的框架，這讓我在使用不同框架的不同網站時更靈活。 它似乎非常簡單，我喜歡簡單的東西。 它致力於盡可能少地將JavaScript發送到客戶端。 你知道，我看到自十多年來不斷有新的JavaScript框架出現，必須有一些顯著的不同才能出現。 我所看到的第一件事是，Astro是一個不依賴於框架的工具。在這個領域，它在JavaScript相關的領域是獨一無二的。Next.js和Gatsby是建立在React上的，SvelteKit是建立在Svelte上的，Nuxt是建立在Vue上的。 我可以使用Astro來創建一個使用React的網站，然後在另一個網站中使用Svelte或Vue，但可以重用我的Astro專業知識。如果需要，你還可以將不同框架混合使用在網站的不同部分。這並不是我在我的網站中想要做的事情，但對於各種場景來說可能很有用。 最終生成的是一個靜態的HTML網站。在瀏覽器中運行時不需要任何JavaScript庫，除非明確需要。 這是一種稱為以HTML為先，僅在需要時使用JavaScript的方法。 這很酷。我們使用JavaScript構建網站，但大部分工作在構建時完成。 它似乎使用了很多組合的概念，重用我們用其他庫（React/Vue/Svelte/*）構建的東西。 它還借用了其他項目中出現的一些好的想法，比如frontmatter、內置的MDX支持、作用域CSS和基於文件系統的路由。 Astro在2021年6月正式推出，自那時以來引起了很大的熱議。 讓我們來看看它到底是什麼。 我要使用Astro安裝幾個不同的Astro網站，這樣我們就可以看到不同的網站是如何構建的，從非常簡單的網站開始，然後逐步變得更複雜。 創建一個空文件夾，然後運行： npm init astro 這將提示您選擇一個起始模板： 選擇Minimal。等它完成後，運行： npm install 然後運行： npm run dev 在http://localhost:3000/上啟動本地開發伺服器。 選擇Minimal模板將生成一個非常簡單的網站。 現在讓我們創建另一個網站，選擇Blog模板。 以下是Finder中的項目結構： 所有模板默認使用Preact，它是類似React的庫，只是更快、更小。您可以使用Starter Kit選項來選擇其他框架。作為第二步，您可以選擇React、Solid、Svelte或Vue： 讓我們按下空格選擇Svelte（注意，您可以選擇多個框架）。這將生成一個簡單的單頁網站： 注意底部的小部件，帶有+和-按鈕的數字。這是一個Svelte組件。 現在讓我們來看看生成這三個網站的代碼。在查看代碼之前，請在VS Code中安裝Astro擴展： 這將對您的.astro文件應用正確的語法突出顯示。 我有說過.astro文件嗎？是的，因為這是任何Astro項目的構建塊。 我們有兩種不同類型的.astro文件：頁面和組件。 頁面是任何與路由相關的內容，例如/或/blog或/blog/hello-world。 組件是頁面使用的任何代碼，用於抽象或提取公共代碼。 我們將頁面放在src/pages中，將組件放在src/components中。與往常一樣，我們有一個public文件夾，用於存放需要直接訪問的任何文件，例如圖像或其他資源。 在.astro文件中，組織方式有點新穎，但我不想洩露太多，我們將在下一篇博文中看到，因為這是Astro簡短系列的開端。 以下是Astro系列中的文章： Astro組件 在Astro中構建可組合的佈局 Astro Props 將一個簡單的網站轉移到Astro 從網絡中提取數據在Astro

了解 CSS 選擇器的所有重要事項 選擇器允許我們將一個或多個聲明與頁面上的一個或多個元素關聯起來。 基本選擇器 假設在頁面上有一個 p 元素，我們想要使用黃色顯示其中的文字。 我們可以使用選擇器 p 來定位該元素，該選擇器定位頁面上所有使用 p 標籤的元素。實現我們想要的效果的一個簡單 CSS 規則如下： p { color: yellow; } 每個 HTML 標籤都有對應的選擇器，例如：div、span、img。 如果一個選擇器匹配多個元素，則頁面上的所有元素都將受到更改的影響。 HTML 元素有兩個在 CSS 中非常常用的屬性，用於將樣式與頁面上的特定元素關聯起來：class 和 id。 這兩者之間有一個重大的區別：在 HTML 文檔中，您可以在多個元素中重複使用相同的 class 值，但是您只能使用一次 id。根據以下的推論，使用 class 時，您可以選擇具有 2 個或多個特定類名的元素，而使用 id 則無法實現這一點。 使用 . 符號來標識類，使用 # 符號來標識 id。 使用 class 的示例： <p class="dog-name"> Roger </p> .dog-name { color: yellow; } 使用 id 的示例： <p id="dog-name"> Roger </p> #dog-name { color: yellow; } 結合選擇器...

了解使用HTML a標籤創建連結的基礎知識。 連結是使用a標籤來定義的。連結的目的地是通過其href屬性來設置。 例如： <a href="https://flaviocopes.com">點擊這裡</a> 在起始標籤和結束標籤之間是連結的文字內容。 上面的例子是絕對URL。連結也可以使用相對URL： <a href="/test">點擊這裡</a> 在這種情況下，點擊連結時，用戶會被移動到當前源頭的/testURL。 注意/字符的使用。如果省略，而不是從源頭開始，瀏覽器只會將test字符串添加到當前URL中。 例如，我在頁面https://flaviocopes.com/axios/上，有以下鏈接： /test點擊後會將我帶到https://flaviocopes.com/test test點擊後會將我帶到https://flaviocopes.com/axios/test 連結標籤內部可以包含其他元素，而不僅僅是文字。例如，圖像： <a href="https://flaviocopes.com"> <img src="test.jpg"> </a> 或者其他任何元素，除了其他的<a>標籤。 如果你想在新標籤中打開連結，你可以使用target屬性： <a href="https://flaviocopes.com" target="\_blank">在新標籤中打開</a>

了解使用HTML figure標籤的基礎知識 通常與 img 標籤一起使用的是 figure 標籤。 figure 是一個語義化的標籤，通常用於在圖像中顯示標題。使用方式如下： <figure> <img src="dog.png" alt="一隻可愛的狗"> <figcaption>一隻可愛的狗</figcaption> </figure> figcaption 標籤包裹著標題文本。

警告：此文章已經過時，可能無法反應目前的技術狀態。 自動焦點 當頁面加載時，<input autofocus="autofocus" />會將焦點放在指定的HTML元素上。 下載文件 <a href="file.pdf" download="pdf-file">下載</a>將下載指定的文件，並提供文件名。 隱藏元素 儘管將表現放在HTML中並不理想，但<div hidden="hidden"></div>有時會派上用場。 關閉（或打開）拼寫檢查 操作系統設定了拼寫檢查功能，它有時可能會妨礙使用者輸入 - <input type="text" spellcheck="true|false">有助於解決此問題。 自動建議文字輸入控件 <input list="mylist" name="mylist" > <datalist id="mylist"> <option value="CSS"> <option value="HTML"> <option value="PHP"> <option value="Jquery"> <option value="Wordpress"> </datalist>

了解HTML的歷史和基本結構 HTML是由WHATWG（Web Hypertext Application Technology Working Group）定義的標準，這是一個由開發最受歡迎的網頁瀏覽器的人組成的組織。這意味著它基本上由Google、Mozilla、Apple和Microsoft控制。 過去，W3C（World Wide Web Consortium）負責創建HTML標準的機構。 隨著W3C推向XHTML的路線不被接受，控制權非正式地從W3C轉移到了WHATWG。 如果你從未聽說過XHTML，這裡有一個簡短的故事。在2000年初，我們都相信Web的未來是XML（當真的）。所以HTML從基於SGML的作者語言轉變為XML標記語言。 這是一個很大的改變。我們必須了解並遵守更多的規則。更嚴格的規則。 最終瀏覽器供應商意識到這不是Web的正確道路，他們進行反擊，創造了現在被稱為HTML5的東西。 W3C並不真正同意放棄對HTML的控制權，多年來我們得到了2個競爭的標準，每個標準都試圖成為官方標準。最終，W3C在2019年5月28日宣布，由WHATWG發布的“真正”的HTML版本被確定為官方版本。 我提到了HTML5。讓我解釋這個小故事。我知道，到現在為止，這可能有些混亂，當涉及到很多參與者時，生活中的很多事情也是如此，這也很迷人。 我們在1993年有了HTML版本1。[這裡是原始的RFC]。 1995年出現了HTML2。 我們在1997年1月獲得了HTML3，並於1997年12月推出了HTML4。 繁忙的時代！ 20多年過去了，我們經歷了所有這些XHTML的事情，最終我們現在到達了這個“東西”HTML5，這實際上不僅僅是HTML。 HTML5現在定義了一整套技術，包括HTML，並添加了許多API和標准，如WebGL、SVG等。 在這裡需要理解的關鍵是：現在沒有HTML版本這樣的東西了。它是一個活標準。就像CSS一樣，我們稱之為3，但實際上它是一組獨立開發的模塊。就像JavaScript一樣，我們每年都有一個新版本，但這不再重要，重要的是引擎實現了哪些個別特性。 是的，我們稱之為HTML5，但HTML4來自1997年。時間對於任何事情來說都很漫長，想象一下對於Web來說有多長。 這是標準“居住”的地方：[https://html.spec.whatwg.org/multipage]。 HTML基礎 HTML是我們用來結構化Web上的內容的標記語言。 HTML以不同的方式提供給瀏覽器。 它可以由根據請求或會話數據構建它的服務器端應用程序生成，例如Rails、Laravel或Django應用程序。 或者它可以由JavaScript客戶端應用程序生成HTML。 或者，在最簡單的情況下，它可以存儲在文件中，並由Web服務器提供給瀏覽器。 讓我們深入研究這種情況，儘管實際上它可能是生成HTML的最不流行方式，但仍然有必要了解基本結構。 按照慣例，HTML文件以.html或.htm擴展名保存。 在此文件中，我們使用標籤來組織內容。 標籤封裝內容，每個標籤為其封裝的文本賦予特殊含義。 讓我們舉幾個例子。 此HTML片段使用p標籤創建一個段落： <p>A paragraph of text</p> 此HTML片段使用ul標籤創建一個項目列表，其中ul表示無序列表，li標籤表示列表項： <ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> 當瀏覽器提供HTML頁面時，標籤將被解釋，瀏覽器根據定義元素的規則呈現這些元素的外觀。 其中一些規則是內建的，例如列表的呈現方式。或者鏈接以藍色、底線顯示。 其他一些規則是由帶有CSS的指令集定義的。 HTML不是表現性的。它不關心事物的外觀，而是關心事物的含義。 由瀏覽器決定事物的外觀，由構建頁面的人定義的指令和CSS語言來決定事物的外觀。 現在，我所做的這兩個例子是在頁面上下文之外使用的HTML片段。 HTML頁面結構 讓我們舉一個正確的HTML頁面的例子。 其中一個重要開始的地方是文檔類型聲明（也稱為doctype），這是一種告訴瀏覽器這是一個HTML頁面，以及我們使用的HTML版本的方式。 現代HTML使用以下doctype： <!DOCTYPE html> 然後我們有html元素，它具有開始和結束標籤： <!DOCTYPE html> <html> ... </html> 所有標籤都有開始和結束標籤，除了一些不需要結束標籤的自結束標籤，因為它們不包含任何內容。...

了解如何在HTML中使用容器標籤，並找出應該選擇哪個標籤。 容器標籤 HTML提供了一組容器標籤。這些標籤可以包含不特定的其他標籤。 我們有： article section div 他們之間的區別可能讓人困惑。 讓我們看看何時使用它們中的每一個。 article article標籤用於標識一個可以與頁面上的其他事物獨立的"事物"。 例如，首頁上的博客文章列表。 或者一個連接列表。 <div> <article> <h2>一篇博客文章</h2> <a ...>閱讀更多</a> </article> <article> <h2>另一篇博客文章</h2> <a ...>閱讀更多</a> </article> </div> 我們並不限於列表：一個article可以成為頁面上的主要元素。 <article> <h2>一篇博客文章</h2> <p>這裡是內容...</p> </article> 在article標籤內部，我們應該有一個標題(h1-h6)和… section 表示文檔的一部分。每個部分都有一個標題標籤(h1-h6)，然後是該部分的內容。 示例： <section> <h2>頁面的一個部分</h2> <p>...</p> <img ... /> </section> 將一篇長文章分拆為不同的部分是很有用的。 不應將其用作通用容器元素。div是為此而設計的。 div div是通用的容器元素： <div> ... </div> 通常在此元素上添加class或id屬性，以允許使用CSS對其進行樣式設置。 我們在任何需要容器的地方使用div，但現有的標籤不適用。 與頁面相關的標籤 nav 此標籤用於創建定義頁面導航的標記。在此內部，通常我們添加一個ul或ol列表： <nav> <ol> <li><a href="/">首頁</a></li> <li><a href="/blog">博客</a></li> </ol> </nav> aside aside標籤用於添加與主內容相關的內容片段。 例如，一個放置引文的框，或者一個側邊欄。 示例： <div> <p>一些文本...</p> <aside> <p>一個引文..</p> </aside> <p>其他文本....

了解使用圖片和HTML的img標籤的基礎知識，以及如何使它們具有響應性 圖片可以使用img標籤顯示。 這個標籤接受一個src屬性，我們用它來設置圖片的來源： <img src="image.png" /> 我們可以使用各種圖片格式。最常見的是PNG、JPEG、GIF、SVG和最近的WebP格式。 HTML標準要求必須有一個alt屬性來描述圖片。這對於螢幕閱讀器和搜索引擎機器人來說都很重要： <img src="dog.png" alt="一張狗的圖片" /> 您可以設置width和height屬性來設置元素所占的空間，以便瀏覽器在完全加載之前預留空間，防止佈局變化。它接受以像素為單位的數值。 <img src="dog.png" alt="一張狗的圖片" width="300" height="200" /> 使用srcset實現響應式圖片 srcset屬性允許您根據像素密度或窗口寬度設置響應式圖片，根據您的喜好，瀏覽器可以根據需要下載所需的資源，例如在移動設備上不下載更大的圖片。 下面是一個例子，我們為4個不同的螢幕尺寸提供了4個附加圖片： <img src="dog.png" alt="一張狗的圖片" srcset="dog-500.png 500w, dog-800.png 800w, dog-1000.png 1000w, dog-1400.png 1400w"> 在srcset中，我們使用w單位來指示窗口寬度。 既然這樣做，我們還需要使用sizes屬性： <img src="dog.png" alt="一張狗的圖片" sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px" srcset="dog-500.png 500w, dog-800.png 800w, dog-1000.png 1000w, dog-1400.png 1400w"> 在這個例子中，sizes屬性中的(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px字符串描述了圖片相對於視口的大小，使用逗號分隔的多個條件。 媒體條件max-width: 500px根據視口寬度設置圖片的大小。簡單地說，如果視窗大小小於500px，則以視窗大小的100%渲染圖片。 如果窗口大小更大，但小於900px，則以視窗大小的50%渲染圖片。 如果更大，則以800px渲染圖片。 vw單位可能對您來說是新的，簡單地說，可以將1vw視為視窗寬度的1%，因此100vw就是視窗寬度的100%。 一個有用的網站可以生成srcset和漸進式縮小的圖片是 https://responsivebreakpoints.com/。

本篇文章是 Phaser 系列的一部分。點擊這裡 查看系列的第一篇文章。 Phaser 遊戲是在 HTML 的 <canvas> 元素中渲染的。 如果你對 Canvas 還不熟悉，我在 Canvas API 教程 中詳細介紹了它。 我們創建一個帶有特定寬度和高度的畫布，並在其中繪製內容。 我們無法使用 CSS 來對元素進行排版，而是需要使用更底層且較困難的 API。 幸運的是，Phaser（以及其他使用底層 Canvas 的庫）抽象了所有細節，所以我們可以專注於應用程式代碼。 我們可以通過在 Phaser 物件上調用 Game 靜態方法來初始化一個 Phaser 遊戲： new Phaser.Game() 我們必須將一個對象字面量傳遞給此函數，其中包含一組配置選項： new Phaser.Game({}) 在這個配置對象中，我們可以設置多個屬性。 首先，我們可以設置畫布的寬度和高度： new Phaser.Game({ width: 450, height: 600 }) 另一個我們可以傳遞的屬性是 backgroundColor，它接受一個十六進制值，例如 0x000000 表示黑色。 顏色類似於 CSS 顏色，但你需要在前面加上 0x 以便 JavaScript 知道這是一個十六進制數字。