Web 入門- 學習該如何開發Web - MDN Web Docs

你將運用相關工具建構簡易網頁並發布自己的程式碼。

替你的第一個網站說故事. 建立個人網站需要很多功夫。

如果你才剛開始接觸網頁設計， ... SkiptomaincontentSkiptoselectlanguage學習該如何開發WebWeb入門ArticleActions正體中文(繁體)ThispagewastranslatedfromEnglishbythecommunity.LearnmoreandjointheMDNWebDocscommunity.替你的第一個網站說故事RelatedTopics 全新手請從這開始！ Web入門 Web概述 安裝基本軟體 自己的網站會是什麼樣子？ 處理檔案 HTML基礎概念 CSS基礎概念 JavaScript基礎概念 發佈自己的網站 Web運作的方式 HTML—架構Web HTML介紹 HTML概述 HTML入門 標題裡是什麼？HTML中的後設資料(Metadata) HTML文字基礎概念 建立超連結 進階文字格式 文件與網站架構 HTML除錯 親和度：設個字母 親和度：架構出具備內容的網頁 多媒體與嵌入 多媒體與嵌入的概述 HTML中的圖片 視訊與音訊內容 從物件到iframe—其他嵌入技巧 為Web新增向量圖 適應性圖片 親和度：Mozilla形象頁面 HTML表格 HTML表格概述 HTML表格基礎 HTMLTableadvancedfeaturesandaccessibility Assessment:Structuringplanetdata CSS—設計Web的風格 初探CSS 初探CSS（概述） CSS是什麼？ CSS入門 HowCSSisstructured CSS怎麼運作 Usingyournewknowledge CSS組件 CSSbuildingblocksoverview Cascadeandinheritance CSSselectors Theboxmodel Backgroundsandborders Handlingdifferenttextdirections Overflowingcontent Valuesandunits SizingitemsinCSS Images,media,andformelements Stylingtables DebuggingCSS OrganizingyourCSS 樣式化文字 樣式化文字概述 基礎的文字與字型樣式化 樣式化列表 樣式化連結 Web字型 親合度：設定社區大學首頁的版面 CSS版面配置 CSS版面配置概述 IntroductiontoCSSlayout NormalFlow 彈性區塊 格線 浮動 定位 Multiple-columnLayout Responsivedesign Beginner'sguidetomediaqueries LegacyLayoutMethods SupportingOlderBrowsers FundamentalLayoutComprehension JavaScript—動態的用戶端指令 JavaScript第一步 JavaScript第一步概述 什麼是JavaScript？ 初次接觸JavaScript 出了什麼問題？JavaScript疑難排解 儲存你所需的資訊—變數 JavaScript基礎概念—數字與運算子 處理文字—JavaScript中的字串 有用的字串函式 陣列 親合度：傻瓜故事產生器 JavaScript基礎要件 JavaScript基礎要件概述 於程式碼中決策—條件 程式碼迴圈 函式—可重複使用的程式碼區塊 建立自己的函式 函式回傳值 事件介紹 親合度：圖庫 JavaScript物件介紹 JavaScript物件概述 物件基礎概念 物件原型 Object-orientedprogrammingconcepts ClassesinJavaScript 使用JSON資料 物件建構實作 親合度：為彈跳球展示新增功能 非同步的JavaScript AsynchronousJavaScriptoverview IntroducingasynchronousJavaScript Howtousepromises Implementingapromise-basedAPI Introducingworkers Assessment:sequencinganimations 客戶端webAPIs 客戶端webAPIs IntroductiontowebAPIs 文件操作 Fetchingdatafromtheserver ThirdpartyAPIs Drawinggraphics VideoandaudioAPIs Client-sidestorage 網頁表單-與使用者資料合作 核心的表單學習途徑 網頁表單概述 Yourfirstform 如何建構網頁表單 Basicnativeformcontrols TheHTML5inputtypes Otherformcontrols Stylingwebforms Advancedformstyling UIpseudo-classes Client-sideformvalidation Sendingformdata 深入網頁表單 Howtobuildcustomformcontrols SendingformsthroughJavaScript CSSpropertycompatibilitytableforformcontrols 無障礙網頁—每個人都可以使用的網頁 無障礙網頁指南 無障礙網頁概述 何謂無障礙網頁？ HTML:Agoodbasisforaccessibility CSSandJavaScriptaccessibilitybestpractices WAI-ARIA基礎 Accessiblemultimedia 行動裝置上的無障礙 無障礙網頁評估 Assessment:Accessibilitytroubleshooting 工具與測試 Client-sidewebdevelopmenttools Client-sidewebdevelopmenttoolsindex Client-sidetoolingoverview Commandlinecrashcourse Packagemanagementbasics Introducingacompletetoolchain Deployingourapp 介紹前端框架 前端框架簡介 Frameworkmainfeatures React GettingstartedwithReact BeginningourReacttodolist ComponentizingourReactapp Reactinteractivity:Eventsandstate Reactinteractivity:Editing,filtering,conditionalrendering AccessibilityinReact Reactresources Ember GettingstartedwithEmber Emberappstructureandcomponentization Emberinteractivity:Events,classesandstate EmberInteractivity:Footerfunctionality,conditionalrendering RoutinginEmber Emberresourcesandtroubleshooting Vue 開始學Vue CreatingourfirstVuecomponent RenderingalistofVuecomponents Addinganewtodoform:Vueevents,methods,andmodels StylingVuecomponentswithCSS UsingVuecomputedproperties Vueconditionalrendering:editingexistingtodos FocusmanagementwithVuerefs Vueresources Svelte Svelte入門 StartingourSvelteTodolistapp DynamicbehaviorinSvelte:workingwithvariablesandprops ComponentizingourSvelteapp AdvancedSvelte:Reactivity,lifecycle,accessibility WorkingwithSveltestores TypeScriptsupportinSvelte Deploymentandnextsteps Angular Angular新手入門 開始開發我們的Angular待辦事項應用程式 使用樣式點綴我們的Angular應用程式 建立一個item元件 篩選我們的待辦事項項目 建構Angular應用程式與更多資源 GitandGitHub GitandGitHub概述 HelloWorld GitHandbook ForkingProjects Aboutpullrequests MasteringIssues 跨瀏覽器測試 跨瀏覽器測試概述 跨瀏覽器測試介紹 測試執行策略 處理常見的HTML與CSS問題 處理常見的JavaScript問題 處理常見的親合度問題 建置功能偵測 自動化測試介紹 設定自己的自動化測試環境 伺服端網站程式設計 第一步 第一步概述 伺服端介紹 用戶端概述 伺服端網路框架 網站安全 Django網站框架(Python) Django網站框架(Python)概述 介紹 設定開發環境 線上教學：本地圖書館網站 線上教學2：建立網站骨架 線上教學3：使用模型 線上教學4：Django管理網站 線上教學5：建立我們的首頁 線上教學6：泛型清單與細節檢視 線上教學7：會話(Sessions)框架 線上教學8：使用者授權與許可 線上教學9：搭配表單 線上教學10：測試Django的WebApp 線上教學11：佈署Django至產品 WebApp安全性 親合度：DIY迷你部落格 Express網站框架(node.js/JavaScript) Express網站框架(Node.js/JavaScript)概述 Express/Node介紹 設定Node(Express)的開發環境 Express教學1:本地圖書館網站 Express教學2:建立骨架網站 Express教學3:使用資料庫(Mongoose) Express教學4:路由與控制器 Express教程5:呈現圖書館的資料 Express教學6:使用表單 Express教學7:佈署到正式環境 更多資源 常見問題 HTML問題 CSS問題 JavaScriptquestions Web的運作方式 工具與設定 設計與親合度 替你的第一個網站說故事Web入門 〈Web入門〉是一系列簡潔的文章，介紹網頁開發的實用範例。

你將運用相關工具建構簡易網頁並發布自己的程式碼。

替你的第一個網站說故事建立個人網站需要很多功夫。

如果你才剛開始接觸網頁設計，我們建議大家可以先從小地方著手。

不是要你立刻就寫出跟「Facebook」一樣規模的網站，但自己架一個上線的網站一點都不難，現在就開始吧！ 只要依序看過以下的系列文章，你將初學者蛻變成會架設自己的第一個上線網頁，Let'sgo！安裝基本軟體現有許多工具可建構網站。

如果你剛起步，你可能不知從何選擇程式碼編輯器、框架、測試工具等等。

我們將透過〈安裝基本軟體〉逐步引領你安裝基本的網頁開發軟體。

你的網站看起來會是什麼樣子？在開始為自己的網站寫程式碼之前，你應該先規劃要呈現哪些資訊？要採用哪種字體與顏色？你可依照〈你的網站看起來會是什麼樣子？〉所提供的簡易方法，照著來規劃網站的內容與設計。

與各式各樣檔案打交道一個網站包含許多檔案：文字內容、程式碼、樣式表、多媒體內容等等。

當建立網站時，你需要將這些檔案組合成清晰的架構，並確保它們能彼此互動溝通。

〈與各式各樣檔案打交道〉將引領你安排合理的檔案架構，以及你應該注意的問題。

HTML基本概念超文字標籤語言 (HypertextMarkupLanguage；HTML)可用以建構網頁內容，並賦予其含意和用途。

例如某段內容要分為多個段落，或是用項目符號列成幾個重點？要在網頁插入圖片？這裡需要以資料表格整理嗎？如果這些沒有嚇到你，〈HTML基本概念〉將提供足夠的資訊。

CSS基本概念串接樣式表(CascadingStylesheets；CSS)可用以塑造網站的特殊風格。

例如這段文字要用一般的黑色，或是改用紅色標明重點？某段重要內容應該置於畫面的何處？想用什麼背景圖片及顏色裝飾你的網站？〈CSS基本概念〉帶你入門。

JavaScript基本概念程式設計語言JavaScript可為你的網站增加互動功能，例如動畫、遊戲、按下按鈕的後續動作、將資料輸入表單、動態套用樣式的效果等等。

〈JavaScript基本概念〉將帶你瞭解此一有趣的程式語言及其能耐，並讓你快速入門。

將你的網站發佈上線在寫完程式碼並整理好檔案之後，接著就是將網站發佈上線，讓其他人可以瀏覽、欣賞內容。

〈將你的網站發佈上線〉將帶領你以最輕鬆的方法發佈你的範例程式碼。

網站的運作方式在瀏覽喜愛的網站時，你可能未意識到瀏覽器正於背景中運作著許多複雜事情。

〈網站的運作方式〉將簡略說明網頁瀏覽時所發生的大小事。

Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:Dec8,2020,byMDNcontributors